Merge branch 'fix/misc-guard-app-issues' into 'dev'

misc bug fixes, refactorings and added features for guard app Closes #99 See merge request ergo/rosen-bridge/ui!75
rosen-bridge · Oct 16, 2023 · 115d0d5 · 115d0d5
2 parents d0aadbe + 624b3a8
commit 115d0d5
Show file tree

Hide file tree

Showing 30 changed files with 598 additions and 216 deletions.
diff --git a/apps/guard/app/(dashboard)/@infoWidgets/WalletWidget.tsx b/apps/guard/app/(dashboard)/@infoWidgets/WalletWidget.tsx
@@ -1,12 +1,19 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
 
+import { Copy, QrcodeScan } from '@rosen-bridge/icons';
 import {
   Box,
   Card,
-  styled,
-  Typography,
-  Id,
   CircularProgress,
+  Grid,
+  IconButton,
+  Id,
+  SvgIcon,
+  Typography,
+  styled,
+  SuccessfulCopySnackbar,
+  QrCodeModal,
 } from '@rosen-bridge/ui-kit';
 import { AugmentedPalette } from '@rosen-ui/types';
 import { getDecimalString } from '@rosen-ui/utils';
@@ -50,6 +57,7 @@ const WalletWidgetBase = styled(Card)<WidgetCardProps>(
       '& .heading': {
         fontSize: theme.typography.body2.fontSize,
         opacity: 0.8,
+        display: 'inline',
       },
       '& .address': {
         fontSize: theme.typography.body2.fontSize,
@@ -58,8 +66,7 @@ const WalletWidgetBase = styled(Card)<WidgetCardProps>(
       '& .actions': {
         visibility: 'hidden',
         float: 'right',
-        marginTop: theme.spacing(1),
-        marginLeft: theme.spacing(1),
+        margin: theme.spacing(0.5),
       },
     },
     '&:hover .address-container': {
@@ -90,38 +97,98 @@ const WalletWidget = ({
   tokenInfoWithAddresses,
   color,
   isLoading,
-}: WalletWidgetProps) => (
-  <WalletWidgetBase widgetColor={color}>
-    <Typography className="title">{title}</Typography>
-    {isLoading ? (
-      <CircularProgress color="inherit" size={16} sx={{ mt: 1 }} />
-    ) : (
-      <>
-        <Typography className="value">
+}: WalletWidgetProps) => {
+  const [snackbarOpen, setSnackbarOpen] = React.useState(false);
+  const [modalAddress, setModalAddress] = React.useState<string | null>(null);
+
+  const handleSnackbarClose = (
+    event: React.SyntheticEvent | Event,
+    reason?: string,
+  ) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+    setSnackbarOpen(false);
+  };
+
+  const handleCopy = async () => {
+    setSnackbarOpen(true);
+  };
+
+  return (
+    <WalletWidgetBase widgetColor={color}>
+      <Typography className="title">{title}</Typography>
+      {isLoading ? (
+        <CircularProgress color="inherit" size={16} sx={{ mt: 1 }} />
+      ) : (
+        <>
+          <Typography className="value">
+            {tokenInfoWithAddresses.map((tokenInfoWithAddress, index) => (
+              <>
+                {!!index && ' / '}
+                {getDecimalString(
+                  tokenInfoWithAddress.balance.amount.toString(),
+                  tokenInfoWithAddress.balance.decimals,
+                  3,
+                )}
+                <span>{tokenInfoWithAddress.balance.name}</span>
+              </>
+            ))}
+          </Typography>
           {tokenInfoWithAddresses.map((tokenInfoWithAddress, index) => (
-            <>
-              {!!index && ' / '}
-              {getDecimalString(
-                tokenInfoWithAddress.balance.amount.toString(),
-                tokenInfoWithAddress.balance.decimals,
-              )}
-              <span>{tokenInfoWithAddress.balance.name}</span>
-            </>
+            <Box
+              className="address-container"
+              key={tokenInfoWithAddress.address}
+            >
+              <Grid container alignItems="center">
+                <Grid item mobile>
+                  <Typography className="heading">
+                    {`${tokenInfoWithAddress.chain.toUpperCase()}: `}
+                  </Typography>
+                  <Id id={tokenInfoWithAddress.address} />
+                </Grid>
+                <Grid item>
+                  <Box className="address-container">
+                    <Box className="actions">
+                      <CopyToClipboard
+                        text={tokenInfoWithAddress.address}
+                        onCopy={handleCopy}
+                      >
+                        <IconButton size="small">
+                          <SvgIcon fontSize="small">
+                            <Copy />
+                          </SvgIcon>
+                        </IconButton>
+                      </CopyToClipboard>
+                      <IconButton
+                        size="small"
+                        onClick={() =>
+                          setModalAddress(tokenInfoWithAddress.address)
+                        }
+                      >
+                        <SvgIcon fontSize="small">
+                          <QrcodeScan />
+                        </SvgIcon>
+                      </IconButton>
+                    </Box>
+                  </Box>
+                </Grid>
+              </Grid>
+            </Box>
           ))}
-        </Typography>
-        {tokenInfoWithAddresses.map((tokenInfoWithAddress, index) => (
-          <Box
-            className="address-container"
-            key={tokenInfoWithAddress.address}
-            mt={index ? 1 : 0}
-          >
-            <Typography className="heading">ADDRESS</Typography>
-            <Id id={tokenInfoWithAddress.address} />
-          </Box>
-        ))}
-      </>
-    )}
-  </WalletWidgetBase>
-);
+        </>
+      )}
+      <SuccessfulCopySnackbar
+        open={snackbarOpen}
+        handleClose={handleSnackbarClose}
+      />
+      <QrCodeModal
+        open={!!modalAddress}
+        handleClose={() => setModalAddress(null)}
+        text={modalAddress ?? ''}
+      />
+    </WalletWidgetBase>
+  );
+};
 
 export default WalletWidget;
