feat: updated navigation from vaults, copy to clipboard hook added

src/app/components/mint-unmint/components/unmint/components/unmint-vault-selector.tsx

@@ -1,4 +1,5 @@
-import { useContext, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
 
 import { Button, Text, VStack } from '@chakra-ui/react';
 import { VaultCard } from '@components/vault/vault-card';
@@ -7,20 +8,28 @@ import { VaultsList } from '@components/vaults-list/vaults-list';
 import { useVaults } from '@hooks/use-vaults';
 import { Vault } from '@models/vault';
 import { BlockchainContext } from '@providers/blockchain-context-provider';
+import { RootState } from '@store/index';
 import { scrollBarCSS } from '@styles/css-styles';
 
 export function UnmintVaultSelector(): React.JSX.Element {
-  const [selectedVault, setSelectedVault] = useState<Vault | undefined>(undefined);
-  const [isSubmitting, setIsSubmitting] = useState(false);
   const { fundedVaults } = useVaults();
+  const { unmintStep } = useSelector((state: RootState) => state.mintunmint);
+
   const blockchainContext = useContext(BlockchainContext);
   const ethereum = blockchainContext?.ethereum;
 
+  const [selectedVault, setSelectedVault] = useState<Vault | undefined>();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
   function handleSelect(uuid: string): void {
     const vault = fundedVaults.find(vault => vault.uuid === uuid);
     if (vault) setSelectedVault(vault);
   }
 
+  useEffect(() => {
+    setSelectedVault(fundedVaults.find(vault => vault.uuid === unmintStep[1]));
+  }, [fundedVaults, unmintStep]);
+
   async function handleUnmint(): Promise<void> {
     if (selectedVault) {
       try {
@@ -36,7 +45,7 @@ export function UnmintVaultSelector(): React.JSX.Element {
   return (
     <VStack alignItems={'start'} py={'2.5px'} px={'15px'} w={'300px'} h={'445px'} spacing={'15px'}>
       <Text color={'accent.cyan.01'} fontSize={'md'} fontWeight={600}>
-        Select vault to unmint dlcBTC:
+        Select vault to redeem dlcBTC:
       </Text>
       {selectedVault ? (
         <VStack
@@ -56,7 +65,7 @@ export function UnmintVaultSelector(): React.JSX.Element {
           />
         </VStack>
       ) : (
-        <VaultsList height="358.5px" isScrollable={!selectedVault}>
+        <VaultsList height="305px" isScrollable={!selectedVault}>
           <VaultsListGroupContainer
             vaults={fundedVaults}
             isSelectable
@@ -70,8 +79,17 @@ export function UnmintVaultSelector(): React.JSX.Element {
         isDisabled={!selectedVault}
         onClick={() => handleUnmint()}
       >
-        Unmint dlcBTC
+        Redeem dlcBTC
       </Button>
+      {selectedVault && (
+        <Button
+          isLoading={isSubmitting}
+          variant={'navigate'}
+          onClick={() => setSelectedVault(undefined)}
+        >
+          Cancel
+        </Button>
+      )}
     </VStack>
   );
 }

src/app/components/mint-unmint/components/walkthrough/walkthrough.tsx

@@ -119,7 +119,7 @@ export function Walkthrough({ flow, currentStep }: WalkthroughProps): React.JSX.
             <WalkthroughLayout>
               <WalkthroughHeader
                 currentStep={currentStep}
-                title={'Unmint dlcBTC'}
+                title={'Redeem dlcBTC'}
                 blockchain={'ethereum'}
               />
               <Text color={'white.01'} fontSize={'md'}>

src/app/components/vault/components/vault-expanded-information/components/vault-expanded-information-row.tsx

@@ -1,21 +1,47 @@
-import { HStack, Text } from '@chakra-ui/react';
+import { CheckCircleIcon, CopyIcon } from '@chakra-ui/icons';
+import { Button, HStack, Text, Tooltip } from '@chakra-ui/react';
+import { easyTruncateAddress } from '@common/utilities';
+import { useCopyToClipboard } from '@hooks/use-copy-to-clipboard';
 
-interface VaultExpandedInformationRowProps {
-  label: string;
-  value: string;
+interface VaultExpandedInformationUUIDRowProps {
+  uuid: string;
 }
 
-export function VaultExpandedInformationRow({
-  label,
-  value,
-}: VaultExpandedInformationRowProps): React.JSX.Element {
+export function VaultExpandedInformationUUIDRow({
+  uuid,
+}: VaultExpandedInformationUUIDRowProps): React.JSX.Element {
+  const { hasCopied, copyToClipboard } = useCopyToClipboard();
+
   return (
     <HStack pl={'35px'} w={'100%'} alignItems={'start'} spacing={'15px'}>
-      <Text w={'50%'} color={'white'} fontSize={'xs'}>
-        {label}
-      </Text>
+      <HStack w={'50%'} spacing={'0px'}>
+        <Text w={'50%'} color={'white'} fontSize={'xs'}>
+          UUID
+        </Text>
+        <Tooltip
+          label={hasCopied ? 'UUID Copied!' : 'Copy UUID'}
+          placement={'right'}
+          fontSize={'xs'}
+          hasArrow
+        >
+          <Button
+            p={'0px'}
+            minW={'0px'}
+            h={'15px'}
+            w={'15px'}
+            onClick={() => copyToClipboard(uuid)}
+            variant={'ghost'}
+          >
+            {hasCopied ? (
+              <CheckCircleIcon color={'accent.cyan.01'} fontSize={'xs'} />
+            ) : (
+              <CopyIcon color={'accent.cyan.01'} fontSize={'xs'} />
+            )}
+          </Button>
+        </Tooltip>
+      </HStack>
       <Text textAlign={'right'} w={'50%'} color={'white'} fontSize={'xs'}>
-        {value}
+        {easyTruncateAddress(uuid)}
       </Text>
     </HStack>
   );

src/app/components/vault/components/vault-expanded-information/vault-expanded-information.tsx

@@ -1,38 +1,77 @@
-import { Divider, ScaleFade, Stack, VStack } from '@chakra-ui/react';
-import { easyTruncateAddress } from '@common/utilities';
+import { useDispatch } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
 
-import { VaultExpandedInformationRow } from './components/vault-expanded-information-row';
+import { Button, Divider, SlideFade, Stack, VStack } from '@chakra-ui/react';
+import { VaultState } from '@models/vault';
+import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions';
+
+import { VaultExpandedInformationUUIDRow } from './components/vault-expanded-information-row';
 import { VaultExpandedInformationTransactionRow } from './components/vault-expanded-information-transaction-row';
 
 interface VaultExpandedInformationProps {
   uuid: string;
+  state: VaultState;
   fundingTX: string;
   closingTX: string;
   isExpanded: boolean;
+  isSelected?: boolean;
+  close: () => void;
 }
 
 export function VaultExpandedInformation({
   uuid,
+  state,
   fundingTX,
   closingTX,
   isExpanded,
+  isSelected,
+  close,
 }: VaultExpandedInformationProps): React.JSX.Element {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+
   return (
     <Stack w={'100%'}>
-      <ScaleFade in={isExpanded} unmountOnExit>
+      <SlideFade in={isExpanded} unmountOnExit>
         <VStack>
           <Divider w={'100%'} borderStyle={'dashed'} />
-          <VStack w={'100%'} justifyContent={'space-between'}>
-            <VaultExpandedInformationRow label={'UUID'} value={easyTruncateAddress(uuid)} />
-            {Boolean(fundingTX) && (
-              <VaultExpandedInformationTransactionRow label={'Funding TX'} value={fundingTX} />
+          <VStack w={'100%'} spacing={'25px'}>
+            <VStack w={'100%'} justifyContent={'space-between'}>
+              <VaultExpandedInformationUUIDRow uuid={uuid} />
+              {Boolean(fundingTX) && (
+                <VaultExpandedInformationTransactionRow label={'Funding TX'} value={fundingTX} />
+              )}
+              {Boolean(closingTX) && (
+                <VaultExpandedInformationTransactionRow label={'Closing TX'} value={closingTX} />
+              )}
+            </VStack>
+            {state === VaultState.READY && !isSelected && (
+              <Button
+                onClick={() => {
+                  navigate('/');
+                  dispatch(mintUnmintActions.setMintStep([1, uuid]));
+                  close();
+                }}
+                variant={'account'}
+              >
+                Lock BTC
+              </Button>
             )}
-            {Boolean(closingTX) && (
-              <VaultExpandedInformationTransactionRow label={'Closing TX'} value={closingTX} />
+            {state === VaultState.FUNDED && !isSelected && (
+              <Button
+                onClick={() => {
+                  navigate('/');
+                  dispatch(mintUnmintActions.setUnmintStep([0, uuid]));
+                  close();
+                }}
+                variant={'account'}
+              >
+                Redeem dlcBTC
+              </Button>
             )}
           </VStack>
         </VStack>
-      </ScaleFade>
+      </SlideFade>
     </Stack>
   );
 }

src/app/components/vault/components/vault-information.tsx

@@ -1,10 +1,6 @@
-import { useDispatch } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
-
 import { CheckIcon } from '@chakra-ui/icons';
-import { Button, HStack, Image, Text, VStack } from '@chakra-ui/react';
+import { HStack, Image, Text, VStack } from '@chakra-ui/react';
 import { VaultState } from '@models/vault';
-import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions';
 
 import { VaultExpandButton } from './vault-expand-button';
 
@@ -15,7 +11,6 @@ const getAssetLogo = (state: VaultState) => {
 };
 
 interface VaultInformationProps {
-  uuid: string;
   collateral: number;
   state: VaultState;
   timestamp: number;
@@ -26,7 +21,6 @@ interface VaultInformationProps {
 }
 
 export function VaultInformation({
-  uuid,
   state,
   collateral,
   timestamp,
@@ -35,9 +29,6 @@ export function VaultInformation({
   isSelected,
   handleClick,
 }: VaultInformationProps): React.JSX.Element {
-  const dispatch = useDispatch();
-  const navigate = useNavigate();
-
   const date = new Date(timestamp * 1000).toLocaleDateString('en-US');
 
   return (
@@ -64,17 +55,6 @@ export function VaultInformation({
         >
           {isSelected && <CheckIcon color={'accent.cyan.01'} boxSize={'15px'} />}
         </VStack>
-      ) : state === VaultState.READY && !isSelected ? (
-        <Button
-          onClick={() => {
-            navigate('/');
-            dispatch(mintUnmintActions.setMintStep([1, uuid]));
-          }}
-          variant={'vault'}
-          w={'85px'}
-        >
-          Lock BTC
-        </Button>
       ) : (
         <VaultExpandButton isExpanded={isExpanded} handleClick={() => handleClick()} />
       )}

src/app/components/vault/vault-card.tsx

@@ -34,7 +34,6 @@ export function VaultCard({
   return (
     <VaultCardLayout isSelectable={isSelectable} handleClick={() => handleSelect && handleSelect()}>
       <VaultInformation
-        uuid={vault.uuid}
         collateral={vault.collateral}
         state={vault.state}
         timestamp={vault.timestamp}
@@ -46,9 +45,12 @@ export function VaultCard({
       {isExpanded && (
         <VaultExpandedInformation
           uuid={vault.uuid}
+          state={vault.state}
           fundingTX={vault.fundingTX}
           closingTX={vault.closingTX}
           isExpanded={isExpanded}
+          isSelected={isSelected}
+          close={() => setIsExpanded(false)}
         />
       )}
       {[VaultState.FUNDING, VaultState.CLOSED].includes(vault.state) && (

src/app/components/vaults-list/components/vaults-list-group-container.tsx

@@ -22,7 +22,7 @@ export function VaultsListGroupContainer({
   return (
     <VStack pt={'15px'} alignItems={'start'} w={'100%'} spacing={'15px'}>
       {label && (
-        <HStack pt={'15px'} spacing={'25px'}>
+        <HStack pt={'15px'}>
           {['Locking BTC in Progress', 'Unlocking BTC in Progress'].includes(label) && (
             <Spinner color={'accent.cyan.01'} size={'md'} />
           )}

src/app/hooks/use-copy-to-clipboard.ts

@@ -0,0 +1,21 @@
+import { useState } from 'react';
+
+interface UseCopyToClipboardReturnType {
+  hasCopied: boolean;
+  copyToClipboard: (text: string) => Promise<void>;
+}
+
+export function useCopyToClipboard(): UseCopyToClipboardReturnType {
+  const [hasCopied, setHasCopied] = useState(false);
+
+  async function copyToClipboard(text: string) {
+    await navigator.clipboard.writeText(text);
+    setHasCopied(true);
+    setTimeout(() => setHasCopied(false), 2500);
+  }
+
+  return {
+    hasCopied,
+    copyToClipboard,
+  };
+}

src/styles/button-theme.ts

@@ -25,7 +25,7 @@ const navigate = defineStyle({
   px: '25px',
   h: '50px',
   w: '100%',
-  fontSize: 'md',
+  fontSize: 'lg',
   fontWeight: 600,
   bg: 'none',
   border: '1px solid',