feat: add 1cy related components

src/app/components/one-click-yield-container/components/one-click-yield-container.progress-bar/components/one-click-yield-container.progress-bar.elements.tsx

@@ -0,0 +1,108 @@
+import { Divider, HStack, Stack, Text, TextProps } from '@chakra-ui/react';
+
+import { StepIconOne, StepIconThree, StepIconTwo } from '../../../../../../styles/icon';
+
+interface TransactionStepProps {
+  transactionStep: number;
+  transactionStepIndex: number;
+  isFirstTransactionStep?: boolean;
+  isLastTransactionStep?: boolean;
+  transactionStepLabel?: string;
+}
+
+function getIconForTransactionStep(
+  transactionStepIndex: number,
+  stepIconProperties: any
+): React.JSX.Element {
+  const stepIcons = [StepIconOne, StepIconTwo, StepIconThree];
+  const StepIconComponent = stepIcons[transactionStepIndex];
+  return <StepIconComponent {...stepIconProperties} />;
+}
+
+function getDividerForTransactionStep(
+  stepDividerProperties: any,
+  isLastTransactionStep: boolean
+): React.JSX.Element | false {
+  return isLastTransactionStep ? (
+    false
+  ) : (
+    <Divider orientation={'horizontal'} {...stepDividerProperties} />
+  );
+}
+
+function getTransactionStepDividerProperties(
+  transactionStep: number,
+  transactionStepIndex: number
+) {
+  return {
+    borderColor: transactionStep > transactionStepIndex ? 'orange.01' : 'white.03',
+    variant: transactionStep > transactionStepIndex ? 'thick' : 'thickDotted',
+    opacity: transactionStep > transactionStepIndex ? '50%' : '100%',
+  };
+}
+
+function getTransactionStepIconProperties(transactionStep: number, transactionStepIndex: number) {
+  return {
+    fill: transactionStep >= transactionStepIndex ? 'rgba(255, 168, 0, 1)' : 'rgba(255,255,255,1)',
+    opacity: transactionStep > transactionStepIndex ? '50%' : '100%',
+    height: '19.5px',
+  };
+}
+
+function getTransactionStepTextProperties(
+  transactionStep: number,
+  transactionStepIndex: number,
+  isFirstTransactionStep: boolean,
+  isLastTransactionStep: boolean
+): TextProps {
+  return {
+    textAlign: isFirstTransactionStep ? 'left' : isLastTransactionStep ? 'right' : 'center',
+    color: transactionStep >= transactionStepIndex ? 'orange.01' : 'white.01',
+    fontSize: 'sm',
+    fontWeight: transactionStep === transactionStepIndex ? 800 : 400,
+    opacity: transactionStep > transactionStepIndex ? '50%' : '100%',
+  };
+}
+
+export function TransactionStepIcons({
+  transactionStep,
+  transactionStepIndex,
+  isLastTransactionStep = false,
+}: TransactionStepProps): React.JSX.Element {
+  const transactionStepIconProperties = getTransactionStepIconProperties(
+    transactionStep,
+    transactionStepIndex
+  );
+
+  const transactionStepDividerProperties = getTransactionStepDividerProperties(
+    transactionStep,
+    transactionStepIndex
+  );
+
+  return (
+    <>
+      {getIconForTransactionStep(transactionStepIndex, transactionStepIconProperties)}
+      {getDividerForTransactionStep(transactionStepDividerProperties, isLastTransactionStep)}
+    </>
+  );
+}
+
+export function TransactionStepTexts({
+  transactionStep,
+  transactionStepIndex,
+  transactionStepLabel,
+  isFirstTransactionStep = false,
+  isLastTransactionStep = false,
+}: TransactionStepProps): React.JSX.Element {
+  const transactionStepTextProperties = getTransactionStepTextProperties(
+    transactionStep,
+    transactionStepIndex,
+    isFirstTransactionStep,
+    isLastTransactionStep
+  );
+  return (
+    <Text h="25px" w={'25%'} {...transactionStepTextProperties}>
+      {transactionStepLabel}
+    </Text>
+  );
+}

src/app/components/one-click-yield-container/components/one-click-yield-container.progress-bar/one-click-yield-container.progress-bar.tsx