diff --git a/apps/guard/app/(dashboard)/layout.tsx b/apps/guard/app/(dashboard)/layout.tsx
@@ -16,9 +16,6 @@ const DashboardLayout = ({
     <Grid item mobile={12} laptop={8}>
       {revenue}
     </Grid>
-    <Grid item mobile={12}>
-      {actions}
-    </Grid>
     {tokens}
   </Grid>
 );

diff --git a/apps/guard/app/_mock/mockedData.ts b/apps/guard/app/_mock/mockedData.ts
@@ -1,7 +1,7 @@
 import moment from 'moment';
 
 import { SWRConfigProps } from '@rosen-ui/swr-mock';
-import { ChartPeriod, Event } from '@rosen-ui/types';
+import { ChartPeriod } from '@rosen-ui/types';
 
 import {
   ApiAddressAssetsResponse,
@@ -12,6 +12,7 @@ import {
   ApiSignResponse,
   ApiEventResponse,
   ApiHistoryResponse,
+  Event,
 } from '@/_types/api';
 
 const info: ApiInfoResponse = {
@@ -20,42 +21,50 @@ const info: ApiInfoResponse = {
     hot: [
       {
         address: '3WvuxxkcM5gRhfktbKTn3Wvux1xkcM5gRhTn1WfktbGoSqpW',
+        chain: 'Ergo',
         balance: {
           amount: 100 * 1e9,
           decimals: 9,
           tokenId: 'erg',
           name: 'erg',
+          isNativeToken: true,
         },
       },
       {
         address:
           'addr1qyrgyu3x5vqul78qa2g9q8l62xxnnfyz64qawwelltuzagdhs2e6xhe9mn0j9xzhf3f63vd0ulm58820qp7s3q0ql92swdh27a',
+        chain: 'Cardano',
         balance: {
           amount: 500 * 1e6,
           decimals: 6,
           tokenId: 'ada',
           name: 'ada',
+          isNativeToken: true,
         },
       },
     ],
     cold: [
       {
         address: '3WvuxxkcM5gRhfktbKTn3Wvux1xkcM5gRhTn1WfktbGoSqpW',
+        chain: 'Ergo',
         balance: {
           amount: 300 * 1e9,
           decimals: 9,
           tokenId: 'erg',
           name: 'erg',
+          isNativeToken: true,
         },
       },
       {
         address:
           'addr1qyrgyu3x5vqul78qa2g9q8l62xxnnfyz64qawwelltuzagdhs2e6xhe9mn0j9xzhf3f63vd0ulm58820qp7s3q0ql92swdh27a',
+        chain: 'Cardano',
         balance: {
           amount: 1500 * 1e6,
           decimals: 6,
           tokenId: 'ada',
           name: 'ada',
+          isNativeToken: true,
         },
       },
     ],
@@ -160,26 +169,30 @@ const assets = [
     amount: 10000,
     decimals: 2,
     chain: 'ergo',
+    isNativeToken: false,
   },
   {
     tokenId: '91e9086194cd9144a1661c5820dd53869afd1711d4c5a305b568a452e86f81b1',
     amount: 2,
     decimals: 0,
     chain: 'ergo',
+    isNativeToken: false,
   },
   {
     name: 'another awesome token',
     tokenId: 'c6cce2d65182c2e4343d942000263b75d103e6d56fea08ded6dfc25548c2d34d',
     amount: 200,
     decimals: 1,
     chain: 'ergo',
+    isNativeToken: false,
   },
   {
     name: 'fakeRSN',
     tokenId: '6c1526b2a5ef010edb622719d9d7fbde8437a39543547c3effbe72ad33504cf1',
     amount: 20,
     decimals: 5,
     chain: 'cardano',
+    isNativeToken: false,
   },
 ];
 
@@ -222,30 +235,22 @@ const healthStatus: ApiHealthStatusResponse = [
 
 const generateEventRecords = (numberOfRecords: number): Event[] => {
   return new Array(numberOfRecords).fill(null).map((data, index) => ({
-    id: index,
     eventId: `${Math.floor(Date.now() * Math.random())}`,
     txId: `${Math.floor(Date.now() * Math.random())}`,
-    extractor: 'Extractor Text',
-    boxId: `${Math.floor(Date.now() * Math.random())}`,
-    boxSerialized: '{}',
-    block: 'Block Text',
-    height: 10,
     fromChain: 'Chain A',
     toChain: 'Chain B',
     fromAddress: '3WvuxxkcM5gRhfktbKTn3Wvux',
     toAddress: '3WvuxxkcM5gRhfktbKTn3Wvux',
-    amount: '100',
     bridgeFee: '0.2',
     networkFee: '0.03',
-    sourceChainTokenId: '123',
-    sourceChainHeight: 20,
-    targetChainTokenId: 'ab123',
-    sourceTxId: 'ab1234',
-    sourceBlockId: 'cd56789',
-    WIDs: 'WIDs',
-    spendBlock: '',
-    spendHeight: 5,
-    spendTxId: 'spendId1234',
+    sourceTxId: 'sourceId1234',
+    sourceChainToken: {
+      amount: 1000,
+      tokenId: '123',
+      decimals: 2,
+      name: 'hello',
+      isNativeToken: false,
+    },
   }));
 };
 
@@ -254,6 +259,8 @@ const generateRevenueRecords = (numberOfRecords: number) => {
     id: index,
     rewardTxId:
       '95baefff2eb9e45b04f8b4e6265e866773db6db5f9e8e30ce2cae1aa263b90f7',
+    lockTxId:
+      '85baefff2eb9e45b04f8b4e6265e866773db6db5f9e8e30ce2cae1aa263b90f7',
     eventId: '85baefff2eb9e45b04f8b4e6265e866773db6db5f9e8e30ce2cae1aa263b90f7',
     lockHeight: 100,
     fromChain: 'Chain A',
@@ -263,13 +270,18 @@ const generateRevenueRecords = (numberOfRecords: number) => {
     amount: '0.1',
     bridgeFee: '0.002',
     networkFee: '0.003',
-    lockTokenId:
-      '15baefff2eb9e45b04f8b4e6265e866773db6db5f9e8e30ce2cae1aa263b90f7',
-    lockTxId:
-      '15baefff2eb9e45b04f8b4e6265e8663773db6db5f9e8e30ce2cae1aa263b90f8',
+    lockToken: {
+      tokenId:
+        '15baefff2eb9e45b04f8b4e6265e866773db6db5f9e8e30ce2cae1aa263b90f7',
+      amount: 10000,
+      decimals: 3,
+      name: 'hello',
+      isNativeToken: false,
+    },
     height: 100,
     timestamp: Date.now(),
     status: 'Done',
+    revenues: [],
   }));
 };