fix: copy the active wallet on click

TradeTrust · Jul 2, 2024 · 71aca34 · 71aca34
1 parent eb45d11
commit 71aca34
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 47 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "blockchain:contracts:synpress": "node --experimental-modules ./tests/e2e/setup-contracts.mjs",
     "blockchain:contracts:testcafe": "node --experimental-modules ./src/test/setup-contracts-testcafe.mjs",
     "build": "run-s build:sitemap check-types build:css build:app",
-    "build:dev": "cross-env NODE_ENV=production npm run build",
+    "build:dev": "cross-env NODE_ENV=development npm run build",
     "build:test": "cross-env NODE_ENV=test NET=local npm run build",
     "build:prod": "cross-env NODE_ENV=production NET=mainnet npm run build",
     "build:css": "postcss src/tailwind.css -o src/index.css",
@@ -21,7 +21,7 @@
     "credits": "npx @opengovsg/credits-generator && npx mdpdf ./CREDITS.md ./public/static/common/credits.pdf",
     "dev": "run-p dev:*",
     "dev:css": "npx tailwindcss -i ./src/tailwind.css -o ./src/index.css --watch",
-    "dev:serve": "sleep 2 && cross-env NODE_ENV=production webpack serve",
+    "dev:serve": "sleep 2 && cross-env NODE_ENV=development webpack serve",
     "integration": "testcafe chrome src/**/*.spec.ts",
     "integration:single": "testcafe chrome -L",
     "integration:testcafe:prod": "testcafe --config-file \".testcaferc-prod.json\"",
@@ -80,7 +80,7 @@
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-timer-hook": "^3.0.7",
-    "react-tooltip": "^4.2.21",
+    "react-tooltip": "^4.5.1",
     "redux": "^4.1.0",
     "redux-saga": "^1.1.3",
     "swiper": "8.4.2",
@@ -127,6 +127,7 @@
     "compression-webpack-plugin": "^6.1.1",
     "concurrently": "^6.2.0",
     "copy-webpack-plugin": "^6.4.1",
+    "crypto-browserify": "^3.12.0",
     "css-loader": "^5.2.6",
     "cypress": "^13.7.1",
     "cypress-file-upload": "^5.0.8",
@@ -147,8 +148,11 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "jest-environment-jsdom-sixteen": "^2.0.0",
+    "magic-sdk": "^10.0.0",
     "nodemon": "^2.0.7",
     "npm-run-all": "^4.1.5",
+    "os-browserify": "^0.3.0",
+    "path-browserify": "^1.0.1",
     "postcss": "^8.4.6",
     "postcss-cli": "^8.3.1",
     "prettier": "^2.3.1",
@@ -157,23 +161,19 @@
     "shelljs": "^0.8.5",
     "sitemap": "^7.1.1",
     "storybook": "^8.0.4",
+    "stream-browserify": "^3.0.0",
     "style-loader": "^2.0.0",
     "tailwindcss": "^3.0.23",
     "testcafe": "^2.3.0",
     "ts-jest": "^26.0.0",
+    "ts-node": "^10.9.2",
     "typescript": "^4.3.2",
+    "vm-browserify": "^1.1.2",
     "wait-on": "^5.3.0",
     "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4",
-    "webpack-env": "^0.8.0",
-    "stream-browserify": "^3.0.0",
-    "os-browserify": "^0.3.0",
-    "vm-browserify": "^1.1.2",
-    "crypto-browserify": "^3.12.0",
-    "path-browserify": "^1.0.1",
-    "magic-sdk": "^10.0.0",
-    "ts-node": "^10.9.2"
+    "webpack-env": "^0.8.0"
   },
   "engines": {
     "node": "18.x",

diff --git a/public/static/images/wallet.png b/public/static/images/wallet.png
diff --git a/src/common/contexts/provider.tsx b/src/common/contexts/provider.tsx
@@ -158,8 +158,6 @@ export const ProviderContextProvider: FunctionComponent<ProviderContextProviderP
       throw new Error("Oops! Seems like MetaMask is not installed in your browser");
     }
 
-    console.log("initialize metamask signer");
-    console.log(provider instanceof ethers.providers.Web3Provider);
     const web3Provider = provider as ethers.providers.Web3Provider;
     await web3Provider.send("eth_requestAccounts", []);
     const chainInfo = getChainInfo(currentChainId ?? defaultChainId);

