Merge pull request #205 from nervosnetwork/v0.2.0

Chore: bump v0.2.0

CHANGELOG.md

@@ -0,0 +1,21 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## 0.2.0 (2022-10-09)
+
+
+### Bug Fixes
+
+* Token logo for "YOK" and "TAI" ([#178](https://github.com/nervosnetwork/light-godwoken/issues/178))
+* Testnet_v0 is officially deprecated ([#184](https://github.com/nervosnetwork/light-godwoken/issues/184))
+* Withdrawal history list might need pagination ([#190](https://github.com/nervosnetwork/light-godwoken/issues/190))
+* Deposit/Withdraw canceling signature in metamask prompts unknown error ([#192](https://github.com/nervosnetwork/light-godwoken/issues/192))
+
+
+### Features
+
+* replace LightGodwokenConfigMap with LightGodwokenConfig ([f89547d](https://github.com/nervosnetwork/light-godwoken/commits/f89547df037cd6eebe04330ec23edb36db44a47c))
+* make predefined tokens customizable ([ff4ec424](https://github.com/nervosnetwork/light-godwoken/commits/ff4ec4246d73611a079f7c899453089c8fe54ae7))
+* l1-deposit-address and display QRCode for addresses ([eea43ae](https://github.com/nervosnetwork/light-godwoken/commit/eea43aef0fd6a725a90978ceeb4d9d962e4adfcd))

apps/godwoken-bridge/CHANGELOG.md

@@ -0,0 +1,18 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## 0.2.0 (2022-10-09)
+
+
+### Bug Fixes
+
+* Testnet_v0 is officially deprecated ([#184](https://github.com/nervosnetwork/light-godwoken/issues/184))
+* Withdrawal history list might need pagination ([#190](https://github.com/nervosnetwork/light-godwoken/issues/190))
+* Deposit/Withdraw canceling signature in metamask prompts unknown error ([#192](https://github.com/nervosnetwork/light-godwoken/issues/192))
+
+
+### Features
+
+* l1-deposit-address and display QRCode for addresses ([eea43ae](https://github.com/nervosnetwork/light-godwoken/commit/eea43aef0fd6a725a90978ceeb4d9d962e4adfcd))

apps/godwoken-bridge/package.json

@@ -1,6 +1,6 @@
 {
   "name": "godwoken-bridge",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "private": true,
   "scripts": {
     "start": "react-scripts start",
@@ -52,7 +52,7 @@
     "copy-to-clipboard": "^3.3.1",
     "date-fns": "^2.28.0",
     "events": "^3.3.0",
-    "light-godwoken": "0.1.1",
+    "light-godwoken": "^0.2.0",
     "numeral": "^2.0.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

apps/godwoken-bridge/src/components/VersionSelect/index.tsx

@@ -1,6 +1,8 @@
 import React from "react";
-import { useParams, useNavigate } from "react-router-dom";
 import { Select } from "antd";
+import { useParams, useNavigate } from "react-router-dom";
+import { availableVersions } from "../../utils/environment";
+
 const { Option } = Select;
 
 export const VersionSelect: React.FC = () => {
@@ -16,8 +18,11 @@ export const VersionSelect: React.FC = () => {
       value={params.version}
       onChange={handleChange}
     >
-      <Option value="v0">Godwoken V0</Option>
-      <Option value="v1">Godwoken V1</Option>
+      {availableVersions.map((version) => (
+        <Option value={version} key={version}>
+          Godwoken {version.toUpperCase()}
+        </Option>
+      ))}
     </Select>
   );
 };

apps/godwoken-bridge/src/components/WalletConnect/index.tsx

@@ -2,9 +2,10 @@ import { Select } from "antd";
 import styled from "styled-components";
 import { SecondeButton } from "../../style/common";
 import { useLightGodwoken } from "../../hooks/useLightGodwoken";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import detectEthereumProvider from "@metamask/detect-provider";
 import { useNavigate, useParams } from "react-router-dom";
+import { availableVersions } from "../../utils/environment";
 const { Option } = Select;
 const StyleWrapper = styled.div`
   display: flex;
@@ -49,8 +50,11 @@ export const WalletConnect: React.FC = () => {
   return (
     <StyleWrapper>
       <Select className="network-select" value={version} onChange={handleChange}>
-        <Option value="v0">Godwoken V0</Option>
-        <Option value="v1">Godwoken V1</Option>
+        {availableVersions.map((version) => (
+          <Option value={version} key={version}>
+            Godwoken {version.toUpperCase()}
+          </Option>
+        ))}
       </Select>
       <SecondeButton onClick={connect}>Connect</SecondeButton>
     </StyleWrapper>

apps/godwoken-bridge/src/components/WalletInfo/index.tsx

@@ -10,7 +10,7 @@ import { Placeholder } from "../Placeholder";
 import { getDisplayAmount } from "../../utils/formatTokenAmount";
 import { formatToThousands } from "../../utils/numberFormat";
 import { useLightGodwoken } from "../../hooks/useLightGodwoken";
-import { QrCodeModal } from "../QrCode/QrCodeModal";
+import { QrCodeModal } from "../QrCodeModal";
 
 const StyleWrapper = styled.div`
   display: flex;

apps/godwoken-bridge/src/components/Withdrawal/ListV0.tsx

@@ -1,17 +1,18 @@
-import React from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import styled from "styled-components";
 import Tooltip from "antd/lib/tooltip";
 import QuestionCircleOutlined from "@ant-design/icons/lib/icons/QuestionCircleOutlined";
+import { Navigate, useNavigate, useParams } from "react-router-dom";
+import { LightGodwokenV0 } from "light-godwoken";
+import { useInfiniteScroll } from "ahooks";
+import { useQuery } from "react-query";
+import { providers } from "ethers";
 import { LinkList, Tab } from "../../style/common";
 import { useClock } from "../../hooks/useClock";
 import { useLightGodwoken } from "../../hooks/useLightGodwoken";
-import { useQuery } from "react-query";
 import { Placeholder } from "../Placeholder";
-import { LightGodwokenV0 } from "light-godwoken";
 import WithdrawalRequestCard from "./WithdrawalItemV0";
-import { Navigate, useNavigate, useParams } from "react-router-dom";
 import { createLightGodwokenV1 } from "../../utils/lightGodwoken";
-import { providers } from "ethers";
 
 const WithdrawalListDiv = styled.div`
   border-bottom-left-radius: 24px;
@@ -31,43 +32,86 @@ export const WithdrawalList: React.FC = () => {
     navigate(`/${params.version}/withdrawal/${targetStatus}`);
   }
 
-  const lightGodwoken = useLightGodwoken();
   const now = useClock();
+  const lightGodwoken = useLightGodwoken();
+  const lightGodwokenV1 = createLightGodwokenV1(
+    lightGodwoken!.provider.getL2Address(),
+    lightGodwoken!.provider.getNetwork(),
+    (lightGodwoken!.provider.ethereum.provider as providers.Web3Provider).provider,
+  );
 
-  const withdrawalListQuery = useQuery(
-    ["queryWithdrawList", { version: lightGodwoken?.getVersion(), l2Address: lightGodwoken?.provider.getL2Address() }],
-    () => {
-      const lightGodwokenV1 = createLightGodwokenV1(
-        lightGodwoken!.provider.getL2Address(),
-        lightGodwoken!.provider.getNetwork(),
-        (lightGodwoken!.provider.ethereum.provider as providers.Web3Provider).provider,
-      );
+  const listRef = useRef<HTMLDivElement>(null);
+  const withdrawalHistory = useInfiniteScroll(
+    async (data) => {
+      const normalPage = data?.normalpage ? (data?.normalHasMore ? data?.normalpage + 1 : data?.normalPage) : 1;
+      const fastPage = data?.fastPage ? (data?.fastHasMore ? data?.fastPage + 1 : data?.fastPage) : 1;
 
-      const normalWithdrawalList = (lightGodwoken as LightGodwokenV0).listWithdrawWithScannerApi();
-      const fastWithdrawalList = (lightGodwoken as LightGodwokenV0).listFastWithdrawWithScannerApi(lightGodwokenV1);
-      return Promise.all([normalWithdrawalList, fastWithdrawalList]);
+      const [normalList, fastList] = await Promise.all([
+        (() => {
+          if (data?.normalHasMore || normalPage === 1) {
+            return (lightGodwoken as LightGodwokenV0).getWithdrawalHistories(normalPage);
+          } else {
+            return [];
+          }
+        })(),
+        (() => {
+          if (data?.fastPage || fastPage === 1) {
+            return (lightGodwoken as LightGodwokenV0).getFastWithdrawalHistories(lightGodwokenV1, fastPage);
+          } else {
+            return [];
+          }
+        })(),
+      ]);
+      const normalHasMore = normalList.length > 0;
+      const fastHasMore = fastList.length > 0;
+
+      return {
+        initialized: true,
+        list: [...normalList, ...fastList],
+        normalPage,
+        normalHasMore,
+        fastPage,
+        fastHasMore,
+        hasMore: normalHasMore || fastHasMore,
+      };
     },
     {
-      enabled: !!lightGodwoken,
+      manual: true,
+      target: listRef,
+      isNoMore: (data) => data?.hasMore === false,
     },
   );
-  const { data: withdrawalList, isLoading } = withdrawalListQuery;
-  const formattedWithdrawalList = withdrawalList ? [...withdrawalList[0], ...withdrawalList[1]] : [];
-  const sortedWithdrawalList = formattedWithdrawalList.sort(
-    (a, b) => b.withdrawalBlockNumber - a.withdrawalBlockNumber,
-  );
-  const pendingList = sortedWithdrawalList.filter((history) => history.status === "pending");
-  const completedList = sortedWithdrawalList.filter(
-    (history) => history.status === "success" || history.status === "failed",
-  );
 
-  if (!lightGodwoken) {
-    return <WithdrawalListDiv>please connect wallet first</WithdrawalListDiv>;
-  }
+  // When LightGodwoken client rebuild, reset pagination
+  useEffect(() => {
+    if (lightGodwoken && !withdrawalHistory.loading) {
+      withdrawalHistory.mutate(void 0);
+      withdrawalHistory.reload();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lightGodwoken]);
+
+  const isLoading = withdrawalHistory.loading || withdrawalHistory.loadingMore;
+  const withdrawalList = useMemo(() => {
+    const list = withdrawalHistory.data?.list ?? [];
+    if (list.length) {
+      list.sort((a, b) => {
+        return b.withdrawalBlockNumber - a.withdrawalBlockNumber;
+      });
+    }
+    return list;
+  }, [withdrawalHistory.data?.list]);
+  const pendingList = useMemo(() => {
+    return withdrawalList.filter((history) => history.status === "pending");
+  }, [withdrawalList]);
+  const completedList = useMemo(() => {
+    return withdrawalList.filter((history) => history.status !== "pending");
+  }, [withdrawalList]);
+
   if (!isPending && !isCompleted) {
     return <Navigate to={`/${params.version}/withdrawal/pending`} />;
   }
-  if (!withdrawalList) {
+  if (!lightGodwoken || !withdrawalHistory.data?.initialized) {
     return (
       <WithdrawalListDiv>
         <Placeholder />

apps/godwoken-bridge/src/components/Withdrawal/ListV1.tsx

@@ -1,15 +1,16 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
+import { LightGodwokenV1 } from "light-godwoken";
+import { AxiosError } from "axios";
 import styled from "styled-components";
 import Tooltip from "antd/lib/tooltip";
 import QuestionCircleOutlined from "@ant-design/icons/lib/icons/QuestionCircleOutlined";
 import { LinkList, Tab } from "../../style/common";
-import { useQuery } from "react-query";
 import { Navigate, useNavigate, useParams } from "react-router-dom";
+import { useInfiniteScroll } from "ahooks";
 import { useLightGodwoken } from "../../hooks/useLightGodwoken";
 import { Placeholder } from "../Placeholder";
-import WithdrawalRequestCard from "./WithdrawalItemV1";
-import { LightGodwokenV1 } from "light-godwoken";
 import { L1TxHistoryInterface } from "../../hooks/useL1TxHistory";
+import WithdrawalRequestCard from "./WithdrawalItemV1";
 
 const WithdrawalListDiv = styled.div`
   border-bottom-left-radius: 24px;
@@ -36,20 +37,42 @@ export const WithdrawalList: React.FC<Props> = ({ txHistory: localTxHistory }) =
   }
 
   const lightGodwoken = useLightGodwoken();
-  const withdrawalListQuery = useQuery(
-    ["queryWithdrawList", { version: lightGodwoken?.getVersion(), l2Address: lightGodwoken?.provider.getL2Address() }],
-    () => {
-      return (lightGodwoken as LightGodwokenV1).listWithdrawWithScannerApi();
+
+  const listRef = useRef<HTMLDivElement>(null);
+  const withdrawalHistory = useInfiniteScroll(
+    async (data) => {
+      const page = data?.page ? data.page + 1 : 1;
+      const list = await getWithdrawalHistories(lightGodwoken as LightGodwokenV1, page);
+
+      return {
+        list,
+        page,
+        initialized: true,
+        hasMore: list.length > 0,
+      };
     },
     {
-      enabled: !!lightGodwoken,
+      manual: true,
+      target: listRef,
+      isNoMore: (data) => data?.hasMore === false,
     },
   );
-  const { data: withdrawalList, isLoading } = withdrawalListQuery;
 
+  // When LightGodwoken client rebuild, reset pagination
+  useEffect(() => {
+    if (lightGodwoken && !withdrawalHistory.loading) {
+      withdrawalHistory.mutate(void 0);
+      withdrawalHistory.reload();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lightGodwoken]);
+
+  const isLoading = withdrawalHistory.loading || withdrawalHistory.loadingMore;
+
+  const withdrawalList = withdrawalHistory?.data?.list || [];
   const pendingList = withdrawalList?.filter((history) => history.status === "pending") || [];
   const completedList = withdrawalList?.filter((history) => history.status !== "pending") || [];
-  console.log("withdrawalList v1 in local storage", localTxHistory);
+
   const displayLocalTxHistory = localTxHistory
     .filter((history) => history.status === "l2Pending")
     .map((history) => {
@@ -59,13 +82,10 @@ export const WithdrawalList: React.FC<Props> = ({ txHistory: localTxHistory }) =
       };
     });
 
-  if (!lightGodwoken) {
-    return <WithdrawalListDiv>please connect wallet first</WithdrawalListDiv>;
-  }
   if (!isPending && !isCompleted) {
     return <Navigate to={`/${params.version}/withdrawal/pending`} />;
   }
-  if (!withdrawalList) {
+  if (!lightGodwoken || !withdrawalHistory.data?.initialized) {
     return (
       <WithdrawalListDiv>
         <Placeholder />
@@ -98,7 +118,7 @@ export const WithdrawalList: React.FC<Props> = ({ txHistory: localTxHistory }) =
         </div>
       )}
       {isCompleted && (
-        <div className="list pending-list">
+        <div ref={listRef} className="list pending-list">
           {completedList.length === 0 && "There is no completed withdrawal request here"}
           {completedList.map((withdraw, index) => (
             <WithdrawalRequestCard {...withdraw} key={index}></WithdrawalRequestCard>
@@ -109,3 +129,25 @@ export const WithdrawalList: React.FC<Props> = ({ txHistory: localTxHistory }) =
     </WithdrawalListDiv>
   );
 };
+
+async function getWithdrawalHistories(lightGodwoken: LightGodwokenV1, page: number) {
+  try {
+    return await lightGodwoken.getWithdrawalHistories(page);
+  } catch (e) {
+    if (e instanceof AxiosError) {
+      const data = e.response?.data;
+      const status = data?.errors?.status || data?.error_code;
+
+      // 404 usually means we didn't find records of the account
+      if (status && Number(status) === 404) {
+        console.debug(
+          "/api/withdrawal_histories 404: cannot find withdrawal history for",
+          lightGodwoken.provider.getL2Address(),
+        );
+        return [];
+      }
+    }
+
+    throw e;
+  }
+}

apps/godwoken-bridge/src/utils/environment.ts

@@ -1,4 +1,14 @@
+import { GodwokenNetwork, GodwokenVersion } from "light-godwoken";
+
 console.debug("process.env.REACT_APP_NETWORK: ", process.env.REACT_APP_NETWORK);
-console.debug("process.env.NODE_ENV: ", process.env.NODE_ENV);
+export const isMainnet = process.env.REACT_APP_NETWORK === GodwokenNetwork.Mainnet;
+
+// Available network versions,
+// some versions of the network is deprecated
+export const availableNetworkVersions: Record<GodwokenNetwork, GodwokenVersion[]> = {
+  [GodwokenNetwork.Mainnet]: [GodwokenVersion.V1, GodwokenVersion.V0],
+  [GodwokenNetwork.Testnet]: [GodwokenVersion.V1],
+};
 
-export const isMainnet = process.env.REACT_APP_NETWORK === "mainnet";
+export const availableVersions =
+  availableNetworkVersions[isMainnet ? GodwokenNetwork.Mainnet : GodwokenNetwork.Testnet];