feat(depub.space): send tips

packages/depub.space/src/components/molecules/ConnectWallet/ConnectWallet.tsx

@@ -40,7 +40,12 @@ const ConnectButton: FC<ConnectButtonProps> = ({ icon, title, description, ...pr
     </Text>
   </Button>
 );
-const ConnectModal: FC<ConnectModalProps> = ({ onPressWalletConnect, onPressKeplr, ...props }) => (
+
+export const ConnectModal: FC<ConnectModalProps> = ({
+  onPressWalletConnect,
+  onPressKeplr,
+  ...props
+}) => (
   <Modal {...props}>
     <Modal.Content maxWidth="400px">
       <Modal.CloseButton />

packages/depub.space/src/components/molecules/MessageCard/MessageCard.tsx

@@ -266,6 +266,7 @@ export const MessageCard: FC<MessageCardProps> = ({
                 <Tooltip label="Check ISCN record" openDelay={250}>
                   <Link href={`https://app.like.co/view/${encodeURIComponent(id)}`} isExternal>
                     <Image
+                      alt="ISCN badge"
                       h={26}
                       source={{
                         uri: isDev

packages/depub.space/src/components/molecules/TipsModal/TipsModal.tsx

@@ -0,0 +1,130 @@
+import React, { useState, ComponentProps, FC } from 'react';
+import {
+  Button,
+  FormControl,
+  Input,
+  Icon,
+  Text,
+  Modal,
+  VStack,
+  WarningOutlineIcon,
+} from 'native-base';
+import * as Yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Controller, useForm } from 'react-hook-form';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+
+export interface TipsModalProps extends ComponentProps<typeof Modal> {
+  nickname: string;
+  senderAddress: string | null;
+  recipientAddress: string;
+  onSubmit: (amount: number) => Promise<void>;
+}
+
+export const TipsModal: FC<TipsModalProps> = ({
+  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 (
+    <Modal {...props}>
+      <Modal.Content maxH="100%" maxW={380} w="100%">
+        <Modal.CloseButton />
+        <Modal.Body p={8}>
+          <VStack alignItems="center" justifyContent="center" space={4}>
+            <Text fontSize="lg">
+              Send tips to{' '}
+              <Text color="primary.500" fontWeight="bold">
+                {nickname}
+              </Text>
+            </Text>
+            <Text color="gray.500" fontSize="sm">
+              {recipientAddress}
+            </Text>
+
+            <Controller
+              control={control}
+              name="amount"
+              render={({ field: { onChange, onBlur, value } }) => (
+                <FormControl isInvalid={Boolean(errors.amount)}>
+                  <FormControl.Label>Amount ($LIKE)</FormControl.Label>
+
+                  <Input
+                    isDisabled={isLoading}
+                    keyboardType="numeric"
+                    placeholder="LIKE"
+                    type="text"
+                    value={value}
+                    onBlur={onBlur}
+                    onChangeText={val => onChange(val)}
+                  />
+                  {errors.amount && (
+                    <FormControl.ErrorMessage leftIcon={<WarningOutlineIcon size="xs" />} w="100%">
+                      Must be greater or equal to 5 LIKE
+                    </FormControl.ErrorMessage>
+                  )}
+                </FormControl>
+              )}
+              rules={{
+                required: true,
+              }}
+            />
+
+            {senderAddress ? (
+              <Button
+                isLoading={isLoading}
+                isLoadingText="Sending..."
+                leftIcon={
+                  <Icon as={<MaterialCommunityIcons name="bank-transfer-out" />} size="sm" />
+                }
+                w="100%"
+                onPress={handleSubmit(handleOnSubmit)}
+              >
+                Send
+              </Button>
+            ) : (
+              <Button
+                isLoading={isLoading}
+                isLoadingText="Connecting..."
+                leftIcon={
+                  <Icon as={<MaterialCommunityIcons name="bank-transfer-out" />} size="sm" />
+                }
+                w="100%"
+                onPress={handleSubmit(handleOnSubmit)}
+              >
+                Send
+              </Button>
+            )}
+          </VStack>
+        </Modal.Body>
+      </Modal.Content>
+    </Modal>
+  );
+};

packages/depub.space/src/components/molecules/TipsModal/index.ts

@@ -0,0 +1 @@
+export * from './TipsModal';

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';

packages/depub.space/src/pages/users/index.tsx

@@ -2,24 +2,31 @@ import React, { memo, useEffect, useState } from 'react';
 import Debug from 'debug';
 import {
   Link,
+  Button,
   Box,
   IconButton,
   HStack,
   useToast,
   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:<UserPage />');
@@ -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<Message | null>(null);
   const [profile, setProfile] = useState<DesmosProfile | null>(null);
   const shortenAccount = account ? getShortenAddress(account) : '';
   const [messages, setMessages] = useState<Message[]>([]);
-  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(() => (
-    <VStack h="100%" maxW="640px" mx="auto" my={4} px={4} space={8} w="100%">
+    <VStack h="100%" maxW="640px" mx="auto" my={4} px={4} w="100%">
       <HStack alignItems="center" flex={1} justifyContent="center" space={2}>
         <Link href="/">
           <IconButton
@@ -134,7 +172,13 @@ export default function IndexPage() {
           />
         </Link>
         <VStack alignItems="center" flex={1} justifyContent="center" space={4}>
-          <Avatar bg="gray.200" size="md" source={profilePic ? { uri: profilePic } : undefined}>
+          <Avatar
+            bg="gray.200"
+            borderColor={likecoinWalletAddress ? 'primary.500' : 'gray.200'}
+            borderWidth={2}
+            size="md"
+            source={profilePic ? { uri: profilePic } : undefined}
+          >
             {abbrNickname}
           </Avatar>
           <VStack alignItems="center" flex={1} justifyContent="center" space={1}>
@@ -148,9 +192,28 @@ export default function IndexPage() {
             </Box>
             {bio ? <Text fontSize="sm">{bio}</Text> : null}
           </VStack>
+          <HStack>
+            {likecoinWalletAddress && !isPageOwner && (
+              <Tooltip label="Send tips">
+                <Button
+                  isLoading={isConnectLoading}
+                  isLoadingText="Connecting to wallet..."
+                  leftIcon={
+                    <Image alt="tips" h={8} source={{ uri: '/images/likecoin-like.svg' }} w={8} />
+                  }
+                  variant="unstyled"
+                  onPress={() => {
+                    if (walletAddress) {
+                      setIsTipsModalOpen(true);
+                    } else {
+                      setIsConnectModaOpen(true);
+                    }
+                  }}
+                />
+              </Tooltip>
+            )}
+          </HStack>
         </VStack>
-
-        <Box w="48px" />
       </HStack>
 
       <Divider mb={8} />
@@ -189,10 +252,27 @@ export default function IndexPage() {
           </VStack>
         )}
       </Layout>
-
       {selectedMessage && (
         <MessageModal isOpen message={selectedMessage} onClose={handleOnCloseModal} />
       )}
+      {likecoinWalletAddress && (
+        <TipsModal
+          isOpen={isTipsModalOpen}
+          nickname={nickname}
+          recipientAddress={account}
+          senderAddress={walletAddress}
+          onClose={() => setIsTipsModalOpen(false)}
+          onSubmit={handleOnTips}
+        />
+      )}
+      {walletAddress && (
+        <ConnectModal
+          isOpen={isConnectModalOpen}
+          onClose={() => setIsConnectModaOpen(false)}
+          onPressKeplr={connectKeplr}
+          onPressWalletConnect={connectWalletConnect}
+        />
+      )}
     </>
   ) : null;
 }