feat: add logos, match card ui to design

DLC-link · Nov 5, 2024 · 8dc4238 · 8dc4238
1 parent 19c65be
commit 8dc4238
Show file tree

Hide file tree

Showing 9 changed files with 143 additions and 20 deletions.
diff --git a/public/images/deposit-img.png b/public/images/deposit-img.png
diff --git a/public/images/logos/enzyme-logo.svg b/public/images/logos/enzyme-logo.svg
diff --git a/public/images/logos/mellow-logo.svg b/public/images/logos/mellow-logo.svg
diff --git a/public/images/logos/symbiotic-logo.svg b/public/images/logos/symbiotic-logo.svg
diff --git a/...d-container.select-vault-type-stack/one-click-yield-container.select-vault-type-stack.tsx b/...d-container.select-vault-type-stack/one-click-yield-container.select-vault-type-stack.tsx
@@ -7,7 +7,11 @@ import {
 } from './one-click-yield-container.select-vault-type-stack.vault-type-box/one-click-yield-container.select-vault-type-stack.vault-type-box';
 
 const mockVaultTypes: OneClickYieldVaultInformation[] = [
-  { vaultType: 'enzyme-curve', vaultTypeLabel: 'Enzyme Curve Vault' },
+  {
+    vaultType: 'enzyme-curve',
+    vaultTypeLabel: 'Enzyme Curve Vault',
+    vaultTypeLogoUrl: '/images/logos/enzyme-logo.svg',
+  },
 ];
 
 interface SelectVaultTypeStackProps {

diff --git a/...omponents/one-click-yield-container.select-vault-type-stack.vault-type-box.point-chip.tsx b/...omponents/one-click-yield-container.select-vault-type-stack.vault-type-box.point-chip.tsx
@@ -0,0 +1,26 @@
+import { HStack, Image, Text } from '@chakra-ui/react';
+
+export interface VaultTypeBoxPointChipProps {
+  bgColor: string;
+  imgPath: string;
+  multiplier: number;
+}
+
+export function VaultTypeBoxPointChip({
+  bgColor,
+  imgPath,
+  multiplier,
+}: VaultTypeBoxPointChipProps): React.JSX.Element {
+  return (
+    <HStack
+      py={'5px'}
+      px={'10px'}
+      borderRadius={'20px'}
+      justifyContent={'space-between'}
+      bg={bgColor}
+    >
+      <Image src={imgPath} alt={'Point logo'} />
+      <Text fontSize={'lg'} color={'white.01'} fontWeight={'800'}>{`${multiplier}x`}</Text>
+    </HStack>
+  );
+}
diff --git a/...ault-type-box/one-click-yield-container.select-vault-type-stack.vault-type-box.layout.tsx b/...ault-type-box/one-click-yield-container.select-vault-type-stack.vault-type-box.layout.tsx
@@ -1,18 +1,19 @@
-import { HStack } from '@chakra-ui/react';
+import { VStack } from '@chakra-ui/react';
 import { HasChildren } from '@models/has-children';
 
 export function VaultTypeBoxLayout({ children }: HasChildren): React.JSX.Element {
   return (
-    <HStack
+    <VStack
       p={'15px'}
       w={'100%'}
-      spacing={'15px'}
+      spacing={'25px'}
       border={'1px'}
       borderColor={'orange.01'}
       borderRadius={'md'}
       justifyContent={'space-between'}
+      bg={'background.content.01'}
     >
       {children}
-    </HStack>
+    </VStack>
   );
 }
diff --git a/...stack.vault-type-box/one-click-yield-container.select-vault-type-stack.vault-type-box.tsx b/...stack.vault-type-box/one-click-yield-container.select-vault-type-stack.vault-type-box.tsx
@@ -1,10 +1,13 @@
-import { Button, Text } from '@chakra-ui/react';
+import { InfoOutlineIcon } from '@chakra-ui/icons';
+import { Button, HStack, Image, Text, VStack } from '@chakra-ui/react';
 
+import { VaultTypeBoxPointChip } from './components/one-click-yield-container.select-vault-type-stack.vault-type-box.point-chip';
 import { VaultTypeBoxLayout } from './one-click-yield-container.select-vault-type-stack.vault-type-box.layout';
 
 export interface OneClickYieldVaultInformation {
   vaultType: string;
   vaultTypeLabel: string;
+  vaultTypeLogoUrl: string;
 }
 
 interface VaultTypeBoxProps {
@@ -16,22 +19,59 @@ export function VaultTypeBox({
   vaultInformation,
   handleSelectVaultTypeClick,
 }: VaultTypeBoxProps): React.JSX.Element {
-  const { vaultType, vaultTypeLabel } = vaultInformation;
+  const { vaultType, vaultTypeLabel, vaultTypeLogoUrl } = vaultInformation;
   return (
     <VaultTypeBoxLayout>
-      <Text color={'white.01'}>{vaultTypeLabel}</Text>
-      <Button
-        w={'50%'}
-        p={'2.5px'}
-        bg={'white.04'}
-        color={'white.01'}
-        fontSize={'sm'}
-        fontWeight={'bold'}
-        _hover={{ bg: 'orange.01', color: 'white.01' }}
-        onClick={() => handleSelectVaultTypeClick(vaultType)}
-      >
-        Deposit Bitcoin
-      </Button>
+      <HStack w={'100%'} justifyContent={'space-between'}>
+        <HStack>
+          <Image src={vaultTypeLogoUrl} alt={'Enzyme logo'} />
+          <InfoOutlineIcon color={'purple.01'} />
+        </HStack>
+        <Button
+          variant={'depositBTC'}
+          // _hover={{ bg: 'orange.01', color: 'white.01' }}
+          onClick={() => handleSelectVaultTypeClick(vaultType)}
+        >
+          <HStack>
+            <Image src={'/images/deposit-img.png'} alt={'Deposit image'} />
+            <Text fontSize={'lg'} fontWeight={'800'} color={'white.01'}>
+              Deposit BTC
+            </Text>
+          </HStack>
+        </Button>
+      </HStack>
+      <HStack alignItems={'flex-start'} w={'100%'}>
+        <VStack alignItems={'flex-start'} w={'30%'}>
+          <Text fontSize={'md'} fontWeight={'800'} color={'white.02'}>
+            Current APY
+          </Text>
+          <Text fontSize={'lg'} fontWeight={'800'} color={'white.01'}>
+            +12.5%
+          </Text>
+        </VStack>
+        <VStack alignItems={'flex-start'} w={'70%'}>
+          <Text fontSize={'md'} fontWeight={'800'} color={'white.02'}>
+            Points
+          </Text>
+          <HStack>
+            <VaultTypeBoxPointChip
+              bgColor={'purple.01'}
+              imgPath={'/images/deposit-img.png'}
+              multiplier={5}
+            />
+            <VaultTypeBoxPointChip
+              bgColor={'white.03'}
+              imgPath={'/images/logos/symbiotic-logo.svg'}
+              multiplier={20}
+            />
+            <VaultTypeBoxPointChip
+              bgColor={'white.03'}
+              imgPath={'/images/logos/mellow-logo.svg'}
+              multiplier={47}
+            />
+          </HStack>
+        </VStack>
+      </HStack>
     </VaultTypeBoxLayout>
   );
 }
diff --git a/src/styles/button-theme.ts b/src/styles/button-theme.ts
@@ -157,6 +157,16 @@ const merchantTableItem = defineStyle({
   },
 });
 
+const depositBTC = defineStyle({
+  py: '15px',
+  px: '3px',
+  h: '40px',
+  w: '145px',
+  bg: 'orange.01',
+});
+
+
+
 export const buttonTheme = defineStyleConfig({
   baseStyle: basestyle,
   variants: {
@@ -172,5 +182,6 @@ export const buttonTheme = defineStyleConfig({
     ledger,
     points,
     merchantTableItem,
+    depositBTC,
   },
 });