diff --git a/packages/depub.space/public/images/likecoin-like.svg b/packages/depub.space/public/images/likecoin-like.svg
new file mode 100644
index 00000000..65f19ec7
--- /dev/null
+++ b/packages/depub.space/public/images/likecoin-like.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/depub.space/src/components/molecules/ConnectWallet/ConnectWallet.tsx b/packages/depub.space/src/components/molecules/ConnectWallet/ConnectWallet.tsx
index 8d202637..ad5019a2 100644
--- a/packages/depub.space/src/components/molecules/ConnectWallet/ConnectWallet.tsx
+++ b/packages/depub.space/src/components/molecules/ConnectWallet/ConnectWallet.tsx
@@ -40,7 +40,12 @@ const ConnectButton: FC = ({ icon, title, description, ...pr
);
-const ConnectModal: FC = ({ onPressWalletConnect, onPressKeplr, ...props }) => (
+
+export const ConnectModal: FC = ({
+ onPressWalletConnect,
+ onPressKeplr,
+ ...props
+}) => (
diff --git a/packages/depub.space/src/components/molecules/MessageCard/MessageCard.tsx b/packages/depub.space/src/components/molecules/MessageCard/MessageCard.tsx
index 554552af..455647d0 100644
--- a/packages/depub.space/src/components/molecules/MessageCard/MessageCard.tsx
+++ b/packages/depub.space/src/components/molecules/MessageCard/MessageCard.tsx
@@ -266,6 +266,7 @@ export const MessageCard: FC = ({
{
+ nickname: string;
+ senderAddress: string | null;
+ recipientAddress: string;
+ onSubmit: (amount: number) => Promise;
+}
+
+export const TipsModal: FC = ({
+ senderAddress,
+ recipientAddress,
+ nickname,
+ onSubmit,
+ onClose,
+ ...props
+}) => {
+ const [isLoading, setIsLoading] = useState(false);
+ const formSchema = Yup.object().shape({
+ amount: Yup.number().required().min(5),
+ });
+ const {
+ control,
+ handleSubmit,
+ formState: { errors },
+ } = useForm({
+ resolver: yupResolver(formSchema),
+ defaultValues: {
+ amount: '5',
+ },
+ });
+ const handleOnSubmit = async (data: { amount: string }) => {
+ setIsLoading(true);
+
+ await onSubmit(parseFloat(data.amount));
+
+ setIsLoading(false);
+
+ onClose();
+ };
+
+ return (
+
+
+
+
+
+
+ Send tips to{' '}
+
+ {nickname}
+
+
+
+ {recipientAddress}
+
+
+ (
+
+ Amount ($LIKE)
+
+ onChange(val)}
+ />
+ {errors.amount && (
+ } w="100%">
+ Must be greater or equal to 5 LIKE
+
+ )}
+
+ )}
+ rules={{
+ required: true,
+ }}
+ />
+
+ {senderAddress ? (
+ } size="sm" />
+ }
+ w="100%"
+ onPress={handleSubmit(handleOnSubmit)}
+ >
+ Send
+
+ ) : (
+ } size="sm" />
+ }
+ w="100%"
+ onPress={handleSubmit(handleOnSubmit)}
+ >
+ Send
+
+ )}
+
+
+
+
+ );
+};
diff --git a/packages/depub.space/src/components/molecules/TipsModal/index.ts b/packages/depub.space/src/components/molecules/TipsModal/index.ts
new file mode 100644
index 00000000..ec1557a0
--- /dev/null
+++ b/packages/depub.space/src/components/molecules/TipsModal/index.ts
@@ -0,0 +1 @@
+export * from './TipsModal';
diff --git a/packages/depub.space/src/components/molecules/index.ts b/packages/depub.space/src/components/molecules/index.ts
index d8a70a0f..64066b9d 100644
--- a/packages/depub.space/src/components/molecules/index.ts
+++ b/packages/depub.space/src/components/molecules/index.ts
@@ -6,3 +6,4 @@ export * from './MessageComposer';
export * from './MessageList';
export * from './MessageModal';
export * from './Navbar';
+export * from './TipsModal';
diff --git a/packages/depub.space/src/pages/users/index.tsx b/packages/depub.space/src/pages/users/index.tsx
index 1acac560..ee66a3f4 100644
--- a/packages/depub.space/src/pages/users/index.tsx
+++ b/packages/depub.space/src/pages/users/index.tsx
@@ -2,6 +2,7 @@ import React, { memo, useEffect, useState } from 'react';
import Debug from 'debug';
import {
Link,
+ Button,
Box,
IconButton,
HStack,
@@ -9,17 +10,23 @@ import {
Divider,
VStack,
Text,
+ Tooltip,
+ Image,
Heading,
Avatar,
} from 'native-base';
import { Platform } from 'react-native';
import { AntDesign } from '@expo/vector-icons';
import { useRouter } from 'next/router';
-import { Layout, MessageList, MessageModal } from '../../components';
+import { TipsModal, Layout, MessageList, MessageModal, ConnectModal } from '../../components';
import { Message, DesmosProfile } from '../../interfaces';
import { useAppState, useSigningCosmWasmClient } from '../../hooks';
-import { getAbbrNickname, getLikecoinAddressByProfile } from '../../utils';
-import { getShortenAddress } from '../../utils/getShortenAddress';
+import {
+ sendLIKE,
+ getShortenAddress,
+ getAbbrNickname,
+ getLikecoinAddressByProfile,
+} from '../../utils';
import { MAX_WIDTH } from '../../contants';
const debug = Debug('web:');
@@ -33,11 +40,20 @@ export default function IndexPage() {
typeof window !== 'undefined' ? ((window as any) || {}).rewriteRoute || {} : {};
const account = isDev ? router.query.account?.toString() : rewriteRouteObject.account; // rewriteRoute object is injecting by Cloudflare worker
const [isLoadingMore, setIsLoadingMore] = useState(false);
+ const [isTipsModalOpen, setIsTipsModalOpen] = useState(false);
+ const [isConnectModalOpen, setIsConnectModaOpen] = useState(false);
const [selectedMessage, setSelectedMessage] = useState(null);
const [profile, setProfile] = useState(null);
const shortenAccount = account ? getShortenAddress(account) : '';
const [messages, setMessages] = useState([]);
- const { error: connectError, walletAddress } = useSigningCosmWasmClient();
+ const {
+ error: connectError,
+ isLoading: isConnectLoading,
+ connectKeplr,
+ connectWalletConnect,
+ walletAddress,
+ offlineSigner,
+ } = useSigningCosmWasmClient();
const { isLoading, fetchMessagesByOwner } = useAppState();
const toast = useToast();
const profilePic = profile?.profilePic;
@@ -48,6 +64,25 @@ export default function IndexPage() {
const dtag = profile?.dtag;
const likecoinWalletAddress = profile && getLikecoinAddressByProfile(profile);
const showMessagesList = accountIsWalletAddress || likecoinWalletAddress || !isReady;
+ const isPageOwner = likecoinWalletAddress === walletAddress;
+
+ const handleOnTips = async (amount: number) => {
+ if (walletAddress && likecoinWalletAddress && offlineSigner) {
+ await sendLIKE(
+ walletAddress,
+ likecoinWalletAddress,
+ amount.toFixed(2),
+ offlineSigner,
+ 'Send tips on depub.SPACE'
+ );
+
+ toast.show({
+ title: 'Sent tips successfully!',
+ status: 'success',
+ placement: 'top',
+ });
+ }
+ };
const fetchNewMessages = async (previousId?: string) => {
debug('fetchNewMessages()');
@@ -115,6 +150,9 @@ export default function IndexPage() {
if (connectError) {
debug('useEffect() -> connectError: %s', connectError);
+ setIsConnectModaOpen(false);
+ setIsTipsModalOpen(false);
+
toast.show({
title: connectError,
});
@@ -123,7 +161,7 @@ export default function IndexPage() {
}, [connectError]);
const ListHeaderComponent = memo(() => (
-
+
-
+
{abbrNickname}
@@ -148,9 +192,28 @@ export default function IndexPage() {
{bio ? {bio} : null}
+
+ {likecoinWalletAddress && !isPageOwner && (
+
+
+ }
+ variant="unstyled"
+ onPress={() => {
+ if (walletAddress) {
+ setIsTipsModalOpen(true);
+ } else {
+ setIsConnectModaOpen(true);
+ }
+ }}
+ />
+
+ )}
+
-
-
@@ -189,10 +252,27 @@ export default function IndexPage() {
)}
-
{selectedMessage && (
)}
+ {likecoinWalletAddress && (
+ setIsTipsModalOpen(false)}
+ onSubmit={handleOnTips}
+ />
+ )}
+ {walletAddress && (
+ setIsConnectModaOpen(false)}
+ onPressKeplr={connectKeplr}
+ onPressWalletConnect={connectWalletConnect}
+ />
+ )}
>
) : null;
}