Merge pull request #784 from Conflux-Chain/s39

feat: add s39 features
Conflux-Chain · Jun 16, 2022 · 12eb0e1 · 12eb0e1
2 parents d7927d3 + 522340c
commit 12eb0e1
Show file tree

Hide file tree

Showing 15 changed files with 470 additions and 89 deletions.
diff --git a/src/app/components/ConnectWallet/Modal.tsx b/src/app/components/ConnectWallet/Modal.tsx
@@ -18,7 +18,6 @@ import { CopyButton } from './../CopyButton';
 import { useCheckHook } from './useCheckHook';
 import { NETWORK_ID, NETWORK_TYPE, NETWORK_TYPES } from 'utils/constants';
 
-import iconLogo from './assets/logo.png';
 import iconFluent from './assets/fluent.svg';
 import iconClose from './assets/close.svg';
 import iconLoading from './assets/loading.svg';
@@ -82,14 +81,8 @@ export const Modal = ({
     login().finally(() => onClose());
   };
 
-  let walletText = t(translations.connectWallet.modal.confluxportal);
-  let walletLogo = iconLogo;
-
-  // @ts-ignore
-  if (window.conflux?.isFluent) {
-    walletText = t(translations.connectWallet.modal.fluentWallet);
-    walletLogo = iconFluent;
-  }
+  let walletText = t(translations.connectWallet.modal.fluentWallet);
+  let walletLogo = iconFluent;
 
   let title: string = t(translations.connectWallet.modal.title);
   let portal: React.ReactNode = walletText;

diff --git a/src/app/components/TxnComponents/Overview.tsx b/src/app/components/TxnComponents/Overview.tsx
@@ -45,6 +45,7 @@ export const Overview = ({ data }) => {
             type={status}
             txExecErrorInfo={txExecErrorInfo}
             address={from}
+            hash={hash}
           ></Status>
         </div>
       </Description>

diff --git a/src/app/components/TxnComponents/Status.tsx b/src/app/components/TxnComponents/Status.tsx
@@ -12,8 +12,7 @@ import { Popover } from '@cfxjs/react-ui';
 import { PopoverProps } from '@cfxjs/react-ui/dist/popover/popover';
 import { useBreakpoint } from 'styles/media';
 import _ from 'lodash';
-import { Link } from 'app/components/Link/Loadable';
-import { formatAddress } from 'utils';
+import { PendingReason } from 'utils/tableColumns/PendingReason';
 
 import imgSuccess from 'images/status/success.svg';
 import imgError from 'images/status/error.svg';
@@ -32,6 +31,7 @@ interface Props {
     message: string;
   };
   address?: string;
+  hash?: string;
 }
 
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
@@ -47,6 +47,7 @@ const StatusComponent = ({
   showTooltip,
   txExecErrorInfo,
   address,
+  hash,
   ...others
 }: StatusProps) => {
   const breakpoint = useBreakpoint();
@@ -118,13 +119,10 @@ const StatusComponent = ({
         <>
           {name}{' '}
           {address ? (
-            <Link
-              href={`/address/${formatAddress(
-                address,
-              )}?transactionType=pending`}
-            >
-              {t(translations.transaction.pendingReasonLink)}
-            </Link>
+            <>
+              <span className="split"></span>
+              <PendingReason account={address} hash={hash} />
+            </>
           ) : null}
         </>
       );
@@ -251,6 +249,9 @@ const StyledStatusWrapper = styled.span`
     color: #97a3b4;
     margin-left: 0.5714rem;
   }
+  .split {
+    margin-left: 10px;
+  }
 `;
 
 const StyledPopoverWrapper = styled.div`

diff --git a/src/app/containers/NFTAsset/index.tsx b/src/app/containers/NFTAsset/index.tsx
@@ -22,10 +22,11 @@ import {
   reqNFT1155Tokens,
 } from 'utils/httpRequest';
 import qs from 'query-string';
+import { TABLE_LIST_LIMIT } from 'utils/constants';
 
 type NFTBalancesType = {
-  type: string;
   contract: string;
+  type: string;
   name: any;
   balance: number;
   index: number;
@@ -49,11 +50,10 @@ export function NFTAsset({
   const { address } = useParams<{
     address?: string;
   }>();
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
   const history = useHistory();
   const { pathname, search } = useLocation();
   const { NFTAddress, skip = '0', limit = '12', ...others } = qs.parse(search);
-  const lang = i18n.language.includes('zh') ? 'zh' : 'en';
   const [loading, setLoading] = useState<boolean>(false);
   const [hasSearched, setHasSearched] = useState<boolean>(false);
   const [NFTs, setNFTs] = useState<any[]>([]);
@@ -64,6 +64,7 @@ export function NFTAsset({
     type,
   });
   const [total, setTotal] = useState(0);
+  const [listLimit, setListLimit] = useState(TABLE_LIST_LIMIT);
 
   const pageSize = Number(limit);
   const page = Math.floor((Number(skip) || 0) / pageSize) + 1;
@@ -90,6 +91,7 @@ export function NFTAsset({
       total: 0,
     };
     let total = 0;
+    let listLimit = 0;
 
     setLoading(true);
     setHasSearched(true);
@@ -115,6 +117,7 @@ export function NFTAsset({
 
       // @ts-ignore
       total = NFTs.total;
+      listLimit = NFTs.listLimit;
     } else {
       if (await validateAddress(address)) {
         const data = await reqNFTBalance({
@@ -137,6 +140,7 @@ export function NFTAsset({
           }
 
           total = selectedNFT.balance;
+          listLimit = selectedNFT.balance;
 
           if (selectedNFT.type.includes('1155')) {
             NFTs = await reqNFT1155Tokens({
@@ -169,6 +173,10 @@ export function NFTAsset({
     setNFTs(NFTs.list);
     setTotal(total);
     setLoading(false);
+
+    if (listLimit) {
+      setListLimit(listLimit);
+    }
   };
 
   const handlePaginationChange = (page, pageSize) => {
@@ -205,6 +213,27 @@ export function NFTAsset({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [address, NFTAddress, skip, limit, contract, type]);
 
+  // 721 and 1155 show different tip
+  let totalTip = '';
+  let paginationTotal = total;
+  const tip =
+    translations.NFTAsset[
+      (type || selectedNFT.type).includes('721') ? 'totalOf721' : 'totalOf1155'
+    ];
+
+  if (!listLimit || listLimit >= total) {
+    totalTip = t(tip, {
+      amount: toThousands(total),
+    });
+  } else {
+    paginationTotal = listLimit;
+    totalTip = `${t(tip, {
+      amount: toThousands(listLimit),
+    })} ${t(translations.NFTAsset.listLimit, {
+      total: toThousands(total),
+    })}`;
+  }
+
   return (
     <StyledResultWrapper>
       <Card>
@@ -245,9 +274,7 @@ export function NFTAsset({
             ) : (
               <>
                 <div className="total">
-                  {t(translations.blocks.tipCountBefore)} {toThousands(total)}{' '}
-                  {lang === 'zh' ? '个 ' : ''}
-                  {selectedNFT.name || ''} NFT{' '}
+                  {totalTip}
                   <span>
                     {t(translations.contract.address)}:{' '}
                     <AddressContainer value={selectedNFT.contract} />
@@ -274,9 +301,7 @@ export function NFTAsset({
               hideOnSinglePage={true}
               current={page}
               defaultPageSize={pageSize}
-              total={total}
-              // showSizeChanger={false}
-              // showQuickJumper={false}
+              total={paginationTotal}
               pageSizeOptions={['12', '24', '60', '120']}
               onChange={handlePaginationChange}
             />

diff --git a/src/app/containers/Transaction/Detail.tsx b/src/app/containers/Transaction/Detail.tsx
@@ -723,6 +723,7 @@ export const Detail = () => {
               type={status}
               txExecErrorInfo={txExecErrorInfo}
               address={from}
+              hash={routeHash}
             ></Status>
           </SkeletonContainer>
         </Description>

diff --git a/src/app/containers/Transactions/PendingTxns.tsx b/src/app/containers/Transactions/PendingTxns.tsx
@@ -2,13 +2,11 @@ import React, { useEffect, useState } from 'react';
 import { tokenColunms, transactionColunms } from 'utils/tableColumns';
 import { TablePanel as TablePanelNew } from 'app/components/TablePanelNew';
 import { useTranslation } from 'react-i18next';
-import SDK from 'js-conflux-sdk/dist/js-conflux-sdk.umd.min.js';
 import { translations } from 'locales/i18n';
 import BigNumber from 'bignumber.js';
-// import { toThousands } from 'utils';
 import { TxnSwitcher, Title } from './components';
 import { isAccountAddress } from 'utils';
-import { getAccountPendingTransactions } from 'utils/rpcRequest';
+import { reqPendingTxs } from 'utils/httpRequest';
 
 interface Props {
   address: string;
@@ -34,19 +32,26 @@ export const PendingTxns = ({ address }: Props) => {
         ...state,
         loading: true,
       });
-      getAccountPendingTransactions(
-        address,
-        undefined,
-        SDK.format.hex(10), // default limit
-      )
+
+      reqPendingTxs({
+        query: {
+          accountAddress: address,
+        },
+      })
         .then(resp => {
           if (resp) {
             try {
-              const { firstTxStatus, pendingCount, pendingTransactions } = resp;
+              const {
+                firstTxStatus,
+                pendingCount,
+                pendingTransactions,
+                pendingDetail,
+              } = resp;
               const list = pendingTransactions.slice(0, 10).map((p, index) => {
                 p.status = '4';
                 if (!index) {
                   p.reason = firstTxStatus;
+                  p.pendingDetail = pendingDetail;
                 }
                 return p;
               });

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -3,6 +3,11 @@
     "title": "Conflux BlockChain Explorer",
     "description": "BlockChain Explorer for Conflux Network"
   },
+  "NFTAsset": {
+    "totalOf721": "Latest {{amount}} active tokens",
+    "totalOf1155": "Latest {{amount}} unique tokens",
+    "listLimit": "(From a total of {{total}} tokens)"
+  },
   "nftDetail": {
     "title": "NFT Detail",
     "details": "Details",
@@ -299,11 +304,6 @@
     "pendingTotal": "Showing the last 10 pending txns (A total of {{total}} pending txns)",
     "pendingTip": "Only pending transactions with a confirmation time of more than 5 minutes are shown.",
     "pendingReasonTip": "; the reason of pending txn: ",
-    "pendingReason": {
-      "futureNonce": "Wrong nonce",
-      "notEnoughCash": "Insufficient balance",
-      "ready": "Ready to pack"
-    },
     "viewTxn": "View {{type}}"
   },
   "cfxTransfers": {
@@ -1349,6 +1349,48 @@
       "hex": "Hex",
       "text": "Text",
       "number": "Number"
+    },
+    "pending": {
+      "view": "View detail",
+      "detail": "Detail: ",
+      "tip": "Tip: ",
+      "reference": "Reference: ",
+      "link": "https://developer.confluxnetwork.org/sending-tx/en/why_tx_is_pending"
+    },
+    "pendingDetails": {
+      "futrueNonce": {
+        "summary": "Discontinuous nonce",
+        "detail": "Discontinuous nonce, the account nonce is {{stateNonce}}, current transaction config nonce is {{txNonce}}.",
+        "tip": "Supplement transactions with missing nonces."
+      },
+      "notEnoughCash": {
+        "summary": "Insufficient balance",
+        "contractCreateAndToEOA": {
+          "detail": "Insufficient balance. Total needs: {{total}} CFX = value ({{value}}) + gas ({{gas}}) * gasPrice ({{gasPrice}}) + storageLimit ({{storageLimit}}) * storagePrice (10^18/1024). Balance: {{balance}} CFX.",
+          "tip": "1. Increase balance 2. gasPrice or storageLimit is too large, please update gas fee, gas price"
+        },
+        "toContract": {
+          "detail": "Insufficient balance. Total needs: {{total}} CFX = value ({{value}}) + gas ({{gas}}) * gasPrice ({{gasPrice}}) + storageLimit ({{storageLimit}}) * storagePrice (10^18/1024){{gasSponsor}}{{storageSponsor}}{{reason}}. Balance: {{balance}} CFX.",
+          "tip": "1. Increase balance 2. gasPrice or storageLimit is too large, please update gas fee, gas price",
+          "reason": {
+            "notSponsored": ", not sponsored",
+            "exceedUpperBound": "; gas fee sponsored failed, exceed sponsor upperbound ({{sponsorGasBound}})",
+            "exceedGasFeeBalance": "; gas fee sponsored failed, exceed sponsor balance ({{sponsorBalanceForGas}})",
+            "exceedStorageFeeBalance": "; storage fee sponsored failed, exceed sponsor balance ({{sponsorBalanceForCollateral}})"
+          }
+        }
+      },
+      "readyToPack": {
+        "summary": "Ready to pack",
+        "epochExceed": {
+          "detail": "The gap of transaction config epoch and latest epoch is more than 100000. Transaction config epoch is {{proposedEpoch}}，latest epoch is {{confirmedEpoch}}.",
+          "tip": "Resend transaction with latest epoch."
+        },
+        "lowGasPrice": {
+          "detail": "Gas price is too low. Transaction config gas price is {{txGasPrice}}.",
+          "tip": "Increase gas price to speedup transaction."
+        }
+      }
     }
   },
   "block": {
@@ -1550,7 +1592,6 @@
     "modal": {
       "title": "Connect to a wallet",
       "installFluentWallet": "Install Fluent Wallet",
-      "confluxportal": "ConfluxPortal",
       "fluentWallet": "Fluent Wallet",
       "initializing": "Initializing...",
       "errorConnecting": "Error connecting...",