Merge pull request #46 from DLC-link/feat/add-token

feat: added add token button to minted vaults container
DLC-link · Dec 21, 2023 · 73c4c13 · 73c4c13
2 parents b20b94b + dd2d5bd
commit 73c4c13
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 10 deletions.
diff --git a/src/app/components/company-website-button/company-website-button.tsx b/src/app/components/company-website-button/company-website-button.tsx
@@ -1,12 +1,15 @@
+import { useNavigate } from 'react-router-dom';
+
 import { Button, Image } from '@chakra-ui/react';
 
 export function CompanyWebsiteButton(): React.JSX.Element {
-  const companyWebsiteURL = 'https://www.dlc.link/';
+  const navigate = useNavigate();
+
   const logoPath = './images/logos/dlc-link-logo.svg';
   const altText = 'DLC.Link Logo';
 
   return (
-    <Button as={'a'} href={companyWebsiteURL} variant={'company'} boxSize={'65px'}>
+    <Button onClick={() => navigate('/')} variant={'company'} boxSize={'65px'}>
       <Image src={logoPath} alt={altText} boxSize={'65px'} />
     </Button>
   );

diff --git a/src/app/components/header/components/tabs.tsx b/src/app/components/header/components/tabs.tsx
@@ -18,7 +18,7 @@ export function NavigationTabs({
         handleClick={() => handleTabClick('/')}
       />
       <TabButton
-        title={'My Mint Vaults'}
+        title={'My Vaults'}
         isActive={activeTab === '/my-vaults'}
         handleClick={() => handleTabClick('/my-vaults')}
       />

diff --git a/src/app/components/my-vaults-small/my-vaults-small.tsx b/src/app/components/my-vaults-small/my-vaults-small.tsx
@@ -22,7 +22,7 @@ export function MyVaultsSmall({ address }: MyVaultsSmallProps): React.JSX.Elemen
 
   return (
     <MyVaultsSmallLayout>
-      <VaultsList title={'My Mint Vaults'} height={'545px'} isScrollable={!!address && !isLoading}>
+      <VaultsList title={'My Vaults'} height={'545px'} isScrollable={!!address && !isLoading}>
         {address ? (
           <Skeleton isLoaded={!isLoading} w={'100%'}>
             <VaultsListGroupContainer label="Lock BTC" vaults={readyVaults} />

diff --git a/src/app/components/my-vaults/components/my-vaults-header/my-vaults-header.tsx b/src/app/components/my-vaults/components/my-vaults-header/my-vaults-header.tsx
@@ -17,7 +17,7 @@ export function MyVaultsLargeHeader({
     <VStack w={'100%'} h={'100px'}>
       <HStack w={'100%'} h={'150px'} justifyContent={'space-between'} pr={'25px'}>
         <Text color={'white'} fontSize={'4xl'} fontWeight={600}>
-          My Mint Vaults
+          My Vaults
         </Text>
         <HStack w={'450px'} h={'75%'} justifyContent={'space-between'}>
           <Divider orientation={'vertical'} h={'35px'} variant={'thick'} />

diff --git a/src/app/components/vaults-list/components/vaults-list-group-container.tsx b/src/app/components/vaults-list/components/vaults-list-group-container.tsx
@@ -1,6 +1,9 @@
-import { HStack, Spinner, Text, VStack } from '@chakra-ui/react';
+import { useContext } from 'react';
+
+import { Button, HStack, Image, Spinner, Text, VStack } from '@chakra-ui/react';
 import { VaultCard } from '@components/vault/vault-card';
 import { Vault } from '@models/vault';
+import { BlockchainContext } from '@providers/blockchain-context-provider';
 
 interface VaultsListGroupContainerProps {
   label?: string;
@@ -17,16 +20,37 @@ export function VaultsListGroupContainer({
   isSelectable = false,
   handleSelect,
 }: VaultsListGroupContainerProps): React.JSX.Element | boolean {
+  const blockchainContext = useContext(BlockchainContext);
+  const ethereum = blockchainContext?.ethereum;
+
   if (vaults.length === 0) return false;
 
   return (
     <VStack pt={'15px'} alignItems={'start'} w={'100%'} spacing={'15px'}>
       {label && (
-        <HStack pt={'15px'}>
-          {['Locking BTC in Progress', 'Unlocking BTC in Progress'].includes(label) && (
-            <Spinner color={'accent.cyan.01'} size={'md'} />
+        <HStack pt={'15px'} justifyContent={'space-between'} w={'100%'}>
+          <HStack>
+            {['Locking BTC in Progress', 'Unlocking BTC in Progress'].includes(label) && (
+              <Spinner color={'accent.cyan.01'} size={'md'} />
+            )}
+            <Text color={'white'}>{label}</Text>
+          </HStack>
+          {label === 'Minted dlcBTC' && (
+            <Button
+              variant={'ghost'}
+              size={'xs'}
+              _hover={{ backgroundColor: 'accent.cyan.01' }}
+              onClick={() => ethereum?.recommendTokenToMetamask()}
+            >
+              <HStack>
+                <Image src={'/images/logos/dlc-btc-logo.svg'} alt={'dlcBTC'} boxSize={'15px'} />
+                <Text fontSize={'2xs'} color={'white.01'}>
+                  {' '}
+                  Add Token to Wallet
+                </Text>
+              </HStack>
+            </Button>
           )}
-          <Text color={'white'}>{label}</Text>
         </HStack>
       )}
       {vaults.map((vault, index) => (