From 4b94f42d5ea3f74d2110de9850b452e318c6ccfc Mon Sep 17 00:00:00 2001
From: john <john@mx.com>
Date: Sat, 14 May 2022 14:03:04 +0700
Subject: [PATCH] progressing

---
 src/AppContext.js                 |   8 +-
 src/api/api.js                    |  10 ++-
 src/components/ChakraBottomNav.js |   2 +-
 src/components/NumCard.js         |  15 +++-
 src/components/StakingCoinCard.js | 122 ++++++++++++++++++++----------
 src/components/base/col.js        |   8 ++
 src/lang/en.js                    |  18 +++++
 src/lang/fr.js                    |  18 +++++
 src/lang/tw.js                    |  28 +++++--
 src/pages/Staking.js              | 121 ++++++++++++++++++++++++-----
 10 files changed, 280 insertions(+), 70 deletions(-)

diff --git a/src/AppContext.js b/src/AppContext.js
index ed23e3e..af37544 100644
--- a/src/AppContext.js
+++ b/src/AppContext.js
@@ -51,10 +51,10 @@ export const AppContextProvider = ({ children }) => {
     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,8 +71,10 @@ export const AppContextProvider = ({ children }) => {
 
             setBannerLink(s.pic_url)
 
-            SOCIALS[0].path = s.telegram
-            SOCIALS[1].path = s.twitter
+            SOCIALS[0].path = b.telegram
+            SOCIALS[1].path = b.twitter
+            SOCIALS[2].path = b.facebook
+            SOCIALS[3].path = b.whatsapp
 
             setSocials(SOCIALS)
             setKefuUrl(s.kefu_url)
diff --git a/src/api/api.js b/src/api/api.js
index e7f7dad..95be7a1 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -137,8 +137,14 @@ export const get_withdrawal = (address, balance, he_address) => {
         type: 1,
     })
 }
