From efbe039c4b1b6a23be2f0a8239977e6e8e549975 Mon Sep 17 00:00:00 2001 From: Polybius93 Date: Wed, 15 Nov 2023 17:35:04 +0100 Subject: [PATCH] feat: modified container properties, modified skeletons --- public/images/logos/bitcoin-logo.svg | 28 +--- .../vault-box-information-stack.tsx | 45 ------ src/app/components/dlc-btc-item/vault-box.tsx | 49 ------- src/app/components/fade-layer/fade-layer.tsx | 3 +- src/app/components/header/components/tabs.tsx | 47 ++++--- src/app/components/header/header.tsx | 17 ++- .../mint-unmint-box/mint-unmint-box.tsx | 33 ----- .../components/mint-unmint.layout.tsx} | 4 +- .../protocol-summary-stack.layout.tsx | 0 .../protocol-summary-stack.tsx | 7 +- .../setup-information-stack.layout.tsx | 3 +- .../components/wallet-requirement.tsx | 29 ++++ .../setup-information-stack.tsx | 53 +++---- .../components/mint-unmint/mint-unmint.tsx | 51 +++++++ .../modals/components/modal.layout.tsx | 2 +- .../select-wallet-modal.tsx | 72 ++++++---- .../components/disconnected-info-stack.tsx | 33 ----- .../components/balance-info.tsx | 32 ----- .../my-vaults-large-container-header.tsx | 40 ------ .../my-vaults-large-container.tsx | 51 ------- .../components/disconnected-info-stack.tsx | 38 +++++ .../components/balance-info.tsx | 34 +++++ .../my-vaults-large-header.tsx | 49 +++++++ .../components/my-vaults-large.layout.tsx} | 2 +- .../my-vaults-large/my-vaults-large.tsx | 78 ++++++++++ .../my-vaults-small-container.layout.tsx | 19 --- .../my-vaults-small-container.tsx | 46 ------ .../components/my-vaults-small.layout.tsx | 21 +++ .../my-vaults-small/my-vaults-small.tsx | 53 +++++++ .../components/protocol-history-item.tsx | 6 +- .../components/asset-row.tsx} | 7 +- .../components/transaction-row.tsx} | 0 .../vault-box-expanded-information-stack.tsx | 12 +- .../vault/components/vault-card-blank.tsx | 19 +++ .../components/vault-card-button.tsx} | 6 +- .../vault-card-connect-wallet-stack.tsx | 52 +++++++ .../components/vault-card-progress-bar.tsx} | 6 +- .../components/vault-card.layout.tsx} | 10 +- src/app/components/vault/vault-card.tsx | 48 +++++++ .../vault-group-blank-container.tsx | 13 ++ .../components/vault-group-container.tsx | 30 ++-- .../components/vaults-list/vaults-list.tsx | 33 +++-- src/app/hooks/use-vaults.ts | 36 +++-- src/app/pages/components/page.layout.tsx | 15 +- src/app/pages/dashboard/dashboard.tsx | 22 ++- src/app/pages/my-vaults/my-vaults.tsx | 6 +- src/app/store/slices/account/account.slice.ts | 8 +- src/shared/examples/example-vaults.ts | 133 +++++------------- src/shared/models/blank-array.ts | 1 + src/styles/app-theme.ts | 3 +- src/styles/button-theme.ts | 22 ++- src/styles/divider-theme.ts | 14 +- src/styles/menu-theme.ts | 119 ++++++++-------- 53 files changed, 828 insertions(+), 732 deletions(-) delete mode 100644 src/app/components/dlc-btc-item/components/vault-box-information-stack.tsx delete mode 100644 src/app/components/dlc-btc-item/vault-box.tsx delete mode 100644 src/app/components/mint-unmint-box/mint-unmint-box.tsx rename src/app/components/{mint-unmint-box/components/mint-unmint-box.layout.tsx => mint-unmint/components/mint-unmint.layout.tsx} (79%) rename src/app/components/{mint-unmint-box => mint-unmint}/components/protocol-summary-stack/components/protocol-summary-stack.layout.tsx (100%) rename src/app/components/{mint-unmint-box => mint-unmint}/components/protocol-summary-stack/protocol-summary-stack.tsx (89%) rename src/app/components/{mint-unmint-box => mint-unmint}/components/setup-information-stack/components/setup-information-stack.layout.tsx (85%) create mode 100644 src/app/components/mint-unmint/components/setup-information-stack/components/wallet-requirement.tsx rename src/app/components/{mint-unmint-box => mint-unmint}/components/setup-information-stack/setup-information-stack.tsx (53%) create mode 100644 src/app/components/mint-unmint/mint-unmint.tsx delete mode 100644 src/app/components/my-vaults-large-container/components/disconnected-info-stack.tsx delete mode 100644 src/app/components/my-vaults-large-container/components/my-vaults-large-container-header/components/balance-info.tsx delete mode 100644 src/app/components/my-vaults-large-container/components/my-vaults-large-container-header/my-vaults-large-container-header.tsx delete mode 100644 src/app/components/my-vaults-large-container/my-vaults-large-container.tsx create mode 100644 src/app/components/my-vaults-large/components/disconnected-info-stack.tsx create mode 100644 src/app/components/my-vaults-large/components/my-vaults-large-header/components/balance-info.tsx create mode 100644 src/app/components/my-vaults-large/components/my-vaults-large-header/my-vaults-large-header.tsx rename src/app/components/{my-vaults-large-container/components/my-vaults-large-container.layout.tsx => my-vaults-large/components/my-vaults-large.layout.tsx} (89%) create mode 100644 src/app/components/my-vaults-large/my-vaults-large.tsx delete mode 100644 src/app/components/my-vaults-small-container/components/my-vaults-small-container.layout.tsx delete mode 100644 src/app/components/my-vaults-small-container/my-vaults-small-container.tsx create mode 100644 src/app/components/my-vaults-small/components/my-vaults-small.layout.tsx create mode 100644 src/app/components/my-vaults-small/my-vaults-small.tsx rename src/app/components/{dlc-btc-item/components/vault-box-expanded-information-stack/components/vault-box-info-row.tsx => vault/components/vault-box-expanded-information-stack/components/asset-row.tsx} (75%) rename src/app/components/{dlc-btc-item/components/vault-box-expanded-information-stack/components/vault-box-transaction-row.tsx => vault/components/vault-box-expanded-information-stack/components/transaction-row.tsx} (100%) rename src/app/components/{dlc-btc-item => vault}/components/vault-box-expanded-information-stack/vault-box-expanded-information-stack.tsx (63%) create mode 100644 src/app/components/vault/components/vault-card-blank.tsx rename src/app/components/{dlc-btc-item/components/vault-box-expand-button.tsx => vault/components/vault-card-button.tsx} (81%) create mode 100644 src/app/components/vault/components/vault-card-connect-wallet-stack.tsx rename src/app/components/{dlc-btc-item/components/vault-box-progress-bar.tsx => vault/components/vault-card-progress-bar.tsx} (81%) rename src/app/components/{dlc-btc-item/components/vault-box.layout.tsx => vault/components/vault-card.layout.tsx} (73%) create mode 100644 src/app/components/vault/vault-card.tsx create mode 100644 src/app/components/vaults-list/components/vault-group-blank-container.tsx create mode 100644 src/shared/models/blank-array.ts diff --git a/public/images/logos/bitcoin-logo.svg b/public/images/logos/bitcoin-logo.svg index 2b7de763..877e8035 100644 --- a/public/images/logos/bitcoin-logo.svg +++ b/public/images/logos/bitcoin-logo.svg @@ -1,24 +1,8 @@ - - - - - - - - - + + + + + - \ No newline at end of file + diff --git a/src/app/components/dlc-btc-item/components/vault-box-information-stack.tsx b/src/app/components/dlc-btc-item/components/vault-box-information-stack.tsx deleted file mode 100644 index 90f199a2..00000000 --- a/src/app/components/dlc-btc-item/components/vault-box-information-stack.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { Button, HStack, Image, Text, VStack } from '@chakra-ui/react'; -import { VaultStatus } from '@models/vault'; - -import { VaultBoxExpandButton } from './vault-box-expand-button'; - -const useIcon = (state: VaultStatus) => { - return [VaultStatus.FUNDED, VaultStatus.CLOSING, VaultStatus.CLOSED].includes(state) - ? '/images/logos/dlc-btc-logo.svg' - : '/images/logos/bitcoin-logo.svg'; -}; - -interface VaultBoxInformationStackProps { - collateral: number; - state: VaultStatus; - isExpanded: boolean; - handleClick: () => void; -} - -export function VaultBoxInformationStack({ - state, - collateral, - isExpanded, - handleClick, -}: VaultBoxInformationStackProps): React.JSX.Element { - return ( - - - - {'Icon'} - - {collateral} BTC - - - - 10/10/2023 - - - {state === VaultStatus.READY ? ( - - ) : ( - handleClick()} /> - )} - - ); -} diff --git a/src/app/components/dlc-btc-item/vault-box.tsx b/src/app/components/dlc-btc-item/vault-box.tsx deleted file mode 100644 index 85bddff5..00000000 --- a/src/app/components/dlc-btc-item/vault-box.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React, { useState } from 'react'; - -import { useLoadingDelay } from '@hooks/use-loading-delay'; -import { Vault, VaultStatus } from '@models/vault'; - -import { VaultBoxExpandedInformationStack } from './components/vault-box-expanded-information-stack/vault-box-expanded-information-stack'; -import { VaultBoxInformationStack } from './components/vault-box-information-stack'; -import { VaultBoxProgressBar } from './components/vault-box-progress-bar'; -import { VaultBoxLayout } from './components/vault-box.layout'; - -interface VaultBoxProps { - uuid: string; - collateral: number; - state: VaultStatus; - fundingTX: string; - closingTX: string; - preventLoad?: boolean; -} - -export function VaultBox({ - uuid, - collateral, - state, - fundingTX, - closingTX, - preventLoad, -}: VaultBoxProps): React.JSX.Element { - const isLoaded = useLoadingDelay(3000); - const confirmedBlocks = 3; - const [isExpanded, setIsExpanded] = useState(false); - - return ( - - setIsExpanded(!isExpanded)} - /> - - - - ); -} diff --git a/src/app/components/fade-layer/fade-layer.tsx b/src/app/components/fade-layer/fade-layer.tsx index afe22bb1..eae81d31 100644 --- a/src/app/components/fade-layer/fade-layer.tsx +++ b/src/app/components/fade-layer/fade-layer.tsx @@ -18,7 +18,8 @@ export function FadeLayer({ left: 0, right: 0, height: fadeHeight, - backgroundImage: "linear-gradient(to top, background.container.01, transparent)", + backgroundImage: + "linear-gradient(to top, background.container.01, transparent)", }; return ( diff --git a/src/app/components/header/components/tabs.tsx b/src/app/components/header/components/tabs.tsx index 6b7ccdd2..cedcad52 100644 --- a/src/app/components/header/components/tabs.tsx +++ b/src/app/components/header/components/tabs.tsx @@ -2,28 +2,31 @@ import { HStack } from "@chakra-ui/react"; import { TabButton } from "@components/tab-button/tab-button"; interface NavigationTabsProps { - activeTab: string; - handleTabClick: (route: string) => void; + activeTab: string; + handleTabClick: (route: string) => void; } -export function NavigationTabs({ activeTab, handleTabClick }: NavigationTabsProps): React.JSX.Element { - return ( - - handleTabClick('/')} - /> - handleTabClick('/my-vaults')} - /> - handleTabClick('/how-it-works')} - /> - - ) +export function NavigationTabs({ + activeTab, + handleTabClick, +}: NavigationTabsProps): React.JSX.Element { + return ( + + handleTabClick("/")} + /> + handleTabClick("/my-vaults")} + /> + handleTabClick("/how-it-works")} + /> + + ); } diff --git a/src/app/components/header/header.tsx b/src/app/components/header/header.tsx index 3d896f8f..617b74f7 100644 --- a/src/app/components/header/header.tsx +++ b/src/app/components/header/header.tsx @@ -1,11 +1,11 @@ -import React from 'react'; -import { useLocation, useNavigate } from 'react-router-dom'; +import React from "react"; +import { useLocation, useNavigate } from "react-router-dom"; -import { Account } from '@components/account/account'; -import { CompanyWebsiteButton } from '@components/company-website-button/company-website-button'; -import { HeaderLayout } from '@components/header/components/header.layout'; +import { Account } from "@components/account/account"; +import { CompanyWebsiteButton } from "@components/company-website-button/company-website-button"; +import { HeaderLayout } from "@components/header/components/header.layout"; -import { NavigationTabs } from './components/tabs'; +import { NavigationTabs } from "./components/tabs"; export function Header(): React.JSX.Element { const navigate = useNavigate(); @@ -18,7 +18,10 @@ export function Header(): React.JSX.Element { return ( - + ); diff --git a/src/app/components/mint-unmint-box/mint-unmint-box.tsx b/src/app/components/mint-unmint-box/mint-unmint-box.tsx deleted file mode 100644 index be9d7448..00000000 --- a/src/app/components/mint-unmint-box/mint-unmint-box.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { - Tab, - TabIndicator, - TabList, - TabPanel, - TabPanels, - Tabs, -} from "@chakra-ui/react"; - -import { MintUnmintBoxLayout } from "./components/mint-unmint-box.layout"; -import { SetupInformationStack } from "./components/setup-information-stack/setup-information-stack"; -import { ProtocolSummaryStack } from "./components/protocol-summary-stack/protocol-summary-stack"; - -export function MintUnmintBox(): React.JSX.Element { - return ( - - - - Mint - Unmint - - - - - - - - - - - - ); -} diff --git a/src/app/components/mint-unmint-box/components/mint-unmint-box.layout.tsx b/src/app/components/mint-unmint/components/mint-unmint.layout.tsx similarity index 79% rename from src/app/components/mint-unmint-box/components/mint-unmint-box.layout.tsx rename to src/app/components/mint-unmint/components/mint-unmint.layout.tsx index b7ff2f37..0d7f264b 100644 --- a/src/app/components/mint-unmint-box/components/mint-unmint-box.layout.tsx +++ b/src/app/components/mint-unmint/components/mint-unmint.layout.tsx @@ -1,9 +1,7 @@ import { VStack } from "@chakra-ui/react"; import { HasChildren } from "@models/has-children"; -export function MintUnmintBoxLayout({ - children, -}: HasChildren): React.JSX.Element { +export function MintUnmintLayout({ children }: HasChildren): React.JSX.Element { return ( @@ -9,12 +10,12 @@ export function ProtocolSummaryStack(): React.JSX.Element { TVL - + 1,650.36 dlcBTC diff --git a/src/app/components/mint-unmint-box/components/setup-information-stack/components/setup-information-stack.layout.tsx b/src/app/components/mint-unmint/components/setup-information-stack/components/setup-information-stack.layout.tsx similarity index 85% rename from src/app/components/mint-unmint-box/components/setup-information-stack/components/setup-information-stack.layout.tsx rename to src/app/components/mint-unmint/components/setup-information-stack/components/setup-information-stack.layout.tsx index 30416151..690ae320 100644 --- a/src/app/components/mint-unmint-box/components/setup-information-stack/components/setup-information-stack.layout.tsx +++ b/src/app/components/mint-unmint/components/setup-information-stack/components/setup-information-stack.layout.tsx @@ -7,11 +7,10 @@ export function SetupInformationStackLayout({ return ( {children} 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/wallet-requirement.tsx new file mode 100644 index 00000000..22eb29d8 --- /dev/null +++ b/src/app/components/mint-unmint/components/setup-information-stack/components/wallet-requirement.tsx @@ -0,0 +1,29 @@ +import { HStack, Image, Text, VStack } from "@chakra-ui/react"; + +interface WalletRequirementProps { + logo: string; + color: string; + walletName: string; + requirement: string; +} + +export function WalletRequirement({ + logo, + color, + walletName, + requirement, +}: WalletRequirementProps): React.JSX.Element { + return ( + + + + + {walletName} + + + + {requirement} + + + ); +} diff --git a/src/app/components/mint-unmint-box/components/setup-information-stack/setup-information-stack.tsx b/src/app/components/mint-unmint/components/setup-information-stack/setup-information-stack.tsx similarity index 53% rename from src/app/components/mint-unmint-box/components/setup-information-stack/setup-information-stack.tsx rename to src/app/components/mint-unmint/components/setup-information-stack/setup-information-stack.tsx index 912d97ba..81d6bd02 100644 --- a/src/app/components/mint-unmint-box/components/setup-information-stack/setup-information-stack.tsx +++ b/src/app/components/mint-unmint/components/setup-information-stack/setup-information-stack.tsx @@ -1,11 +1,12 @@ import React from "react"; -import { useNavigate } from "react-router-dom"; import { useDispatch } from "react-redux"; -import { modalActions } from "@store/slices/modal/modal.actions"; +import { useNavigate } from "react-router-dom"; 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"; export function SetupInformationStack(): React.JSX.Element { const navigate = useNavigate(); @@ -16,11 +17,11 @@ export function SetupInformationStack(): React.JSX.Element { function onConnectWalletClick(): void { dispatch(modalActions.toggleSelectWalletModalVisibility()); } - + return ( - + {setupText} @@ -38,39 +39,21 @@ export function SetupInformationStack(): React.JSX.Element { What you will need: - - - - - Metamask Wallet - - - - +ETH (for fee) - - - - - - - Leather Wallet - - - - +BTC (for lock) - - + + - diff --git a/src/app/components/mint-unmint/mint-unmint.tsx b/src/app/components/mint-unmint/mint-unmint.tsx new file mode 100644 index 00000000..61785023 --- /dev/null +++ b/src/app/components/mint-unmint/mint-unmint.tsx @@ -0,0 +1,51 @@ +import { + Divider, + Spacer, + Tab, + TabIndicator, + TabList, + TabPanel, + TabPanels, + Tabs, +} from "@chakra-ui/react"; + +import { MintUnmintLayout } from "./components/mint-unmint.layout"; +import { ProtocolSummaryStack } from "./components/protocol-summary-stack/protocol-summary-stack"; +import { SetupInformationStack } from "./components/setup-information-stack/setup-information-stack"; + +interface MintUnmintContainerProps { + address?: string; +} + +export function MintUnmint({ + address, +}: MintUnmintContainerProps): React.JSX.Element { + return ( + + + + Mint + Unmint + + + + + {address ? ( + + ) : ( + + + + + + )} + + + + + ); +} diff --git a/src/app/components/modals/components/modal.layout.tsx b/src/app/components/modals/components/modal.layout.tsx index d302edf3..e5f3a147 100644 --- a/src/app/components/modals/components/modal.layout.tsx +++ b/src/app/components/modals/components/modal.layout.tsx @@ -25,7 +25,7 @@ export function ModalLayout({ return ( - + {title} {children} 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 5460e2b5..ba095154 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 @@ -1,20 +1,25 @@ -import { useState } from 'react'; -import { useDispatch } from 'react-redux'; +import { useState } from "react"; +import { useDispatch } from "react-redux"; -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 { SelectNetworkButton } from '@components/select-network-button/select-network-button'; -import { Network } from '@models/network'; -import { WalletType, ethereumWallets } from '@models/wallet'; -import { accountActions } from '@store/slices/account/account.actions'; -import { AccountState } from '@store/slices/account/account.slice'; +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 { SelectNetworkButton } from "@components/select-network-button/select-network-button"; +import { Network } from "@models/network"; +import { WalletType, ethereumWallets } from "@models/wallet"; +import { accountActions } from "@store/slices/account/account.actions"; +import { AccountState } from "@store/slices/account/account.slice"; -export function SelectWalletModal({ isOpen, handleClose }: ModalComponentProps): React.JSX.Element { +export function SelectWalletModal({ + isOpen, + handleClose, +}: ModalComponentProps): React.JSX.Element { const dispatch = useDispatch(); - const [currentNetwork, setCurrentNetwork] = useState(undefined); + const [currentNetwork, setCurrentNetwork] = useState( + undefined, + ); const handleLogin = (address: string, walletType: WalletType) => { dispatch( @@ -24,7 +29,7 @@ export function SelectWalletModal({ isOpen, handleClose }: ModalComponentProps): dlcBTCBalance: 0.54321, lockedBTCBalance: 0.54321, network: currentNetwork?.id, - } as AccountState) + } as AccountState), ); setCurrentNetwork(undefined); handleClose(); @@ -35,22 +40,37 @@ export function SelectWalletModal({ isOpen, handleClose }: ModalComponentProps): }; return ( - handleClose()}> - + handleClose()} + > + {!currentNetwork ? ( - Select Network + Select Network ) : ( - Network Selected - + Network Selected + )} - - - - Select Wallet - {ethereumWallets.map(wallet => ( - + + + + Select Wallet + {ethereumWallets.map((wallet) => ( + ))} diff --git a/src/app/components/my-vaults-large-container/components/disconnected-info-stack.tsx b/src/app/components/my-vaults-large-container/components/disconnected-info-stack.tsx deleted file mode 100644 index fe75d2f8..00000000 --- a/src/app/components/my-vaults-large-container/components/disconnected-info-stack.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { useDispatch } from 'react-redux'; -import { useNavigate } from 'react-router-dom'; - -import { Button, Text, VStack } from '@chakra-ui/react'; -import { modalActions } from '@store/slices/modal/modal.actions'; - -export function DisconnectedInfoStack(): React.JSX.Element { - const dispatch = useDispatch(); - const navigate = useNavigate(); - - const header = 'Connect your\n Ethereum Wallet'; - const link = 'Which wallets are supported?'; - - function onConnectWalletClick(): void { - dispatch(modalActions.toggleSelectWalletModalVisibility()); - } - - return ( - - - - {header} - - navigate('/how-it-works')}> - {link} - - - - - ); -} diff --git a/src/app/components/my-vaults-large-container/components/my-vaults-large-container-header/components/balance-info.tsx b/src/app/components/my-vaults-large-container/components/my-vaults-large-container-header/components/balance-info.tsx deleted file mode 100644 index a66232fa..00000000 --- a/src/app/components/my-vaults-large-container/components/my-vaults-large-container-header/components/balance-info.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { HStack, Image, Text, VStack } from '@chakra-ui/react'; -import { CustomSkeleton } from '@components/custom-skeleton/custom-skeleton'; - -interface BalanceInfoProps { - title: string; - imageSrc: string; - altText: string; - number?: number; -} - -export function BalanceInfo({ - title, - imageSrc, - altText, - number, -}: BalanceInfoProps): React.JSX.Element { - return ( - - - {title} - - - - {altText} - - {number} - - - - - ); -} diff --git a/src/app/components/my-vaults-large-container/components/my-vaults-large-container-header/my-vaults-large-container-header.tsx b/src/app/components/my-vaults-large-container/components/my-vaults-large-container-header/my-vaults-large-container-header.tsx deleted file mode 100644 index 5bb8c131..00000000 --- a/src/app/components/my-vaults-large-container/components/my-vaults-large-container-header/my-vaults-large-container-header.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { Divider, HStack, Text, VStack } from '@chakra-ui/react'; - -import { BalanceInfo } from './components/balance-info'; - -interface MyVaultsLargeContainerHeaderProps { - dlcBTCBalance?: number; - lockedBTCBalance?: number; -} - -export function MyVaultsLargeContainerHeader({ - dlcBTCBalance, - lockedBTCBalance, -}: MyVaultsLargeContainerHeaderProps): React.JSX.Element { - return ( - - - - My Vaults - - - - - - - - - - - ); -} diff --git a/src/app/components/my-vaults-large-container/my-vaults-large-container.tsx b/src/app/components/my-vaults-large-container/my-vaults-large-container.tsx deleted file mode 100644 index 0da08a2c..00000000 --- a/src/app/components/my-vaults-large-container/my-vaults-large-container.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { useSelector } from 'react-redux'; - -import { HStack } from '@chakra-ui/react'; -import { VaultGroupContainer } from '@components/vaults-list/components/vault-group-container'; -import { VaultsList } from '@components/vaults-list/vaults-list'; -import { useVaults } from '@hooks/use-vaults'; -import { RootState } from '@store/index'; - -import { DisconnectedInfoStack } from './components/disconnected-info-stack'; -import { MyVaultsLargeContainerHeader } from './components/my-vaults-large-container-header/my-vaults-large-container-header'; -import { MyVaultsLargeContainerLayout } from './components/my-vaults-large-container.layout'; - -export function MyVaultsBox(): React.JSX.Element { - const { address, dlcBTCBalance, lockedBTCBalance } = useSelector( - (state: RootState) => state.account - ); - const { readyVaults, fundingVaults, fundedVaults, closingVaults, closedVaults } = useVaults(); - - const bitcoinVaultsLabels = ['Lock BTC', 'Locking BTC in Progress', 'Unlocking BTC in Progress']; - - return ( - - - - {address ? ( - - {[readyVaults, fundingVaults, closingVaults].map((vaults, index) => ( - = 1} - /> - ))} - - ) : ( - - )} - - - - - - - - - ); -} diff --git a/src/app/components/my-vaults-large/components/disconnected-info-stack.tsx b/src/app/components/my-vaults-large/components/disconnected-info-stack.tsx new file mode 100644 index 00000000..4ab52837 --- /dev/null +++ b/src/app/components/my-vaults-large/components/disconnected-info-stack.tsx @@ -0,0 +1,38 @@ +import { useDispatch } from "react-redux"; +import { useNavigate } from "react-router-dom"; + +import { Button, Text, VStack } from "@chakra-ui/react"; +import { modalActions } from "@store/slices/modal/modal.actions"; + +export function DisconnectedInfoStack(): React.JSX.Element { + const dispatch = useDispatch(); + const navigate = useNavigate(); + + const header = "Connect your\n Ethereum Wallet"; + const link = "Which wallets are supported?"; + + function onConnectWalletClick(): void { + dispatch(modalActions.toggleSelectWalletModalVisibility()); + } + + return ( + + + + {header} + + navigate("/how-it-works")}> + {link} + + + + + ); +} diff --git a/src/app/components/my-vaults-large/components/my-vaults-large-header/components/balance-info.tsx b/src/app/components/my-vaults-large/components/my-vaults-large-header/components/balance-info.tsx new file mode 100644 index 00000000..2d47aed9 --- /dev/null +++ b/src/app/components/my-vaults-large/components/my-vaults-large-header/components/balance-info.tsx @@ -0,0 +1,34 @@ +import { HStack, Image, Text, VStack } from "@chakra-ui/react"; +import { CustomSkeleton } from "@components/custom-skeleton/custom-skeleton"; + +interface BalanceInfoProps { + title: string; + imageSrc: string; + altText: string; + number?: number; + showNone?: boolean; +} + +export function BalanceInfo({ + title, + imageSrc, + altText, + number, + showNone, +}: BalanceInfoProps): React.JSX.Element { + return ( + + + {title} + + + + {altText} + + {showNone ? "-" : number} + + + + + ); +} diff --git a/src/app/components/my-vaults-large/components/my-vaults-large-header/my-vaults-large-header.tsx b/src/app/components/my-vaults-large/components/my-vaults-large-header/my-vaults-large-header.tsx new file mode 100644 index 00000000..c599794f --- /dev/null +++ b/src/app/components/my-vaults-large/components/my-vaults-large-header/my-vaults-large-header.tsx @@ -0,0 +1,49 @@ +import { Divider, HStack, Text, VStack } from "@chakra-ui/react"; + +import { BalanceInfo } from "./components/balance-info"; + +interface MyVaultsLargeHeaderProps { + address?: string; + dlcBTCBalance?: number; + lockedBTCBalance?: number; +} + +export function MyVaultsLargeHeader({ + address, + dlcBTCBalance, + lockedBTCBalance, +}: MyVaultsLargeHeaderProps): React.JSX.Element { + return ( + + + + My Vaults + + + + + + + + + + + ); +} diff --git a/src/app/components/my-vaults-large-container/components/my-vaults-large-container.layout.tsx b/src/app/components/my-vaults-large/components/my-vaults-large.layout.tsx similarity index 89% rename from src/app/components/my-vaults-large-container/components/my-vaults-large-container.layout.tsx rename to src/app/components/my-vaults-large/components/my-vaults-large.layout.tsx index 1b7229bd..d1b7688f 100644 --- a/src/app/components/my-vaults-large-container/components/my-vaults-large-container.layout.tsx +++ b/src/app/components/my-vaults-large/components/my-vaults-large.layout.tsx @@ -1,7 +1,7 @@ import { VStack } from "@chakra-ui/react"; import { HasChildren } from "@models/has-children"; -export function MyVaultsLargeContainerLayout({ +export function MyVaultsLargeLayout({ children, }: HasChildren): React.JSX.Element { return ( diff --git a/src/app/components/my-vaults-large/my-vaults-large.tsx b/src/app/components/my-vaults-large/my-vaults-large.tsx new file mode 100644 index 00000000..cb6d90ba --- /dev/null +++ b/src/app/components/my-vaults-large/my-vaults-large.tsx @@ -0,0 +1,78 @@ +import { useSelector } from "react-redux"; + +import { HStack } from "@chakra-ui/react"; +import { VaultGroupBlankContainer } from "@components/vaults-list/components/vault-group-blank-container"; +import { VaultGroupContainer } from "@components/vaults-list/components/vault-group-container"; +import { VaultsList } from "@components/vaults-list/vaults-list"; +import { useVaults } from "@hooks/use-vaults"; +import { RootState } from "@store/index"; + +import { DisconnectedInfoStack } from "./components/disconnected-info-stack"; +import { MyVaultsLargeHeader } from "./components/my-vaults-large-header/my-vaults-large-header"; +import { MyVaultsLargeLayout } from "./components/my-vaults-large.layout"; + +export function MyVaultsLarge(): React.JSX.Element { + const { address, dlcBTCBalance, lockedBTCBalance } = useSelector( + (state: RootState) => state.account, + ); + const { + readyVaults, + fundingVaults, + fundedVaults, + closingVaults, + closedVaults, + } = useVaults(); + + return ( + + + + {address ? ( + + + + + + ) : ( + + )} + + {address ? ( + + ) : ( + + )} + + + {address ? ( + + ) : ( + + )} + + + + ); +} diff --git a/src/app/components/my-vaults-small-container/components/my-vaults-small-container.layout.tsx b/src/app/components/my-vaults-small-container/components/my-vaults-small-container.layout.tsx deleted file mode 100644 index ff9394b1..00000000 --- a/src/app/components/my-vaults-small-container/components/my-vaults-small-container.layout.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { VStack } from '@chakra-ui/react'; -import { HasChildren } from '@models/has-children'; - -export function MyVaultsSmallContainerLayout({ children }: HasChildren): React.JSX.Element { - return ( - - {children} - - ); -} diff --git a/src/app/components/my-vaults-small-container/my-vaults-small-container.tsx b/src/app/components/my-vaults-small-container/my-vaults-small-container.tsx deleted file mode 100644 index 5aaaf705..00000000 --- a/src/app/components/my-vaults-small-container/my-vaults-small-container.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { useNavigate } from 'react-router-dom'; - -import { Button } from '@chakra-ui/react'; -import { VaultsList } from '@components/vaults-list/vaults-list'; -import { useVaults } from '@hooks/use-vaults'; - -import { VaultGroupContainer } from '../vaults-list/components/vault-group-container'; -import { MyVaultsSmallContainerLayout } from './components/my-vaults-small-container.layout'; - -export function MyVaultsSmallContainer(): React.JSX.Element { - const navigate = useNavigate(); - const { fundingVaults, closingVaults, fundedVaults, closedVaults } = useVaults(); - - const vaultGroups = [ - { - label: 'Locking BTC in Progress', - vaults: fundingVaults, - isProcessing: true, - }, - { - label: 'Unlocking BTC in Progress', - vaults: closingVaults, - isProcessing: true, - }, - { label: 'Minted dlcBTC', vaults: fundedVaults, isProcessing: false }, - { label: 'Closed Vaults', vaults: closedVaults, isProcessing: false }, - ]; - - return ( - - - {vaultGroups.map((group, index) => ( - - ))} - - - - ); -} diff --git a/src/app/components/my-vaults-small/components/my-vaults-small.layout.tsx b/src/app/components/my-vaults-small/components/my-vaults-small.layout.tsx new file mode 100644 index 00000000..ad8c93ea --- /dev/null +++ b/src/app/components/my-vaults-small/components/my-vaults-small.layout.tsx @@ -0,0 +1,21 @@ +import { VStack } from "@chakra-ui/react"; +import { HasChildren } from "@models/has-children"; + +export function MyVaultsSmallLayout({ + children, +}: HasChildren): React.JSX.Element { + return ( + + {children} + + ); +} diff --git a/src/app/components/my-vaults-small/my-vaults-small.tsx b/src/app/components/my-vaults-small/my-vaults-small.tsx new file mode 100644 index 00000000..8d9f4c56 --- /dev/null +++ b/src/app/components/my-vaults-small/my-vaults-small.tsx @@ -0,0 +1,53 @@ +import { useNavigate } from "react-router-dom"; + +import { Button } from "@chakra-ui/react"; +import { VaultGroupBlankContainer } from "@components/vaults-list/components/vault-group-blank-container"; +import { VaultsList } from "@components/vaults-list/vaults-list"; +import { useVaults } from "@hooks/use-vaults"; + +import { VaultGroupContainer } from "../vaults-list/components/vault-group-container"; +import { MyVaultsSmallLayout } from "./components/my-vaults-small.layout"; + +interface MyVaultsSmallProps { + address?: string; +} + +export function MyVaultsSmall({ + address, +}: MyVaultsSmallProps): React.JSX.Element { + const navigate = useNavigate(); + const { + readyVaults, + fundingVaults, + fundedVaults, + closingVaults, + closedVaults, + } = useVaults(); + + return ( + + + {address ? ( + <> + + + + + + + ) : ( + + )} + + + + ); +} diff --git a/src/app/components/protocol-history/components/protocol-history-item.tsx b/src/app/components/protocol-history/components/protocol-history-item.tsx index 8a622466..57370f41 100644 --- a/src/app/components/protocol-history/components/protocol-history-item.tsx +++ b/src/app/components/protocol-history/components/protocol-history-item.tsx @@ -21,7 +21,9 @@ export function ProtocolHistoryItem( p={"10px"} w={"300px"} h={"35px"} - bgGradient={"linear(to-r, background.content.01, background.content.02)"} + bgGradient={ + "linear(to-r, background.content.01, background.content.02)" + } blendMode={"screen"} border={"1px solid"} borderRadius={"md"} @@ -31,7 +33,7 @@ export function ProtocolHistoryItem( {"dlcBTC {protocolHistoryItem.value} diff --git a/src/app/components/dlc-btc-item/components/vault-box-expanded-information-stack/components/vault-box-info-row.tsx b/src/app/components/vault/components/vault-box-expanded-information-stack/components/asset-row.tsx similarity index 75% rename from src/app/components/dlc-btc-item/components/vault-box-expanded-information-stack/components/vault-box-info-row.tsx rename to src/app/components/vault/components/vault-box-expanded-information-stack/components/asset-row.tsx index 2bb677c2..5a6c9f07 100644 --- a/src/app/components/dlc-btc-item/components/vault-box-expanded-information-stack/components/vault-box-info-row.tsx +++ b/src/app/components/vault/components/vault-box-expanded-information-stack/components/asset-row.tsx @@ -1,11 +1,14 @@ import { HStack, Text } from "@chakra-ui/react"; -interface InfoRowProps { +interface InformationProps { label: string; value: string; } -export function InfoRow({ label, value }: InfoRowProps): React.JSX.Element { +export function InformationRow({ + label, + value, +}: InformationProps): React.JSX.Element { return ( diff --git a/src/app/components/dlc-btc-item/components/vault-box-expanded-information-stack/components/vault-box-transaction-row.tsx b/src/app/components/vault/components/vault-box-expanded-information-stack/components/transaction-row.tsx similarity index 100% rename from src/app/components/dlc-btc-item/components/vault-box-expanded-information-stack/components/vault-box-transaction-row.tsx rename to src/app/components/vault/components/vault-box-expanded-information-stack/components/transaction-row.tsx diff --git a/src/app/components/dlc-btc-item/components/vault-box-expanded-information-stack/vault-box-expanded-information-stack.tsx b/src/app/components/vault/components/vault-box-expanded-information-stack/vault-box-expanded-information-stack.tsx similarity index 63% rename from src/app/components/dlc-btc-item/components/vault-box-expanded-information-stack/vault-box-expanded-information-stack.tsx rename to src/app/components/vault/components/vault-box-expanded-information-stack/vault-box-expanded-information-stack.tsx index 5e6df2ae..f130b801 100644 --- a/src/app/components/dlc-btc-item/components/vault-box-expanded-information-stack/vault-box-expanded-information-stack.tsx +++ b/src/app/components/vault/components/vault-box-expanded-information-stack/vault-box-expanded-information-stack.tsx @@ -1,29 +1,29 @@ import { Divider, VStack } from "@chakra-ui/react"; import { easyTruncateAddress } from "@common/utilities"; -import { InfoRow } from "./components/vault-box-info-row"; -import { TransactionRow } from "./components/vault-box-transaction-row"; +import { InformationRow } from "./components/asset-row"; +import { TransactionRow } from "./components/transaction-row"; -interface VaultBoxExpandedInformationStackProps { +interface VaultCardExpandedInformationStackProps { uuid: string; fundingTX: string; closingTX: string; isExpanded: boolean; } -export function VaultBoxExpandedInformationStack({ +export function VaultCardExpandedInformationStack({ uuid, fundingTX, closingTX, isExpanded, -}: VaultBoxExpandedInformationStackProps): React.JSX.Element | boolean { +}: VaultCardExpandedInformationStackProps): React.JSX.Element | boolean { if (!isExpanded) return false; return ( <> - + {fundingTX !== "" && ( )} diff --git a/src/app/components/vault/components/vault-card-blank.tsx b/src/app/components/vault/components/vault-card-blank.tsx new file mode 100644 index 00000000..2ed91a09 --- /dev/null +++ b/src/app/components/vault/components/vault-card-blank.tsx @@ -0,0 +1,19 @@ +import { Text, VStack } from "@chakra-ui/react"; + +export function VaultCardBlank(): React.JSX.Element { + return ( + + + Connect Your Ethereum Wallet + + + ); +} diff --git a/src/app/components/dlc-btc-item/components/vault-box-expand-button.tsx b/src/app/components/vault/components/vault-card-button.tsx similarity index 81% rename from src/app/components/dlc-btc-item/components/vault-box-expand-button.tsx rename to src/app/components/vault/components/vault-card-button.tsx index 9e688142..763e0555 100644 --- a/src/app/components/dlc-btc-item/components/vault-box-expand-button.tsx +++ b/src/app/components/vault/components/vault-card-button.tsx @@ -1,15 +1,15 @@ import { ChevronDownIcon, ChevronUpIcon } from "@chakra-ui/icons"; import { Button, Text } from "@chakra-ui/react"; -interface VaultBoxExpandButtonProps { +interface VaultCardButtonProps { isExpanded: boolean; handleClick: () => void; } -export function VaultBoxExpandButton({ +export function VaultCardButton({ isExpanded, handleClick, -}: VaultBoxExpandButtonProps): React.JSX.Element { +}: VaultCardButtonProps): React.JSX.Element { return ( + ) : ( + handleClick()} + /> + )} + + ); +} diff --git a/src/app/components/dlc-btc-item/components/vault-box-progress-bar.tsx b/src/app/components/vault/components/vault-card-progress-bar.tsx similarity index 81% rename from src/app/components/dlc-btc-item/components/vault-box-progress-bar.tsx rename to src/app/components/vault/components/vault-card-progress-bar.tsx index 504fe582..bd7d9175 100644 --- a/src/app/components/dlc-btc-item/components/vault-box-progress-bar.tsx +++ b/src/app/components/vault/components/vault-card-progress-bar.tsx @@ -1,15 +1,15 @@ import { Progress, Text, VStack } from "@chakra-ui/react"; import { VaultStatus } from "@models/vault"; -interface VaultBoxProgressBarProps { +interface VaultCardProgressBarProps { state: VaultStatus; confirmedBlocks: number; } -export function VaultBoxProgressBar({ +export function VaultCardProgressBar({ state, confirmedBlocks, -}: VaultBoxProgressBarProps): React.JSX.Element | boolean { +}: VaultCardProgressBarProps): React.JSX.Element | boolean { if (state !== VaultStatus.FUNDING && state !== VaultStatus.CLOSING) return false; diff --git a/src/app/components/dlc-btc-item/components/vault-box.layout.tsx b/src/app/components/vault/components/vault-card.layout.tsx similarity index 73% rename from src/app/components/dlc-btc-item/components/vault-box.layout.tsx rename to src/app/components/vault/components/vault-card.layout.tsx index 42487317..da0454d4 100644 --- a/src/app/components/dlc-btc-item/components/vault-box.layout.tsx +++ b/src/app/components/vault/components/vault-card.layout.tsx @@ -3,15 +3,15 @@ import { ReactNode } from "react"; import { VStack } from "@chakra-ui/react"; import { CustomSkeleton } from "@components/custom-skeleton/custom-skeleton"; -interface VaultBoxLayoutProps { +interface VaultCardLayoutProps { children: ReactNode; isLoaded: boolean; } -export function VaultBoxLayout({ +export function VaultCardLayout({ children, isLoaded, -}: VaultBoxLayoutProps): React.JSX.Element { +}: VaultCardLayoutProps): React.JSX.Element { return ( + setIsExpanded(!isExpanded)} + /> + + + + ); +} diff --git a/src/app/components/vaults-list/components/vault-group-blank-container.tsx b/src/app/components/vaults-list/components/vault-group-blank-container.tsx new file mode 100644 index 00000000..8d6205e1 --- /dev/null +++ b/src/app/components/vaults-list/components/vault-group-blank-container.tsx @@ -0,0 +1,13 @@ +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 { + return ( + + {blankArray.map((_, index) => ( + + ))} + + ); +} diff --git a/src/app/components/vaults-list/components/vault-group-container.tsx b/src/app/components/vaults-list/components/vault-group-container.tsx index 2f58a9b1..3540bf64 100644 --- a/src/app/components/vaults-list/components/vault-group-container.tsx +++ b/src/app/components/vaults-list/components/vault-group-container.tsx @@ -1,37 +1,31 @@ -import { HStack, Spinner, Text, VStack } from '@chakra-ui/react'; -import { VaultBox } from '@components/dlc-btc-item/vault-box'; -import { Vault } from '@models/vault'; - -import { exampleSkeletonVaults } from '@shared/examples/example-vaults'; +import { HStack, Spinner, Text, VStack } from "@chakra-ui/react"; +import { VaultCard } from "@components/vault/vault-card"; +import { Vault } from "@models/vault"; interface VaultGroupContainerProps { label?: string; vaults: Vault[]; - isProcessing?: boolean; - preventLoad?: boolean; } export function VaultGroupContainer({ label, vaults, - isProcessing, - preventLoad, }: VaultGroupContainerProps): React.JSX.Element | boolean { if (vaults.length === 0) return false; return ( - + {label && ( - - {isProcessing && } - {label} + + {["Locking BTC in Progress", "Unlocking BTC in Progress"].includes( + label, + ) && } + {label} )} - {preventLoad - ? exampleSkeletonVaults.map((vault, index) => ( - - )) - : vaults.map((vault, index) => )} + {vaults.map((vault, index) => ( + + ))} ); } diff --git a/src/app/components/vaults-list/vaults-list.tsx b/src/app/components/vaults-list/vaults-list.tsx index a92b30bd..5ed89925 100644 --- a/src/app/components/vaults-list/vaults-list.tsx +++ b/src/app/components/vaults-list/vaults-list.tsx @@ -1,26 +1,33 @@ -import { Text, VStack } from '@chakra-ui/react'; -import { FadeLayer } from '@components/fade-layer/fade-layer'; -import { scrollBarCSS } from '../../../styles/css-styles' +import { Text, VStack } from "@chakra-ui/react"; +import { FadeLayer } from "@components/fade-layer/fade-layer"; + +import { scrollBarCSS } from "../../../styles/css-styles"; interface VaultsListProps { - title: string; + title?: string; height: string; + isScrollable?: boolean; children: React.ReactNode; } -export function VaultsList({ title, height, children }: VaultsListProps): React.JSX.Element { +export function VaultsList({ + title, + height, + isScrollable, + children, +}: VaultsListProps): React.JSX.Element { return ( - - + + {title} {children} diff --git a/src/app/hooks/use-vaults.ts b/src/app/hooks/use-vaults.ts index 1dc8a363..c2d4822b 100644 --- a/src/app/hooks/use-vaults.ts +++ b/src/app/hooks/use-vaults.ts @@ -1,8 +1,8 @@ -import { useMemo } from 'react'; -import { useSelector } from 'react-redux'; +import { useMemo } from "react"; +import { useSelector } from "react-redux"; -import { Vault, VaultStatus } from '@models/vault'; -import { RootState } from '@store/index'; +import { Vault, VaultStatus } from "@models/vault"; +import { RootState } from "@store/index"; export function useVaults(): { readyVaults: Vault[]; @@ -14,25 +14,31 @@ export function useVaults(): { const { vaults } = useSelector((state: RootState) => state.vault); const readyVaults = useMemo( - () => vaults.filter(vault => vault.state === VaultStatus.READY), - [vaults] + () => vaults.filter((vault) => vault.state === VaultStatus.READY), + [vaults], ); const fundedVaults = useMemo( - () => vaults.filter(vault => vault.state === VaultStatus.FUNDED), - [vaults] + () => vaults.filter((vault) => vault.state === VaultStatus.FUNDED), + [vaults], ); const fundingVaults = useMemo( - () => vaults.filter(vault => vault.state === VaultStatus.FUNDING), - [vaults] + () => vaults.filter((vault) => vault.state === VaultStatus.FUNDING), + [vaults], ); const closingVaults = useMemo( - () => vaults.filter(vault => vault.state === VaultStatus.CLOSING), - [vaults] + () => vaults.filter((vault) => vault.state === VaultStatus.CLOSING), + [vaults], ); const closedVaults = useMemo( - () => vaults.filter(vault => vault.state === VaultStatus.CLOSED), - [vaults] + () => vaults.filter((vault) => vault.state === VaultStatus.CLOSED), + [vaults], ); - return { readyVaults, fundingVaults, closingVaults, fundedVaults, closedVaults }; + return { + readyVaults, + fundingVaults, + closingVaults, + fundedVaults, + closedVaults, + }; } diff --git a/src/app/pages/components/page.layout.tsx b/src/app/pages/components/page.layout.tsx index 75e2d8aa..ea3c6697 100644 --- a/src/app/pages/components/page.layout.tsx +++ b/src/app/pages/components/page.layout.tsx @@ -1,15 +1,14 @@ -import { HStack } from '@chakra-ui/react'; -import { HasChildren } from '@models/has-children'; +import { HStack } from "@chakra-ui/react"; +import { HasChildren } from "@models/has-children"; export function PageLayout({ children }: HasChildren): React.JSX.Element { return ( {children} diff --git a/src/app/pages/dashboard/dashboard.tsx b/src/app/pages/dashboard/dashboard.tsx index c3cb95e9..67509e8b 100644 --- a/src/app/pages/dashboard/dashboard.tsx +++ b/src/app/pages/dashboard/dashboard.tsx @@ -1,22 +1,18 @@ -import React from 'react'; -import { useSelector } from 'react-redux'; +import React from "react"; +import { useSelector } from "react-redux"; -import { HStack, ScaleFade } from '@chakra-ui/react'; -import { MintUnmintBox } from '@components/mint-unmint-box/mint-unmint-box'; -import { MyVaultsSmallContainer } from '@components/my-vaults-small-container/my-vaults-small-container'; -import { PageLayout } from '@pages/components/page.layout'; -import { RootState } from '@store/index'; +import { MintUnmint } from "@components/mint-unmint/mint-unmint"; +import { MyVaultsSmall } from "@components/my-vaults-small/my-vaults-small"; +import { PageLayout } from "@pages/components/page.layout"; +import { RootState } from "@store/index"; export function Dashboard(): React.JSX.Element { const { address } = useSelector((state: RootState) => state.account); + return ( - - - - - - + + ); } diff --git a/src/app/pages/my-vaults/my-vaults.tsx b/src/app/pages/my-vaults/my-vaults.tsx index 779c75cb..c8cc170f 100644 --- a/src/app/pages/my-vaults/my-vaults.tsx +++ b/src/app/pages/my-vaults/my-vaults.tsx @@ -1,10 +1,10 @@ -import { MyVaultsBox } from '@components/my-vaults-large-container/my-vaults-large-container'; -import { PageLayout } from '@pages/components/page.layout'; +import { MyVaultsLarge } from "@components/my-vaults-large/my-vaults-large"; +import { PageLayout } from "@pages/components/page.layout"; export function MyVaults(): React.JSX.Element { return ( - + ); } diff --git a/src/app/store/slices/account/account.slice.ts b/src/app/store/slices/account/account.slice.ts index 01d4f268..91af91e2 100644 --- a/src/app/store/slices/account/account.slice.ts +++ b/src/app/store/slices/account/account.slice.ts @@ -15,8 +15,8 @@ export const initialAccountState: AccountState = { address: undefined, walletType: undefined, network: undefined, - dlcBTCBalance: undefined, - lockedBTCBalance: undefined, + dlcBTCBalance: 0, + lockedBTCBalance: 0, loadedAt: undefined, }; @@ -35,8 +35,8 @@ export const accountSlice = createSlice({ logout: (state) => { state.address = undefined; state.walletType = undefined; - state.dlcBTCBalance = undefined; - state.lockedBTCBalance = undefined; + state.dlcBTCBalance = 0; + state.lockedBTCBalance = 0; state.network = undefined; }, }, diff --git a/src/shared/examples/example-vaults.ts b/src/shared/examples/example-vaults.ts index 1c99ea90..8a0d397b 100644 --- a/src/shared/examples/example-vaults.ts +++ b/src/shared/examples/example-vaults.ts @@ -1,163 +1,104 @@ -import { Vault, VaultStatus } from '@models/vault'; +import { Vault, VaultStatus } from "@models/vault"; export const exampleVaults: Vault[] = [ { - uuid: '0x123456789', + uuid: "0x123456789", collateral: 0.5, state: VaultStatus.READY, - fundingTX: '', - closingTX: '', + fundingTX: "", + closingTX: "", }, { - uuid: '0x123456789', + uuid: "0x123456789", collateral: 1.5, state: VaultStatus.READY, - fundingTX: '', - closingTX: '', + fundingTX: "", + closingTX: "", }, { - uuid: '0x123456789', + uuid: "0x123456789", collateral: 2.5, state: VaultStatus.FUNDING, fundingTX: - 'https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6', - closingTX: '', + "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", + closingTX: "", }, { - uuid: '0x123456789', + uuid: "0x123456789", collateral: 3.5, state: VaultStatus.FUNDING, fundingTX: - 'https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6', - closingTX: '', + "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", + closingTX: "", }, { - uuid: '0x123456789', + uuid: "0x123456789", collateral: 2.5, state: VaultStatus.FUNDED, fundingTX: - 'https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6', - closingTX: '', + "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", + closingTX: "", }, { - uuid: '0x123456789', + uuid: "0x123456789", collateral: 3.5, state: VaultStatus.FUNDED, fundingTX: - 'https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6', - closingTX: '', + "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", + closingTX: "", }, { - uuid: '0x123456789', + uuid: "0x123456789", collateral: 4.5, state: VaultStatus.CLOSING, fundingTX: - 'https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6', + "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", closingTX: - 'https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6', + "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", }, { - uuid: '0x123456789', + uuid: "0x123456789", collateral: 5.5, state: VaultStatus.CLOSING, fundingTX: - 'https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6', + "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", closingTX: - 'https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6', + "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", }, { - uuid: '0x123456789', + uuid: "0x123456789", collateral: 6.5, state: VaultStatus.CLOSED, fundingTX: - 'https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6', + "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", closingTX: - 'https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6', + "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", }, { - uuid: '0x123456789', + uuid: "0x123456789", collateral: 7.5, state: VaultStatus.CLOSED, fundingTX: - 'https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6', + "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", closingTX: - 'https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6', + "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", }, { - uuid: '0x123456789', + uuid: "0x123456789", collateral: 8.5, state: VaultStatus.CLOSED, fundingTX: - 'https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6', + "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", closingTX: - 'https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6', + "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", }, { - uuid: '0x123456789', + uuid: "0x123456789", collateral: 9.5, state: VaultStatus.CLOSED, fundingTX: - 'https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6', + "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", closingTX: - 'https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6', - }, -]; - -export const exampleSkeletonVaults: Vault[] = [ - { - uuid: '', - collateral: 0, - state: VaultStatus.READY, - fundingTX: '', - closingTX: '', - }, - { - uuid: '', - collateral: 0, - state: VaultStatus.READY, - fundingTX: '', - closingTX: '', - }, - { - uuid: '', - collateral: 0, - state: VaultStatus.READY, - fundingTX: '', - closingTX: '', - }, - { - uuid: '', - collateral: 0, - state: VaultStatus.READY, - fundingTX: '', - closingTX: '', - }, - { - uuid: '', - collateral: 0, - state: VaultStatus.READY, - fundingTX: '', - closingTX: '', - }, - { - uuid: '', - collateral: 0, - state: VaultStatus.READY, - fundingTX: '', - closingTX: '', - }, - { - uuid: '', - collateral: 0, - state: VaultStatus.READY, - fundingTX: '', - closingTX: '', - }, - { - uuid: '', - collateral: 0, - state: VaultStatus.READY, - fundingTX: '', - closingTX: '', + "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", }, ]; diff --git a/src/shared/models/blank-array.ts b/src/shared/models/blank-array.ts new file mode 100644 index 00000000..9846f02f --- /dev/null +++ b/src/shared/models/blank-array.ts @@ -0,0 +1 @@ +export const blankArray = [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}]; diff --git a/src/styles/app-theme.ts b/src/styles/app-theme.ts index 9414a00d..2345abe1 100644 --- a/src/styles/app-theme.ts +++ b/src/styles/app-theme.ts @@ -28,7 +28,8 @@ export const appTheme = extendTheme({ styles: { global: () => ({ body: { - bgGradient: "linear(to-r, background.website.01, background.website.02)", + bgGradient: + "linear(to-r, background.website.01, background.website.02)", }, }), }, diff --git a/src/styles/button-theme.ts b/src/styles/button-theme.ts index 68ea18e4..b0997cf8 100644 --- a/src/styles/button-theme.ts +++ b/src/styles/button-theme.ts @@ -6,6 +6,21 @@ const basestyle = defineStyle({ }); const action = defineStyle({ + py: "10px", + px: "25px", + h: "35px", + w: "100%", + fontSize: "sm", + fontWeight: "extrabold", + bg: "none", + border: "1px solid", + borderColor: "accent.cyan.01", + _hover: { + bg: "accent.cyan.01", + }, +}); + +const navigate = defineStyle({ py: "10px", px: "25px", h: "50px", @@ -29,7 +44,8 @@ const account = defineStyle({ fontWeight: "extrabold", bgSize: "400%", bgPosition: "left", - bgGradient: "linear(to-r, accent.cyan.01, accent.blue.01, accent.blue.01, accent.cyan.01)", + bgGradient: + "linear(to-r, accent.cyan.01, accent.blue.01, accent.blue.01, accent.cyan.01)", transition: "background-position 500ms ease, color 500ms ease", _hover: { bgPosition: "right", @@ -57,7 +73,7 @@ const company = defineStyle({ }); const wallet = defineStyle({ - bgGradient: 'linear(to-b, background.content.01, background.content.02)', + bgGradient: "linear(to-b, background.content.01, background.content.02)", border: "0.5px solid", borderColor: "border.white.01", _hover: { @@ -67,5 +83,5 @@ const wallet = defineStyle({ export const buttonTheme = defineStyleConfig({ baseStyle: basestyle, - variants: { tab, company, wallet, account, action }, + variants: { tab, company, wallet, account, action, navigate }, }); diff --git a/src/styles/divider-theme.ts b/src/styles/divider-theme.ts index 2854bb07..720f7b90 100644 --- a/src/styles/divider-theme.ts +++ b/src/styles/divider-theme.ts @@ -1,11 +1,11 @@ -import { defineStyle, defineStyleConfig } from '@chakra-ui/react' +import { defineStyle, defineStyleConfig } from "@chakra-ui/react"; const thick = defineStyle({ - borderWidth: '3.5px', - borderStyle: "solid", - borderColor: "border.white.01", -}) + borderWidth: "3.5px", + borderStyle: "solid", + borderColor: "border.white.01", +}); export const dividerTheme = defineStyleConfig({ - variants: { thick }, -}) + variants: { thick }, +}); diff --git a/src/styles/menu-theme.ts b/src/styles/menu-theme.ts index 5943d65b..8eb159e1 100644 --- a/src/styles/menu-theme.ts +++ b/src/styles/menu-theme.ts @@ -1,95 +1,94 @@ -import { menuAnatomy } from '@chakra-ui/anatomy'; -import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react'; +import { menuAnatomy } from "@chakra-ui/anatomy"; +import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react"; -const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers( - menuAnatomy.keys -); +const { definePartsStyle, defineMultiStyleConfig } = + createMultiStyleConfigHelpers(menuAnatomy.keys); const account = defineStyle({ button: { - justifyContent: 'center', - py: '10px', - px: '0px', - h: '50px', - w: '275px', - fontSize: 'lg', - fontWeight: 'extrabold', - color: 'white', - bgGradient: 'linear(to-b, background.content.01, background.content.02)', - border: '1px solid', - borderRadius: 'md', - borderColor: 'border.cyan.01', + justifyContent: "center", + py: "10px", + px: "0px", + h: "50px", + w: "275px", + fontSize: "lg", + fontWeight: "extrabold", + color: "white", + bgGradient: "linear(to-b, background.content.01, background.content.02)", + border: "1px solid", + borderRadius: "md", + borderColor: "border.cyan.01", _hover: { - bg: 'accent.cyan.01', + bg: "accent.cyan.01", }, }, list: { - p: '10px', - w: '275px', - bgColor: 'background.container.01', - border: '1.5px solid', - borderColor: 'border.white.01', - borderRadius: 'md', + p: "10px", + w: "275px", + bgColor: "background.container.01", + border: "1.5px solid", + borderColor: "border.white.01", + borderRadius: "md", }, item: { - justifyContent: 'center', - bgColor: 'inherit', - borderRadius: 'md', - color: 'white', - fontSize: 'xs', - fontWeight: 'extrabold', + justifyContent: "center", + bgColor: "inherit", + borderRadius: "md", + color: "white", + fontSize: "xs", + fontWeight: "extrabold", _hover: { - background: 'white.03', + background: "white.03", }, - transition: 'all 0.05s ease-in-out', + transition: "all 0.05s ease-in-out", }, }); const network = definePartsStyle({ button: { - justifyContent: 'center', - p: '10px', - h: '50px', - w: '275px', - bgGradient: 'linear(to-b, background.content.01, background.content.02)', - border: '1.5px solid', - borderColor: 'border.white.01', - borderRadius: 'md', - color: 'white', - fontSize: 'sm', - fontWeight: 'extrabold', + justifyContent: "center", + p: "10px", + h: "50px", + w: "275px", + bgGradient: "linear(to-b, background.content.01, background.content.02)", + border: "1.5px solid", + borderColor: "border.white.01", + borderRadius: "md", + color: "white", + fontSize: "sm", + fontWeight: "extrabold", _hover: { - background: 'white.03', + background: "white.03", }, }, list: { - p: '10px', - w: '275px', - bgColor: 'background.container.01', - border: '1.5px solid', - borderColor: 'border.white.01', - borderRadius: 'md', + p: "10px", + w: "275px", + bgColor: "background.container.01", + border: "1.5px solid", + borderColor: "border.white.01", + borderRadius: "md", }, item: { - justifyContent: 'center', - bgColor: 'inherit', - borderRadius: 'md', - color: 'white', - fontSize: 'xs', - fontWeight: 'extrabold', + justifyContent: "center", + bgColor: "inherit", + borderRadius: "md", + color: "white", + fontSize: "xs", + fontWeight: "extrabold", _hover: { - background: 'white.03', + background: "white.03", }, - transition: 'all 0.05s ease-in-out', + transition: "all 0.05s ease-in-out", }, }); const lg = defineStyle({ - width: '200px', + width: "200px", }); const xl = defineStyle({ - width: '350px', + width: "350px", }); // define custom sizes