refactor(dac): address multiple issues across the project

chain4travel · May 21, 2024 · 7514049 · 7514049
1 parent 6d847ff
commit 7514049
Show file tree

Hide file tree

Showing 28 changed files with 412 additions and 310 deletions.
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -1,24 +1,52 @@
-import React from 'react';
 import { Outlet } from 'react-router-dom';
 
+import { Box, Toolbar } from '@mui/material';
+import React from 'react';
 import Navbar from './Navbar';
-import Paper from './Paper';
-
 import './suite-override.css';
 
 const Layout = () => {
   return (
-    <Paper
-      className="dac-container"
-      style={{
+    <Box
+      sx={{
         width: '100%',
         height: '100%',
-        paddingBottom: '40px',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
       }}
     >
-      <Navbar />
-      <Outlet />
-    </Paper>
+      <Toolbar
+        sx={{
+          borderBottom: '1px solid',
+          borderColor: 'rgba(145, 158, 171, 0.24)',
+          background: theme => theme.palette.background.paper,
+          flexGrow: 1,
+          p: '1.5rem',
+          zIndex: 9,
+          position: 'fixed',
+          top: '65px',
+          width: '100vw',
+          height: '61px',
+          display: 'flex',
+          justifyContent: 'center',
+          right: 0,
+        }}
+      >
+        <Navbar />
+      </Toolbar>
+      <Box
+        sx={{
+          marginTop: '5rem',
+          width: '100%',
+          maxWidth: '1530px',
+          height: '100%',
+          paddingBottom: '4rem',
+        }}
+      >
+        <Outlet />
+      </Box>
+    </Box>
   );
 };
-export default Layout;
+export default React.memo(Layout);
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -1,54 +1,23 @@
-import React, { useMemo } from 'react';
-import { NavLink } from 'react-router-dom';
-import { Box, Stack, Typography } from '@mui/material';
-import { filter } from 'lodash';
-import { PlatformVMConstants } from '@c4tplatform/caminojs/dist/apis/platformvm';
 import { useWalletStore } from '@/store';
-import Badge from './Badge';
+import { PlatformVMConstants } from '@c4tplatform/caminojs/dist/apis/platformvm';
+import { Box, Tab, Tabs } from '@mui/material';
+import { filter } from 'lodash';
+import React, { useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
-interface NavItemProps {
-  to: string;
-  text: string;
-  notification?: string;
+function a11yProps(index: number) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
 }
-const NavItem = ({ to, text, notification }: NavItemProps) => {
-  return (
-    <NavLink
-      to={`/dac/${to}`}
-      style={{ textDecoration: 'none', position: 'relative' }}
-    >
-      {({ isActive }) => (
-        <>
-          {notification && (
-            <Badge
-              color="primary"
-              label={notification}
-              sx={{ position: 'absolute', top: 8, right: 4 }}
-            />
-          )}
-          <Typography
-            color={isActive ? 'text.primary' : 'grey.500'}
-            sx={{
-              paddingX: 1.25,
-              paddingY: 1.5,
-              paddingTop: 3,
-              fontWeight: 600,
-            }}
-          >
-            {text}
-          </Typography>
-          <Box
-            height={4}
-            borderRadius="4px 4px 0 0"
-            sx={{ backgroundColor: isActive ? 'primary.main' : 'transparent' }}
-          />
-        </>
-      )}
-    </NavLink>
-  );
-};
 
+//TODO: notification is removed need to be added
 const ProposalNavbar = () => {
+  const [value, setValue] = useState(0);
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+  };
   const { addressState, currentWalletAddress, pendingMultisigTxs } =
     useWalletStore(state => ({
       addressState: state.addressState,
@@ -77,35 +46,67 @@ const ProposalNavbar = () => {
         pendingAddVoteCount > 0 ? `${pendingAddVoteCount} pending` : undefined,
     };
   }, [pendingMultisigTxs]);
+  const navigate = useNavigate();
   const isCreateProposalAllowed = isKycVerified || isConsortiumAdminProposer;
   const enableCreateButton = currentWalletAddress && isCreateProposalAllowed;
   return (
-    <Stack
-      direction="row"
-      borderBottom={1}
-      borderColor="divider"
-      paddingX={1.5}
-      alignItems="flex-end"
-      justifyContent="space-between"
+    <Box
+      sx={{
+        display: 'flex',
+        width: '100%',
+        maxWidth: '1536px',
+      }}
     >
-      <Stack direction="row" spacing={3} alignItems="flex-end">
-        <NavItem
-          to="active"
-          text="Ongoing Proposals"
-          notification={pendingAddVotes}
+      <Tabs
+        value={value}
+        onChange={handleChange}
+        textColor="secondary"
+        sx={{ '& .MuiTabs-indicator': { display: 'none' }, height: '61px' }}
+        scrollButtons="auto"
+        variant="scrollable"
+        allowScrollButtonsMobile
+      >
+        <Tab
+          className="tab"
+          disableRipple
+          label="Ongoing Proposals"
+          {...a11yProps(0)}
+          key={0}
+          sx={{ '&::after': { display: value === 0 ? 'block' : 'none' } }}
+          onClick={() => navigate('/dac/active')}
         />
-        <NavItem to="upcoming" text="Upcoming Proposals" />
-        <NavItem to="completed" text="Completed Proposals" />
-      </Stack>
-      {enableCreateButton && (
-        <NavItem
-          to="creating"
-          text="Create Proposal"
-          notification={pendingAddProposals}
+        <Tab
+          className="tab"
+          disableRipple
+          label="Upcoming Proposals"
+          {...a11yProps(1)}
+          key={1}
+          sx={{ '&::after': { display: value === 1 ? 'block' : 'none' } }}
+          onClick={() => navigate('/dac/upcoming')}
         />
-      )}
-    </Stack>
+        <Tab
+          className="tab"
+          disableRipple
+          label="Completed Proposals"
+          {...a11yProps(2)}
+          key={2}
+          sx={{ '&::after': { display: value === 2 ? 'block' : 'none' } }}
+          onClick={() => navigate('/dac/completed')}
+        />
+        {enableCreateButton && (
+          <Tab
+            className="tab"
+            disableRipple
+            label="Create Proposal"
+            {...a11yProps(3)}
+            key={3}
+            sx={{ '&::after': { display: value === 3 ? 'block' : 'none' } }}
+            onClick={() => navigate('/dac/creating')}
+          />
+        )}
+      </Tabs>
+    </Box>
   );
 };
 
-export default ProposalNavbar;
+export default React.memo(ProposalNavbar);
diff --git a/src/components/Paper.tsx b/src/components/Paper.tsx
@@ -1,8 +1,8 @@
 import { Paper as MuiPaper, styled } from '@mui/material';
-import React from 'react';
 
 const Paper = styled(MuiPaper)(() => ({
   boxShadow: 'none',
   backgroundImage: 'none',
+  border: 'none',
 }));
 export default Paper;
diff --git a/src/helpers/tx.ts b/src/helpers/tx.ts
@@ -1,5 +1,5 @@
 import { ProposalTypes } from '@/types';
-import { Buffer, BinTools } from '@c4tplatform/caminojs/dist';
+import { BinTools, Buffer } from '@c4tplatform/caminojs/dist';
 import {
   AddProposalTx,
   AdminProposal,

diff --git a/src/hooks/useMultisig.ts b/src/hooks/useMultisig.ts
@@ -1,27 +1,27 @@
-import { AxiosError } from 'axios';
-import createHash from 'create-hash';
-import { difference, find, map } from 'lodash';
-import { BinTools, Buffer, BN } from '@c4tplatform/caminojs/dist';
+import { parseUnsignedTx } from '@/helpers/tx';
+import { useWalletStore } from '@/store';
+import { PendingMultisigTx } from '@/types';
+import { BN, BinTools, Buffer } from '@c4tplatform/caminojs/dist';
+import {
+  KeyChain,
+  UnsignedTx as PlatformUnsignedTx,
+  PlatformVMConstants,
+} from '@c4tplatform/caminojs/dist/apis/platformvm';
 import {
   MultisigKeyChain,
   MultisigKeyPair,
   OutputOwners,
   SECP256k1KeyPair,
   SignatureError,
 } from '@c4tplatform/caminojs/dist/common';
-import {
-  KeyChain,
-  PlatformVMConstants,
-  UnsignedTx as PlatformUnsignedTx,
-} from '@c4tplatform/caminojs/dist/apis/platformvm';
-import useWallet from './useWallet';
-import useToast from './useToast';
 import { ModelMultisigTx } from '@c4tplatform/signavaultjs';
-import { useWalletStore } from '@/store';
-import { useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { parseUnsignedTx } from '@/helpers/tx';
-import { PendingMultisigTx } from '@/types';
+import { AxiosError } from 'axios';
+import createHash from 'create-hash';
+import { difference, find, map } from 'lodash';
+import { useMemo } from 'react';
+import useToast from './useToast';
+import useWallet from './useWallet';
 
 export const usePendingMultisigTx = () => {
   const { multisigWallet, signavaultApi, signer } = useWallet();
@@ -324,7 +324,7 @@ export const useMultisig = () => {
           )
           ?.toString('hex');
         try {
-          await signavaultApi.cancelMultisigTx(tx.id, {
+          await signavaultApi.cancelMultisigTx({
             timestamp: timestamp,
             signature: signatureAliasTimestamp,
             id: tx?.id,

diff --git a/src/hooks/useProposals.ts b/src/hooks/useProposals.ts
@@ -1,13 +1,9 @@
-import { useQuery, useMutation } from '@tanstack/react-query';
-import { DateTime } from 'luxon';
-import { filter, find, orderBy } from 'lodash';
-import { BinTools, platformvm, Buffer } from '@c4tplatform/caminojs/dist';
-import { Serialization } from '@c4tplatform/caminojs/dist/utils/serialization';
 import {
-  fetchProposalDetail,
-  fetchCompletedVotes,
   fetchActiveVotings,
+  fetchCompletedVotes,
+  fetchProposalDetail,
 } from '@/apis/proposals';
+import { useNetworkStore } from '@/store/network';
 import {
   APIPRoposalWrapper,
   APIProposal,
@@ -17,10 +13,16 @@ import {
   ProposalTypes,
   VotingOption,
 } from '@/types';
-import { useNetworkStore } from '@/store/network';
-import useWallet from './useWallet';
-import useToast from './useToast';
+import { BinTools, Buffer, platformvm } from '@c4tplatform/caminojs/dist';
+import { Serialization } from '@c4tplatform/caminojs/dist/utils/serialization';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { filter, find, orderBy } from 'lodash';
+import { DateTime } from 'luxon';
 import { useMultisig } from './useMultisig';
+import useToast from './useToast';
+import useWallet from './useWallet';
+
+const bintools: BinTools = BinTools.getInstance()
 
 const serialization = Serialization.getInstance();
 const parseAPIProposal = (proposal?: APIProposal) => {
@@ -346,10 +348,10 @@ export const useAddProposal = (
           txs.utxos,
           pchainAPI.keyChain().getAddressStrings(),
           pchainAPI.keyChain().getAddressStrings(),
+          serialization.typeToBuffer(description, 'utf8'),
           proposal,
           signer.getAddress(),
           0,
-          serialization.typeToBuffer(description, 'utf8')
         );
         const tx = unsignedTx.sign(pchainAPI.keyChain());
         const txid: string = await pchainAPI.issueTx(tx);
@@ -368,10 +370,10 @@ export const useAddProposal = (
           txs.utxos,
           [multisigAlias, ...multisigWallet.keyData.owner.addresses],
           [multisigAlias],
+          serialization.typeToBuffer(description, 'utf8'),
           proposal,
           multisigWallet.keyData.alias,
           0,
-          serialization.typeToBuffer(description, 'utf8')
         );
         // - check signavault to get pending Txs
         tryToCreateMultisig && (await tryToCreateMultisig(unsignedTx));

diff --git a/src/hooks/useWallet.ts b/src/hooks/useWallet.ts
@@ -1,11 +1,11 @@
-import { useMemo } from 'react';
-import { BN, Avalanche as Camino, BinTools } from '@c4tplatform/caminojs/dist';
-import { Configuration, MultisigApi } from '@c4tplatform/signavaultjs';
+import { useNetworkStore } from '@/store/network';
+import { useWalletStore } from '@/store/wallet';
+import { MultisigWallet, Network, SingletonWallet, WalletType } from '@/types';
+import { BN, BinTools, Avalanche as Camino } from '@c4tplatform/caminojs/dist';
 import { AddressState } from '@c4tplatform/caminojs/dist/apis/platformvm';
+import { Configuration, MultisigApi } from '@c4tplatform/signavaultjs';
+import { useMemo } from 'react';
 import store from 'wallet/store';
-import { MultisigWallet, SingletonWallet, Network, WalletType } from '@/types';
-import { useWalletStore } from '@/store/wallet';
-import { useNetworkStore } from '@/store/network';
 
 const DEFAULT_SIGNAVAULT_CONFIG: Configuration = new Configuration({
   basePath: 'http://127.0.0.1:8081/v1',