feat/770: Signing updates for Ledger HW Wallet (#815)

* fix: fix react errors and handle reject sign tx * feat: update to support v0.0.6 of zondax package * feat: hook up signing for Ledger HW wallet * fix: iterate properly through each Ledger signature * feat: remove tx_type and wrapper_tx_msg from BuiltTx * feat: update Ledger approval to handle multiple tx * fix: fixed issue with batching of Ledger signed Tx * docs: update docs for types * fix: refactor to support multiple Ledger txs * Extension: Approval UI updates (#956) * feat: remove tx_type and wrapper_tx_msg from BuiltTx * feat: update build folder * feat: add step buttons * feat: update sign tx layout * feat: update border radius --------- Co-authored-by: Harrison Mendonça <[email protected]> --------- Co-authored-by: Harrison Mendonça <[email protected]>
anoma · Aug 2, 2024 · c716eb1 · c716eb1
1 parent 1647f21
commit c716eb1
Show file tree

Hide file tree

Showing 71 changed files with 976 additions and 676 deletions.
diff --git a/apps/extension/README.md b/apps/extension/README.md
@@ -38,13 +38,13 @@ yarn lint:fix
 
 ## Installation of extension
 
-Once you have run `yarn build`, you can use the files in `./dist` to install the extension:
+Once you have run `yarn build`, you can use the files in `./build` to install the extension:
 
 ### Chrome
 
 1. In Chrome, select `Manage Extensions`
 2. Click the toggle to enable `Developer Mode`
-3. Click `Load Unpacked` and point to the `dist` folder in this project
+3. Click `Load Unpacked` and point to the `build` folder in this project
 
 ### Firefox
 

diff --git a/apps/extension/package.json b/apps/extension/package.json
@@ -41,7 +41,7 @@
     "@ledgerhq/hw-transport": "^6.30.0",
     "@ledgerhq/hw-transport-webhid": "^6.28.0",
     "@ledgerhq/hw-transport-webusb": "^6.28.0",
-    "@zondax/ledger-namada": "^0.0.4",
+    "@zondax/ledger-namada": "^0.0.6",
     "bignumber.js": "^9.1.1",
     "buffer": "^6.0.3",
     "dompurify": "^3.0.2",

diff --git a/apps/extension/src/App/index.tsx b/apps/extension/src/App/index.tsx
@@ -9,20 +9,17 @@ import "@namada/components/src/base.css";
 import "../global.css";
 import "../tailwind.css";
 
-export default ((): void => {
-  const container = document.getElementById("root");
-  const root = createRoot(container!);
-  root.render(
-    <React.StrictMode>
-      <HashRouter>
-        <RequesterProvider>
-          <VaultContextWrapper>
-            <AccountContextWrapper>
-              <App />
-            </AccountContextWrapper>
-          </VaultContextWrapper>
-        </RequesterProvider>
-      </HashRouter>
-    </React.StrictMode>
-  );
-})();
+const container = document.getElementById("root")!;
+createRoot(container).render(
+  <React.StrictMode>
+    <HashRouter>
+      <RequesterProvider>
+        <VaultContextWrapper>
+          <AccountContextWrapper>
+            <App />
+          </AccountContextWrapper>
+        </VaultContextWrapper>
+      </RequesterProvider>
+    </HashRouter>
+  </React.StrictMode>
+);
diff --git a/apps/extension/src/Approvals/Approvals.tsx b/apps/extension/src/Approvals/Approvals.tsx
@@ -23,7 +23,7 @@ export type ApprovalDetails = {
   signer: string;
   accountType: AccountType;
   msgId: string;
-  txDetails: TxDetails;
+  txDetails: TxDetails[];
 };
 
 export type SignArbitraryDetails = {
@@ -55,11 +55,11 @@ export const Approvals: React.FC = () => {
         />
         <Route
           path={TopLevelRoute.ConfirmSignTx}
-          element={<ConfirmSignTx details={details} />}
+          element={details && <ConfirmSignTx details={details} />}
         />
         <Route
           path={TopLevelRoute.ConfirmLedgerTx}
-          element={<ConfirmSignLedgerTx details={details} />}
+          element={details && <ConfirmSignLedgerTx details={details} />}
         />
         <Route
           path={TopLevelRoute.ApproveConnection}
@@ -75,7 +75,11 @@ export const Approvals: React.FC = () => {
         />
         <Route
           path={TopLevelRoute.ConfirmSignArbitrary}
-          element={<ConfirmSignature details={signArbitraryDetails} />}
+          element={
+            signArbitraryDetails && (
+              <ConfirmSignature details={signArbitraryDetails} />
+            )
+          }
         />
       </Routes>
     </Container>

diff --git a/apps/extension/src/Approvals/ApproveIcon.tsx b/apps/extension/src/Approvals/ApproveIcon.tsx
@@ -0,0 +1,32 @@
+export const ApproveIcon = (): JSX.Element => {
+  return (
+    <svg
+      width="43"
+      height="38"
+      viewBox="0 0 43 38"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0.75293 27.1844V37.5975H16.5737V35.2882H3.05806V27.1844H0.75293ZM40.5084 27.1844V35.2882H26.9928V37.597H42.8136V27.1844H40.5084ZM0.75293 0.924805V11.3379H3.05806V3.23359H16.5737V0.924805H0.75293ZM26.9928 0.924805V3.23359H40.5084V11.3379H42.8136V0.924805H26.9928Z"
+        fill="#FFFF00"
+      />
+      <rect
+        x="23.0275"
+        y="24.2188"
+        width="6.00145"
+        height="12.3284"
+        transform="rotate(135 23.0275 24.2188)"
+        fill="#FFFF00"
+      />
+      <rect
+        x="29.2552"
+        y="9.59766"
+        width="6.00145"
+        height="20.6767"
+        transform="rotate(45 29.2552 9.59766)"
+        fill="#FFFF00"
+      />
+    </svg>
+  );
+};
diff --git a/apps/extension/src/Approvals/ApproveSignArbitrary.tsx b/apps/extension/src/Approvals/ApproveSignArbitrary.tsx
@@ -31,7 +31,7 @@ export const ApproveSignArbitrary: React.FC<Props> = ({
   const navigate = useNavigate();
   const params = useSanitizedParams();
   const requester = useRequester();
-  const signer = params?.signer;
+  const signer = params.signer!;
   const query = useQuery();
   const { msgId } = query.getAll();
 

diff --git a/apps/extension/src/Approvals/ApproveSignTx.tsx b/apps/extension/src/Approvals/ApproveSignTx.tsx
@@ -85,20 +85,23 @@ export const ApproveSignTx: React.FC<Props> = ({ details, setDetails }) => {
 
   const getDataAsText = (): string => {
     if (!details) return "";
-    return JSON.stringify(
-      {
-        ...details.txDetails,
-        commitments: details.txDetails.commitments.map((cmt) => ({
-          ...cmt,
-          txType: TxTypeLabel[cmt.txType as TxType],
-        })),
-      },
-      null,
-      2
-    );
+
+    const data = details.txDetails.map((d) => ({
+      ...d,
+      commitments: d.commitments.map((cmt) => ({
+        ...cmt,
+        txType: TxTypeLabel[cmt.txType as TxType],
+      })),
+    }));
+
+    return JSON.stringify(data.length === 1 ? data[0] : data, null, 2);
   };
 
-  const numberOfTx = details?.txDetails.commitments.length || 0;
+  const numberOfTx =
+    details?.txDetails.reduce((len, details) => {
+      return len + details.commitments.length || 0;
+    }, 0) || 0;
+
   return (
     <Stack
       className="h-full text-white pt-4 pb-6"
@@ -112,14 +115,17 @@ export const ApproveSignTx: React.FC<Props> = ({ details, setDetails }) => {
             onChangeViewData={setDisplayTransactionData}
             viewTransactionData={displayTransactionData}
           />
-          {!displayTransactionData &&
-            details?.txDetails?.commitments?.length && (
-              <Stack gap={1}>
-                {details.txDetails.commitments.map((tx, i) => (
-                  <Commitment key={i} commitment={tx} />
-                ))}
-              </Stack>
-            )}
+          {!displayTransactionData && (
+            <Stack gap={1}>
+              {details?.txDetails?.map(
+                ({ commitments }) =>
+                  commitments?.length &&
+                  commitments.map((tx, i) => (
+                    <Commitment key={`${tx.hash}-${i}`} commitment={tx} />
+                  ))
+              )}
+            </Stack>
+          )}
           {displayTransactionData && details?.txDetails && (
             <TransactionDataPanel data={getDataAsText()} />
           )}

diff --git a/apps/extension/src/Approvals/ConfirmSignArbitrary.tsx b/apps/extension/src/Approvals/ConfirmSignArbitrary.tsx
@@ -18,11 +18,11 @@ import { Ports } from "router";
 import { closeCurrentTab } from "utils";
 
 type Props = {
-  details?: SignArbitraryDetails;
+  details: SignArbitraryDetails;
 };
 
 export const ConfirmSignature: React.FC<Props> = ({ details }) => {
-  const { msgId, signer } = details || {};
+  const { msgId, signer } = details;
 
   const navigate = useNavigate();
   const requester = useRequester();
@@ -32,10 +32,6 @@ export const ConfirmSignature: React.FC<Props> = ({ details }) => {
   const [statusInfo, setStatusInfo] = useState("");
 
   const handleApproveSignature = useCallback(async (): Promise<void> => {
-    if (!msgId || !signer) {
-      throw new Error("Not all required arguments were provided!");
-    }
-
     const address = shortenAddress(signer, 24);
 
     setStatus(Status.Pending);