Merge pull request #420 from TosiDrop/master

Release 3.2.0
TosiDrop · Mar 12, 2023 · 8060c90 · 8060c90
2 parents dd9130c + 4cfaa8c
commit 8060c90
Show file tree

Hide file tree

Showing 27 changed files with 864 additions and 829 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -7,8 +7,7 @@
     "npm": ">=9"
   },
   "dependencies": {
-    "@emurgo/cardano-serialization-lib-asmjs": "^11.3.0",
-    "@emurgo/cip14-js": "^3.0.1",
+    "@cardano-sdk/cip30": "^0.5.0",
     "@fortawesome/fontawesome-common-types": "^6.3.0",
     "@fortawesome/fontawesome-svg-core": "^6.3.0",
     "@fortawesome/free-brands-svg-icons": "^6.3.0",
@@ -19,7 +18,6 @@
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "axios": "^0.27.2",
-    "buffer": "^6.0.3",
     "bulma": "^0.9.3",
     "copy-to-clipboard": "^3.3.2",
     "react": "^17.0.2",

diff --git a/client/src/components/Claim/SendAdaInfo/index.tsx b/client/src/components/Claim/SendAdaInfo/index.tsx
@@ -1,13 +1,11 @@
-import { useState } from "react";
 import QRCode from "react-qr-code";
 import { useSelector } from "react-redux";
 
+import Copyable from "src/components/Copyable";
 import Spinner from "src/components/Spinner";
-import { isTxHash } from "src/utils";
+import useTransfer from "src/hooks/cardano/useTransfer";
 import { RootState } from "src/store";
-import Copyable from "src/components/Copyable";
 import { lovelaceToAda } from "src/utils";
-import useErrorHandler from "src/hooks/useErrorHandler";
 
 interface Params {
   txDetail: any;
@@ -27,14 +25,13 @@ const SendAdaInfo = ({
   setTransactionId,
   setTransactionStatus,
 }: Params) => {
-  const { handleError } = useErrorHandler();
-  const connectedWallet = useSelector(
+  const connectedWalletApi = useSelector(
     (state: RootState) => state.wallet.walletApi
   );
   const isWrongNetwork = useSelector(
     (state: RootState) => state.wallet.isWrongNetwork
   );
-  const [sendAdaSpinner, setSendAdaSpinner] = useState(false);
+  const { transfer, loading: transferLoading } = useTransfer();
 
   /**
    * render QR Code
@@ -54,15 +51,15 @@ const SendAdaInfo = ({
    * render button to send ada
    */
   const renderSendAdaButton = () => {
-    if (connectedWallet?.wallet?.api && !isWrongNetwork) {
+    if (connectedWalletApi && !isWrongNetwork) {
       return (
         <div className="w-full flex justify-center">
           <button
             className="tosi-button py-2.5 px-5 rounded-lg flex flex-row items-center"
             onClick={sendADA}
           >
             Send ADA{" "}
-            {sendAdaSpinner ? (
+            {transferLoading ? (
               <div className="ml-2.5">
                 <Spinner></Spinner>
               </div>
@@ -75,29 +72,18 @@ const SendAdaInfo = ({
     }
   };
 
-  /**
-   * function to open wallet and start TX
-   */
   const sendADA = async () => {
-    try {
-      if (txDetail == null) throw new Error("Transaction not found");
-      setSendAdaSpinner(true);
-      const txHash = await connectedWallet?.transferAda(
-        txDetail.withdrawal_address,
-        txDetail.deposit.toString()
-      );
-      if (!txHash) throw new Error("Fail to hash transaction");
-      if (isTxHash(txHash)) {
+    if (txDetail == null) throw new Error("Transaction not found");
+    await transfer(
+      {
+        toAddress: txDetail.withdrawal_address,
+        amountToSend: txDetail.deposit.toString(),
+      },
+      (txId) => {
         setTransactionStatus(TransactionStatusDetail.processing);
-        setTransactionId(txHash);
-      } else {
-        throw new Error("Fail to hash transaction");
+        setTransactionId(txId);
       }
-    } catch (e) {
-      handleError(e);
-    } finally {
-      setSendAdaSpinner(false);
-    }
+    );
   };
 
   return (

diff --git a/client/src/components/Modal/WalletModal.tsx b/client/src/components/Modal/WalletModal.tsx
@@ -1,13 +1,14 @@
 import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useDispatch } from "react-redux";
+import { CardanoTypes } from "src/entities/cardano";
 import useWallet from "src/hooks/useWallet";
 import { hideModal } from "src/reducers/globalSlice";
-import { WalletKeys } from "src/services/connectors/wallet.connector";
 
 export const WalletModal = () => {
   const dispatch = useDispatch();
   const { connectWallet } = useWallet();
+  const cardanoApi = window.cardano;
 
   return (
     <>
@@ -21,24 +22,24 @@ export const WalletModal = () => {
         </div>
       </div>
       <div className="w-full flex flex-col gap-4">
-        {window.cardano ? (
-          Object.keys(WalletKeys).map((key) => {
-            if (window.cardano && window.cardano[key]) {
-              const walletKey = key as WalletKeys;
+        {cardanoApi ? (
+          Object.keys(CardanoTypes.WalletKeys).map((key) => {
+            const typedKey = key as CardanoTypes.WalletKeys;
+            const wallet = cardanoApi[typedKey];
+            if (cardanoApi[typedKey]) {
               return (
                 <div
                   key={key}
                   className="w-full flex flex-row items-center cursor-pointer rounded-lg border-gray-400 border p-2.5"
                   onClick={() => {
                     dispatch(hideModal());
-                    connectWallet(walletKey);
+                    connectWallet(typedKey);
                   }}
                 >
-                  {window.cardano[key].name.charAt(0).toUpperCase() +
-                    window.cardano[key].name.slice(1)}
+                  {wallet.name.charAt(0).toUpperCase() + wallet.name.slice(1)}
                   <img
                     className="ml-auto h-6"
-                    src={window.cardano[key].icon}
+                    src={wallet.icon}
                     alt="wallet"
                   ></img>
                 </div>

diff --git a/client/src/components/WalletSelector/CardanoWalletSelector.tsx b/client/src/components/WalletSelector/CardanoWalletSelector.tsx
@@ -1,70 +1,13 @@
-import { useEffect, useMemo, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import {
-  ModalTypes,
-  WalletInfo,
-  WalletState,
-} from "src/entities/common.entities";
+import { useDispatch } from "react-redux";
+import { ModalTypes } from "src/entities/common.entities";
 import useWallet from "src/hooks/useWallet";
 import { showModal } from "src/reducers/globalSlice";
-import { RootState } from "src/store";
-import { abbreviateAddress } from "src/utils";
 import WalletSelector from "./WalletSelector";
 
 function CardanoWalletSelector() {
   const { connectWallet } = useWallet();
-  const walletInfoNotConnected: WalletInfo = useMemo(
-    () => ({
-      address: "",
-      iconUrl: "",
-      isApiConnected: false,
-    }),
-    []
-  );
 
   const dispatch = useDispatch();
-  const connectedWallet = useSelector(
-    (state: RootState) => state.wallet.walletApi
-  );
-  const isWrongNetwork = useSelector(
-    (state: RootState) => state.wallet.isWrongNetwork
-  );
-
-  const [walletState, setWalletState] = useState<WalletState>(
-    WalletState.notConnected
-  );
-  const [walletInfo, setWalletInfo] = useState<WalletInfo>(
-    walletInfoNotConnected
-  );
-
-  useEffect(() => {
-    async function init() {
-      if (connectedWallet?.wallet?.api) {
-        /** if wallet is connected */
-        try {
-          setWalletState(WalletState.connecting);
-          const addr = abbreviateAddress(await connectedWallet.getAddress());
-          setWalletInfo({
-            address: addr,
-            iconUrl: connectedWallet.wallet.icon,
-            isApiConnected: true,
-          });
-          if (isWrongNetwork) {
-            setWalletState(WalletState.wrongNetwork);
-          } else {
-            setWalletState(WalletState.connected);
-          }
-        } catch (e) {
-          setWalletState(WalletState.notConnected);
-        }
-      } else {
-        /** if no wallet connected */
-        setWalletInfo(walletInfoNotConnected);
-        setWalletState(WalletState.notConnected);
-      }
-    }
-    init();
-  }, [connectedWallet]);
 
   const showWalletSelection = () => {
     dispatch(
@@ -78,8 +21,6 @@ function CardanoWalletSelector() {
     <WalletSelector
       disconnectWallet={() => connectWallet()}
       showWalletSelection={showWalletSelection}
-      walletState={walletState}
-      walletInfo={walletInfo}
     ></WalletSelector>
   );
 }

diff --git a/client/src/components/WalletSelector/Connected.tsx b/client/src/components/WalletSelector/Connected.tsx
@@ -1,20 +1,20 @@
+import { useSelector } from "react-redux";
 import useComponentVisible from "src/hooks/useComponentVisible";
+import { RootState } from "src/store";
+import { abbreviateAddress } from "src/utils";
 import Spinner from "../Spinner";
 import Disconnect from "./Disconnect";
 
 export default function Connected({
-  address,
   connecting,
-  iconUrl,
-  prefix,
   disconnectWallet,
 }: {
-  address: string;
   connecting: boolean;
-  iconUrl?: string;
-  prefix?: string;
   disconnectWallet: () => void;
 }) {
+  const { wallet: connectedWallet, walletAddress: connectedWalletAddress } =
+    useSelector((state: RootState) => state.wallet);
+
   const disconnectButtonMenu = useComponentVisible(false);
 
   const toggleDisconnectButton = () => {
@@ -34,13 +34,14 @@ export default function Connected({
           </div>
         ) : (
           <>
-            {iconUrl ? (
-              <img src={iconUrl} className="h-5" alt="wallet icon"></img>
+            {connectedWallet ? (
+              <img
+                src={connectedWallet.icon}
+                className="h-5"
+                alt="wallet icon"
+              ></img>
             ) : null}
-            <p>
-              {prefix}
-              {address}
-            </p>
+            <p>{abbreviateAddress(connectedWalletAddress)}</p>
           </>
         )}
       </div>

diff --git a/client/src/components/WalletSelector/WalletSelector.tsx b/client/src/components/WalletSelector/WalletSelector.tsx
@@ -1,36 +1,35 @@
-import { WalletInfo, WalletState } from "src/entities/common.entities";
+import { useSelector } from "react-redux";
+import { CardanoTypes } from "src/entities/cardano";
+import { WalletInfo } from "src/entities/common.entities";
+import { RootState } from "src/store";
 import Connect from "./Connect";
 import Connected from "./Connected";
 import WrongNetwork from "./WrongNetwork";
 
 interface Props {
   disconnectWallet: () => void;
   showWalletSelection: () => void;
-  walletState: WalletState;
-  walletInfo: WalletInfo;
+  walletState?: CardanoTypes.WalletState;
+  walletInfo?: WalletInfo;
 }
 
-function WalletSelector({
-  disconnectWallet,
-  showWalletSelection,
-  walletState,
-  walletInfo,
-}: Props) {
+function WalletSelector({ disconnectWallet, showWalletSelection }: Props) {
+  const walletState = useSelector(
+    (state: RootState) => state.wallet.walletState
+  );
+
   switch (walletState) {
-    case WalletState.connecting:
-    case WalletState.connected:
+    case CardanoTypes.WalletState.connecting:
+    case CardanoTypes.WalletState.connected:
       return (
         <Connected
-          address={walletInfo.address}
-          connecting={walletState === WalletState.connecting}
-          iconUrl={walletInfo.iconUrl}
-          prefix={walletInfo.prefix ?? ""}
+          connecting={walletState === CardanoTypes.WalletState.connecting}
           disconnectWallet={disconnectWallet}
         ></Connected>
       );
-    case WalletState.wrongNetwork:
+    case CardanoTypes.WalletState.wrongNetwork:
       return <WrongNetwork disconnectWallet={disconnectWallet}></WrongNetwork>;
-    case WalletState.notConnected:
+    case CardanoTypes.WalletState.notConnected:
     default:
       return <Connect onClick={showWalletSelection}></Connect>;
   }

diff --git a/client/src/entities/cardano.ts b/client/src/entities/cardano.ts
@@ -0,0 +1,30 @@
+export namespace CardanoTypes {
+  export type Address = string;
+
+  export enum WalletKeys {
+    anetawallet = "anetawallet",
+    begin = "begin",
+    cardwallet = "cardwallet",
+    eternl = "eternl",
+    flint = "flint",
+    gerowallet = "gerowallet",
+    nami = "nami",
+    nufi = "nufi",
+    typhoncip30 = "typhoncip30",
+    yoroi = "yoroi",
+    LodeWallet = "LodeWallet",
+  }
+
+  export enum WalletState {
+    notConnected,
+    connecting,
+    connected,
+    wrongNetwork,
+  }
+
+  export enum NetworkId {
+    preview,
+    mainnet,
+    undefined,
+  }
+}