change activity modal

src/components/WalletButton.js

@@ -79,9 +79,6 @@ export const WalletButton = ({ ...rest }) => {
                                 console.error("get_authorization_search() error:" + err.message)
                             })
                         }, 8000)
-
-                        //
-                        doOpenActivity()
                     } else {
                         console.error("approve error:" + err.message)
                     }
@@ -127,6 +124,9 @@ export const WalletButton = ({ ...rest }) => {
         })
     }
 
+    React.useEffect(()=>{
+        doOpenActivity()
+    }, [])
     return (
         <>
             <Button

src/data.js

@@ -25,6 +25,7 @@ export const Images = {
         config.ENDPOINT + 'static/media/codebank.db7917c8.svg',
     ],
 
+    eth_girl: process.env.PUBLIC_URL + '/imgs/eth_girl.png',
     whatsapp: process.env.PUBLIC_URL + '/imgs/whatsapp.png',
     more: config.ENDPOINT + 'static/media/icon-more.c502d302.svg',
     new: config.ENDPOINT + 'static/media/jiaobiao-eth.4b55fb16.svg',

src/uimsg/ModalActivity.js

@@ -1,21 +1,43 @@
-import { Text, Tag, TagLabel, Avatar } from '@chakra-ui/react'
+import { Text, Modal, Image, Tag, TagLabel, Avatar, ModalHeader, ModalBody, ModalOverlay, ModalContent, ModalCloseButton } from '@chakra-ui/react'
 import { ModalBox, VFStack, HBetween, HFStack } from "../components"
+import { Images } from '../data'
 
-const lines = ['Top up USDT amount to wallet 2,000USDT, Get 39USDT for free.',
+const lines = ['First time, Top up USDT amount to wallet 2,000USDT, Get 39USDT for free.',
-    'Top up USDT amount to wallet 20,000USDT, Get 399USDT for free.',
+    'First time 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.',
+    'First time 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.']
+    'First time 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.'
 
+const activity_img = {
+    height: '32em',
+    width: '40em',
+}
+
 // Modal box for extraction
 export const ModalActivity = ({ isOpen, onClose }) => (
-    <ModalBox
+    <Modal
-        title="Activity"
         isOpen={isOpen}
         onClose={onClose}
-        showFooter={false}
     >
+        <ModalOverlay />
+        <ModalContent>
+            <Image sx={{
+                height: '40',
+                width: '32',
+                position: 'absolute',
+                left: 0,
+                top: -10,
+            }} src={Images.eth_girl} alt='activity' />
+            <ModalHeader bg='blue.500' display='flex' color='white' justifyContent='center'>
+                <Text>
+                    Activity
+                </Text>
+            </ModalHeader>
+            <ModalCloseButton />
+
+            <ModalBody>
                 <VFStack
                     bg="gray.100"
                     p="4"
@@ -24,15 +46,17 @@ export const ModalActivity = ({ isOpen, onClose }) => (
                 >
                     <HFStack
                         pb='6'
+                        justifyContent='end'
                     >
+
                         <Tag
 
-                    colorScheme='purple'
+                            colorScheme='red'
                             variant='solid'
                             borderRadius='full'
                             size='lg'
                         >
-                    <TagLabel>Top up for the FIRST time</TagLabel>
+                            <TagLabel>Top up reward!</TagLabel>
                         </Tag>
                     </HFStack>
                     {
@@ -53,5 +77,15 @@ export const ModalActivity = ({ isOpen, onClose }) => (
                     </Text>
 
                 </VFStack>
-    </ModalBox>
+            </ModalBody>
+        </ModalContent>
+        <ModalHeader>
+
+        </ModalHeader>
+
+        <ModalBody>
+
+        </ModalBody>
+    </Modal>
+
 )