@@ -0,0 +1,47 @@
+import { HStack, VStack } from '@chakra-ui/react';
+
+import {
+  TransactionStepIcons,
+  TransactionStepTexts,
+} from './components/one-click-yield-container.progress-bar.elements';
+
+interface ProgressBarProps {
+  transactionType: 'mint' | 'burn';
+  transactionStep: number;
+}
+
+export function ProgressBar({
+  transactionType,
+  transactionStep,
+}: ProgressBarProps): React.JSX.Element {
+  const transactionLabels = {
+    mint: ['Select Vault to Deposit into', 'Sign Deposit Transaction', 'Earn Yield'],
+    burn: ['Select Vault to withdraw from', 'Sign Withdraw Transaction', 'Bitcoin Withdrawn'],
+  };
+
+  return (
+    <VStack w={'100%'} pb={'15px'}>
+      <HStack w={'100%'}>
+        <TransactionStepIcons transactionStep={transactionStep} transactionStepIndex={0} />
+        <TransactionStepIcons transactionStep={transactionStep} transactionStepIndex={1} />
+        <TransactionStepIcons
+          transactionStep={transactionStep}
+          transactionStepIndex={2}
+          isLastTransactionStep
+        />
+      </HStack>
+      <HStack w={'100%'} justifyContent={'space-between'}>
+        {transactionLabels[transactionType].map((label, index) => (
+          <TransactionStepTexts
+            key={index}
+            transactionStep={transactionStep}
+            transactionStepIndex={index}
+            transactionStepLabel={label}
+            isFirstTransactionStep={index === 0}
+            isLastTransactionStep={index === transactionLabels[transactionType].length - 1}
+          />
+        ))}
+      </HStack>
+    </VStack>
+  );
+}

src/app/components/one-click-yield-container/components/one-click-yield-container.select-vault-type-stack/one-click-yield-container.select-vault-type-stack.layout.tsx

@@ -0,0 +1,10 @@
+import { VStack } from '@chakra-ui/react';
+import { HasChildren } from '@models/has-children';
+
+export function SelectVaultTypeStackLayout({ children }: HasChildren): React.JSX.Element {
+  return (
+    <VStack w={'50%'} h={'100%'} spacing={'15px'}>
+      {children}
+    </VStack>
+  );
+}

src/app/components/one-click-yield-container/components/one-click-yield-container.select-vault-type-stack/one-click-yield-container.select-vault-type-stack.tsx

@@ -0,0 +1,35 @@
+import { Box, Button, HStack, Text, VStack } from '@chakra-ui/react';
+
+import { SelectVaultTypeStackLayout } from './one-click-yield-container.select-vault-type-stack.layout';
+import {
+  OneClickYieldVaultInformation,
+  VaultTypeBox,
+} 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' },
+];
+
+interface SelectVaultTypeStackProps {
+  handleSelectVaultTypeClick: (vaultType: string) => void;
+}
+
+export function SelectVaultTypeStack({
+  handleSelectVaultTypeClick,
+}: SelectVaultTypeStackProps): React.JSX.Element {
+  return (
+    <SelectVaultTypeStackLayout>
+      <Text fontSize={'lg'} fontWeight={'bold'} color={'white'}>
+        Select Vault Type
+      </Text>
+      {mockVaultTypes.map(vaultInformation => (
+        <VaultTypeBox
+          key={vaultInformation.vaultType} // Add a unique key for each element in the list
+          vaultInformation={vaultInformation}
+          handleSelectVaultTypeClick={handleSelectVaultTypeClick}
+        />
+      ))}
+      <VStack w={'100%'}></VStack>
+    </SelectVaultTypeStackLayout>
+  );
+}

src/app/components/one-click-yield-container/components/one-click-yield-container.select-vault-type-stack/one-click-yield-container.select-vault-type-stack.vault-type-box/one-click-yield-container.select-vault-type-stack.vault-type-box.layout.tsx

@@ -0,0 +1,18 @@
+import { HStack } from '@chakra-ui/react';
+import { HasChildren } from '@models/has-children';
+
+export function VaultTypeBoxLayout({ children }: HasChildren): React.JSX.Element {
+  return (
+    <HStack
+      p={'15px'}
+      w={'100%'}
+      spacing={'15px'}
+      border={'1px'}
+      borderColor={'orange.01'}
+      borderRadius={'md'}
+      justifyContent={'space-between'}
+    >
+      {children}
+    </HStack>
+  );
+}

