diff --git a/index.html b/index.html index f828b817..be2d255e 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,9 @@ - + - Vite + React + TS + DLC.Link dlcBTC Website
diff --git a/src/app/components/custom-skeleton/custom-skeleton.tsx b/src/app/components/custom-skeleton/custom-skeleton.tsx index 92fd9f69..97bbb27e 100644 --- a/src/app/components/custom-skeleton/custom-skeleton.tsx +++ b/src/app/components/custom-skeleton/custom-skeleton.tsx @@ -1,24 +1,18 @@ -import { ReactNode } from "react"; - import { Skeleton } from "@chakra-ui/react"; interface CustomSkeletonProps { - children: ReactNode; - isLoaded: boolean; + height: string; } export function CustomSkeleton({ - children, - isLoaded, + height, }: CustomSkeletonProps): React.JSX.Element { return ( - {children} - + h={height} + /> ); } diff --git a/src/app/components/mint-unmint/components/mint/mint.tsx b/src/app/components/mint-unmint/components/mint/mint.tsx index 34430f81..149c4ec9 100644 --- a/src/app/components/mint-unmint/components/mint/mint.tsx +++ b/src/app/components/mint-unmint/components/mint/mint.tsx @@ -1,26 +1,38 @@ import { useState } from "react"; import { HStack } from "@chakra-ui/react"; +import { VaultStatus } from "@models/vault"; -import { mintStepsContent } from "@shared/constants/walkthrough-steps"; +import { exampleVaults } from "@shared/examples/example-vaults"; import { ProgressTimeline } from "../progress-timeline/progress-timeline"; import { TransactionForm } from "../transaction-form/transaction-form"; import { TransactionSummary } from "../transaction-summary/transaction-summary"; import { Walkthrough } from "../walkthrough/walkthrough"; import { MintLayout } from "./components/mint.layout"; -import { StepButton } from "./components/step-button"; +import { StepButton } from "@components/step-button/step-button"; export function Mint(): React.JSX.Element { const [currentStep, setCurrentStep] = useState(0); + const exampleVault = exampleVaults.find( + (vault) => vault.state === VaultStatus.FUNDING, + ); return ( - - - {currentStep === 2 && } + + {[0, 1].includes(currentStep) && ( + + )} + {[2].includes(currentStep) && ( + + )} setCurrentStep((currentStep + 1) % 3)} /> diff --git a/src/app/components/mint-unmint/components/progress-timeline/components/step.tsx b/src/app/components/mint-unmint/components/progress-timeline/components/progress-timeline-step.tsx similarity index 100% rename from src/app/components/mint-unmint/components/progress-timeline/components/step.tsx rename to src/app/components/mint-unmint/components/progress-timeline/components/progress-timeline-step.tsx diff --git a/src/app/components/mint-unmint/components/progress-timeline/progress-timeline.tsx b/src/app/components/mint-unmint/components/progress-timeline/progress-timeline.tsx index 36819626..33c222d9 100644 --- a/src/app/components/mint-unmint/components/progress-timeline/progress-timeline.tsx +++ b/src/app/components/mint-unmint/components/progress-timeline/progress-timeline.tsx @@ -1,6 +1,6 @@ import { HStack, VStack } from "@chakra-ui/react"; -import { StepGraphics, StepText } from "./components/step"; +import { StepGraphics, StepText } from "./components/progress-timeline-step"; interface ProgressTimelineProps { variant: "mint" | "unmint"; diff --git a/src/app/components/mint-unmint/components/setup-information-stack/components/wallet-requirement.tsx b/src/app/components/mint-unmint/components/setup-information-stack/components/setup-information-wallet-requirement.tsx similarity index 81% rename from src/app/components/mint-unmint/components/setup-information-stack/components/wallet-requirement.tsx rename to src/app/components/mint-unmint/components/setup-information-stack/components/setup-information-wallet-requirement.tsx index 507c8390..414ff2fd 100644 --- a/src/app/components/mint-unmint/components/setup-information-stack/components/wallet-requirement.tsx +++ b/src/app/components/mint-unmint/components/setup-information-stack/components/setup-information-wallet-requirement.tsx @@ -1,6 +1,6 @@ import { HStack, Image, Text, VStack } from "@chakra-ui/react"; -interface WalletRequirementProps { +interface SetupInformationWalletRequirementProps { logo: string; color: string; walletName: string; @@ -8,13 +8,13 @@ interface WalletRequirementProps { url: string; } -export function WalletRequirement({ +export function SetupInformationWalletRequirement({ logo, color, walletName, requirement, url, -}: WalletRequirementProps): React.JSX.Element { +}: SetupInformationWalletRequirementProps): React.JSX.Element { return ( diff --git a/src/app/components/mint-unmint/components/setup-information-stack/setup-information-stack.tsx b/src/app/components/mint-unmint/components/setup-information-stack/setup-information-stack.tsx index 4df4ed5e..1d81d5b9 100644 --- a/src/app/components/mint-unmint/components/setup-information-stack/setup-information-stack.tsx +++ b/src/app/components/mint-unmint/components/setup-information-stack/setup-information-stack.tsx @@ -6,7 +6,7 @@ import { Button, HStack, Image, Text, VStack } from "@chakra-ui/react"; import { modalActions } from "@store/slices/modal/modal.actions"; import { SetupInformationStackLayout } from "./components/setup-information-stack.layout"; -import { WalletRequirement } from "./components/wallet-requirement"; +import { SetupInformationWalletRequirement } from "./components/setup-information-wallet-requirement"; export function SetupInformationStack(): React.JSX.Element { const navigate = useNavigate(); @@ -39,14 +39,14 @@ export function SetupInformationStack(): React.JSX.Element { What you will need: - - @@ -36,11 +36,11 @@ export function TransactionFee({ Protocol Fee - {calculateProtocolFee(amount, 0.0001)} BTC + {calculateProtocolFee(assetAmount, 0.0001)} BTC {" "} - = {calculateProtocolFeeInUSD(amount, 36.142, 0.0001)} $ + = {calculateProtocolFeeInUSD(assetAmount, 36.142, 0.0001)} $ ); diff --git a/src/app/components/mint-unmint/components/transaction-form/components/transaction-input.tsx b/src/app/components/mint-unmint/components/transaction-form/components/transaction-form-input.tsx similarity index 57% rename from src/app/components/mint-unmint/components/transaction-form/components/transaction-input.tsx rename to src/app/components/mint-unmint/components/transaction-form/components/transaction-form-input.tsx index 8dcb8031..f6da3a65 100644 --- a/src/app/components/mint-unmint/components/transaction-form/components/transaction-input.tsx +++ b/src/app/components/mint-unmint/components/transaction-form/components/transaction-form-input.tsx @@ -1,19 +1,25 @@ import { HStack, Image, Input, Text, VStack } from "@chakra-ui/react"; import { Field } from "formik"; -import { - TransactionFormValues, - blockchainFormPropertyMap, -} from "../transaction-form"; -interface TransactionInputProps { - blockchain: "ethereum" | "bitcoin"; +import { TransactionFormValues } from "../transaction-form"; + +function validateTokenAmount(value: number): string | undefined { + let error; + if (!value) { + error = "Please enter an amount of dlcBTC you would like to mint"; + } else if (value < 0.0001) { + error = "You can't mint less than 0.0001 dlcBTC"; + } + return error; +} + +interface TransactionFormInputProps { values: TransactionFormValues; } -export function TransactionInput({ - blockchain, +export function TransactionFormInput({ values, -}: TransactionInputProps): React.JSX.Element { +}: TransactionFormInputProps): React.JSX.Element { return ( {blockchainFormPropertyMap[blockchain].alt} dlcBTC diff --git a/src/app/components/mint-unmint/components/transaction-form/components/warning.tsx b/src/app/components/mint-unmint/components/transaction-form/components/transaction-form-warning.tsx similarity index 68% rename from src/app/components/mint-unmint/components/transaction-form/components/warning.tsx rename to src/app/components/mint-unmint/components/transaction-form/components/transaction-form-warning.tsx index 63cb6bfb..46a2f212 100644 --- a/src/app/components/mint-unmint/components/transaction-form/components/warning.tsx +++ b/src/app/components/mint-unmint/components/transaction-form/components/transaction-form-warning.tsx @@ -1,18 +1,17 @@ import { HStack, Link, Text } from "@chakra-ui/react"; -interface WarningProps { - blockchain: "ethereum" | "bitcoin"; +interface TransactionFormWarningProps { + assetAmount: number; } -export function Warning({ - blockchain, -}: WarningProps): React.JSX.Element | boolean { - if (blockchain === "bitcoin") return false; +export function TransactionFormWarning({ + assetAmount, +}: TransactionFormWarningProps): React.JSX.Element { return ( - Make sure you have 10.00 BTC + (fees){" "} + Make sure you have {assetAmount} BTC + (fees){" "} in your{" "} ; } + //TODO: Separate the bitcoin and ethereum cases into two separate functions + return ( {blockchainFormPropertyMap[blockchain].title} - - + {blockchain === "ethereum" ? ( + + ) : ( + + )} + {["ethereum"].includes(blockchain) && ( {errors.amount} - - - {blockchain === "bitcoin" && ( - + )} + {["ethereum"].includes(blockchain) && ( + + )} + {["bitcoin"].includes(blockchain) && ( + )} + + ); +} diff --git a/src/app/components/mint-unmint/components/unmint/components/unmint.layout.tsx b/src/app/components/mint-unmint/components/unmint/components/unmint.layout.tsx index 3b7b3834..2619583a 100644 --- a/src/app/components/mint-unmint/components/unmint/components/unmint.layout.tsx +++ b/src/app/components/mint-unmint/components/unmint/components/unmint.layout.tsx @@ -5,10 +5,12 @@ export function UnmintLayout({ children }: HasChildren): React.JSX.Element { return ( {children} diff --git a/src/app/components/mint-unmint/components/unmint/unmint.tsx b/src/app/components/mint-unmint/components/unmint/unmint.tsx index 3c178a3e..533699e7 100644 --- a/src/app/components/mint-unmint/components/unmint/unmint.tsx +++ b/src/app/components/mint-unmint/components/unmint/unmint.tsx @@ -1,15 +1,42 @@ import { useState } from "react"; -import { StepButton } from "../mint/components/step-button"; +import { HStack } from "@chakra-ui/react"; +import { StepButton } from "@components/step-button/step-button"; +import { VaultStatus } from "@models/vault"; + +import { exampleVaults } from "@shared/examples/example-vaults"; + import { ProgressTimeline } from "../progress-timeline/progress-timeline"; +import { TransactionSummary } from "../transaction-summary/transaction-summary"; +import { Walkthrough } from "../walkthrough/walkthrough"; +import { UnmintVaultSelector } from "./components/unmint-vault-selector"; import { UnmintLayout } from "./components/unmint.layout"; export function Unmint(): React.JSX.Element { - const [currentStep, setCurrentStep] = useState(1); + const [currentStep, setCurrentStep] = useState(0); + const exampleVault = exampleVaults.find( + (vault) => vault.state === VaultStatus.CLOSING, + ); + return ( - setCurrentStep((currentStep + 1) % 3)} /> + + + {[0].includes(currentStep) && } + {[1].includes(currentStep) && ( + + )} + + setCurrentStep((currentStep + 1) % 2)} /> ); } diff --git a/src/app/components/mint-unmint/components/walkthrough/components/blockchain-tag.tsx b/src/app/components/mint-unmint/components/walkthrough/components/walkthrough-blockchain-tag.tsx similarity index 83% rename from src/app/components/mint-unmint/components/walkthrough/components/blockchain-tag.tsx rename to src/app/components/mint-unmint/components/walkthrough/components/walkthrough-blockchain-tag.tsx index 25a9dfd2..a69629f7 100644 --- a/src/app/components/mint-unmint/components/walkthrough/components/blockchain-tag.tsx +++ b/src/app/components/mint-unmint/components/walkthrough/components/walkthrough-blockchain-tag.tsx @@ -11,13 +11,13 @@ const blockchainTagPropertyMap = { }, }; -interface BlockchainTagProps { +interface WalkthroughBlockchainTagProps { blockchain: "ethereum" | "bitcoin"; } -export function BlockchainTag({ +export function WalkthroughBlockchainTag({ blockchain, -}: BlockchainTagProps): React.JSX.Element { +}: WalkthroughBlockchainTagProps): React.JSX.Element { return ( + + + Step {currentStep + 1} + + + + + {title} + + + ); +} diff --git a/src/app/components/mint-unmint/components/walkthrough/walkthrough.tsx b/src/app/components/mint-unmint/components/walkthrough/walkthrough.tsx index 45f8a3aa..6eb734b3 100644 --- a/src/app/components/mint-unmint/components/walkthrough/walkthrough.tsx +++ b/src/app/components/mint-unmint/components/walkthrough/walkthrough.tsx @@ -1,44 +1,151 @@ -import { ReactNode } from "react"; +import { Button, HStack, Image, Link, Text } from "@chakra-ui/react"; +import { TutorialVideo } from "@components/tutorial-video/tutorial-video"; -import { HStack, Text } from "@chakra-ui/react"; - -import { BlockchainTag } from "./components/blockchain-tag"; +import { WalkthroughHeader } from "./components/walkthrough-header"; import { WalkthroughLayout } from "./components/walkthrough.layout"; interface WalkthroughProps { - step: number; - title: string; - blockchain: "ethereum" | "bitcoin"; - primaryBody: ReactNode; - secondaryBody?: ReactNode; - button?: ReactNode; - video?: ReactNode; + flow: "mint" | "unmint"; + currentStep: number; + bitcoinAmount?: number; } export function Walkthrough({ - step, - title, - blockchain, - primaryBody, - secondaryBody, - button, - video, + flow, + currentStep, + bitcoinAmount, }: WalkthroughProps): React.JSX.Element { - return ( - - - - Step {step + 1} - - - - - {title} - - {primaryBody} - {secondaryBody} - {button} - {video} - - ); + switch (flow) { + case "mint": + switch (currentStep) { + case 0: + return ( + + + + Select an amount of dlcBTC you would like to mint and confirm it + in your{" "} + + Ethereum Wallet + + . + + + 1 BTC = 1 dlcBTC + + + + ); + case 1: + return ( + + + + Confirm the transaction in your{" "} + + Bitcoin Wallet{" "} + + which will lock your Bitcoin on-chain. + + + ); + case 2: + return ( + + + + Wait for Bitcoin to get locked on chain{" "} + + (~1 hour) + + . After 6 confirmations, dlcBTC tokens will appear in your + Ethereum Wallet. + + + To ensure your{" "} + dlcBTC tokens + are visible + simply add them + to your Ethereum Wallet. + + + + ); + default: + return <>; + } + case "unmint": + switch (currentStep) { + case 0: + return ( + + + + Select the dlcBTC vault you would like to unmint. After a + successful unmint you will receive BTC in the same amount back + to your wallet. + + + ); + case 1: + return ( + + + + After a successful unmint ( + ~1 hour) your + will receive{" "} + {bitcoinAmount}BTC in + your bitcoin wallet. + + + ); + default: + return <>; + } + } } diff --git a/src/app/components/modals/select-wallet-modal/components/wallet-button.tsx b/src/app/components/modals/select-wallet-modal/components/select-wallet-menu.tsx similarity index 83% rename from src/app/components/modals/select-wallet-modal/components/wallet-button.tsx rename to src/app/components/modals/select-wallet-modal/components/select-wallet-menu.tsx index 7cb7de80..00e912d2 100644 --- a/src/app/components/modals/select-wallet-modal/components/wallet-button.tsx +++ b/src/app/components/modals/select-wallet-modal/components/select-wallet-menu.tsx @@ -1,15 +1,15 @@ import { Button, HStack, Image, Text } from "@chakra-ui/react"; import { Wallet, WalletType } from "@models/wallet"; -interface WalletMenuProps { +interface SelectWalletMenuProps { wallet: Wallet; handleClick: (address: string, walletType: WalletType) => void; } -export function WalletMenu({ +export function SelectWalletMenu({ wallet, handleClick, -}: WalletMenuProps): React.JSX.Element { +}: SelectWalletMenuProps): React.JSX.Element { const { logo, name } = wallet; return ( diff --git a/src/app/components/modals/select-wallet-modal/select-wallet-modal.tsx b/src/app/components/modals/select-wallet-modal/select-wallet-modal.tsx index ba095154..7e4471ff 100644 --- a/src/app/components/modals/select-wallet-modal/select-wallet-modal.tsx +++ b/src/app/components/modals/select-wallet-modal/select-wallet-modal.tsx @@ -5,7 +5,7 @@ import { CheckIcon } from "@chakra-ui/icons"; import { HStack, ScaleFade, Text, VStack } from "@chakra-ui/react"; import { ModalComponentProps } from "@components/modals/components/modal-container"; import { ModalLayout } from "@components/modals/components/modal.layout"; -import { WalletMenu } from "@components/modals/select-wallet-modal/components/wallet-button"; +import { SelectWalletMenu } from "@components/modals/select-wallet-modal/components/select-wallet-menu"; import { SelectNetworkButton } from "@components/select-network-button/select-network-button"; import { Network } from "@models/network"; import { WalletType, ethereumWallets } from "@models/wallet"; @@ -66,7 +66,7 @@ export function SelectWalletModal({ Select Wallet {ethereumWallets.map((wallet) => ( - - + {address ? ( <> - - + - - - + + ) : ( - + )} ) : ( - handleClick()} /> diff --git a/src/app/components/vault/components/progress-bar.tsx b/src/app/components/vault/components/vault-progress-bar.tsx similarity index 69% rename from src/app/components/vault/components/progress-bar.tsx rename to src/app/components/vault/components/vault-progress-bar.tsx index 4878babc..5c730861 100644 --- a/src/app/components/vault/components/progress-bar.tsx +++ b/src/app/components/vault/components/vault-progress-bar.tsx @@ -1,18 +1,12 @@ import { Box, Progress, Text, VStack } from "@chakra-ui/react"; -import { VaultStatus } from "@models/vault"; -interface ProgressBarProps { - state: VaultStatus; +interface VaultProgressBarProps { confirmedBlocks: number; } -export function ProgressBar({ - state, +export function VaultProgressBar({ confirmedBlocks, -}: ProgressBarProps): React.JSX.Element | boolean { - if (state !== VaultStatus.FUNDING && state !== VaultStatus.CLOSING) - return false; - +}: VaultProgressBarProps): React.JSX.Element { return ( diff --git a/src/app/components/vault/vault-card.tsx b/src/app/components/vault/vault-card.tsx index ab086201..ffcde107 100644 --- a/src/app/components/vault/vault-card.tsx +++ b/src/app/components/vault/vault-card.tsx @@ -1,48 +1,55 @@ import React, { useState } from "react"; -import { useLoadingDelay } from "@hooks/use-loading-delay"; -import { VaultStatus } from "@models/vault"; +import { CustomSkeleton } from "@components/custom-skeleton/custom-skeleton"; +import { Vault, VaultStatus } from "@models/vault"; -import { ExpandedInformationStack } from "./components/expanded-information-stack/expanded-information-stack"; -import { InformationStack } from "./components/information-stack"; -import { ProgressBar } from "./components/progress-bar"; import { VaultCardLayout } from "./components/vault-card.layout"; +import { VaultExpandedInformation } from "./components/vault-expanded-information/vault-expanded-information"; +import { VaultInformation } from "./components/vault-information"; +import { VaultProgressBar } from "./components/vault-progress-bar"; interface VaultBoxProps { - uuid: string; - collateral: number; - state: VaultStatus; - fundingTX: string; - closingTX: string; - preventLoad?: boolean; + vault?: Vault; + isSelected?: boolean; + isSelectable?: boolean; + handleSelect?: () => void; } export function VaultCard({ - uuid, - collateral, - state, - fundingTX, - closingTX, + vault, + isSelected = false, + isSelectable = false, + handleSelect, }: VaultBoxProps): React.JSX.Element { - const isLoaded = useLoadingDelay(3000); const confirmedBlocks = 3; - const [isExpanded, setIsExpanded] = useState(false); + const [isExpanded, setIsExpanded] = useState(isSelected ? true : false); + + if (!vault) return ; return ( - - handleSelect && handleSelect()} + > + setIsExpanded(!isExpanded)} /> - - + {isExpanded && ( + + )} + {[VaultStatus.FUNDING, VaultStatus.CLOSING].includes(vault.state) && ( + + )} ); } diff --git a/src/app/components/vaults-list/components/vault-group-blank-container.tsx b/src/app/components/vaults-list/components/vaults-list-group-blank-container.tsx similarity index 84% rename from src/app/components/vaults-list/components/vault-group-blank-container.tsx rename to src/app/components/vaults-list/components/vaults-list-group-blank-container.tsx index 8d6205e1..1db448f4 100644 --- a/src/app/components/vaults-list/components/vault-group-blank-container.tsx +++ b/src/app/components/vaults-list/components/vaults-list-group-blank-container.tsx @@ -2,7 +2,7 @@ import { VStack } from "@chakra-ui/react"; import { VaultCardBlank } from "@components/vault/components/vault-card-blank"; import { blankArray } from "@models/blank-array"; -export function VaultGroupBlankContainer(): React.JSX.Element { +export function VaultsListGroupBlankContainer(): React.JSX.Element { return ( {blankArray.map((_, index) => ( diff --git a/src/app/components/vaults-list/components/vault-group-container.tsx b/src/app/components/vaults-list/components/vaults-list-group-container.tsx similarity index 56% rename from src/app/components/vaults-list/components/vault-group-container.tsx rename to src/app/components/vaults-list/components/vaults-list-group-container.tsx index 3540bf64..0f1a00a4 100644 --- a/src/app/components/vaults-list/components/vault-group-container.tsx +++ b/src/app/components/vaults-list/components/vaults-list-group-container.tsx @@ -2,15 +2,21 @@ import { HStack, Spinner, Text, VStack } from "@chakra-ui/react"; import { VaultCard } from "@components/vault/vault-card"; import { Vault } from "@models/vault"; -interface VaultGroupContainerProps { +interface VaultsListGroupContainerProps { label?: string; vaults: Vault[]; + selectedVaultUUID?: string; + isSelectable?: boolean; + handleSelect?: (uuid: string) => void; } -export function VaultGroupContainer({ +export function VaultsListGroupContainer({ label, vaults, -}: VaultGroupContainerProps): React.JSX.Element | boolean { + selectedVaultUUID, + isSelectable = false, + handleSelect, +}: VaultsListGroupContainerProps): React.JSX.Element | boolean { if (vaults.length === 0) return false; return ( @@ -24,7 +30,13 @@ export function VaultGroupContainer({ )} {vaults.map((vault, index) => ( - + handleSelect && handleSelect(vault.uuid)} + /> ))} ); diff --git a/src/app/components/vaults-list/vaults-list.tsx b/src/app/components/vaults-list/vaults-list.tsx index 0485574b..0b5917c3 100644 --- a/src/app/components/vaults-list/vaults-list.tsx +++ b/src/app/components/vaults-list/vaults-list.tsx @@ -18,9 +18,11 @@ export function VaultsList({ }: VaultsListProps): React.JSX.Element { return ( - - {title} - + {title && ( + + {title} + + )} { - const [isLoaded, setIsLoaded] = useState(false); +// export const useLoadingDelay = (delay = 3000): boolean => { +// const [isLoaded, setIsLoaded] = useState(false); - useEffect(() => { - const timer = setTimeout(() => { - setIsLoaded(true); - }, delay); +// useEffect(() => { +// const timer = setTimeout(() => { +// setIsLoaded(true); +// }, delay); - return () => clearTimeout(timer); - }, [delay]); +// return () => clearTimeout(timer); +// }, [delay]); - return isLoaded; -}; +// return isLoaded; +// }; diff --git a/src/app/pages/my-vaults/my-vaults.tsx b/src/app/pages/my-vaults/my-vaults.tsx index c8cc170f..d7c68049 100644 --- a/src/app/pages/my-vaults/my-vaults.tsx +++ b/src/app/pages/my-vaults/my-vaults.tsx @@ -1,4 +1,4 @@ -import { MyVaultsLarge } from "@components/my-vaults-large/my-vaults-large"; +import { MyVaultsLarge } from "@components/my-vaults/my-vaults-large"; import { PageLayout } from "@pages/components/page.layout"; export function MyVaults(): React.JSX.Element { diff --git a/src/shared/constants/walkthrough-steps.tsx b/src/shared/constants/walkthrough-steps.tsx deleted file mode 100644 index 65f64d16..00000000 --- a/src/shared/constants/walkthrough-steps.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import { Button, HStack, Image, Link, Text } from "@chakra-ui/react"; -import { TutorialVideo } from "@components/mint-unmint/components/mint/components/video"; - -interface StepContent { - title: string; - blockchain: "ethereum" | "bitcoin"; - primaryBody: React.ReactNode; - secondaryBody?: React.ReactNode; - button?: React.ReactNode; - video?: React.ReactNode; -} - -const stepOne: StepContent = { - title: "Create Vault", - blockchain: "ethereum", - primaryBody: ( - - Select an amount of dlcBTC you would like to mint and confirm it in your{" "} - - Ethereum Wallet - - . - - ), - secondaryBody: ( - - 1 BTC = 1 dlcBTC - - ), - video: , -}; - -const stepTwo: StepContent = { - title: "Lock Bitcoin", - blockchain: "bitcoin", - primaryBody: ( - - Confirm the transaction in your{" "} - - Bitcoin Wallet{" "} - - which will lock your Bitcoin on-chain. - - ), -}; - -const stepThree: StepContent = { - title: "Mint dlcBTC", - blockchain: "ethereum", - primaryBody: ( - - Wait for Bitcoin to get locked on chain{" "} - - (~1 hour) - - . After 6 confirmations, dlcBTC tokens will appear in your Ethereum - Wallet. - - ), - secondaryBody: ( - - To ensure your dlcBTC tokens - are visible - simply add them - to your Ethereum Wallet. - - ), - button: ( - - ), -}; - -export const mintStepsContent: StepContent[] = [stepOne, stepTwo, stepThree]; diff --git a/src/shared/examples/example-vaults.ts b/src/shared/examples/example-vaults.ts index 8a0d397b..d451f7ee 100644 --- a/src/shared/examples/example-vaults.ts +++ b/src/shared/examples/example-vaults.ts @@ -2,21 +2,21 @@ import { Vault, VaultStatus } from "@models/vault"; export const exampleVaults: Vault[] = [ { - uuid: "0x123456789", + uuid: "0x123456qwe", collateral: 0.5, state: VaultStatus.READY, fundingTX: "", closingTX: "", }, { - uuid: "0x123456789", + uuid: "0x123456rty", collateral: 1.5, state: VaultStatus.READY, fundingTX: "", closingTX: "", }, { - uuid: "0x123456789", + uuid: "0x123456uio", collateral: 2.5, state: VaultStatus.FUNDING, fundingTX: @@ -24,7 +24,7 @@ export const exampleVaults: Vault[] = [ closingTX: "", }, { - uuid: "0x123456789", + uuid: "0x123456pas", collateral: 3.5, state: VaultStatus.FUNDING, fundingTX: @@ -32,7 +32,7 @@ export const exampleVaults: Vault[] = [ closingTX: "", }, { - uuid: "0x123456789", + uuid: "0x123456dfg", collateral: 2.5, state: VaultStatus.FUNDED, fundingTX: @@ -40,7 +40,7 @@ export const exampleVaults: Vault[] = [ closingTX: "", }, { - uuid: "0x123456789", + uuid: "0x123456hjk", collateral: 3.5, state: VaultStatus.FUNDED, fundingTX: @@ -48,7 +48,39 @@ export const exampleVaults: Vault[] = [ closingTX: "", }, { - uuid: "0x123456789", + uuid: "0x123456dfe", + collateral: 2.5, + state: VaultStatus.FUNDED, + fundingTX: + "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", + closingTX: "", + }, + { + uuid: "0x123456hjq", + collateral: 3.5, + state: VaultStatus.FUNDED, + fundingTX: + "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", + closingTX: "", + }, + { + uuid: "0x123456dfh", + collateral: 2.5, + state: VaultStatus.FUNDED, + fundingTX: + "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", + closingTX: "", + }, + { + uuid: "0x123456hjl", + collateral: 3.5, + state: VaultStatus.FUNDED, + fundingTX: + "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", + closingTX: "", + }, + { + uuid: "0x123456lzc", collateral: 4.5, state: VaultStatus.CLOSING, fundingTX: @@ -57,7 +89,7 @@ export const exampleVaults: Vault[] = [ "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", }, { - uuid: "0x123456789", + uuid: "0x123456cvb", collateral: 5.5, state: VaultStatus.CLOSING, fundingTX: @@ -66,7 +98,7 @@ export const exampleVaults: Vault[] = [ "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", }, { - uuid: "0x123456789", + uuid: "0x123456nmq", collateral: 6.5, state: VaultStatus.CLOSED, fundingTX: @@ -75,7 +107,7 @@ export const exampleVaults: Vault[] = [ "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", }, { - uuid: "0x123456789", + uuid: "0x123456pgh", collateral: 7.5, state: VaultStatus.CLOSED, fundingTX: @@ -84,7 +116,7 @@ export const exampleVaults: Vault[] = [ "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", }, { - uuid: "0x123456789", + uuid: "0x123456skf", collateral: 8.5, state: VaultStatus.CLOSED, fundingTX: @@ -93,7 +125,7 @@ export const exampleVaults: Vault[] = [ "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", }, { - uuid: "0x123456789", + uuid: "0x123456lkh", collateral: 9.5, state: VaultStatus.CLOSED, fundingTX: