修改页面bug

env.md

@@ -1,4 +1,4 @@
 SKIP_PREFLIGHT_CHECK=true
 GENERATE_SOURCEMAP=false
-REACT_APP_CHAINID=97
-REACT_APP_DAY_TIME=60
+REACT_APP_CHAINID=56
+REACT_APP_DAY_TIME=86400

package.json

@@ -82,6 +82,7 @@
     "build": "node scripts/build.js",
     "test": "node scripts/test.js",
     "deploy:dev": "npm run build && scp -r ./build/* vps:/home/ubuntu/pzy/sofil",
+    "deploy:test": "npm run build && scp -r ./build/* dcfilefast_prod:/home/web/code/test-app.sofil.io",
     "deploy:prod": "npm run build && scp -r ./build/* vpsDcminer:/data/wwwroot/sofil"
   },
   "eslintConfig": {

src/contract/api.ts

@@ -8,9 +8,10 @@ import {
 } from "~/types/api.d";
 import { toFixed2 } from "~/utils";
 import { fromWei, toBigInt, toWei } from "~/utils/wei";
+import { Pledge } from "./typechain-types";
 const { _contract } = store.state.contract;
 
-const { Pledge__factory } = _contract;
+const Pledge__factory =(_contract ? _contract.Pledge__factory : {} ) as Pledge;
 
 const eth_pledgeRecords = async (_owner: string) => {
   const _recordPs = Pledge__factory.getPledgeRecords(_owner); //質押記錄

src/contract/index.tsx → src/contract/index.ts

@@ -5,16 +5,16 @@ import store from '~/store';
 import { ContractType } from '~/types/store';
 // 0x7a89c2D92Bf53160ab58d7889966741cA8Eb5855
 export const config = {
-  56: {
-    chainId: 56,
-    rpc: "https://bsc-dataseed1.defibit.io",
-    address: {
-      FIL__factory: "0x0d8ce2a99bb6e3b7db580ed848240e4a0f9ae153",
-      NFT__factory: "0x5fd156B6B47Bb0B363fa3D4e2E31a8394Ee7A630",
-      Pool__factory: "0xC31cEb39961076d8fAD3936D88489972c02b4D83",
-      Pledge__factory: "0x2F3d8761c8214627743F84F9890A8eEeD914ddf1",
-    }
-  },
+  // 56: {
+  //   chainId: 56,
+  //   rpc: "https://bsc-dataseed1.defibit.io",
+  //   address: {
+  //     FIL__factory: "0x0d8ce2a99bb6e3b7db580ed848240e4a0f9ae153",
+  //     NFT__factory: "0x5fd156B6B47Bb0B363fa3D4e2E31a8394Ee7A630",
+  //     Pool__factory: "0xC31cEb39961076d8fAD3936D88489972c02b4D83",
+  //     Pledge__factory: "0x2F3d8761c8214627743F84F9890A8eEeD914ddf1",
+  //   }
+  // },
   97: {
     chainId: 97,
     rpc: "https://bsc-testnet.blockpi.network/v1/rpc/public",
@@ -34,7 +34,7 @@ export const config = {
       Pool__factory: "0xCf7Ed3AccA5a467e9e704C703E8D87F634fB0Fc9",
       Pledge__factory: "0x5FC8d32690cc91D4c39d9d3abcBD16989F875707",
     }
-  }
+  },
 } as any
 // 57.333333333333333332
 const contractObj = {
@@ -75,42 +75,46 @@ const switchNetWork = () => {
 
 export const initContract = async () => {
 
-  let chainId = Number(process.env.REACT_APP_CHAINID);
-  let account = [] as string[];
+  try {
+    let chainId = Number(process.env.REACT_APP_CHAINID);
+    let account = [] as string[];
 
-  let _contract: { [key: string]: any } = {
-    _contract: {},
-    _provider: null
-  };
+    let _contract: { [key: string]: any } = {
+      _contract: {},
+      _provider: null
+    };
 
 
-  if (window.ethereum) {
-    account = await window.ethereum.request({
-      method: 'eth_accounts'
-    });
-    chainId = ethers.toNumber(await window.ethereum.request({
-      method: 'eth_chainId'
-    })) 
-  }
+    if (window.ethereum) {
+      account = await window.ethereum.request({
+        method: 'eth_accounts'
+      });
+      chainId = ethers.toNumber(await window.ethereum.request({
+        method: 'eth_chainId'
+      }))
+    }
 
-  if(!config[chainId]){
-    chainId = Number(process.env.REACT_APP_CHAINID)
-  };
+    if (!config[chainId]) {
+      chainId = Number(process.env.REACT_APP_CHAINID)
+    };
 
-  const contractAddress = config[chainId];
-  let _provider = null as any;
+    const contractAddress = config[chainId];
+    let _provider = null as any;
 
-  if (account.length <= 0) {
-    _provider = new ethers.JsonRpcProvider(contractAddress.rpc)
-  } else {
-    _provider = await new ethers.BrowserProvider(window.ethereum).getSigner()
-  }
+    if (account.length <= 0) {
+      _provider = new ethers.JsonRpcProvider(contractAddress.rpc)
+    } else {
+      _provider = await new ethers.BrowserProvider(window.ethereum).getSigner()
+    }
+
+    _contract._provider = _provider;
 
-  _contract._provider = _provider;
+    Object.keys(contractAddress.address).forEach((item) => {
+      _contract._contract[item] = contractObj[item].connect(contractAddress.address[item], _provider);
+    })
+    store.setContract(_contract as ContractType);
+  } catch (error) {
 
-  Object.keys(contractAddress.address).forEach((item) => {
-    _contract._contract[item] = contractObj[item].connect(contractAddress.address[item], _provider);
-  })
-  store.setContract(_contract as ContractType);
+  }
 
 }

src/language/hk.json

@@ -81,7 +81,7 @@
   "WITHDRAW":"提取",
   "No. of Staking Contracts":"持有的質押合約",
   "Contract(NFT)":"合約NFT",
-  "Withdrawable":"可提取總額",
+  "Withdrawable":"可提取收益",
   "Maturity Date":"到期日",
   "Status":"狀態",
   "Active":"未到期",
@@ -90,8 +90,9 @@
   "No records":"暫無記錄",
   "Accumulative Stake":"總質押",
   "Accumulative Rewards Withdraw":"總提取收益",
-  "Withdraw":"質押",
-  "Stake":"提取",
+  "Accumulative Rewards":"總收益",
+  "Withdraw":"提取",
+  "Stake":"質押",
   "Create Contract(NFT)":"創建合約（NFT）",
   "Contract Address":"合約地址",
   "Copy Success":"複製成功",
@@ -125,7 +126,7 @@
   "Addresses": "錢包地址",
   "Contributed": "獎勵貢獻",
   "Binding Time": "綁定時間",
-  "Contreact(Rewards) Details": "合約(奖励)明細",
+  "Contract(Rewards) Details": "合約(奖励)明細",
   "Days Staking": "天質押",
   "Rewards Details": "收益及提取明細"
 }

src/language/zh.json

@@ -81,7 +81,7 @@
   "WITHDRAW": "提取",
   "No. of Staking Contracts": "持有的质押合约",
   "Contract(NFT)": "合约NFT",
-  "Withdrawable": "可提取总额",
+  "Withdrawable": "可提取收益",
   "Maturity Date": "到期日",
   "Status": "状态",
   "Active": "未到期",
@@ -90,8 +90,9 @@
   "No records": "暂无记录",
   "Accumulative Stake": "总质押",
   "Accumulative Rewards Withdraw": "总提取收益",
-  "Withdraw": "质押",
-  "Stake": "提取",
+  "Accumulative Rewards":"总收益",
+  "Withdraw": "提取",
+  "Stake": "质押",
   "Create Contract(NFT)": "创建合约（NFT）",
   "Contract Address": "合约地址",
   "Copy Success": "复制成功",
@@ -125,7 +126,7 @@
   "Addresses": "钱包地址",
   "Contributed": "奖励贡献",
   "Binding Time": "绑定时间",
-  "Contreact(Rewards) Details": "合约(奖励)明细",
+  "Contract(Rewards) Details": "合约(奖励)明细",
   "Days Staking": "天质押",
   "Rewards Details": "收益及提取明细"
 }

src/pages/home/index.tsx

@@ -5,6 +5,7 @@ import Button from '~/components/Button'
 import { eth_pledgeProducts } from '~/contract/api'
 import { useRouter } from '~/hooks/useRouter'
 import '~/styles/home.scss'
+import { openGitBook } from '~/utils'
 
 const Home = () => {
 
@@ -109,7 +110,9 @@ const Home = () => {
           <img src={require('~/assets/group.png')} className='img' alt="" />
           <div className='box p-2'>
             <div className='fz-wb-550 tac'>{t('Up To 7% of Referees Staking Rewards')}</div>
-            <div className='row-center mt-1 plr-1'>
+            <div className='row-center mt-1 plr-1' onClick={() => {
+              push('/myPledge')
+            }}>
               <div className='tac fz-14'>{t('By sharing your referral code and introducing your friends to SOFIL and stake, you can earn referral rewards and withdraw everyday.')}</div>
               <div className='iconfont icon-arrow fz-26'></div>
             </div>
@@ -129,7 +132,9 @@ const Home = () => {
           }
         </Collapse>
         <div className='row-center'>
-          <Button className='understand-button mt-3 fz-wb-550'>{t('Learn More')}</Button>
+          <Button className='understand-button mt-3 fz-wb-550' onClick={() => {
+            openGitBook()
+          }}>{t('Learn More')}</Button>
         </div>
       </div>
     </div>

src/pages/invitation-detail/index.tsx

@@ -77,7 +77,7 @@ const InvitationDetail = () => {
         <div className='box plr-3'>
           <div className='row-items pt-3'>
             <div className='iconfont icon-back_light fz-34' onClick={() => push(-1)}></div>
-            <div className='fz-24'>{t('Contreact(Rewards) Details')}</div>
+            <div className='fz-24'>{t('Contract(Rewards) Details')}</div>
           </div>
         </div>
       </div>

src/pages/invitation/index.tsx

@@ -16,7 +16,7 @@ import { useTranslation } from 'react-i18next'
 
 const Invitation = () => {
 
-  const { t } = useTranslation()
+  const { t,i18n } = useTranslation()
   const { walletAddress, contract } = store.state
   const { copyVal } = useCopyLink()
   const [tabIndex, setTabIndex] = useState(0)
@@ -94,6 +94,20 @@ const Invitation = () => {
     }
   }, [])
 
+  const renderTitle = ()=>{
+    if(i18n.language === 'en'){
+      return (
+        <div className='tac mt-1 fz-15'>Up To <span className='fz-24 fz-wb-550'>7%</span> of Referees Staking Rewards</div>
+      )
+    }
+    if(i18n.language === 'hk'){
+      return (
+        <div className='tac mt-1 fz-15'>高達質押人賺取的 <span className='fz-24 fz-wb-550'>7%</span> </div>
+      )
+    }
+    return <div className='tac mt-1 fz-15'>高达质押人赚取的 <span className='fz-24 fz-wb-550'>7%</span> </div>
+  }
+
   return (
     <div className="invitation">
       <div className="watermark-1"></div>
@@ -104,7 +118,8 @@ const Invitation = () => {
         </div>
         <div className='learn-box white'>
           <div className='notify-img'></div>
-          <div className='tac mt-1 fz-15'>{t('Up To 7% of Referees Staking Rewards')}</div>
+          {renderTitle()}
+          {/* <div className='tac mt-1 fz-15'>{t('Up To 7% of Referees Staking Rewards')}</div> */}
           <div className='row-center mt-1'>
             <Button className='modal-button'>{t('Learn More')}</Button>
           </div>

src/pages/my-pledge/index.tsx

@@ -8,11 +8,10 @@ import { useRouter } from '~/hooks/useRouter';
 import UnLogin from '~/components/Unlogin';
 import { eth_pledgeInfo, eth_pledgeRecords } from '~/contract/api';
 import { PledgeInfoType, PledgeWithdrawRecordType } from '~/types/api.d';
-import { calcIncome, getTime, splitAddress, toFixed2 } from '~/utils';
+import { calcExtractableAmount, calcIncome, getTime, splitAddress, toFixed2 } from '~/utils';
 import ModalLoading from '~/components/ModalLoading';
 import { copy } from '~/utils/copy';
 import { useTranslation } from 'react-i18next';
-import { t } from 'i18next';
 
 const MyPledge = () => {
 
@@ -201,6 +200,7 @@ const PledgeContract = (props: PledgeContractProps) => {
   const { data, currentTime, filBalance, pledgeToast, withdrawAmount, pledgeInfosLength, withdrawIncome, hash, setVisible, visible, status, loading } = props
   const { push } = useRouter()
   const [tabIndex, setTabIndex] = useState(0)
+  const {t} = useTranslation()
 
   return (
     <div>
@@ -256,7 +256,7 @@ const PledgeContract = (props: PledgeContractProps) => {
                   </div>
                 </div>
               </div>
-              <div className='flex-2'>{toFixed2(calcIncome(item), 2)} FIL</div>
+              <div className='flex-2'>{toFixed2(calcExtractableAmount(item,currentTime), 2)} FIL</div>
               <div className='flex-2 row-center'>
                 {
                   tabIndex === 0 && (
@@ -302,6 +302,7 @@ const Record = (props: RecordProps) => {
 
   const [tabIndex, setTabIndex] = useState(0)
   const { totalPledge, totalWithdraw, pledgeRecord, pledgeWithdrawRecord, contractAddress } = props;
+  const {t} = useTranslation()
 
   return (
     <div className='record'>

src/pages/nft-detail/index.tsx

@@ -1,7 +1,7 @@
 
-import { t } from 'i18next'
 import { observer } from 'mobx-react'
 import { useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import Button from '~/components/Button'
 import Modal from '~/components/Modal'
 import ModalLoading from '~/components/ModalLoading'
@@ -11,11 +11,12 @@ import { useRouter } from '~/hooks/useRouter'
 import store from '~/store'
 import '~/styles/pledge.scss'
 import { PledgeInfoType } from '~/types/api.d'
-import { calcExtractableAmount, calcReleasedIncome, calcWithdrawnAmount, getTime, splitAddress } from '~/utils'
+import { calcExtractableAmount, calcIncome, calcReleasedIncome, calcWithdrawnAmount, getTime, splitAddress } from '~/utils'
 import { toBigInt } from '~/utils/wei'
 
 const NFTDetail = () => {
 
+  const {t} = useTranslation()
   const { contract, walletAddress } = store.state
   const { copyVal } = useCopyLink()
   const { push, location } = useRouter()
@@ -186,12 +187,17 @@ const NFTDetail = () => {
           </div>
           <div className='divider mt-2'></div>
           {/*  */}
+          
           <div>
             <div className='fz-18 fz-wb-550 mt-2'>{t('Rewards & Withdrawals Details')}</div>
             <div className='mt-1 row-between'>
               <div>{t('Rewards Start Time')}</div>
               <div>{getTime(data.startTime * 1000)}</div>
             </div>
+            <div className='mt-1 row-between'>
+              <div>{t('Accumulative Rewards')}</div>
+              <div>{calcIncome(data)} FIL</div>
+            </div>
             <div className='mt-1 row-between'>
               <div>{t('Rewards Distributed')}</div>
               <div>{calcReleasedIncome(data, currentTime)} FIL</div>

src/pages/pledge/index.tsx

@@ -2,24 +2,26 @@ import { ethers } from 'ethers';
 import { observer } from 'mobx-react';
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Dialog, Toast } from 'react-vant';
+import { Toast } from 'react-vant';
 import Button from '~/components/Button';
-import Loading from '~/components/Loading';
 import Modal from '~/components/Modal';
 import ModalLoading from '~/components/ModalLoading';
 import { eth_pledgeProducts } from '~/contract/api';
 import { useRouter } from '~/hooks/useRouter';
 import store from '~/store';
 import '~/styles/pledge.scss'
+import { Contract_Factory } from '~/types/store';
 import { toFixed2 } from '~/utils';
-import { fromWei, toBigInt, toWei, wei } from '~/utils/wei';
+import { toBigInt, toWei, wei } from '~/utils/wei';
 // 
 const Pledge = () => {
 
   const { t } = useTranslation()
   const { location } = useRouter()
 
-  const { filBalance, walletAddress, contract: { _contract: { Pledge__factory, FIL__factory, Pool__factory } } } = store.state
+  const { filBalance, walletAddress, contract } = store.state
+  const {Pledge__factory, FIL__factory, Pool__factory } = contract._contract ? contract._contract : {} as Contract_Factory
+
   const [pledgeList, setPledgeList] = useState([
     { day: 180, rate: 14 },
     { day: 270, rate: 15 },

src/router/layout/Navbar.tsx

@@ -9,6 +9,7 @@ import { useRouter } from '~/hooks/useRouter'
 import { SOFIL_LANGUAGE } from '~/language'
 import store from '~/store'
 import '~/styles/layout.scss'
+import { openGitBook } from '~/utils'
 import { toBigInt } from '~/utils/wei'
 
 interface NavbarProps {
@@ -42,15 +43,9 @@ const Navbar = (props: NavbarProps) => {
   const langs = useMemo(() => [
     { title: 'English', key: 'en' },
     { title: '简体中文', key: 'zh' },
-    { title: '繁体中文', key: 'hk' },
+    { title: '繁體中文', key: 'hk' },
   ], [])
 
-  const gitbooks = useMemo(() => ({
-    'en': 'https://sofil.gitbook.io/main',
-    'zh': 'https://sofil.gitbook.io/main/v/cn',
-    'hk': 'https://sofil.gitbook.io/main/v/tc'
-  } as { [key: string]: string }), [])
-
   const [currentLang, setCurrentLang] = useState(2)
 
   const setLang = (index: number) => {
@@ -148,8 +143,7 @@ const Navbar = (props: NavbarProps) => {
                       push(item.path)
                       setVisible(false)
                     } else {
-                      const key = langs[currentLang].key;
-                      window.open(gitbooks[key])
+                      openGitBook()
                     }
                   }}>
                     <div></div>

src/styles/admin.scss

@@ -1,4 +1,6 @@
 .admin{
+  background-color: #433978;
+  color: #fff;
   .rv-tabs__nav {
     background: none;
   }

src/styles/home.scss

@@ -14,7 +14,6 @@
       box-sizing: border-box;
       border: 1px solid #4ee1f9;
       box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1608);
-      border: none;
       font-weight: bold;
     }
 
@@ -49,7 +48,6 @@
     background-size: 100% 100%;
     object-fit: cover;
     position: relative;
-    z-index: 1;
     color: $white;
     .box {
       width: 391px;
@@ -209,11 +207,11 @@
   .rv-cell {
     background: $white;
     border-radius: 10px;
-    box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.1608);
   }
 
   .rv-collapse-item {
     border-radius: 20px;
+    box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.1608);
   }
 
   .rv-collapse-item__title--expanded {

src/styles/pledge.scss

@@ -94,6 +94,10 @@
       border: none;
       background: none;
       color: $white;
+
+      &::placeholder{
+        font-size: 14px;
+      }
     }
     .button {
       width: 70px;

src/types/store.d.ts

@@ -28,4 +28,4 @@ interface ContractType {
   _provider: Web3Provider | JsonRpcProvider;
 }
 
-export { StoreLocalStorageKey, ContractType };
+export { StoreLocalStorageKey, ContractType,Contract_Factory };

src/utils/index.ts

@@ -3,6 +3,17 @@ import { Toast } from "react-vant";
 import { PledgeInfoType } from "~/types/api";
 import { toBigInt, toWei } from "./wei";
 import { t } from "i18next";
+import { SOFIL_LANGUAGE } from "~/language";
+
+const openGitBook = ()=>{
+  const obj = {
+    'en': 'https://sofil.gitbook.io/main',
+    'zh': 'https://sofil.gitbook.io/main/v/cn',
+    'hk': 'https://sofil.gitbook.io/main/v/tc'
+  } as {[key:string]:string}
+  const key = window.sessionStorage.getItem(SOFIL_LANGUAGE) || 'hk'
+  window.open(obj[key])
+}
 
 // 切割字符中 ''...''
 const splitAddress = (address: any, index?: number) => {
@@ -184,4 +195,5 @@ export {
   calcIncome,
   calcExtractableAmount,
   calcWithdrawnAmount,
+  openGitBook
 };