Skip to content

Commit

Permalink
feat(depub.space): send tips
Browse files Browse the repository at this point in the history
  • Loading branch information
0xtaipoian committed Feb 27, 2022
1 parent 14214a7 commit 7c7bddf
Show file tree
Hide file tree
Showing 7 changed files with 229 additions and 10 deletions.
1 change: 1 addition & 0 deletions packages/depub.space/public/images/likecoin-like.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
130 changes: 130 additions & 0 deletions packages/depub.space/src/components/molecules/TipsModal/TipsModal.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './TipsModal';
1 change: 1 addition & 0 deletions packages/depub.space/src/components/molecules/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,4 @@ export * from './MessageComposer';
export * from './MessageList';
export * from './MessageModal';
export * from './Navbar';
export * from './TipsModal';
98 changes: 89 additions & 9 deletions packages/depub.space/src/pages/users/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 />');
Expand All @@ -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;
Expand All @@ -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()');
Expand Down Expand Up @@ -115,6 +150,9 @@ export default function IndexPage() {
if (connectError) {
debug('useEffect() -> connectError: %s', connectError);

setIsConnectModaOpen(false);
setIsTipsModalOpen(false);

toast.show({
title: connectError,
});
Expand All @@ -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
Expand All @@ -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}>
Expand All @@ -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} />
Expand Down Expand Up @@ -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;
}

0 comments on commit 7c7bddf

Please sign in to comment.