diff --git a/public/images/deposit-img.png b/public/images/deposit-img.png new file mode 100644 index 00000000..28d7a6ad Binary files /dev/null and b/public/images/deposit-img.png differ diff --git a/public/images/logos/enzyme-logo.svg b/public/images/logos/enzyme-logo.svg new file mode 100644 index 00000000..7786f712 --- /dev/null +++ b/public/images/logos/enzyme-logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/images/logos/mellow-logo.svg b/public/images/logos/mellow-logo.svg new file mode 100644 index 00000000..0047ba4e --- /dev/null +++ b/public/images/logos/mellow-logo.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/logos/symbiotic-comp-logo.svg b/public/images/logos/symbiotic-comp-logo.svg new file mode 100644 index 00000000..9c1d953b --- /dev/null +++ b/public/images/logos/symbiotic-comp-logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/images/logos/symbiotic-logo.svg b/public/images/logos/symbiotic-logo.svg new file mode 100644 index 00000000..df406079 --- /dev/null +++ b/public/images/logos/symbiotic-logo.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/images/logos/uniswap-comp-logo.svg b/public/images/logos/uniswap-comp-logo.svg new file mode 100644 index 00000000..40203dd4 --- /dev/null +++ b/public/images/logos/uniswap-comp-logo.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/app/components/one-click-yield-container/components/one-click-yield-container.progress-bar/components/one-click-yield-container.progress-bar.elements.tsx b/src/app/components/one-click-yield-container/components/one-click-yield-container.progress-bar/components/one-click-yield-container.progress-bar.elements.tsx index fc6df798..ec71f367 100644 --- a/src/app/components/one-click-yield-container/components/one-click-yield-container.progress-bar/components/one-click-yield-container.progress-bar.elements.tsx +++ b/src/app/components/one-click-yield-container/components/one-click-yield-container.progress-bar/components/one-click-yield-container.progress-bar.elements.tsx @@ -1,4 +1,4 @@ -import { Divider, HStack, Stack, Text, TextProps } from '@chakra-ui/react'; +import { Divider, Text, TextProps } from '@chakra-ui/react'; import { StepIconOne, StepIconThree, StepIconTwo } from '../../../../../../styles/icon'; diff --git a/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 b/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 index 709f9733..f125a6d5 100644 --- a/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 +++ b/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 @@ -1,4 +1,4 @@ -import { Box, Button, HStack, Text, VStack } from '@chakra-ui/react'; +import { Text, VStack } from '@chakra-ui/react'; import { SelectVaultTypeStackLayout } from './one-click-yield-container.select-vault-type-stack.layout'; import { @@ -7,7 +7,18 @@ 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', + vaultTypeLogoUrl: '/images/logos/enzyme-logo.svg', + }, + { + vaultType: 'symbiotic', + vaultTypeLogoUrl: '/images/logos/symbiotic-comp-logo.svg', + }, + { + vaultType: 'uniswap', + vaultTypeLogoUrl: '/images/logos/uniswap-comp-logo.svg', + }, ]; interface SelectVaultTypeStackProps { diff --git a/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/components/one-click-yield-container.select-vault-type-stack.vault-type-box.button.tsx b/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/components/one-click-yield-container.select-vault-type-stack.vault-type-box.button.tsx new file mode 100644 index 00000000..0d7396c9 --- /dev/null +++ b/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/components/one-click-yield-container.select-vault-type-stack.vault-type-box.button.tsx @@ -0,0 +1,22 @@ +import { Button, HStack, Image, Text } from '@chakra-ui/react'; + +interface VaultTypeBoxButtonProps { + vaultType: string; + handleSelectVaultTypeClick: (vaultType: string) => void; +} + +export function VaultTypeBoxButton({ + vaultType, + handleSelectVaultTypeClick, +}: VaultTypeBoxButtonProps): React.JSX.Element { + return ( + + ); +} diff --git a/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/components/one-click-yield-container.select-vault-type-stack.vault-type-box.header.tsx b/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/components/one-click-yield-container.select-vault-type-stack.vault-type-box.header.tsx new file mode 100644 index 00000000..4d0a13fa --- /dev/null +++ b/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/components/one-click-yield-container.select-vault-type-stack.vault-type-box.header.tsx @@ -0,0 +1,16 @@ +import { InfoOutlineIcon } from '@chakra-ui/icons'; +import { HStack, Image } from '@chakra-ui/react'; + +interface VaultTypeBoxHeaderProps { + imgPath: string; + name: string; +} + +export function VaultTypeBoxHeader({ imgPath, name }: VaultTypeBoxHeaderProps): React.JSX.Element { + return ( + + {`${name} + + + ); +} diff --git a/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/components/one-click-yield-container.select-vault-type-stack.vault-type-box.point-chip.tsx b/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/components/one-click-yield-container.select-vault-type-stack.vault-type-box.point-chip.tsx new file mode 100644 index 00000000..47309ed4 --- /dev/null +++ b/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/components/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 ( + + {'Point + {`${multiplier}x`} + + ); +} diff --git a/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 b/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 index ba5b932e..ca0f8228 100644 --- a/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 +++ b/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 @@ -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 ( - {children} - + ); } diff --git a/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 b/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 index 03af5fcb..4cf58f2b 100644 --- a/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 +++ b/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 @@ -1,10 +1,35 @@ -import { Button, Text } from '@chakra-ui/react'; +/* eslint-disable @typescript-eslint/no-unused-vars */ +import { HStack, Text, VStack } from '@chakra-ui/react'; +import { VaultTypeBoxButton } from './components/one-click-yield-container.select-vault-type-stack.vault-type-box.button'; +import { VaultTypeBoxHeader } from './components/one-click-yield-container.select-vault-type-stack.vault-type-box.header'; +import { + VaultTypeBoxPointChip, + VaultTypeBoxPointChipProps, +} 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'; +const mockPointChips: VaultTypeBoxPointChipProps[] = [ + { + bgColor: 'purple.01', + imgPath: '/images/deposit-img.png', + multiplier: 5, + }, + { + bgColor: 'white.03', + imgPath: '/images/logos/symbiotic-logo.svg', + multiplier: 20, + }, + { + bgColor: 'white.03', + imgPath: '/images/logos/mellow-logo.svg', + multiplier: 47, + }, +]; + export interface OneClickYieldVaultInformation { vaultType: string; - vaultTypeLabel: string; + vaultTypeLogoUrl: string; } interface VaultTypeBoxProps { @@ -16,22 +41,41 @@ export function VaultTypeBox({ vaultInformation, handleSelectVaultTypeClick, }: VaultTypeBoxProps): React.JSX.Element { - const { vaultType, vaultTypeLabel } = vaultInformation; + const { vaultType, vaultTypeLogoUrl } = vaultInformation; return ( - {vaultTypeLabel} - + + + + + + + + Current APY + + + +12.5% + + + + + Points + + + {mockPointChips.map(pointChip => ( + + ))} + + + ); } diff --git a/src/app/components/one-click-yield-container/components/one-click-yield-container.transaction-step-description/one-click-yield-container.transaction-step-description.tsx b/src/app/components/one-click-yield-container/components/one-click-yield-container.transaction-step-description/one-click-yield-container.transaction-step-description.tsx index c9f21b36..0cc55fea 100644 --- a/src/app/components/one-click-yield-container/components/one-click-yield-container.transaction-step-description/one-click-yield-container.transaction-step-description.tsx +++ b/src/app/components/one-click-yield-container/components/one-click-yield-container.transaction-step-description/one-click-yield-container.transaction-step-description.tsx @@ -1,4 +1,4 @@ -import { Link, Text } from '@chakra-ui/react'; +import { Text } from '@chakra-ui/react'; import { Header } from './components/one-click-yield-container.transaction-step-description.header'; import { TransactionStepDescriptionLayout } from './one-click-yield-container.transaction-step-description.layout'; diff --git a/src/app/components/one-click-yield-container/components/one-click-yield-transaction-form/components/one-click-yield-container.transaction-form.bitcoin-funds-information-stack.tsx b/src/app/components/one-click-yield-container/components/one-click-yield-transaction-form/components/one-click-yield-container.transaction-form.bitcoin-funds-information-stack.tsx index 486c1af2..0a8d3c94 100644 --- a/src/app/components/one-click-yield-container/components/one-click-yield-transaction-form/components/one-click-yield-container.transaction-form.bitcoin-funds-information-stack.tsx +++ b/src/app/components/one-click-yield-container/components/one-click-yield-transaction-form/components/one-click-yield-container.transaction-form.bitcoin-funds-information-stack.tsx @@ -1,17 +1,14 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ import { HStack, Text } from '@chakra-ui/react'; interface BitcoinFundsInformationStackProps { - transactionType: 'mint' | 'burn'; - transactionStep: number; bitcoinAmount: number; - bitcoinWalletLoadingState: [boolean, string]; + transactionType: 'mint' | 'burn'; + transactionStep: 0 | 1 | 2; } export function BitcoinFundsInformationStack({ - transactionType, - transactionStep, bitcoinAmount, - bitcoinWalletLoadingState, }: BitcoinFundsInformationStackProps): React.JSX.Element | false { return ( - {getButtonLabel( - transactionType, - transactionStep, - isSubmitting, - bitcoinWalletContextState - )} + {getButtonLabel(transactionType, isSubmitting, bitcoinWalletContextState)} )} /> diff --git a/src/app/components/one-click-yield-container/components/one-click-yield-transaction-form/one-click-yield-container.transaction-form.tsx.tsx b/src/app/components/one-click-yield-container/components/one-click-yield-transaction-form/one-click-yield-container.transaction-form.tsx.tsx index 6cd4e784..feb3ddd2 100644 --- a/src/app/components/one-click-yield-container/components/one-click-yield-transaction-form/one-click-yield-container.transaction-form.tsx.tsx +++ b/src/app/components/one-click-yield-container/components/one-click-yield-transaction-form/one-click-yield-container.transaction-form.tsx.tsx @@ -165,18 +165,14 @@ export function OneClickYieldTransactionForm({ /> { - return ( - - - One Click Yield - - - ); -}; - -export default BackgroundTextComponent; diff --git a/src/app/components/one-click-yield-container/one-click-yield-container.tsx b/src/app/components/one-click-yield-container/one-click-yield-container.tsx index b7a48c97..4e66fa11 100644 --- a/src/app/components/one-click-yield-container/one-click-yield-container.tsx +++ b/src/app/components/one-click-yield-container/one-click-yield-container.tsx @@ -1,18 +1,9 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ import { useContext, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { - Box, - Button, - HStack, - Image, - Text, - UseToastOptions, - VStack, - useToast, -} from '@chakra-ui/react'; +import { Button, HStack, Image, Text, UseToastOptions, VStack, useToast } from '@chakra-ui/react'; import { usePSBT } from '@hooks/use-psbt'; -import { Vault } from '@models/vault.tsx'; import { BitcoinWalletContext, BitcoinWalletContextState, @@ -45,13 +36,7 @@ const createWithdrawErrorToast = (errorMessage: string): UseToastOptions => ({ isClosable: true, }); -interface OneClickYieldContainerProps { - userOneClickYieldVaults: Vault[]; -} - -export function OneClickYieldContainer({ - userOneClickYieldVaults, -}: OneClickYieldContainerProps): React.JSX.Element { +export function OneClickYieldContainer(): React.JSX.Element { const toast = useToast(); const dispatch = useDispatch(); diff --git a/src/app/components/one-click-yield-vault-box/components/one-click-yield-vault-box.action-button-group.tsx b/src/app/components/one-click-yield-vault-box/components/one-click-yield-vault-box.action-button-group.tsx index 1e8b1daf..d55dc8f2 100644 --- a/src/app/components/one-click-yield-vault-box/components/one-click-yield-vault-box.action-button-group.tsx +++ b/src/app/components/one-click-yield-vault-box/components/one-click-yield-vault-box.action-button-group.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ import { Divider, HStack, VStack } from '@chakra-ui/react'; import { VaultState } from 'dlc-btc-lib/models'; @@ -19,8 +20,10 @@ export function ActionButtonGroup({ handleDepositClick, handleWithdrawClick, }: ActionButtonGroupProps): React.JSX.Element | false { - const isWithdrawButtonDisabled = false; - const isDepositButtonDisabled = false; + if (vaultState === VaultState.PENDING) return false; + + const isWithdrawButtonDisabled = vaultTotalLockedValue === 0; + const isDepositButtonDisabled = vaultTotalLockedValue === vaultTotalMintedValue; return ( diff --git a/src/app/components/one-click-yield-vault-box/one-click-yield-vault-box.tsx b/src/app/components/one-click-yield-vault-box/one-click-yield-vault-box.tsx index a220daf5..be9a1643 100644 --- a/src/app/components/one-click-yield-vault-box/one-click-yield-vault-box.tsx +++ b/src/app/components/one-click-yield-vault-box/one-click-yield-vault-box.tsx @@ -1,9 +1,11 @@ -import { useState } from 'react'; +/* eslint-disable @typescript-eslint/no-unused-vars */ +import { useContext, useState } from 'react'; import { useDispatch } from 'react-redux'; import { InfoOutlineIcon } from '@chakra-ui/icons'; import { Collapse, Divider, HStack, Text, VStack } from '@chakra-ui/react'; import { Vault } from '@models/vault'; +import { ProofOfReserveContext } from '@providers/proof-of-reserve-context-provider'; import { oneClickYieldActions } from '@store/slices/one-click-yield/one-click-yeild.actions'; import { TransactionState } from '@store/slices/one-click-yield/one-click-yield.slice'; @@ -21,6 +23,8 @@ export function OneClickYieldVaultBox({ oneClickYieldVault, }: OneClickYieldVaultBoxProps): React.JSX.Element { const dispatch = useDispatch(); + + const { bitcoinPrice } = useContext(ProofOfReserveContext); const [isVaultExpanded, setIsVaultExpanded] = useState(false); const handleDepositClick = (vaultUUID: string, vaultType: string) => { @@ -64,10 +68,13 @@ export function OneClickYieldVaultBox({ - + setIsVaultExpanded(!isVaultExpanded)} /> - + @@ -115,9 +122,9 @@ export function OneClickYieldVaultBox({ handleDepositClick('vaultUUID', 'vaultType')} handleWithdrawClick={() => handleWithdrawClick('vaultUUID', 'vaultType')} handleResumeClick={() => handleResumeClick()} diff --git a/src/app/components/one-click-yield-vault-container.tsx/one-click-yield-vault-container.tsx b/src/app/components/one-click-yield-vault-container.tsx/one-click-yield-vault-container.tsx index eacdcf5f..6c8f4eac 100644 --- a/src/app/components/one-click-yield-vault-container.tsx/one-click-yield-vault-container.tsx +++ b/src/app/components/one-click-yield-vault-container.tsx/one-click-yield-vault-container.tsx @@ -2,7 +2,7 @@ import { VStack } from '@chakra-ui/react'; import { OneClickYieldFadeLayer } from '@components/one-click-yield-container/components/one-click-yield-container.fade-layer'; import { OneClickYieldVaultBox } from '@components/one-click-yield-vault-box/one-click-yield-vault-box'; import { Vault } from '@models/vault'; -import { oneClickYieldScrollBarCSS, scrollBarCSS } from '@styles/css-styles'; +import { oneClickYieldScrollBarCSS } from '@styles/css-styles'; import { OneClickYielVaultContainerLayout } from './one-click-yield-vault-container.layout'; diff --git a/src/app/pages/one-click-yield/one-click-yield.page.tsx b/src/app/pages/one-click-yield/one-click-yield.page.tsx index 6c8b8b57..4376b0b4 100644 --- a/src/app/pages/one-click-yield/one-click-yield.page.tsx +++ b/src/app/pages/one-click-yield/one-click-yield.page.tsx @@ -13,7 +13,7 @@ export function OneClickYieldPage(): React.JSX.Element { return ( - + diff --git a/src/shared/models/form.models.ts b/src/shared/models/form.models.ts index 92b0dcd2..e004f77c 100644 --- a/src/shared/models/form.models.ts +++ b/src/shared/models/form.models.ts @@ -13,3 +13,17 @@ export interface TransactionFormAPI }, undefined > {} + +export interface OneClickYieldTransactionFormAPI + extends FormApi< + { + bitcoinAmount: number; + }, + undefined + >, + ReactFormApi< + { + bitcoinAmount: number; + }, + undefined + > {} diff --git a/src/styles/button-theme.ts b/src/styles/button-theme.ts index 56c887a7..63d75c93 100644 --- a/src/styles/button-theme.ts +++ b/src/styles/button-theme.ts @@ -157,6 +157,14 @@ 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 +180,6 @@ export const buttonTheme = defineStyleConfig({ ledger, points, merchantTableItem, + depositBTC, }, });