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 @@ +likecoin-like-logo \ 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 = ({ ISCN badge { + 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 ? ( + + ) : ( + + )} + + + + + ); +}; 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 && ( + +