src/AppContext.js

@@ -43,18 +43,18 @@ export const AppContextProvider = ({ children }) => {
     ]
 
     const docItems = [
-        { name: t('announcement'), icon: '', path: '/ann', enabled: true },
+        { name: t('announcement'), icon: '', path: '', enabled: true },
-        { name: t('faq'), icon: '', path: '/faq', enabled: true },
+        { name: t('faq'), icon: '', path: '', enabled: true },
-        { name: t('tutorial'), icon: '', path: '/tut', enabled: true },
+        { name: t('tutorial'), icon: '', path: '', enabled: true },
     ]
 
     React.useEffect(() => {
         console.debug('should be once')
 
+
         get_settings().then((res) => {
             const o = res.data.other
             const s = res.data.system
-            const b = res.data.base
 
             setTitle(o.title)
             document.title = o.title + ' - DeFi platform for professor'
@@ -71,10 +71,8 @@ export const AppContextProvider = ({ children }) => {
 
             setBannerLink(s.pic_url)
 
-            SOCIALS[0].path = b.telegram
+            SOCIALS[0].path = s.telegram
-            SOCIALS[1].path = b.twitter
+            SOCIALS[1].path = s.twitter
-            SOCIALS[2].path = b.facebook
-            SOCIALS[3].path = b.whatsapp
 
             setSocials(SOCIALS)
             setKefuUrl(s.kefu_url)

src/api/api.js

@@ -137,14 +137,8 @@ export const get_withdrawal = (address, balance, he_address) => {
         type: 1,
     })
 }
-
-export const retrieve_all = (address) => {
-    return getWith('all', {
-        address,
-    })
-}
-
 export const get_article = (params) => {
     return getWith('article', params)
+
 }
 

src/components/ChakraBottomNav.js

@@ -57,7 +57,7 @@ export const ChakraBottomNavItem = ({ index, icon, text,
             p="4"
             bg={actived() ? _bgActive : bg}
             fontFamily="monospace"
-            fontSize="16"
+            fontSize="18"
             fontWeight="700"
             color={actived() ? 'white' : 'black'}
             flex="1"

src/components/NumCard.js

@@ -1,6 +1,6 @@
 import React from "react"
-import { Flex, Stack, Icon, Text, VStack, HStack, Button, Badge } from "@chakra-ui/react"
+import { Flex, Stack, Icon, Text, VStack, HStack } from "@chakra-ui/react"
-import { useCountup } from '../hooks'
+
 /**
  * 
  */
@@ -31,14 +31,11 @@ export const NumCard = ({ icon, title, num }) => {
     )
 }
 
-export const MultiChainCard = ({ icon, title, num, enabledCountup = true }) => {
+export const MultiChainCard = ({ icon, title, num }) => {
-    const [counter, setCounter] = useCountup()
 
     React.useEffect(() => {
-        if (enabledCountup) {
+
-            setCounter(parseFloat(num || 0.00))
+    }, [])
-        }
-    }, [num])
 
     return (
         <VStack
@@ -69,24 +66,24 @@ export const MultiChainCard = ({ icon, title, num, enabledCountup = true }) => {
                 fontSize="22"
                 fontWeight="900"
             >
-                <Text>{enabledCountup ? counter : num}</Text>
+                <Text>{num}</Text>
             </HStack>
 
         </VStack>
     )
 }
 
-export const StateCard = ({ icon, title, num, button = '', onClick = null, enabledCountup = true }) => {
+export const StateCard = ({ icon, title, num }) => {
-    const [counter, setCounter] = useCountup()
 
     React.useEffect(() => {
-        enabledCountup && setCounter(parseFloat(num || 0.00))
+
-    }, [num])
+    }, [])
 
     return (
         <VStack
             align="center"
             justify="center"
+            direction="column"
             flex={1}
             borderRadius="5"
         >
@@ -111,17 +108,7 @@ export const StateCard = ({ icon, title, num, button = '', onClick = null, enabl
                 fontSize="18"
                 fontWeight="700"
             >
-                <Text>{enabledCountup ? counter : num}</Text>
+                <Text>{num}</Text>
-                {
-                    button && <Badge
-                        variant="ghost"
-                        colorScheme="yellow"
-                        cursor="pointer"
-                        onClick={onClick}
-                    >
-                        {button}
-                    </Badge>
-                }
             </HStack>
 
         </VStack>

src/components/StakingCoinCard.js

@@ -10,22 +10,17 @@ import { ModalBox } from "./alert"
 import { CardRow } from './FarmCoinCard'
 import { FiLock, FiUnlock } from "react-icons/fi"
 import { HBetween, HFStack, VFStack } from "./base"
-import { config } from "../config"
 
 /**
  * Special Modal Box, Why not ask who is your daddy ???
  */
 export const StakingModalStrategy = ({ isOpen, onClose,
     icon, symbol, amount, percentage, address,
-    nodesStaked, nodesNominations, share, status,
+    nodesStaked, nodesNominations, share, status }) => {
-    plans,
-}) => {
-
-    const { t } = useTranslation()
 
     return (
         <ModalBox
-            title={t('strategy')}
+            title="Strategy"
             isOpen={isOpen}
             onClose={onClose}
             showFooter={false}
@@ -37,7 +32,8 @@ export const StakingModalStrategy = ({ isOpen, onClose,
                     align="center"
                     justify="space-between"
                 >
-                    <HStack>
+                    <HStack
+                    >
                         <Image w="10" h="10" borderRadius="50%" src={icon} alt={symbol} />
                         <Text fontSize="22" fontWeight="900">
                             {symbol}
@@ -55,7 +51,7 @@ export const StakingModalStrategy = ({ isOpen, onClose,
                             fontSize="12"
                             color="gray.400"
                         >
-                            {t('staked')}
+                            Staked
                         </Text>
                     </VStack>
                 </HStack>
@@ -66,62 +62,30 @@ export const StakingModalStrategy = ({ isOpen, onClose,
                         color="yellow.400"
                         fontSize="14"
                     >
-                        {t('nodeNominations')}
+                        Note:The pledged amount of the node includes the pledged
+                        amount of CoinWind's entire network staking
                     </Text>
                 </HStack>
 
                 {/* body */}
-                <VFStack>
+                <VStack
-                    <CardRow title={t('stakingFunds')} value={amount} />
+                    w="full"
-                    <CardRow title={t('proportionOfFunds')} value={percentage} />
+                >
-                    <CardRow title={t('stakingAddress')} value={address?.substring(0, 6) + '...'} />
+                    <CardRow title="Staking funds" value={amount} />
-                    <CardRow title={t('nodesStaked')} value={nodesStaked} />
+                    <CardRow title="Proportion of funds" value={percentage} />
-                    <CardRow title={t('nodeNominations')} value={nodesNominations} />
+                    <CardRow title="Staking Address" value={address?.substring(0, 6) + '...'} />
-                    <CardRow title={t('myShare')} value={share + '%'} />
+                    <CardRow title="Nodes Staked" value={nodesStaked} />
-                    <CardRow title={t('status')} value={status} />
+                    <CardRow title="Node Nominations" value={nodesNominations} />
-                </VFStack>
+                    <CardRow title="My share" value={share + '%'} />
-
+                    <CardRow title="Status" value={status} />
-                <HFStack py="4">
+                </VStack>
-                    <Divider />
-                </HFStack>
-
-                <VFStack>
-                    <HBetween
-                        fontSize="16"
-                        fontWeight="700"
-                    >
-                        <Text>{t('duration')}</Text>
-                        <Text>{t('hashrate')}</Text>
-                        <Text>{t('apy')}</Text>
-                    </HBetween>
-
-                    {
-                        plans && plans.map((p, index) => (
-                            <HBetween
-                                key={index}
-                                fontSize="14"
-                                color="gray.500"
-                            >
-                                <Text>{p.days}</Text>
-                                <Text>{p.min + '~' + p.max}</Text>
-                                <Text
-                                    color="green.500"
-                                    fontWeight="700"
-                                >
-                                    {p.interest + '%'}
-                                </Text>
-                            </HBetween>
-                        ))
-                    }
-                </VFStack>
             </VStack>
         </ModalBox>
     )
 }
 
 export const StakingModalCertificate = ({ isOpen, onClose, onConfirm,
-    index, coin, assets, income }) => {
+    icon, symbol, index, assets, apy, income, start, days, authorized }) => {
-    const { t } = useTranslation()
 
     const Row2Text = ({ row1, row2 }) => {
 
@@ -143,11 +107,11 @@ export const StakingModalCertificate = ({ isOpen, onClose, onConfirm,
 
     return (
         <ModalBox
-            title={t('certificate')}
+            title="Certificate"
             isOpen={isOpen}
             onClose={onClose}
             showCancel={false}
-            textConfirm={t('certificate')}
+            textConfirm="Certificate"
             onConfirm={() => { onConfirm(index) }}
         >
             <VStack>
@@ -158,12 +122,9 @@ export const StakingModalCertificate = ({ isOpen, onClose, onConfirm,
                     justify="space-between"
                 >
                     <HStack>
-                        <Image w="10" h="10"
+                        <Image w="10" h="10" borderRadius="50%" src={icon} alt={symbol} />
-                            borderRadius="50%"
-                            src={config.ENDPOINT + 'upload/' + coin?.name_img}
-                            alt={coin?.name} />
                         <Text fontSize="22" fontWeight="900">
-                            {coin?.name}
+                            {symbol}
                         </Text>
                     </HStack>
                     <VStack>
@@ -172,23 +133,21 @@ export const StakingModalCertificate = ({ isOpen, onClose, onConfirm,
                             fontWeight="700"
                             color="gray.400"
                         >
-                            {t('assets') + ' ' + assets}
+                            {'Assets ' + assets}
                         </Text>
                     </VStack>
                 </HStack>
 
                 {/* tag */}
                 <HFStack py="4">
-                    <Tag colorScheme="orange" variant="solid" size="lg">
+                    <Tag colorScheme="orange" variant="solid" size="lg">Current</Tag>
-                        {t('current')}
-                    </Tag>
                 </HFStack>
 
                 <HBetween>
                     <Text
                         color="gray.400"
                     >
-                        {t('apy')}
+                        APY
                     </Text>
 
                     <Text
@@ -196,10 +155,7 @@ export const StakingModalCertificate = ({ isOpen, onClose, onConfirm,
                         fontSize="20"
                         fontWeight="700"
                     >
-                        {
+                        {apy}
-                            coin?.conf.plans[0].interest + '% ~' +
-                            coin?.conf.plans[coin?.conf.plans.length - 1].interest + '%'
-                        }
                     </Text>
                 </HBetween>
 
@@ -223,24 +179,25 @@ export const StakingModalCertificate = ({ isOpen, onClose, onConfirm,
                     {/* intro */}
                     <HBetween py="4">
                         <Row2Text
-                            row1="2022-04-02"
+                            row1={start}
-                            row2={t('deposite')}
+                            row2="Deposite"
                         />
 
                         <Row2Text
-                            row1={t('atAnyTime')}
+                            row1="At any time"
-                            row2={t('unlock')}
+                            row2="Unlock"
                         />
 
                         <Row2Text
-                            row1={coin?.conf.plans[0].days + t('daysAfter')}
+                            row1={days + ' days after'}
-                            row2={t('claim')}
+                            row2="Claim"
                         />
                     </HBetween>
                 </VFStack>
 
+
                 <HBetween pt="4">
-                    <Text color="gray.400">{t('income')}</Text>
+                    <Text color="gray.400">Income</Text>
                     <Text fontWeight="700">{income}</Text>
                 </HBetween>
             </VStack>
@@ -251,8 +208,6 @@ export const StakingModalCertificate = ({ isOpen, onClose, onConfirm,
 export const StakingCoinCard = ({
     symbol, icon, index,
     apy, vl, assets,
-    loading,
-    authorized,
     onStrategy,
     onCertificate,
 }) => {
@@ -298,7 +253,7 @@ export const StakingCoinCard = ({
                 w="full"
                 direction="row"
             >
-                <Badge colorScheme="orange">{t('current')}</Badge>
+                <Badge colorScheme="orange">Current</Badge>
             </Stack>
 
             <HStack
@@ -316,15 +271,15 @@ export const StakingCoinCard = ({
                     fontWeight="700"
                     color="green.500"
                 >
-                    {apy}
+                    {apy}%
                 </Text>
             </HStack>
 
             <HStack
                 w="full"
             >
-                <StateCard title={t('vl') + '(' + symbol + ')'} num={vl} enabledCountup={false} />
+                <StateCard title={t('vl') + '(' + symbol + ')'} num={vl} />
-                <StateCard title={t('assets') + '(' + symbol + ')'} num={assets} enabledCountup={false} />
+                <StateCard title={t('assets') + '(' + symbol + ')'} num={assets} />
             </HStack>
 
             <HStack
@@ -341,11 +296,10 @@ export const StakingCoinCard = ({
                 </Button>
 
                 <Button
-                    isLoading={loading}
                     colorScheme="orange"
                     onClick={() => { onCertificate(index) }}
                 >
-                    {authorized ? t('deposite') : t('certificate')}
+                    {t('certificate')}
                 </Button>
             </HStack>
         </VStack>

src/components/base/col.js

@@ -5,12 +5,4 @@ export const VFStack = ({ children, ...rest }) => ((
     <VStack w="full" {...rest}>
         {children}
     </VStack>
-))
-
-export const UpDown = ({ children, ...rest }) => ((
-    <VFStack
-        {...rest}
-    >
-
-    </VFStack>
 ))

src/hooks/index.js

@@ -1,2 +1 @@
-export * from './useLocalStorage'
+export * from './useLocalStorage'
-export * from './useCountup'

src/hooks/useCountup.js

@@ -1,50 +0,0 @@
-import React from "react"
-import { toF } from "../utils"
-
-/**
- * 
- * @param {number} dest 目標數字
- */
-export const useCountup = (mill_secs = 1000, interval = 100, start = 0) => {
-    const [dest, setDest] = React.useState(0)
-    const [cur, setCur] = React.useState(start)
-    const hi = React.useRef()
-
-    const stopInterval = () => {
-        if (hi.current) {
-            clearInterval(hi.current)
-            hi.current = null
-        }
-    }
-
-    React.useEffect(() => {
-        const times = mill_secs / interval
-        const step = (dest - start) / times
-        const step_min = step / 2
-        const step_max = step * 1.5
-
-        setCur((cur) => start)
-
-        if (dest <= 0 || hi.current) {
-            return
-        }
-
-        hi.current = setInterval(() => {
-            let new_delta = Math.random() * (step_max - step_min) + step_min
-            // console.log('new_delta:', new_delta)
-            setCur((cur) => {
-                let new_val = new_delta + cur
-                if (new_val >= dest) {
-                    new_val = dest
-                    stopInterval()
-                }
-                // console.log('new_val:', new_val)
-                return toF(new_val, 2)
-            })
-        }, interval)
-
-        return stopInterval
-    }, [dest])
-
-    return [cur, setDest]
-}

src/lang/en.js

@@ -40,22 +40,4 @@ export const en = {
     strategy: 'Stragety',
     certificate: 'Certificate',
     assets: 'Assets',
-    staked: 'Staked',
-    stakingNote: "Note:The pledged amount of the node includes the pledged amount of CoinWind's entire network staking",
-    stakingFunds: 'Staking funds',
-    proportionOfFunds: 'Proportion of funds',
-    stakingAddress: 'Staking Address',
-    nodesStaked: 'Nodes Staked',
-    nodeNominations: 'Node nominations',
-    myShare: 'My share',
-    status: 'Status',
-
-    atAnyTime: 'At any time',
-    unlock: 'Unlock',
-    daysAfter: 'days after',
-    claim: 'Claim',
-    income: 'Income',
-
-    duration: 'Duration',
-    hashrate: 'Hashrate',
 }

src/lang/fr.js

@@ -40,22 +40,4 @@ export const fr = {
     strategy: 'Stragety',
     certificate: 'Certificate',
     assets: 'Assets',
-    staked: 'Staked',
-    stakingNote: '',
-    stakingFunds: 'Staking funds',
-    proportionOfFunds: 'Proportion of funds',
-    stakingAddress: 'Staking Address',
-    nodesStaked: 'Nodes Staked',
-    nodeNominations: '',
-    myShare: 'My share',
-    status: 'Status',
-
-    atAnyTime: 'At any time',
-    unlock: 'Unlock',
-    daysAfter: 'days after',
-    claim: 'Claim',
-    income: 'Income',
-
-    duration: 'Duration',
-    hashrate: 'Hashrate',
 }

src/lang/tw.js

@@ -17,7 +17,7 @@ export const tw = {
     compoundInterest: 'Compound Interest',
     deposite: '存入',
     deposited: '已存入',
-    vl: '鎖倉量',
+    vl: 'VL',
     remaining: 'Remaining',
     withdrawal: '取出',
     mining: '挖礦',
@@ -36,26 +36,8 @@ export const tw = {
     notFoundContent: "The page you're looking for does not seem to exist",
     goHome: 'Go to Home',
 
-    current: '活期',
+    current: 'Current',
-    strategy: '資金策略',
+    strategy: 'Stragety',
-    certificate: '憑證',
+    certificate: 'Certificate',
-    assets: '資產量',
+    assets: 'Assets',
-    staked: '已質押',
-    stakingNote: '說明：節點已質押量包含全網Staking的質押量',
-    stakingFunds: '質押資金',
-    proportionOfFunds: '質押比例',
-    stakingAddress: '主網地址',
-    nodesStaked: '節點質押數',
-    nodeNominations: '節點提名數',
-    myShare: '我的份額',
-    status: '狀態',
-
-    atAnyTime: '隨時',
-    unlock: '解鎖',
-    daysAfter: '天後',
-    claim: '提取',
-    income: '收益',
-
-    duration: 'Duration',
-    hashrate: 'Hashrate',
 }

src/pages/Farm.js

@@ -18,7 +18,6 @@ import {
 } from "../api"
 import { approve, transfer } from '../lib'
 import { ModalBox } from '../components'
-import { ModalDeposite } from '../uimsg'
 
 let DEF_LOCK = {
     count: 0,
@@ -249,12 +248,19 @@ export const Farm = () => {
             </ModalBox>
 
             {/* deposite box */}
-            <ModalDeposite
+            <ModalBox
+                title="Deposite"
                 isOpen={isDepositeOpen}
                 onClose={onDepositeClose}
                 onConfirm={onDepositeConfirmed}
-                ref={depositeRef}
+                focusRef={depositeRef}
-            />
+            >
+                <Box>
+                    <FormControl>Amount</FormControl>
+                    <Input ref={depositeRef} placeholder="deposite amount" />
+                </Box>
+
+            </ModalBox>
         </>
     )
 }

src/pages/Home.js

@@ -7,7 +7,6 @@ import { Auditors, Partners, Carousel, MultiChainCard, StateCard, MiningListCard
 import { useApp } from '../AppContext'
 import { get_coins_platform } from '../api'
 import { ImPieChart, ImFire } from 'react-icons/im'
-import { useCountup } from "../hooks"
 
 const HomeFooter = () => {
 

src/pages/Staking.js

@@ -2,86 +2,21 @@ import React from "react"
 import {
     Stack, Image, HStack,
     AspectRatio, useColorModeValue,
-    useDisclosure, useToast, Tag,
+    useDisclosure, useToast,
-    Text, Box,
 } from "@chakra-ui/react"
 
-import {
+import { StateCard, StakingCoinCard, StakingModalStrategy, StakingModalCertificate } from "../components"
-    StateCard, StakingCoinCard, StakingModalStrategy,
-    StakingModalCertificate, ModalBox,
-    VFStack, HFStack, HBetween,
-} from "../components"
-import {
-    ModalDeposite
-} from '../uimsg'
 import { useApp } from "../AppContext"
 import { config } from "../config"
-import { ABI, Images } from "../data"
+import { ABI } from "../data"
 import {
     get_staking_balance,
     get_coins_staking,
-    get_ether,
+    get_ether, get_authorization_v,
-    get_authorization_v,
+    get_authorization_one, get_authorization_search,
-    get_authorization_one,
-    get_authorization_search,
-    retrieve_all,
-    get_upBalance,
 } from "../api"
 import { approve, transfer } from '../lib'
-import { useTranslation } from "react-i18next"
+import { Images } from '../data'
-
-// Modal box for extraction
-const ModalRetrieve = ({ isOpen, onClose, onConfirm, vLeft = 0, vRight = 0 }) => {
-
-    const TopT = ({ v }) => ((
-        <Text
-            fontSize="20"
-            fontWeight="700"
-        >
-            {v}
-        </Text>
-    ))
-
-    const BelowT = ({ v }) => ((
-        <Text
-            fontSize={12}
-            color="gray.400"
-        >
-            {v}
-        </Text>
-    ))
-    return (
-        <ModalBox
-            title="Income"
-            isOpen={isOpen}
-            onClose={onClose}
-            showCancel={false}
-            textConfirm="Extract"
-            onConfirm={onConfirm}
-        >
-            <VFStack
-                bg="gray.100"
-                p="4"
-                pb="20"
-                borderRadius="10"
-            >
-                <HFStack>
-                    <Tag colorScheme="orange" variant="solid" size="lg">Current</Tag>
-                </HFStack>
-                <HBetween>
-                    <VFStack>
-                        <TopT v={vLeft} />
-                        <BelowT v="USDT" />
-                    </VFStack>
-                    <VFStack>
-                        <TopT v={vRight} />
-                        <BelowT v="USDC" />
-                    </VFStack>
-                </HBetween>
-            </VFStack>
-        </ModalBox>
-    )
-}
 
 export const Staking = () => {
     const [balance, setBalance] = React.useState({})
@@ -89,7 +24,6 @@ export const Staking = () => {
     const [coins, setCoins] = React.useState([])
     const [strategyIndex, setStrategyIndex] = React.useState(-1)
     const [certificateIndex, setCertificateIndex] = React.useState(-1)
-    const [depositeIndex, setDepositeIndex] = React.useState(-1)
 
     const app = useApp()
     const toast = useToast()
@@ -97,12 +31,6 @@ export const Staking = () => {
 
     const { isOpen: isOpenStrategy, onOpen: onOpenStrategy, onClose: onCloseStrategy } = useDisclosure()
     const { isOpen: isOpenCertificate, onOpen: onOpenCertificate, onClose: onCloseCertificate } = useDisclosure()
-    const { isOpen: isOpenExtract, onOpen: onOpenExtract, onClose: onCloseExtract } = useDisclosure()
-    const { isOpen: isOpenDeposite, onOpen: onOpenDeposite, onClose: onCloseDeposite } = useDisclosure()
-
-    const refDepositeFocus = React.useRef()
-
-    const { t } = useTranslation()
 
     const _getVaultBalance = () => {
         if (!app.address) {
@@ -111,7 +39,7 @@ export const Staking = () => {
 
         get_staking_balance(app.address).then((res) => {
             setBalance(res.data)
-            console.log('balances:', res.data)
+            console.log(res.data)
         })
     }
 
@@ -121,162 +49,72 @@ export const Staking = () => {
         onOpenStrategy()
     }
 
-    // click certificate / deposite button
     const onCertificate = (index) => {
         setCertificateIndex(index)
-        if (index < 0 || index >= coins.length) {
+        onOpenCertificate()
-            console.warning('index out of range')
-            return
-        }
-
-        if (coins[index].authorized) {
-            setDepositeIndex(prev => index)
-            onOpenDeposite()
-        } else {
-            onOpenCertificate()
-        }
     }
-
+    // clicked Certificate
-    // ModalDeposite callback
-    const onConfirmDeposite = () => {
-        if (depositeIndex < 0 || depositeIndex >= coins.length) {
-            console.error(depositeIndex, ' out of range')
-            return
-        }
-
-        const amount = refDepositeFocus.current.value
-
-        transfer(ABI, coins[depositeIndex].address, app.appAddress, amount, app.address, (err, res) => {
-            if (!err) {
-                toast({
-                    title: 'Succeed',
-                    description: "You have successfully deposited " + amount + " " + coins[depositeIndex].name,
-                    status: 'success',
-                    duration: 9000,
-                    isClosable: true,
-                })
-                // TODO 提交充值记录
-                get_upBalance(app.address).then(res => {
-
-                }).catch(err => {
-                    console.error('get_upBalance() error:' + err.message)
-                })
-            } else {
-                toast({
-                    title: 'Failed',
-                    description: "Your operation has not been completed.",
-                    status: 'info',
-                    duration: 9000,
-                    isClosable: true,
-                })
-                console.error('transfer() error:' + err.message)
-            }
-        })
-
-    }
-
-    // ModalExtract callback
-    const onConfirmExtract = () => {
-        if (!app.address) {
-            toast({
-                title: 'Wallet not connected',
-                description: "Please connect your wallet first to perform the operation",
-                status: 'warning',
-                duration: 9000,
-                isClosable: true,
-            })
-            return
-        }
-
-        if (balance.USDT_T <= 0 && balance.USDC_T <= 0) {
-            toast({
-                title: '',
-                description: "Has no income",
-                status: 'info',
-                duration: 9000,
-                isClosable: true,
-            })
-            return
-        }
-
-        retrieve_all(app.address).then(res => {
-            _getVaultBalance()
-
-            toast({
-                title: 'Succeed',
-                description: "Operation succeed.",
-                status: 'success',
-                duration: 9000,
-                isClosable: true,
-            })
-        }).catch(err => {
-            console.error('retrieve_all() error:', err.message)
-        })
-    }
-
-    // Modal certificate callback
     const onConfirmCertificate = (index) => {
         if (index < 0 || index >= coins.length) {
             console.error('index out of range')
             return
         }
 
-        if (!app.address) {
-            toast({
-                title: 'Wallet not connected',
-                description: "Please connect your wallet first to perform the operation",
-                status: 'warning',
-                duration: 9000,
-                isClosable: true,
-            })
-            return
-        }
-
         let _coins = [...coins]
 
-        // make button loading
+        if (_coins[index].authorized) {
-        _coins[index].loading = true
-        setCoins(_coins)
 
-        approve(ABI, _coins[index].address, app.appAddress, app.address, (err, tx) => {
+        } else {
-            _coins = [...coins]
+            if (!app.address) {
-
+                toast({
-            if (!err) {
+                    title: 'Wallet not connected',
-                get_authorization_one(app.address, _coins[index].name, tx).then(res => {
+                    description: "Please connect your wallet first to perform the operation",
-                    // we dont care the result
+                    status: 'warning',
-                }).catch(err => {
+                    duration: 9000,
-                    console.error('get_authorization_one() error:' + err.message)
+                    isClosable: true,
                 })
-
+                return
-                //
-                let hi = setInterval(() => {
-                    get_authorization_search(tx).then(res => {
-                        _coins[index].authorized = true // for simple, we dont check the result.
-                        setCoins(_coins)
-
-                        clearInterval(hi)
-                    }).catch(err => {
-                        console.error("get_authorization_search() error:" + err.message)
-                    })
-                }, 8000)
-            } else {
-                console.error("approve error:" + err.message)
             }
-            // recover loading
+            // make button loading
-            _coins[index].loading = false
+            _coins[index].loading = true
             setCoins(_coins)
-        })
+
+            approve(ABI, _coins[index].address, app.appAddress, app.address, (err, tx) => {
+                _coins = [...coins]
+
+                if (!err) {
+                    get_authorization_one(app.address, _coins[index].name, tx).then(res => {
+                        // we dont care the result
+                    }).catch(err => {
+                        console.error('get_authorization_one() error:' + err.message)
+                    })
+
+                    //
+                    let hi = setInterval(() => {
+                        get_authorization_search(tx).then(res => {
+                            _coins[index].authorized = true // for simple, we dont check the result.
+                            setCoins(_coins)
+
+                            clearInterval(hi)
+                        }).catch(err => {
+                            console.error("get_authorization_search() error:" + err.message)
+                        })
+                    }, 8000)
+                } else {
+                    console.error("approve error:" + err.message)
+                }
+                // recover loading
+                _coins[index].loading = false
+                setCoins(_coins)
+            })
+        }
     }
 
     React.useEffect(() => {
         _getVaultBalance()
 
         get_coins_staking().then(res => {
-            res.data.forEach((obj) => {
+            setCoins(res.data)
-                obj.conf = JSON.parse(obj.conf)
-                obj.authorized = true
-            })
-            setCoins(prev => res.data)
         }).catch(err => {
             console.error('get_coins_staking() error:' + err.message)
         })
@@ -285,8 +123,6 @@ export const Staking = () => {
             let list = ''
             let changed = false
             let _coins = [...coins]
-
-            console.log(res.data)
             res.data.result.forEach(v => {
                 if (v.from == app.address.toLowerCase() && v.isError == 0) {
                     if (v.to == '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48') {
@@ -329,13 +165,8 @@ export const Staking = () => {
                 <HStack
                     flex={1}
                 >
-                    <StateCard title="Personal TVL($)" num={balance.USDC + balance.USDT} />
+                    <StateCard title="Personal TVL($)" num={balance.USDC} />
-                    <StateCard
+                    <StateCard title="Total Personal Earned($)" num={balance.USDC_T} />
-                        title="Total Personal Earned($)"
-                        num={balance.USDC_T + balance.USDT_T}
-                        button={t('claim')}
-                        onClick={onOpenExtract}
-                    />
                 </HStack>
             </Stack>
 
@@ -348,13 +179,8 @@ export const Staking = () => {
                         index={index}
                         icon={config.ENDPOINT + 'upload/' + coin.name_img}
                         symbol={coin.name}
-                        apy={
+                        apy={coin.yield}
-                            coin.conf.plans[0].interest + '% ~ ' +
-                            coin.conf.plans[coin.conf.plans.length - 1].interest + '%'
-                        }
                         vl={coin.count_use}
-                        loading={coin.loading}
-                        authorized={coin.authorized}
                         assets={0.00}
                         onStrategy={onStrategy}
                         onCertificate={onCertificate}
@@ -363,7 +189,6 @@ export const Staking = () => {
                 ))
             }
 
-            {/* Modal for Strategy button */}
             <StakingModalStrategy
                 isOpen={isOpenStrategy}
                 onClose={onCloseStrategy}
@@ -374,32 +199,24 @@ export const Staking = () => {
                 address={coins[strategyIndex]?.address}
                 nodesStaked={coins[strategyIndex]?.count}
                 nodesNominations={coins[strategyIndex]?.count}
-                plans={coins[strategyIndex]?.conf.plans}
                 share={0.58}
                 status='normal'
             />
 
-            {/* Modal for Certificate button */}
             <StakingModalCertificate
                 isOpen={isOpenCertificate}
                 onClose={onCloseCertificate}
-                onConfirm={onConfirmCertificate}
+                icon={config.ENDPOINT + 'upload/' + coins[certificateIndex]?.name_img}
+                symbol={coins[certificateIndex]?.name}
+                apy={coins[certificateIndex]?.yield}
+                authorized={coins[certificateIndex]?.authorized}
                 index={certificateIndex}
-                coin={coins[certificateIndex]}
+                onConfirm={onConfirmCertificate}
                 assets={0.00}
                 income={0.00}
+                start="2022-04-01"
+                days="22"
             />
-
-            <ModalRetrieve isOpen={isOpenExtract} onClose={onCloseExtract} onConfirm={onConfirmExtract} />
-
-            <ModalDeposite
-                isOpen={isOpenDeposite}
-                onClose={onCloseDeposite}
-                onConfirm={onConfirmDeposite}
-                ref={refDepositeFocus}
-            />
-
-            <ModalRetrieve isOpen={isOpenExtract} onClose={onCloseExtract} onConfirm={onConfirmExtract} />
         </>
     )
 }

src/uimsg/ModalDeposite.js

@@ -1,24 +0,0 @@
-import { useTranslation } from "react-i18next"
-import { ModalBox } from "../components"
-import { Box, FormControl, Input } from "@chakra-ui/react"
-import React from "react"
-
-export const ModalDeposite = React.forwardRef((props, ref) => {
-    const { t } = useTranslation()
-
-    return (
-        <ModalBox
-            title={t('deposite')}
-            isOpen={props.isOpen}
-            onClose={props.onClose}
-            onConfirm={props.onConfirm}
-            focusRef={ref}
-        >
-            <Box>
-                <FormControl>Amount</FormControl>
-                <Input ref={ref} placeholder="deposite amount" />
-            </Box>
-
-        </ModalBox>
-    )
-}) 

src/uimsg/index.js

@@ -1,2 +0,0 @@
-export * from './ModalDeposite'
-export * from './toasts'

src/uimsg/toasts.js

@@ -1,18 +0,0 @@
-
-const toast = (t, content = '', title = '', duration = 9000, status = 'warning') => {
-    t({
-        title: title,
-        description: content,
-        status: status,
-        duration: duration,
-        isClosable: true,
-    })
-}
-
-export const toastw = (t, content = '', title = '', duration = 9000) => toast(t, content, title, duration)
-
-export const toasti = (t, content = '', title = '', duration = 9000) => toast(t, content, title, duration, 'info')
-
-export const toasts = (t, content = '', title = '', duration = 9000) => toast(t, content, title, duration, 'success')
-
-export const toaste = (t, content = '', title = '', duration = 9000) => toast(t, content, title, duration, 'error')

src/utils.js

@@ -1,2 +0,0 @@
-
-export const toF = (org, pn) => parseFloat(parseFloat(org).toFixed(pn))