src/app/components/one-click-yield-container/components/one-click-yield-container.select-vault-type-stack/one-click-yield-container.select-vault-type-stack.vault-type-box/one-click-yield-container.select-vault-type-stack.vault-type-box.tsx

@@ -0,0 +1,37 @@
+import { Button, Text } from '@chakra-ui/react';
+
+import { VaultTypeBoxLayout } from './one-click-yield-container.select-vault-type-stack.vault-type-box.layout';
+
+export interface OneClickYieldVaultInformation {
+  vaultType: string;
+  vaultTypeLabel: string;
+}
+
+interface VaultTypeBoxProps {
+  vaultInformation: OneClickYieldVaultInformation;
+  handleSelectVaultTypeClick: (vaultType: string) => void;
+}
+
+export function VaultTypeBox({
+  vaultInformation,
+  handleSelectVaultTypeClick,
+}: VaultTypeBoxProps): React.JSX.Element {
+  const { vaultType, vaultTypeLabel } = 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>
+    </VaultTypeBoxLayout>
+  );
+}

src/app/components/one-click-yield-container/components/one-click-yield-container.transaction-step-description/components/one-click-yield-container.transaction-step-description.blockchain-tag.tsx

@@ -0,0 +1,12 @@
+import { HStack, Image, Text } from '@chakra-ui/react';
+
+export function BlockchainTag(): React.JSX.Element {
+  return (
+    <HStack pr={'15px'} py={'0px'} bgColor={'white.03'} borderRadius={'xl'}>
+      <Image src={'/images/logos/bitcoin-logo.svg'} alt={'Bitcoin Logo'} boxSize={'20px'} />
+      <Text color={'white.01'} fontSize={'2xs'} fontWeight={800}>
+        {'ON BITCOIN'}
+      </Text>
+    </HStack>
+  );
+}

src/app/components/one-click-yield-container/components/one-click-yield-container.transaction-step-description/components/one-click-yield-container.transaction-step-description.header.tsx

@@ -0,0 +1,44 @@
+import { HStack, Text, VStack } from '@chakra-ui/react';
+
+import { BlockchainTag } from './one-click-yield-container.transaction-step-description.blockchain-tag';
+
+function getTransactionStepDescriptionTitle(
+  transactionType: 'mint' | 'burn',
+  transactionStep: number
+): string {
+  const mintTransactionStepDescriptionTitles = ['Select Vault', 'Deposit Bitcoin', 'Earn Yield'];
+  const burnTransactionStepDescriptionTitles = [
+    'Select Vault',
+    'Withdraw Bitcoin',
+    'Wait for Withdraw Transaction to Confirm',
+  ];
+
+  switch (transactionType) {
+    case 'mint':
+      return mintTransactionStepDescriptionTitles[transactionStep];
+    case 'burn':
+      return burnTransactionStepDescriptionTitles[transactionStep];
+  }
+}
+
+interface HeaderProps {
+  transactionType: 'mint' | 'burn';
+  transactionStep: number;
+}
+
+export function Header({ transactionType, transactionStep }: HeaderProps): React.JSX.Element {
+  const transactionLabel = getTransactionStepDescriptionTitle(transactionType, transactionStep);
+  return (
+    <VStack alignItems={'start'}>
+      <HStack>
+        <Text color={'orange.01'} fontSize={'lg'}>
+          Step {transactionStep + 1}
+        </Text>
+        <BlockchainTag />
+      </HStack>
+      <Text py={'15px'} color={'white.01'} fontSize={'xl'} fontWeight={800}>
+        {transactionLabel}
+      </Text>
+    </VStack>
+  );
+}

src/app/components/one-click-yield-container/components/one-click-yield-container.transaction-step-description/one-click-yield-container.transaction-step-description.layout.tsx

@@ -0,0 +1,10 @@
+import { VStack } from '@chakra-ui/react';
+import { HasChildren } from '@models/has-children';
+
+export function TransactionStepDescriptionLayout({ children }: HasChildren): React.JSX.Element {
+  return (
+    <VStack alignItems={'start'} h={'100%'} w={'42.5%'}>
+      {children}
+    </VStack>
+  );
+}