Merge branch 'comma-separate-amounts' into 'dev'

Comma separate amounts See merge request ergo/minotaur/minotaur-wallet!40
minotaur-ergo · Dec 1, 2024 · 461076d · 461076d
2 parents 515b26a + bce6626
commit 461076d
Show file tree

Hide file tree

Showing 14 changed files with 108 additions and 72 deletions.
diff --git a/.changeset/bright-teachers-fold.md b/.changeset/bright-teachers-fold.md
@@ -0,0 +1,5 @@
+---
+'minotaur-wallet': minor
+---
+
+Display all values comma separated
diff --git a/apps/wallet/src/components/amounts-display/TokenAmountDisplay.tsx b/apps/wallet/src/components/amounts-display/TokenAmountDisplay.tsx
@@ -1,3 +1,4 @@
+import { commaSeparate } from '@/utils/convert';
 import { createEmptyArray } from '@/utils/functions';
 import React from 'react';
 
@@ -6,13 +7,15 @@ interface TokenAmountDisplayPropsType {
   decimal: number;
   displayDecimal?: number;
 }
+
 const TokenAmountDisplay = (props: TokenAmountDisplayPropsType) => {
   const amount_str =
     createEmptyArray(props.decimal, '0').join('') + props.amount.toString();
-  const valuePart =
+  const valuePart = commaSeparate(
     amount_str
       .substring(0, amount_str.length - props.decimal)
-      .replace(/^0+/, '') || '0';
+      .replace(/^0+/, '') || '0',
+  );
   const decimalPart = amount_str.substring(amount_str.length - props.decimal);
   const decimalPartTrimmed =
     props.displayDecimal === undefined

diff --git a/apps/wallet/src/components/qr-code-scanner/QrCodeDetectedType.tsx b/apps/wallet/src/components/qr-code-scanner/QrCodeDetectedType.tsx
@@ -31,7 +31,7 @@ const QrCodeDetectedType = (props: QrCodeDetectedTypePropsType) => {
   };
   useEffect(() => {
     if (props.scanned !== checked && !checking) {
-      console.log("start process detected type")
+      console.log('start process detected type');
       setChecking(true);
       const selectedTypes = QrCodeTypes.filter((item) =>
         item.detect(props.scanned),
@@ -45,11 +45,11 @@ const QrCodeDetectedType = (props: QrCodeDetectedTypePropsType) => {
     }
   }, [checked, checking, props]);
   const usedWallet = wallet === undefined ? firstWallet : wallet;
-  console.log(selectedType, usedWallet)
+  console.log(selectedType, usedWallet);
   if (checking) {
-    return <LoadingPage/>
+    return <LoadingPage />;
   }
-  if(usedWallet && selectedType !== undefined && selectedType.render){
+  if (usedWallet && selectedType !== undefined && selectedType.render) {
     return (
       <SelectableWalletContext.Provider
         value={{ setWallet: storeWallet, wallet: usedWallet }}
@@ -62,7 +62,7 @@ const QrCodeDetectedType = (props: QrCodeDetectedTypePropsType) => {
           {selectedType.render(props.scanned, props.close)}
         </TxSignContextHandler>
       </SelectableWalletContext.Provider>
-    )
+    );
   }
 };
 

diff --git a/apps/wallet/src/components/qr-code-scanner/QrCodeReaderView.tsx b/apps/wallet/src/components/qr-code-scanner/QrCodeReaderView.tsx
@@ -25,11 +25,11 @@ const QrCodeReaderView = (props: QrCodeReaderViewPropsType) => {
   }, []);
 
   const senDataToCallbacks = (data: string) => {
-    callbacks.forEach(item => item.resolve(data));
+    callbacks.forEach((item) => item.resolve(data));
     setCallbacks([]);
     setOpen(false);
     setData('');
-  }
+  };
 
   const stopScanning = () => {
     callbacks.forEach((item) => item.reject('Canceled by user'));
@@ -47,11 +47,11 @@ const QrCodeReaderView = (props: QrCodeReaderViewPropsType) => {
     setData('');
     setScanning(false);
     setOpen(false);
-  }
+  };
   return (
     <QrCodeContext.Provider
       value={{
-        start: startScan
+        start: startScan,
       }}
     >
       {open && scanning && (
@@ -62,12 +62,16 @@ const QrCodeReaderView = (props: QrCodeReaderViewPropsType) => {
         />
       )}
       <div style={{ display: open && !scanning ? 'block' : 'none' }}>
-        <QrCodeDetectedType scanned={data} open={open} scanning={scanning} close={close} callback={senDataToCallbacks}/>
+        <QrCodeDetectedType
+          scanned={data}
+          open={open}
+          scanning={scanning}
+          close={close}
+          callback={senDataToCallbacks}
+        />
       </div>
 
-      <div style={{ display: open ? 'none' : 'block' }}>
-        {props.children}
-      </div>
+      <div style={{ display: open ? 'none' : 'block' }}>{props.children}</div>
     </QrCodeContext.Provider>
   );
 };

diff --git a/...t/src/components/qr-code-scanner/qrcode-types/cold-signing-request/ColdSignignRequest.tsx b/...t/src/components/qr-code-scanner/qrcode-types/cold-signing-request/ColdSignignRequest.tsx
@@ -47,8 +47,9 @@ const ColdSigningRequest = (props: ColdSigningRequestPropsType) => {
         if (data.sender) {
           const filtered = wallets.filter(
             (item) =>
-              item.addresses.filter((address) => address.address === data.sender)
-                .length > 0,
+              item.addresses.filter(
+                (address) => address.address === data.sender,
+              ).length > 0,
           );
           if (filtered.length >= 1) {
             walletContext.setWallet(filtered[0]);
@@ -68,7 +69,8 @@ const ColdSigningRequest = (props: ColdSigningRequestPropsType) => {
             return (
               wallet.addresses
                 .map((address) => address.address)
-                .filter((address) => inputAddressStr.includes(address)).length > 0
+                .filter((address) => inputAddressStr.includes(address)).length >
+              0
             );
           });
           if (filtered.length === 1) {
@@ -82,7 +84,7 @@ const ColdSigningRequest = (props: ColdSigningRequestPropsType) => {
         txSignContext.setReducedTx(reduced);
         txSignContext.setTx(reduced.unsigned_tx(), boxes);
         setHasError(false);
-      }catch (exp){
+      } catch (exp) {
         console.error(exp);
         setError('Invalid Data Scanned');
         setHasError(true);

diff --git a/apps/wallet/src/components/qr-code-scanner/reader/QrCodeReader.tsx b/apps/wallet/src/components/qr-code-scanner/reader/QrCodeReader.tsx
@@ -11,7 +11,6 @@ import { readClipBoard } from '@/utils/clipboard';
 import { IconButton } from '@mui/material';
 import { useCallback, useEffect, useState } from 'react';
 
-
 interface QrCodeReaderPropsType {
   success: (scanned: string) => unknown;
   fail: () => unknown;
@@ -20,28 +19,28 @@ interface QrCodeReaderPropsType {
 
 const QrCodeReader = (props: QrCodeReaderPropsType) => {
   const [scanned, setScanned] = useState('');
-  const {chunks, error, completed} = useChunks(scanned);
+  const { chunks, error, completed } = useChunks(scanned);
   const [multipleCamera, setMultipleCamera] = useState(false);
   const readClipboard = () => {
     readClipBoard().then((data) => {
       newData(data);
     });
   };
   const newData = useCallback((scanned: string) => {
-    setScanned(scanned)
-  }, [])
+    setScanned(scanned);
+  }, []);
   useEffect(() => {
-    if(completed){
+    if (completed) {
       props.success(completed);
     }
   }, [completed, props]);
   return (
     <AppFrame
       title="Scan QrCode"
-      className='barcode-scanner-modal'
+      className="barcode-scanner-modal"
       navigation={<BackButton onClick={props.closeQrCode} />}
       actions={
-        <div style={{zIndex: 1}}>
+        <div style={{ zIndex: 1 }}>
           <IconButton onClick={readClipboard}>
             <ContentPasteRounded />
           </IconButton>
@@ -52,11 +51,13 @@ const QrCodeReader = (props: QrCodeReaderPropsType) => {
           ) : null}
         </div>
       }
-      toolbar={
-        <ScannedChunkStatus error={error} chunks={chunks} />
-      }
+      toolbar={<ScannedChunkStatus error={error} chunks={chunks} />}
     >
-      <QrCodeReaderSwitch {...props} setSupportMultipleCamera={setMultipleCamera} success={newData}/>
+      <QrCodeReaderSwitch
+        {...props}
+        setSupportMultipleCamera={setMultipleCamera}
+        success={newData}
+      />
       <CameraBox>
         <ScanQrBox>
           <div className="line" />

diff --git a/apps/wallet/src/components/qr-code-scanner/reader/QrCodeReaderWeb.tsx b/apps/wallet/src/components/qr-code-scanner/reader/QrCodeReaderWeb.tsx
@@ -27,10 +27,10 @@ const QrCodeReaderWeb = (props: QrCodeReaderWebPropsType) => {
           left: 0,
           objectFit: 'cover',
           transform: 'scaleX(-1)',
-          zIndex: -1
+          zIndex: -1,
         }}
       />
-      <video/>
+      <video />
       {totalDevices > 1 ? (
         <Fab onClick={() => selectNext}>
           <CameraswitchOutlined />

diff --git a/apps/wallet/src/components/qr-code-scanner/reader/ScannedChunkStatus.tsx b/apps/wallet/src/components/qr-code-scanner/reader/ScannedChunkStatus.tsx
@@ -1,7 +1,6 @@
 import StatusBox from '@/components/qr-code-scanner/reader/StatusBox';
 import { Box, Typography } from '@mui/material';
 
-
 interface ScannedChunkStatusPropsType {
   chunks?: Array<string>;
   error?: string;
@@ -13,16 +12,18 @@ const ScannedChunkStatus = (props: ScannedChunkStatusPropsType) => {
       <Typography color="warning.light" mb={3}>
         {props.error}
       </Typography>
-      <Box display="flex" style={{zIndex: 10000}} flexWrap="wrap" justifyContent="center">
+      <Box
+        display="flex"
+        style={{ zIndex: 10000 }}
+        flexWrap="wrap"
+        justifyContent="center"
+      >
         {(props.chunks ?? []).map((item, index) => (
-          <StatusBox
-            value={item}
-            key={index}
-          />
+          <StatusBox value={item} key={index} />
         ))}
       </Box>
     </Box>
-  )
-}
+  );
+};
 
 export default ScannedChunkStatus;
diff --git a/apps/wallet/src/components/qr-code-scanner/reader/StatusBox.tsx b/apps/wallet/src/components/qr-code-scanner/reader/StatusBox.tsx
@@ -1,18 +1,21 @@
 import { CheckCircleOutline, RadioButtonUnchecked } from '@mui/icons-material';
 import { Box } from '@mui/material';
 
-
 interface StatusBoxPropsTypes {
   value: string;
 }
 
 const StatusBox = (props: StatusBoxPropsTypes) => {
   const scanned = props.value !== '';
   return (
-    <Box p={0} display="flex" color={scanned ? "success.light" : undefined}>
-      {scanned ? <CheckCircleOutline fontSize="small"/> : <RadioButtonUnchecked fontSize="small"/>}
+    <Box p={0} display="flex" color={scanned ? 'success.light' : undefined}>
+      {scanned ? (
+        <CheckCircleOutline fontSize="small" />
+      ) : (
+        <RadioButtonUnchecked fontSize="small" />
+      )}
     </Box>
   );
-}
+};
 
 export default StatusBox;
diff --git a/apps/wallet/src/hooks/useChunks.ts b/apps/wallet/src/hooks/useChunks.ts
@@ -4,60 +4,70 @@ import { useEffect, useState } from 'react';
 const useChunks = (scanned: string) => {
   const [chunks, setChunks] = useState<Array<string>>([]);
   const [completed, setCompleted] = useState<string>('');
-  const [type, setType] = useState<string>('')
+  const [type, setType] = useState<string>('');
   const [loaded, setLoaded] = useState('');
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
   useEffect(() => {
-    if(!loading && loaded !== scanned) {
-      setLoading(true)
+    if (!loading && loaded !== scanned) {
+      setLoading(true);
       try {
         const scannedJSON = JSON.parse(scanned);
         if (type !== '') {
-          if (!Object.prototype.hasOwnProperty.call(scannedJSON, type) || scannedJSON.n !== chunks.length) {
-            setError('It seems qrcode changed. Please close qrcode scanner and try again');
-          }else if(scannedJSON.p > scannedJSON.n){
+          if (
+            !Object.prototype.hasOwnProperty.call(scannedJSON, type) ||
+            scannedJSON.n !== chunks.length
+          ) {
+            setError(
+              'It seems qrcode changed. Please close qrcode scanner and try again',
+            );
+          } else if (scannedJSON.p > scannedJSON.n) {
             setError('Invalid QrCode Scanned');
           } else {
-            setChunks(chunks => {
+            setChunks((chunks) => {
               const newChunks = [...chunks];
-              newChunks[scannedJSON.p - 1] = scannedJSON[type]
+              newChunks[scannedJSON.p - 1] = scannedJSON[type];
               return newChunks;
-            })
+            });
           }
         } else {
-          const newType = Object.keys(scannedJSON).filter(item => !['p', 'n'].includes(item))[0];
+          const newType = Object.keys(scannedJSON).filter(
+            (item) => !['p', 'n'].includes(item),
+          )[0];
           setType(newType);
-          if(!scannedJSON.n || scannedJSON.n === 1){
-            setCompleted(JSON.stringify({[newType]: scannedJSON[newType]}));
-          }else{
+          if (!scannedJSON.n || scannedJSON.n === 1) {
+            setCompleted(JSON.stringify({ [newType]: scannedJSON[newType] }));
+          } else {
             const newChunks = createEmptyArray(scannedJSON.n, '');
             newChunks[scannedJSON.p - 1] = scannedJSON[newType];
-            setChunks(newChunks)
+            setChunks(newChunks);
           }
         }
         setLoaded(scanned);
         setLoading(false);
       } catch (e) {
         if (chunks.length === 0) {
-          setCompleted(scanned)
+          setCompleted(scanned);
         } else {
-          setError('Invalid Data Scanned')
+          setError('Invalid Data Scanned');
         }
       }
     }
-  }, [scanned, loaded, loading, chunks,type]);
+  }, [scanned, loaded, loading, chunks, type]);
   useEffect(() => {
-    if(chunks.length > 0 && chunks.filter(item => item === '').length === 0){
-      setCompleted(JSON.stringify({[type]: chunks.join('')}));
+    if (
+      chunks.length > 0 &&
+      chunks.filter((item) => item === '').length === 0
+    ) {
+      setCompleted(JSON.stringify({ [type]: chunks.join('') }));
     }
   }, [type, chunks]);
   return {
     chunks,
     error,
     loading,
-    completed
-  }
+    completed,
+  };
 };
 
 export default useChunks;
diff --git a/apps/wallet/src/hooks/useQrReader.ts b/apps/wallet/src/hooks/useQrReader.ts
@@ -21,12 +21,12 @@ const useQrReader = (
         },
       )
       .then((controls) => {
-        console.log("initialized")
-        if(controller.current) controller.current.stop();
+        console.log('initialized');
+        if (controller.current) controller.current.stop();
         controller.current = controls;
       })
       .catch((error) => {
-        console.log(`error ${error}`)
+        console.log(`error ${error}`);
         errorCallback(error);
       });
     return () => {

diff --git a/apps/wallet/src/pages/wallet-add/WalletAdd.tsx b/apps/wallet/src/pages/wallet-add/WalletAdd.tsx
@@ -8,9 +8,6 @@ import { RouteMap } from '@/router/routerMap';
 import ItemCard from './components/item-card/ItemCard';
 import BackButtonRouter from '@/components/back-button/BackButtonRouter';
 
-
-
-
 const AddWallet = () => {
   return (
     <AppFrame title="Add Wallet" navigation={<BackButtonRouter />}>