diff --git a/src/app/components/mint-unmint/components/unmint/components/unmint-vault-selector.tsx b/src/app/components/mint-unmint/components/unmint/components/unmint-vault-selector.tsx index 08f476ec..72c7eb02 100644 --- a/src/app/components/mint-unmint/components/unmint/components/unmint-vault-selector.tsx +++ b/src/app/components/mint-unmint/components/unmint/components/unmint-vault-selector.tsx @@ -1,4 +1,5 @@ -import { useContext, useState } from 'react'; +import { useContext, useEffect, useState } from 'react'; +import { useSelector } from 'react-redux'; import { Button, Text, VStack } from '@chakra-ui/react'; import { VaultCard } from '@components/vault/vault-card'; @@ -7,20 +8,28 @@ import { VaultsList } from '@components/vaults-list/vaults-list'; import { useVaults } from '@hooks/use-vaults'; import { Vault } from '@models/vault'; import { BlockchainContext } from '@providers/blockchain-context-provider'; +import { RootState } from '@store/index'; import { scrollBarCSS } from '@styles/css-styles'; export function UnmintVaultSelector(): React.JSX.Element { - const [selectedVault, setSelectedVault] = useState(undefined); - const [isSubmitting, setIsSubmitting] = useState(false); const { fundedVaults } = useVaults(); + const { unmintStep } = useSelector((state: RootState) => state.mintunmint); + const blockchainContext = useContext(BlockchainContext); const ethereum = blockchainContext?.ethereum; + const [selectedVault, setSelectedVault] = useState(); + const [isSubmitting, setIsSubmitting] = useState(false); + function handleSelect(uuid: string): void { const vault = fundedVaults.find(vault => vault.uuid === uuid); if (vault) setSelectedVault(vault); } + useEffect(() => { + setSelectedVault(fundedVaults.find(vault => vault.uuid === unmintStep[1])); + }, [fundedVaults, unmintStep]); + async function handleUnmint(): Promise { if (selectedVault) { try { @@ -36,7 +45,7 @@ export function UnmintVaultSelector(): React.JSX.Element { return ( - Select vault to unmint dlcBTC: + Select vault to redeem dlcBTC: {selectedVault ? ( ) : ( - + handleUnmint()} > - Unmint dlcBTC + Redeem dlcBTC + {selectedVault && ( + + )} ); } diff --git a/src/app/components/mint-unmint/components/walkthrough/walkthrough.tsx b/src/app/components/mint-unmint/components/walkthrough/walkthrough.tsx index 79230cb1..7ab2a4d0 100644 --- a/src/app/components/mint-unmint/components/walkthrough/walkthrough.tsx +++ b/src/app/components/mint-unmint/components/walkthrough/walkthrough.tsx @@ -119,7 +119,7 @@ export function Walkthrough({ flow, currentStep }: WalkthroughProps): React.JSX. diff --git a/src/app/components/vault/components/vault-expanded-information/components/vault-expanded-information-row.tsx b/src/app/components/vault/components/vault-expanded-information/components/vault-expanded-information-row.tsx index 9936d68f..e3bf1d15 100644 --- a/src/app/components/vault/components/vault-expanded-information/components/vault-expanded-information-row.tsx +++ b/src/app/components/vault/components/vault-expanded-information/components/vault-expanded-information-row.tsx @@ -1,21 +1,47 @@ -import { HStack, Text } from '@chakra-ui/react'; +import { CheckCircleIcon, CopyIcon } from '@chakra-ui/icons'; +import { Button, HStack, Text, Tooltip } from '@chakra-ui/react'; +import { easyTruncateAddress } from '@common/utilities'; +import { useCopyToClipboard } from '@hooks/use-copy-to-clipboard'; -interface VaultExpandedInformationRowProps { - label: string; - value: string; +interface VaultExpandedInformationUUIDRowProps { + uuid: string; } -export function VaultExpandedInformationRow({ - label, - value, -}: VaultExpandedInformationRowProps): React.JSX.Element { +export function VaultExpandedInformationUUIDRow({ + uuid, +}: VaultExpandedInformationUUIDRowProps): React.JSX.Element { + const { hasCopied, copyToClipboard } = useCopyToClipboard(); + return ( - - {label} - + + + UUID + + + + + - {value} + {easyTruncateAddress(uuid)} ); diff --git a/src/app/components/vault/components/vault-expanded-information/vault-expanded-information.tsx b/src/app/components/vault/components/vault-expanded-information/vault-expanded-information.tsx index 7f65b0b6..dec8347d 100644 --- a/src/app/components/vault/components/vault-expanded-information/vault-expanded-information.tsx +++ b/src/app/components/vault/components/vault-expanded-information/vault-expanded-information.tsx @@ -1,38 +1,77 @@ -import { Divider, ScaleFade, Stack, VStack } from '@chakra-ui/react'; -import { easyTruncateAddress } from '@common/utilities'; +import { useDispatch } from 'react-redux'; +import { useNavigate } from 'react-router-dom'; -import { VaultExpandedInformationRow } from './components/vault-expanded-information-row'; +import { Button, Divider, SlideFade, Stack, VStack } from '@chakra-ui/react'; +import { VaultState } from '@models/vault'; +import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions'; + +import { VaultExpandedInformationUUIDRow } from './components/vault-expanded-information-row'; import { VaultExpandedInformationTransactionRow } from './components/vault-expanded-information-transaction-row'; interface VaultExpandedInformationProps { uuid: string; + state: VaultState; fundingTX: string; closingTX: string; isExpanded: boolean; + isSelected?: boolean; + close: () => void; } export function VaultExpandedInformation({ uuid, + state, fundingTX, closingTX, isExpanded, + isSelected, + close, }: VaultExpandedInformationProps): React.JSX.Element { + const navigate = useNavigate(); + const dispatch = useDispatch(); + return ( - + - - - {Boolean(fundingTX) && ( - + + + + {Boolean(fundingTX) && ( + + )} + {Boolean(closingTX) && ( + + )} + + {state === VaultState.READY && !isSelected && ( + )} - {Boolean(closingTX) && ( - + {state === VaultState.FUNDED && !isSelected && ( + )} - + ); } diff --git a/src/app/components/vault/components/vault-information.tsx b/src/app/components/vault/components/vault-information.tsx index fcae3dfa..f67a31ef 100644 --- a/src/app/components/vault/components/vault-information.tsx +++ b/src/app/components/vault/components/vault-information.tsx @@ -1,10 +1,6 @@ -import { useDispatch } from 'react-redux'; -import { useNavigate } from 'react-router-dom'; - import { CheckIcon } from '@chakra-ui/icons'; -import { Button, HStack, Image, Text, VStack } from '@chakra-ui/react'; +import { HStack, Image, Text, VStack } from '@chakra-ui/react'; import { VaultState } from '@models/vault'; -import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions'; import { VaultExpandButton } from './vault-expand-button'; @@ -15,7 +11,6 @@ const getAssetLogo = (state: VaultState) => { }; interface VaultInformationProps { - uuid: string; collateral: number; state: VaultState; timestamp: number; @@ -26,7 +21,6 @@ interface VaultInformationProps { } export function VaultInformation({ - uuid, state, collateral, timestamp, @@ -35,9 +29,6 @@ export function VaultInformation({ isSelected, handleClick, }: VaultInformationProps): React.JSX.Element { - const dispatch = useDispatch(); - const navigate = useNavigate(); - const date = new Date(timestamp * 1000).toLocaleDateString('en-US'); return ( @@ -64,17 +55,6 @@ export function VaultInformation({ > {isSelected && } - ) : state === VaultState.READY && !isSelected ? ( - ) : ( handleClick()} /> )} diff --git a/src/app/components/vault/vault-card.tsx b/src/app/components/vault/vault-card.tsx index fbf56e0f..97b9e196 100644 --- a/src/app/components/vault/vault-card.tsx +++ b/src/app/components/vault/vault-card.tsx @@ -34,7 +34,6 @@ export function VaultCard({ return ( handleSelect && handleSelect()}> setIsExpanded(false)} /> )} {[VaultState.FUNDING, VaultState.CLOSED].includes(vault.state) && ( 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 index fda50a16..42ae4467 100644 --- a/src/app/components/vaults-list/components/vaults-list-group-container.tsx +++ b/src/app/components/vaults-list/components/vaults-list-group-container.tsx @@ -22,7 +22,7 @@ export function VaultsListGroupContainer({ return ( {label && ( - + {['Locking BTC in Progress', 'Unlocking BTC in Progress'].includes(label) && ( )} diff --git a/src/app/hooks/use-copy-to-clipboard.ts b/src/app/hooks/use-copy-to-clipboard.ts new file mode 100644 index 00000000..d63c8ec1 --- /dev/null +++ b/src/app/hooks/use-copy-to-clipboard.ts @@ -0,0 +1,21 @@ +import { useState } from 'react'; + +interface UseCopyToClipboardReturnType { + hasCopied: boolean; + copyToClipboard: (text: string) => Promise; +} + +export function useCopyToClipboard(): UseCopyToClipboardReturnType { + const [hasCopied, setHasCopied] = useState(false); + + async function copyToClipboard(text: string) { + await navigator.clipboard.writeText(text); + setHasCopied(true); + setTimeout(() => setHasCopied(false), 2500); + } + + return { + hasCopied, + copyToClipboard, + }; +} diff --git a/src/styles/button-theme.ts b/src/styles/button-theme.ts index d5a6a749..339e6aa6 100644 --- a/src/styles/button-theme.ts +++ b/src/styles/button-theme.ts @@ -25,7 +25,7 @@ const navigate = defineStyle({ px: '25px', h: '50px', w: '100%', - fontSize: 'md', + fontSize: 'lg', fontWeight: 600, bg: 'none', border: '1px solid',