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 (
+
+
+
+
+ );
+}
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 (
+
+
+ {`${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,
},
});