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,57 +1,91 @@
-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}
     >
-        <VFStack
+        <ModalOverlay />
-            bg="gray.100"
+        <ModalContent>
-            p="4"
+            <Image sx={{
-            pb="20"
+                height: '40',
-            borderRadius="10"
+                width: '32',
-        >
+                position: 'absolute',
-            <HFStack
+                left: 0,
-                pb='6'
+                top: -10,
-            >
+            }} src={Images.eth_girl} alt='activity' />
-                <Tag
+            <ModalHeader bg='blue.500' display='flex' color='white' justifyContent='center'>
+                <Text>
+                    Activity
+                </Text>
+            </ModalHeader>
+            <ModalCloseButton />
 
-                    colorScheme='purple'
+            <ModalBody>
-                    variant='solid'
+                <VFStack
-                    borderRadius='full'
+                    bg="gray.100"
-                    size='lg'
+                    p="4"
+                    pb="20"
+                    borderRadius="10"
                 >
-                    <TagLabel>Top up for the FIRST time</TagLabel>
+                    <HFStack
-                </Tag>
+                        pb='6'
-            </HFStack>
+                        justifyContent='end'
-            {
-                lines.map((item, index) => (
-                    <Text key={index}
-                        fontSize='18'
                     >
-                        {item}
-                    </Text>
-                ))
-            }
-            <Text
-                pt='6'
-                color='gray.500'
-                fontSize='16'
-            >
-                {contact}
-            </Text>
 
-        </VFStack>
+                        <Tag
-    </ModalBox>
+
+                            colorScheme='red'
+                            variant='solid'
+                            borderRadius='full'
+                            size='lg'
+                        >
+                            <TagLabel>Top up reward!</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>
+            </ModalBody>
+        </ModalContent>
+        <ModalHeader>
+
+        </ModalHeader>
+
+        <ModalBody>
+
+        </ModalBody>
+    </Modal>
+
 )