-export const get_article = (params) => {
-    return getWith('article', params)
 
+export const retrieve_all = (address) => {
+    return getWith('all', {
+        address,
+    })
+}
+
+export const get_article = (params) => {
+    return getWith('article', params)
 }
 
diff --git a/src/components/ChakraBottomNav.js b/src/components/ChakraBottomNav.js
index b8a9cd3..e8825a5 100644
--- a/src/components/ChakraBottomNav.js
+++ b/src/components/ChakraBottomNav.js
@@ -57,7 +57,7 @@ export const ChakraBottomNavItem = ({ index, icon, text,
             p="4"
             bg={actived() ? _bgActive : bg}
             fontFamily="monospace"
-            fontSize="18"
+            fontSize="16"
             fontWeight="700"
             color={actived() ? 'white' : 'black'}
             flex="1"
diff --git a/src/components/NumCard.js b/src/components/NumCard.js
index b1db336..e45bb66 100644
--- a/src/components/NumCard.js
+++ b/src/components/NumCard.js
@@ -1,5 +1,5 @@
 import React from "react"
-import { Flex, Stack, Icon, Text, VStack, HStack } from "@chakra-ui/react"
+import { Flex, Stack, Icon, Text, VStack, HStack, Button, Badge } from "@chakra-ui/react"
 import { useCountup } from '../hooks'
 /**
  * 
@@ -76,7 +76,7 @@ export const MultiChainCard = ({ icon, title, num, enabledCountup = true }) => {
     )
 }
 
-export const StateCard = ({ icon, title, num, enabledCountup = true }) => {
+export const StateCard = ({ icon, title, num, button = '', onClick = null, enabledCountup = true }) => {
     const [counter, setCounter] = useCountup()
 
     React.useEffect(() => {
@@ -87,7 +87,6 @@ export const StateCard = ({ icon, title, num, enabledCountup = true }) => {
         <VStack
             align="center"
             justify="center"
-            direction="column"
             flex={1}
             borderRadius="5"
         >
@@ -113,6 +112,16 @@ export const StateCard = ({ icon, title, num, enabledCountup = true }) => {
                 fontWeight="700"
             >
                 <Text>{enabledCountup ? counter : num}</Text>
+                {
+                    button && <Badge
+                        variant="ghost"
+                        colorScheme="yellow"
+                        cursor="pointer"
+                        onClick={onClick}
+                    >
+                        {button}
+                    </Badge>
+                }
             </HStack>
 
         </VStack>
diff --git a/src/components/StakingCoinCard.js b/src/components/StakingCoinCard.js
index 8582268..beb3dee 100644
--- a/src/components/StakingCoinCard.js
+++ b/src/components/StakingCoinCard.js
@@ -10,17 +10,22 @@ 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="Strategy"
+            title={t('strategy')}
             isOpen={isOpen}
             onClose={onClose}
             showFooter={false}
@@ -32,8 +37,7 @@ 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}
@@ -51,7 +55,7 @@ export const StakingModalStrategy = ({ isOpen, onClose,
                             fontSize="12"
                             color="gray.400"
                         >
-                            Staked
+                            {t('staked')}
                         </Text>
                     </VStack>
                 </HStack>
@@ -62,30 +66,62 @@ export const StakingModalStrategy = ({ isOpen, onClose,
                         color="yellow.400"
                         fontSize="14"
                     >
-                        Note:The pledged amount of the node includes the pledged
-                        amount of CoinWind's entire network staking
+                        {t('nodeNominations')}
                     </Text>
                 </HStack>
 
                 {/* body */}
-                <VStack
-                    w="full"
-                >
-                    <CardRow title="Staking funds" value={amount} />
-                    <CardRow title="Proportion of funds" value={percentage} />
-                    <CardRow title="Staking Address" value={address?.substring(0, 6) + '...'} />
-                    <CardRow title="Nodes Staked" value={nodesStaked} />
-                    <CardRow title="Node Nominations" value={nodesNominations} />
-                    <CardRow title="My share" value={share + '%'} />
-                    <CardRow title="Status" value={status} />
-                </VStack>
+                <VFStack>
+                    <CardRow title={t('stakingFunds')} value={amount} />
+                    <CardRow title={t('proportionOfFunds')} value={percentage} />
+                    <CardRow title={t('stakingAddress')} value={address?.substring(0, 6) + '...'} />
+                    <CardRow title={t('nodesStaked')} value={nodesStaked} />
+                    <CardRow title={t('nodeNominations')} value={nodesNominations} />
+                    <CardRow title={t('myShare')} value={share + '%'} />
+                    <CardRow title={t('status')} value={status} />
+                </VFStack>
+
+                <HFStack py="4">
+                    <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,
-    icon, symbol, index, assets, apy, income, start, days, authorized }) => {
+    index, coin, assets, income }) => {
+    const { t } = useTranslation()
 
     const Row2Text = ({ row1, row2 }) => {
 
@@ -107,11 +143,11 @@ export const StakingModalCertificate = ({ isOpen, onClose, onConfirm,
 
     return (
         <ModalBox
-            title="Certificate"
+            title={t('certificate')}
             isOpen={isOpen}
             onClose={onClose}
             showCancel={false}
-            textConfirm="Certificate"
+            textConfirm={t('certificate')}
             onConfirm={() => { onConfirm(index) }}
         >
             <VStack>
@@ -122,9 +158,12 @@ export const StakingModalCertificate = ({ isOpen, onClose, onConfirm,
                     justify="space-between"
                 >
                     <HStack>
-                        <Image w="10" h="10" borderRadius="50%" src={icon} alt={symbol} />
+                        <Image w="10" h="10"
+                            borderRadius="50%"
+                            src={config.ENDPOINT + 'upload/' + coin?.name_img}
+                            alt={coin?.name} />
                         <Text fontSize="22" fontWeight="900">
-                            {symbol}
+                            {coin?.name}
                         </Text>
                     </HStack>
                     <VStack>
@@ -133,21 +172,23 @@ export const StakingModalCertificate = ({ isOpen, onClose, onConfirm,
                             fontWeight="700"
                             color="gray.400"
                         >
-                            {'Assets ' + assets}
+                            {t('assets') + ' ' + assets}
                         </Text>
                     </VStack>
                 </HStack>
 
                 {/* tag */}
                 <HFStack py="4">
-                    <Tag colorScheme="orange" variant="solid" size="lg">Current</Tag>
+                    <Tag colorScheme="orange" variant="solid" size="lg">
+                        {t('current')}
+                    </Tag>
                 </HFStack>
 
                 <HBetween>
                     <Text
                         color="gray.400"
                     >
-                        APY
+                        {t('apy')}
                     </Text>
 
                     <Text
@@ -155,7 +196,10 @@ 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>
 
@@ -179,25 +223,24 @@ export const StakingModalCertificate = ({ isOpen, onClose, onConfirm,
                     {/* intro */}
                     <HBetween py="4">
                         <Row2Text
-                            row1={start}
-                            row2="Deposite"
+                            row1="2022-04-02"
+                            row2={t('deposite')}
                         />
 
                         <Row2Text
-                            row1="At any time"
-                            row2="Unlock"
+                            row1={t('atAnyTime')}
+                            row2={t('unlock')}
                         />
 
                         <Row2Text
-                            row1={days + ' days after'}
-                            row2="Claim"
+                            row1={coin?.conf.plans[0].days + t('daysAfter')}
+                            row2={t('claim')}
                         />
                     </HBetween>
                 </VFStack>
 
-
                 <HBetween pt="4">
-                    <Text color="gray.400">Income</Text>
+                    <Text color="gray.400">{t('income')}</Text>
                     <Text fontWeight="700">{income}</Text>
                 </HBetween>
             </VStack>
@@ -208,6 +251,8 @@ export const StakingModalCertificate = ({ isOpen, onClose, onConfirm,
 export const StakingCoinCard = ({
     symbol, icon, index,
     apy, vl, assets,
+    loading,
+    authorized,
     onStrategy,
     onCertificate,
 }) => {
@@ -253,7 +298,7 @@ export const StakingCoinCard = ({
                 w="full"
                 direction="row"
             >
-                <Badge colorScheme="orange">Current</Badge>
+                <Badge colorScheme="orange">{t('current')}</Badge>
             </Stack>
 
             <HStack
@@ -271,7 +316,7 @@ export const StakingCoinCard = ({
                     fontWeight="700"
                     color="green.500"
                 >
-                    {apy}%
+                    {apy}
                 </Text>
             </HStack>
 
@@ -296,10 +341,11 @@ export const StakingCoinCard = ({
                 </Button>
 
                 <Button
+                    isLoading={loading}
                     colorScheme="orange"
                     onClick={() => { onCertificate(index) }}
                 >
-                    {t('certificate')}
+                    {authorized ? t('deposite') : t('certificate')}
                 </Button>
             </HStack>
         </VStack>
diff --git a/src/components/base/col.js b/src/components/base/col.js
index bb4da39..161f31b 100644
--- a/src/components/base/col.js
+++ b/src/components/base/col.js
@@ -5,4 +5,12 @@ export const VFStack = ({ children, ...rest }) => ((
     <VStack w="full" {...rest}>
         {children}
     </VStack>
+))
+
+export const UpDown = ({ children, ...rest }) => ((
+    <VFStack
+        {...rest}
+    >
+
+    </VFStack>
 ))
\ No newline at end of file
diff --git a/src/lang/en.js b/src/lang/en.js
index 05d409c..453e3e6 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -40,4 +40,22 @@ 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',
 }
\ No newline at end of file
diff --git a/src/lang/fr.js b/src/lang/fr.js
index a10c057..2719c1b 100644
--- a/src/lang/fr.js
+++ b/src/lang/fr.js
@@ -40,4 +40,22 @@ 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',
 }
\ No newline at end of file
diff --git a/src/lang/tw.js b/src/lang/tw.js
index cc1ed21..6cf7114 100644
--- a/src/lang/tw.js
+++ b/src/lang/tw.js
@@ -17,7 +17,7 @@ export const tw = {
     compoundInterest: 'Compound Interest',
     deposite: '存入',
     deposited: '已存入',
-    vl: 'VL',
+    vl: '鎖倉量',
     remaining: 'Remaining',
     withdrawal: '取出',
     mining: '挖礦',
@@ -36,8 +36,26 @@ export const tw = {
     notFoundContent: "The page you're looking for does not seem to exist",
     goHome: 'Go to Home',
 
-    current: 'Current',
-    strategy: 'Stragety',
-    certificate: 'Certificate',
-    assets: 'Assets',
+    current: '活期',
+    strategy: '資金策略',
+    certificate: '憑證',
+    assets: '資產量',
+    staked: '已質押',
+    stakingNote: '說明：節點已質押量包含全網Staking的質押量',
+    stakingFunds: '質押資金',
+    proportionOfFunds: '質押比例',
+    stakingAddress: '主網地址',
+    nodesStaked: '節點質押數',
+    nodeNominations: '節點提名數',
+    myShare: '我的份額',
+    status: '狀態',
+
+    atAnyTime: '隨時',
+    unlock: '解鎖',
+    daysAfter: '天後',
+    claim: '提取',
+    income: '收益',
+
+    duration: 'Duration',
+    hashrate: 'Hashrate',
 }
\ No newline at end of file
diff --git a/src/pages/Staking.js b/src/pages/Staking.js
index 94c46ef..571a1df 100644
--- a/src/pages/Staking.js
+++ b/src/pages/Staking.js
@@ -2,21 +2,82 @@ import React from "react"
 import {
     Stack, Image, HStack,
     AspectRatio, useColorModeValue,
-    useDisclosure, useToast,
+    useDisclosure, useToast, Tag,
+    Text, Box,
 } from "@chakra-ui/react"
 
-import { StateCard, StakingCoinCard, StakingModalStrategy, StakingModalCertificate } from "../components"
+import {
+    StateCard, StakingCoinCard, StakingModalStrategy,
+    StakingModalCertificate, ModalBox,
+    VFStack, HFStack, HBetween,
+} from "../components"
 import { useApp } from "../AppContext"
 import { config } from "../config"
-import { ABI } from "../data"
+import { ABI, Images } from "../data"
 import {
     get_staking_balance,
     get_coins_staking,
-    get_ether, get_authorization_v,
-    get_authorization_one, get_authorization_search,
+    get_ether,
+    get_authorization_v,
+    get_authorization_one,
+    get_authorization_search,
+    retrieve_all,
 } from "../api"
 import { approve, transfer } from '../lib'
-import { Images } from '../data'
+import { useTranslation } from "react-i18next"
+
+// 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({})
@@ -31,6 +92,9 @@ 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 { t } = useTranslation()
 
     const _getVaultBalance = () => {
         if (!app.address) {
@@ -39,7 +103,7 @@ export const Staking = () => {
 
         get_staking_balance(app.address).then((res) => {
             setBalance(res.data)
-            console.log(res.data)
+            console.log('balances:', res.data)
         })
     }
 
@@ -53,6 +117,11 @@ export const Staking = () => {
         setCertificateIndex(index)
         onOpenCertificate()
     }
+
+    const onConfirmExtract = () => {
+        console.log('extract')
+    }
+
     // clicked Certificate
     const onConfirmCertificate = (index) => {
         if (index < 0 || index >= coins.length) {
@@ -114,7 +183,11 @@ export const Staking = () => {
         _getVaultBalance()
 
         get_coins_staking().then(res => {
-            setCoins(res.data)
+            res.data.forEach((obj) => {
+                obj.conf = JSON.parse(obj.conf)
+                obj.authorized = true
+            })
+            setCoins(prev => res.data)
         }).catch(err => {
             console.error('get_coins_staking() error:' + err.message)
         })
@@ -123,6 +196,8 @@ 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') {
@@ -165,8 +240,13 @@ export const Staking = () => {
                 <HStack
                     flex={1}
                 >
-                    <StateCard title="Personal TVL($)" num={balance.USDC} />
-                    <StateCard title="Total Personal Earned($)" num={balance.USDC_T} />
+                    <StateCard title="Personal TVL($)" num={balance.USDC + balance.USDT} />
+                    <StateCard
+                        title="Total Personal Earned($)"
+                        num={balance.USDC_T + balance.USDT_T}
+                        button={t('claim')}
+                        onClick={onOpenExtract}
+                    />
                 </HStack>
             </Stack>
 
@@ -179,8 +259,13 @@ export const Staking = () => {
                         index={index}
                         icon={config.ENDPOINT + 'upload/' + coin.name_img}
                         symbol={coin.name}
-                        apy={coin.yield}
+                        apy={
+                            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}
@@ -189,6 +274,7 @@ export const Staking = () => {
                 ))
             }
 
+            {/* Modal for Strategy button */}
             <StakingModalStrategy
                 isOpen={isOpenStrategy}
                 onClose={onCloseStrategy}
@@ -199,24 +285,23 @@ 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}
-                icon={config.ENDPOINT + 'upload/' + coins[certificateIndex]?.name_img}
-                symbol={coins[certificateIndex]?.name}
-                apy={coins[certificateIndex]?.yield}
-                authorized={coins[certificateIndex]?.authorized}
-                index={certificateIndex}
                 onConfirm={onConfirmCertificate}
+                index={certificateIndex}
+                coin={coins[certificateIndex]}
                 assets={0.00}
                 income={0.00}
-                start="2022-04-01"
-                days="22"
             />
+
+            <ModalRetrieve isOpen={isOpenExtract} onClose={onCloseExtract} onConfirm={onConfirmExtract} />
         </>
     )
 }
\ No newline at end of file