diff --git a/src/common/hooks/useEndorsementChain/useEndorsementChain.integration.test.tsx b/src/common/hooks/useEndorsementChain/useEndorsementChain.integration.test.tsx
@@ -27,7 +27,7 @@ describe("useEndorsementChain|integration", () => {
         () => {
           expect(result.current.endorsementChain).toBeTruthy();
         },
-        { timeout: 80000 }
+        { timeout: 60000 }
       );
     });
     expect(result.current.endorsementChain).toEqual([

diff --git a/...ntPanel/AssetManagementForm/FormVariants/ActionSelectionForm/ActionSelectionForm.test.tsx b/...ntPanel/AssetManagementForm/FormVariants/ActionSelectionForm/ActionSelectionForm.test.tsx
@@ -28,11 +28,11 @@ const defaultProps = {
 };
 
 describe("ActionSelectionForm", () => {
-  it("should display the non-editable beneficiary & holder", async () => {
+  it("should display the account number for active wallet", async () => {
     await act(async () => {
       const container = render(<ActionSelectionForm {...defaultProps} />);
       const activeWalletComponent = container.getByTestId("activeWallet");
-      const holderText = within(activeWalletComponent).getByText("0xa61B056dA0084a5f391EC137583073096880C2e3");
+      const holderText = within(activeWalletComponent).getByText("0xa61B...C2e3");
       expect(activeWalletComponent).not.toBeNull();
       expect(holderText).not.toBeNull();
     });

diff --git a/...agementPanel/AssetManagementForm/FormVariants/ActionSelectionForm/ActionSelectionForm.tsx b/...agementPanel/AssetManagementForm/FormVariants/ActionSelectionForm/ActionSelectionForm.tsx
@@ -4,12 +4,13 @@ import {
   OverlayContext,
   showDocumentTransferMessage,
 } from "@tradetrust-tt/tradetrust-ui-components";
-import React, { FunctionComponent, useContext } from "react";
+import React, { FunctionComponent, useContext, useRef, useState } from "react";
 import { TagBorderedLg } from "../../../../UI/Tag";
 import { AssetInformationPanel } from "../../../AssetInformationPanel";
 import { AssetManagementActions } from "../../../AssetManagementActions";
 import { AssetManagementDropdown } from "../../AssetManagementDropdown";
 import { EditableAssetTitle } from "./../EditableAssetTitle";
+import ReactTooltip from "react-tooltip";
 
 interface ActionSelectionFormProps {
   onSetFormAction: (nextFormAction: AssetManagementActions) => void;
@@ -50,6 +51,9 @@ export const ActionSelectionForm: FunctionComponent<ActionSelectionFormProps> =
   setShowEndorsementChain,
   isTitleEscrow,
 }) => {
+  const [tooltipMessage, setTooltipMessage] = useState("Copy");
+  const tooltipRef = useRef(null);
+
   const canManage =
     canHandleShred ||
     canHandleRestore ||
@@ -74,25 +78,18 @@ export const ActionSelectionForm: FunctionComponent<ActionSelectionFormProps> =
     ); // there is 2 type of errors that will be handled here, 1st = NO_METAMASK (error thrown from provider.tsx), 2nd = NO_USER_AUTHORIZATION (error from metamask extension itself).
   };
 
-  const handleWalletInfoClick = async () => {
-    const { ethereum } = window as any;
-    if (ethereum) {
+  const handleActiveWalletClicked = async () => {
+    if (account) {
       try {
-        await ethereum.request({ method: "eth_requestAccounts" });
-
-        await ethereum.request({
-          method: "wallet_requestPermissions",
-          params: [
-            {
-              eth_accounts: {},
-            },
-          ],
-        });
-      } catch (error) {
-        console.error("User rejected the request or an error occurred", error);
+        await navigator.clipboard.writeText(account);
+        setTooltipMessage("Copied!");
+        ReactTooltip.hide(tooltipRef.current!);
+        setTimeout(() => {
+          ReactTooltip.show(tooltipRef.current!);
+        }, 0);
+      } catch (err) {
+        console.error("Failed to copy: ", err);
       }
-    } else {
-      console.error("MetaMask is not installed");
     }
   };
 
@@ -104,6 +101,7 @@ export const ActionSelectionForm: FunctionComponent<ActionSelectionFormProps> =
       handleMetamaskError(error.message, error.code);
     }
   };
+
   return (
     <>
       <div className="flex flex-wrap justify-between pb-4 -mx-4">
@@ -148,17 +146,26 @@ export const ActionSelectionForm: FunctionComponent<ActionSelectionFormProps> =
         <div className="flex flex-col items-stretch pb-4 ">
           <div className="gap-y-4 lg:ml-auto w-44 flex flex-col">
             {account ? (
-              <div
-                onClick={handleWalletInfoClick}
-                data-testid="activeWallet"
-                className="w-44 p-4 ml-auto flex items-center bg-gray-100 text-gray-800 rounded-lg shadow cursor-pointer hover:bg-gray-200 transition duration-300 ease-in-out select-none"
-              >
-                <img src={"/static/images/wallet.png"} alt="Wallet Icon" className="w-6 h-6 mr-4" />
-                <div className="flex flex-col overflow-hidden">
-                  <p className="text-sm">Active Wallet</p>
-                  <h5 className="text-cerulean-300 text-sm font-bold block overflow-hidden text-ellipsis whitespace-nowrap">{`${account}`}</h5>
+              <>
+                <div
+                  onMouseLeave={() => setTooltipMessage("Copy")}
+                  ref={tooltipRef}
+                  data-tip={tooltipMessage}
+                  data-for="active-wallet-tooltip"
+                  onClick={handleActiveWalletClicked}
+                  data-testid="activeWallet"
+                  className="w-44 px-4 py-1 ml-auto flex items-center bg-gray-100 text-gray-800 rounded-lg shadow cursor-pointer hover:bg-gray-200 transition duration-300 ease-in-out select-none"
+                >
+                  <img src={"/static/images/wallet.png"} alt="Wallet Icon" className="w-6 h-6 mr-4" />
+                  <div className="flex flex-col overflow-hidden">
+                    <p className="text-sm">Active Wallet</p>
+                    <h5 className="text-cerulean-300 text-sm font-bold block whitespace-nowrap">{`${account.slice(
+                      0,
+                      6
+                    )}...${account.slice(-4)}`}</h5>
+                  </div>
                 </div>
-              </div>
+              </>
             ) : (
               <></>
             )}
@@ -198,6 +205,7 @@ export const ActionSelectionForm: FunctionComponent<ActionSelectionFormProps> =
           </div>
         </div>
       )}
+      <ReactTooltip type="light" id="active-wallet-tooltip" effect="solid" getContent={() => tooltipMessage} />
     </>
   );
 };