diff --git a/dashboard.patch b/dashboard.patch deleted file mode 100644 index 68757145..00000000 --- a/dashboard.patch +++ /dev/null @@ -1,1550 +0,0 @@ -diff --git a/public/images/dlc-btc-mint-visualization.png b/public/images/dlc-btc-mint-visualization.png -new file mode 100644 -index 0000000..e932ee5 -Binary files /dev/null and b/public/images/dlc-btc-mint-visualization.png differ -diff --git a/public/images/logos/bitcoin-logo.svg b/public/images/logos/bitcoin-logo.svg -new file mode 100644 -index 0000000..2b7de76 ---- /dev/null -+++ b/public/images/logos/bitcoin-logo.svg -@@ -0,0 +1,24 @@ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -\ No newline at end of file -diff --git a/public/images/logos/dlc-btc-logo.svg b/public/images/logos/dlc-btc-logo.svg -new file mode 100644 -index 0000000..7cc4f77 ---- /dev/null -+++ b/public/images/logos/dlc-btc-logo.svg -@@ -0,0 +1,30 @@ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -\ No newline at end of file -diff --git a/public/images/logos/ethereum-logo.svg b/public/images/logos/ethereum-logo.svg -new file mode 100644 -index 0000000..6ba66e8 ---- /dev/null -+++ b/public/images/logos/ethereum-logo.svg -@@ -0,0 +1,59 @@ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -\ No newline at end of file -diff --git a/public/images/logos/leather-logo.svg b/public/images/logos/leather-logo.svg -new file mode 100644 -index 0000000..34d3b23 ---- /dev/null -+++ b/public/images/logos/leather-logo.svg -@@ -0,0 +1,22 @@ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -\ No newline at end of file -diff --git a/public/images/logos/metamask-logo.svg b/public/images/logos/metamask-logo.svg -new file mode 100644 -index 0000000..bcf96f8 ---- /dev/null -+++ b/public/images/logos/metamask-logo.svg -@@ -0,0 +1,222 @@ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -\ No newline at end of file -diff --git a/public/images/logos/metamask_logo.svg b/public/images/logos/metamask_logo.svg -deleted file mode 100644 -index 47ccb58..0000000 ---- a/public/images/logos/metamask_logo.svg -+++ /dev/null -@@ -1,18 +0,0 @@ -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -\ No newline at end of file -diff --git a/src/app/app.tsx b/src/app/app.tsx -index fd502d8..8e2a26d 100644 ---- a/src/app/app.tsx -+++ b/src/app/app.tsx -@@ -5,13 +5,15 @@ import { ModalContainer } from "@components/modals/components/modal-container"; - - import { About } from "./pages/about/about"; - import { Dashboard } from "./pages/dashboard/dashboard"; -+import { MyDLCBTC } from "@pages/my-dlc-btc/my-dlc-btc"; - - export function App(): React.JSX.Element { - return ( - <> - - } /> -- } /> -+ } /> -+ } /> - - - -diff --git a/src/app/components/account/account.tsx b/src/app/components/account/account.tsx -index 691c8dd..53da619 100644 ---- a/src/app/components/account/account.tsx -+++ b/src/app/components/account/account.tsx -@@ -1,7 +1,7 @@ - import { useEffect, useState } from "react"; - import { useDispatch, useSelector } from "react-redux"; - --import { Button } from "@chakra-ui/react"; -+import { Button, HStack } from "@chakra-ui/react"; - import { AccountMenu } from "@components/account/components/account-menu"; - import { Wallet, WalletType, ethereumWallets } from "@models/wallet"; - import { RootState } from "@store/index"; -@@ -35,7 +35,7 @@ export function Account(): React.JSX.Element { - } - - return ( -- <> -+ - {address && wallet ? ( - - ) : ( - - )} -- -+ - ); - } -diff --git a/src/app/components/account/components/account-menu.tsx b/src/app/components/account/components/account-menu.tsx -index 293c128..a3e5c61 100644 ---- a/src/app/components/account/components/account-menu.tsx -+++ b/src/app/components/account/components/account-menu.tsx -@@ -26,9 +26,14 @@ export function AccountMenu({ - - - -- {wallet?.name} -+ {wallet?.name} - {easyTruncateAddress(address)} -- -+ - - - -diff --git a/src/app/components/app.layout.tsx b/src/app/components/app.layout.tsx -index 8d31d46..57b9358 100644 ---- a/src/app/components/app.layout.tsx -+++ b/src/app/components/app.layout.tsx -@@ -1,17 +1,16 @@ - import { BrowserRouter as Router, Routes } from "react-router-dom"; - --import { Stack } from "@chakra-ui/react"; -- --import { HasChildren } from "@models/has-children"; -+import { VStack } from "@chakra-ui/react"; - import { Header } from "@components/header/header"; -+import { HasChildren } from "@models/has-children"; - - export function AppLayout({ children }: HasChildren): React.JSX.Element { - return ( - -- -+ -
- {children} -- -+ - - ); - } -diff --git a/src/app/components/company-website-button/company-website-button.tsx b/src/app/components/company-website-button/company-website-button.tsx -index 9c90a33..8fd6aaf 100644 ---- a/src/app/components/company-website-button/company-website-button.tsx -+++ b/src/app/components/company-website-button/company-website-button.tsx -@@ -10,10 +10,9 @@ export function CompanyWebsiteButton(): React.JSX.Element { - as={"a"} - href={companyWebsiteURL} - variant={"company"} -- padding={"0"} -- boxSize={["75px", "100px"]} -+ boxSize={"65px"} - > -- {altText} -+ {altText} - - ); - } -diff --git a/src/app/components/custom-skeleton/custom-skeleton.tsx b/src/app/components/custom-skeleton/custom-skeleton.tsx -new file mode 100644 -index 0000000..45cfd21 ---- /dev/null -+++ b/src/app/components/custom-skeleton/custom-skeleton.tsx -@@ -0,0 +1,24 @@ -+import { ReactNode } from "react"; -+ -+import { Skeleton } from "@chakra-ui/react"; -+ -+interface CustomSkeletonProps { -+ children: ReactNode; -+ isLoaded: boolean; -+} -+ -+export function CustomSkeleton({ -+ children, -+ isLoaded, -+}: CustomSkeletonProps): React.JSX.Element { -+ return ( -+ -+ {children} -+ -+ ); -+} -diff --git a/src/app/components/dlc-btc-item/components/dlc-btc-item.layout.tsx b/src/app/components/dlc-btc-item/components/dlc-btc-item.layout.tsx -new file mode 100644 -index 0000000..c1c75b9 ---- /dev/null -+++ b/src/app/components/dlc-btc-item/components/dlc-btc-item.layout.tsx -@@ -0,0 +1,30 @@ -+import { ReactNode } from "react"; -+ -+import { HStack } from "@chakra-ui/react"; -+import { CustomSkeleton } from "@components/custom-skeleton/custom-skeleton"; -+ -+interface DlcBtcItemLayoutProps { -+ children: ReactNode; -+ isLoaded: boolean; -+} -+ -+export function DlcBtcItemLayout({ -+ children, -+ isLoaded, -+}: DlcBtcItemLayoutProps): React.JSX.Element { -+ return ( -+ -+ -+ {children} -+ -+ -+ ); -+} -diff --git a/src/app/components/dlc-btc-item/dlc-btc-item.tsx b/src/app/components/dlc-btc-item/dlc-btc-item.tsx -new file mode 100644 -index 0000000..7071da3 ---- /dev/null -+++ b/src/app/components/dlc-btc-item/dlc-btc-item.tsx -@@ -0,0 +1,56 @@ -+import { ChevronDownIcon } from "@chakra-ui/icons"; -+import { -+ Button, -+ HStack, -+ Image, -+ Progress, -+ Text, -+ VStack, -+} from "@chakra-ui/react"; -+import { useLoadingDelay } from "@hooks/use-loading-delay"; -+ -+import { DlcBtcItemLayout } from "./components/dlc-btc-item.layout"; -+ -+export function DlcBtcItem(): React.JSX.Element { -+ const isLoaded = useLoadingDelay(3000); -+ -+ return ( -+ -+ -+ -+ -+ -+ {"BTC -+ -+ 5.5 -+ -+ -+ -+ 10/10/2023 -+ -+ -+ -+ -+ -+ WAITING FOR LOCK -+ -+ -+ -+ ); -+} -diff --git a/src/app/components/header/components/header.layout.tsx b/src/app/components/header/components/header.layout.tsx -index 141083c..4a37b69 100644 ---- a/src/app/components/header/components/header.layout.tsx -+++ b/src/app/components/header/components/header.layout.tsx -@@ -1,10 +1,9 @@ - import { HStack } from "@chakra-ui/react"; -- - import { HasChildren } from "@models/has-children"; - - export function HeaderLayout({ children }: HasChildren): React.JSX.Element { - return ( -- -+ - {children} - - ); -diff --git a/src/app/components/header/header.tsx b/src/app/components/header/header.tsx -index 9dbdc23..5f0d922 100644 ---- a/src/app/components/header/header.tsx -+++ b/src/app/components/header/header.tsx -@@ -18,17 +18,22 @@ export function Header(): React.JSX.Element { - - return ( - -- -- -+ -+ - handleTabClick("/")} - /> -+ handleTabClick("/my-dlc-btc")} -+ /> - handleTabClick("/about")} -+ isActive={activeTab === "/how-it-works"} -+ handleClick={() => handleTabClick("/how-it-works")} - /> - - -diff --git a/src/app/components/mint-unmint-box/components/mint-unmint-box.layout.tsx b/src/app/components/mint-unmint-box/components/mint-unmint-box.layout.tsx -new file mode 100644 -index 0000000..9c03f58 ---- /dev/null -+++ b/src/app/components/mint-unmint-box/components/mint-unmint-box.layout.tsx -@@ -0,0 +1,20 @@ -+import { VStack } from "@chakra-ui/react"; -+import { HasChildren } from "@models/has-children"; -+ -+export function MintUnmintBoxLayout({ -+ children, -+}: HasChildren): React.JSX.Element { -+ return ( -+ -+ {children} -+ -+ ); -+} -diff --git a/src/app/components/mint-unmint-box/components/protocol-summary-stack/components/protocol-summary-stack.layout.tsx b/src/app/components/mint-unmint-box/components/protocol-summary-stack/components/protocol-summary-stack.layout.tsx -new file mode 100644 -index 0000000..514376b ---- /dev/null -+++ b/src/app/components/mint-unmint-box/components/protocol-summary-stack/components/protocol-summary-stack.layout.tsx -@@ -0,0 +1,18 @@ -+import { HStack } from "@chakra-ui/react"; -+import { HasChildren } from "@models/has-children"; -+ -+export function ProtocolSummaryStackLayout({ -+ children, -+}: HasChildren): React.JSX.Element { -+ return ( -+ -+ {children} -+ -+ ); -+} -diff --git a/src/app/components/mint-unmint-box/components/protocol-summary-stack/protocol-summary-stack.tsx b/src/app/components/mint-unmint-box/components/protocol-summary-stack/protocol-summary-stack.tsx -new file mode 100644 -index 0000000..636382c ---- /dev/null -+++ b/src/app/components/mint-unmint-box/components/protocol-summary-stack/protocol-summary-stack.tsx -@@ -0,0 +1,29 @@ -+import { Text, VStack } from "@chakra-ui/react"; -+import { ProtocolSummaryStackLayout } from "./components/protocol-summary-stack.layout"; -+import { ProtocolHistory } from "@components/protocol-history/protocol-history"; -+ -+export function ProtocolSummaryStack(): React.JSX.Element { -+ return ( -+ -+ -+ -+ TVL -+ -+ -+ -+ 1,650.36 dlcBTC -+ -+ -+ $56,425,710.06 -+ -+ -+ -+ -+ -+ ); -+} -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-box/components/setup-information-stack/components/setup-information-stack.layout.tsx -new file mode 100644 -index 0000000..3041615 ---- /dev/null -+++ b/src/app/components/mint-unmint-box/components/setup-information-stack/components/setup-information-stack.layout.tsx -@@ -0,0 +1,19 @@ -+import { VStack } from "@chakra-ui/react"; -+import { HasChildren } from "@models/has-children"; -+ -+export function SetupInformationStackLayout({ -+ children, -+}: HasChildren): React.JSX.Element { -+ return ( -+ -+ {children} -+ -+ ); -+} -diff --git a/src/app/components/mint-unmint-box/components/setup-information-stack/setup-information-stack.tsx b/src/app/components/mint-unmint-box/components/setup-information-stack/setup-information-stack.tsx -new file mode 100644 -index 0000000..4a2e874 ---- /dev/null -+++ b/src/app/components/mint-unmint-box/components/setup-information-stack/setup-information-stack.tsx -@@ -0,0 +1,77 @@ -+import React from "react"; -+import { useNavigate } from "react-router-dom"; -+import { useDispatch } from "react-redux"; -+import { modalActions } from "@store/slices/modal/modal.actions"; -+ -+import { Button, HStack, Image, Text, VStack } from "@chakra-ui/react"; -+ -+import { SetupInformationStackLayout } from "./components/setup-information-stack.layout"; -+ -+export function SetupInformationStack(): React.JSX.Element { -+ const navigate = useNavigate(); -+ const dispatch = useDispatch(); -+ -+ const setupText = "Ready to\n mint dlcBTC?"; -+ -+ function onConnectWalletClick(): void { -+ dispatch(modalActions.toggleSelectWalletModalVisibility()); -+ } -+ return ( -+ -+ -+ -+ -+ {setupText} -+ -+ navigate("/how-it-works")}> -+ How it works? -+ -+ -+ -+ -+ -+ -+ -+ What you will need: -+ -+ -+ -+ -+ -+ Metamask Wallet -+ -+ -+ -+ +ETH (for fee) -+ -+ -+ -+ -+ -+ -+ Leather Wallet -+ -+ -+ -+ +BTC (for lock) -+ -+ -+ -+ -+ -+ -+ ); -+} -diff --git a/src/app/components/mint-unmint-box/mint-unmint-box.tsx b/src/app/components/mint-unmint-box/mint-unmint-box.tsx -new file mode 100644 -index 0000000..ab1beec ---- /dev/null -+++ b/src/app/components/mint-unmint-box/mint-unmint-box.tsx -@@ -0,0 +1,33 @@ -+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/my-dlc-btc/components/small-my-list.layout.tsx b/src/app/components/my-dlc-btc/components/small-my-list.layout.tsx -new file mode 100644 -index 0000000..7c913c9 ---- /dev/null -+++ b/src/app/components/my-dlc-btc/components/small-my-list.layout.tsx -@@ -0,0 +1,22 @@ -+import { VStack } from "@chakra-ui/react"; -+import { HasChildren } from "@models/has-children"; -+ -+export function SmallMyListLayout({ -+ children, -+}: HasChildren): React.JSX.Element { -+ return ( -+ -+ {children} -+ -+ ); -+} -diff --git a/src/app/components/my-dlc-btc/small-my-list.tsx b/src/app/components/my-dlc-btc/small-my-list.tsx -new file mode 100644 -index 0000000..021dce0 ---- /dev/null -+++ b/src/app/components/my-dlc-btc/small-my-list.tsx -@@ -0,0 +1,18 @@ -+import { HStack, Spinner, Text } from "@chakra-ui/react"; -+import { SmallMyListLayout } from "./components/small-my-list.layout"; -+import { DlcBtcItem } from "@components/dlc-btc-item/dlc-btc-item"; -+ -+export function SmallMyList(): React.JSX.Element { -+ return ( -+ -+ -+ My dlcBTC -+ -+ -+ -+ Locking BTC in Progress -+ -+ -+ -+ ); -+} -diff --git a/src/app/components/protocol-history/components/protocol-history-item.tsx b/src/app/components/protocol-history/components/protocol-history-item.tsx -new file mode 100644 -index 0000000..afb6b8e ---- /dev/null -+++ b/src/app/components/protocol-history/components/protocol-history-item.tsx -@@ -0,0 +1,50 @@ -+import { HStack, Image, Text } from "@chakra-ui/react"; -+import { CustomSkeleton } from "@components/custom-skeleton/custom-skeleton"; -+import { useLoadingDelay } from "@hooks/use-loading-delay"; -+ -+interface ProtocolHistoryItem { -+ id: string; -+ value: string; -+ uuid: string; -+ date: string; -+} -+ -+export function ProtocolHistoryItem( -+ protocolHistoryItem: ProtocolHistoryItem, -+): React.JSX.Element { -+ const isLoaded = useLoadingDelay(3000); -+ -+ return ( -+ -+ -+ -+ {"dlcBTC -+ -+ {protocolHistoryItem.value} -+ -+ -+ {protocolHistoryItem.uuid} -+ -+ -+ -+ {protocolHistoryItem.date} -+ -+ -+ -+ ); -+} -diff --git a/src/app/components/protocol-history/components/protocol-history.layout.tsx b/src/app/components/protocol-history/components/protocol-history.layout.tsx -new file mode 100644 -index 0000000..ccdb3f6 ---- /dev/null -+++ b/src/app/components/protocol-history/components/protocol-history.layout.tsx -@@ -0,0 +1,29 @@ -+import { Box, VStack } from "@chakra-ui/react"; -+import { HasChildren } from "@models/has-children"; -+ -+export function ProtocolHistoryLayout({ -+ children, -+}: HasChildren): React.JSX.Element { -+ return ( -+ -+ -+ -+ {children} -+ -+ -+ -+ ); -+} -diff --git a/src/app/components/protocol-history/protocol-history.tsx b/src/app/components/protocol-history/protocol-history.tsx -new file mode 100644 -index 0000000..fb806d1 ---- /dev/null -+++ b/src/app/components/protocol-history/protocol-history.tsx -@@ -0,0 +1,21 @@ -+import { Text, VStack } from "@chakra-ui/react"; -+ -+import { exampleProtocolHistoryItems } from "@shared/examples/example-protocol-history-items"; -+ -+import { ProtocolHistoryItem } from "./components/protocol-history-item"; -+import { ProtocolHistoryLayout } from "./components/protocol-history.layout"; -+ -+export function ProtocolHistory(): React.JSX.Element { -+ return ( -+ -+ -+ Protocol History -+ -+ -+ {exampleProtocolHistoryItems.map((item) => ( -+ -+ ))} -+ -+ -+ ); -+} -diff --git a/src/app/hooks/use-loading-delay.ts b/src/app/hooks/use-loading-delay.ts -new file mode 100644 -index 0000000..49e7a98 ---- /dev/null -+++ b/src/app/hooks/use-loading-delay.ts -@@ -0,0 +1,15 @@ -+import { useEffect, useState } from "react"; -+ -+export const useLoadingDelay = (delay = 3000): boolean => { -+ const [isLoaded, setIsLoaded] = useState(false); -+ -+ useEffect(() => { -+ const timer = setTimeout(() => { -+ setIsLoaded(true); -+ }, delay); -+ -+ return () => clearTimeout(timer); -+ }, [delay]); -+ -+ return isLoaded; -+}; -diff --git a/src/app/pages/dashboard/dashboard.tsx b/src/app/pages/dashboard/dashboard.tsx -index 8a155ae..6336741 100644 ---- a/src/app/pages/dashboard/dashboard.tsx -+++ b/src/app/pages/dashboard/dashboard.tsx -@@ -1,11 +1,14 @@ - import React from "react"; - --import { Text, VStack } from "@chakra-ui/react"; -+import { HStack } from "@chakra-ui/react"; -+import { MintUnmintBox } from "@components/mint-unmint-box/mint-unmint-box"; -+import { SmallMyList } from "@components/my-dlc-btc/small-my-list"; - - export function Dashboard(): React.JSX.Element { - return ( -- -- Dashboard -- -+ -+ -+ -+ - ); - } -diff --git a/src/app/pages/my-dlc-btc/my-dlc-btc.tsx b/src/app/pages/my-dlc-btc/my-dlc-btc.tsx -new file mode 100644 -index 0000000..6db3371 ---- /dev/null -+++ b/src/app/pages/my-dlc-btc/my-dlc-btc.tsx -@@ -0,0 +1,9 @@ -+import { Text, VStack } from "@chakra-ui/react"; -+ -+export function MyDLCBTC(): React.JSX.Element { -+ return ( -+ -+ My dlcBTC -+ -+ ); -+} -diff --git a/src/shared/examples/example-protocol-history-items.ts b/src/shared/examples/example-protocol-history-items.ts -new file mode 100644 -index 0000000..3ccd24b ---- /dev/null -+++ b/src/shared/examples/example-protocol-history-items.ts -@@ -0,0 +1,10 @@ -+export const exampleProtocolHistoryItems = [ -+ { id: "1", value: "25.00", uuid: "0x1234", date: "1 hour ago" }, -+ { id: "2", value: "50.00", uuid: "0x1234", date: "2 hours ago" }, -+ { id: "3", value: "75.00", uuid: "0x1234", date: "3 hours ago" }, -+ { id: "4", value: "100.00", uuid: "0x1234", date: "4 hours ago" }, -+ { id: "5", value: "125.00", uuid: "0x1234", date: "5 hours ago" }, -+ { id: "6", value: "150.00", uuid: "0x1234", date: "6 hours ago" }, -+ { id: "7", value: "175.00", uuid: "0x1234", date: "7 hours ago" }, -+ { id: "8", value: "200.00", uuid: "0x1234", date: "8 hours ago" }, -+]; -diff --git a/src/shared/models/wallet.ts b/src/shared/models/wallet.ts -index c1275fa..184f7cc 100644 ---- a/src/shared/models/wallet.ts -+++ b/src/shared/models/wallet.ts -@@ -11,7 +11,7 @@ export interface Wallet { - const metamask: Wallet = { - id: WalletType.Metamask, - name: "Metamask", -- logo: "/images/logos/metamask_logo.svg", -+ logo: "/images/logos/metamask-logo.svg", - }; - - export const ethereumWallets: Wallet[] = [metamask]; -diff --git a/src/styles/app-theme.ts b/src/styles/app-theme.ts -index 6965b97..2565799 100644 ---- a/src/styles/app-theme.ts -+++ b/src/styles/app-theme.ts -@@ -4,6 +4,7 @@ import { buttonTheme } from "./button-theme"; - import { modalTheme } from "./modal-theme"; - import { selectTheme } from "./select-theme"; - import { textTheme } from "./text-theme"; -+import { tabsTheme } from "./tabs-theme"; - - export const appTheme = extendTheme({ - components: { -@@ -12,6 +13,14 @@ export const appTheme = extendTheme({ - Modal: modalTheme, - Select: selectTheme, - Text: textTheme, -+ Tabs: tabsTheme, -+ Progress: { -+ baseStyle: { -+ filledTrack: { -+ bg: "secondary.01", -+ }, -+ }, -+ }, - }, - styles: { - global: () => ({ -@@ -22,13 +31,15 @@ export const appTheme = extendTheme({ - }, - colors: { - "primary.01": "#93009E", -- "primary.02": "#001FBA", -- "secondary.01": "#04BAB2", -- "secondary.02": "#2C039E", -- "background.01": "#500056", -+ "primary.02": "#93009E", -+ "secondary.01": "#07E8D8", -+ "secondary.02": "#001FBA", -+ "background.01": "#3a0248", - "background.02": "#000933", - "background.03": "#80000000", -+ "background.04": "#350058", - "accent.01": "#07E8D8", -+ "accent.02": "#FFA800", - "warning.01": "#FF4500", - }, - -diff --git a/src/styles/button-theme.ts b/src/styles/button-theme.ts -index ada8082..2097ac3 100644 ---- a/src/styles/button-theme.ts -+++ b/src/styles/button-theme.ts -@@ -1,61 +1,72 @@ - import { defineStyle, defineStyleConfig } from "@chakra-ui/react"; - --const tab = defineStyle({ -- paddingX: "0px", -- paddingY: "10px", -- height: "50px", -- width: "auto", -- background: "none", -+const basestyle = defineStyle({ -+ justifyContent: "center", - color: "white", -+}); -+ -+const more = defineStyle({ -+ py: "10px", -+ px: "50px", -+ h: "50px", -+ w: "50px", -+ fontSize: "lg", -+ fontWeight: "extrabold", -+ bg: "none", -+ border: "1px solid", -+ borderColor: "secondary.01", -+ _hover: { -+ bg: "secondary.01", -+ }, -+}); -+ -+const account = defineStyle({ -+ py: "10px", -+ px: "50px", -+ h: "50px", -+ w: "100%", -+ fontSize: "lg", -+ fontWeight: "extrabold", -+ bgSize: "400%", -+ bgPosition: "left", -+ bgGradient: -+ "linear(to-r, secondary.01, secondary.02, secondary.02, secondary.01)", -+ transition: "background-position 500ms ease, color 500ms ease", -+ _hover: { -+ bgPosition: "right", -+ }, -+}); -+ -+const tab = defineStyle({ -+ py: "25px", -+ px: "0px", -+ h: "50px", -+ w: "auto", - fontSize: "lg", - fontWeight: "normal", -+ bgColor: "none", - borderBottom: "3.5px solid", -+ borderRadius: "none", - borderColor: "secondary.01", - }); - - const company = defineStyle({ -- padding: "0px", -- height: "50px", -- width: "50px", -- background: "none", -+ p: "0px", -+ h: "50px", -+ w: "auto", -+ bgColor: "none", - }); - - const wallet = defineStyle({ -- padding: "10px", -- height: "50px", -- width: "275px", -- shadow: "xl", -- border: "1.5px solid", -+ bgColor: "background.02", -+ border: "0.5px solid", - borderColor: "secondary.01", -- borderRadius: "md", -- background: "background.02", -- color: "white", -- fontSize: "sm", -- fontWeight: "extrabold", -- justifyContent: "center", -- _hover: { -- background: "secondary.01", -- }, --}); -- --const account = defineStyle({ -- padding: "10px", -- height: "50px", -- width: "200px", -- shadow: "xl", -- border: "1.5px solid", -- borderColor: "secondary.01", -- borderRadius: "md", -- background: "none", -- color: "white", -- fontSize: "sm", -- fontWeight: "extrabold", -- justifyContent: "center", - _hover: { -- background: "secondary.01", -+ bgColor: "secondary.01", - }, - }); - - export const buttonTheme = defineStyleConfig({ -- variants: { tab, company, wallet, account }, -+ baseStyle: basestyle, -+ variants: { tab, company, wallet, account, more }, - }); -diff --git a/src/styles/menu-theme.ts b/src/styles/menu-theme.ts -index 6a2807e..8a886ad 100644 ---- a/src/styles/menu-theme.ts -+++ b/src/styles/menu-theme.ts -@@ -6,46 +6,44 @@ const { definePartsStyle, defineMultiStyleConfig } = - - const account = defineStyle({ - button: { -- padding: "10px", -- height: "50px", -- width: "200px", -- shadow: "xl", -- border: "1.5px solid", -- borderColor: "secondary.01", -- borderRadius: "md", -- background: "none", -- color: "white", -- fontSize: "sm", -- fontWeight: "extrabold", - justifyContent: "center", -+ py: "10px", -+ px: "0px", -+ h: "50px", -+ w: "100%", -+ fontSize: "lg", -+ fontWeight: "extrabold", -+ color: "white", -+ bgColor: "none", -+ border: "1px solid", -+ borderRadius: "md", -+ borderColor: "secondary.01", - _hover: { -- background: "secondary.01", -+ bg: "secondary.01", - }, - }, - list: { -- padding: "10px", -- borderTop: "0px", -- borderTopRadius: "0px", -- borderLeft: "1.5px solid", -- borderRight: "1.5px solid", -- borderBottom: "1.5px solid", -- borderColor: "secondary.01", -+ py: "10px", -+ px: "5px", -+ h: "auto", -+ w: "275px", -+ bgColor: "background.02", -+ border: "1px solid", - borderRadius: "md", -- minWidth: "0px", -- width: "200px", -- background: "background.02", -- shadow: "none", -+ borderColor: "secondary.01", - }, - item: { -- backgroundColor: "inherit", -+ justifyContent: "center", -+ p: "10px", -+ h: "50px", -+ w: "100%", -+ fontSize: "sm", -+ fontWeight: "extrabold", - color: "white", -+ bgColor: "inherit", - borderRadius: "md", -- fontSize: "xs", -- fontWeight: "extrabold", -- padding: "10px", -- justifyContent: "center", - _hover: { -- background: "secondary.01", -+ bgColor: "secondary.01", - }, - }, - }); -diff --git a/src/styles/tabs-theme.ts b/src/styles/tabs-theme.ts -new file mode 100644 -index 0000000..bbe115b ---- /dev/null -+++ b/src/styles/tabs-theme.ts -@@ -0,0 +1,29 @@ -+import { tabsAnatomy } from "@chakra-ui/anatomy"; -+import { createMultiStyleConfigHelpers } from "@chakra-ui/react"; -+ -+const { definePartsStyle, defineMultiStyleConfig } = -+ createMultiStyleConfigHelpers(tabsAnatomy.keys); -+ -+// define the base component styles -+const baseStyle = definePartsStyle({ -+ root: { -+ p: "10px", -+ h: "150px", -+ w: "100%", -+ }, -+ tab: { -+ w: "50%", -+ color: "white", -+ fontSize: "lg", -+ fontWeight: "semibold", -+ _selected: { -+ color: "secondary.01", -+ }, -+ }, -+ tabpanel: { -+ p: "0px", -+ }, -+}); -+ -+// export the component theme -+export const tabsTheme = defineMultiStyleConfig({ baseStyle }); -diff --git a/src/styles/text-theme.ts b/src/styles/text-theme.ts -index 11c1cd1..71b66bf 100644 ---- a/src/styles/text-theme.ts -+++ b/src/styles/text-theme.ts -@@ -1,10 +1,27 @@ - import { defineStyle, defineStyleConfig } from "@chakra-ui/react"; - - const header = defineStyle({ -- padding: "10px", -- fontWeight: "extrabold", -+ color: "white", - fontSize: "sm", -+ fontWeight: "extrabold", -+}); -+ -+const welcome = defineStyle({ - color: "white", -+ fontSize: "4xl", -+ whiteSpace: "pre-line", -+}); -+ -+const navigate = defineStyle({ -+ color: "secondary.01", -+ fontSize: "lg", -+ fontWeight: "regular", -+ textDecoration: "underline", -+ _hover: { -+ cursor: "pointer", -+ }, - }); - --export const textTheme = defineStyleConfig({ variants: { header } }); -+export const textTheme = defineStyleConfig({ -+ variants: { header, welcome, navigate }, -+}); -diff --git a/tsconfig.json b/tsconfig.json -index cf3d77c..21bd833 100644 ---- a/tsconfig.json -+++ b/tsconfig.json -@@ -7,6 +7,8 @@ - "@models/*": ["shared/models/*"], - "@common/*": ["app/common/*"], - "@pages/*": ["app/pages/*"], -+ "@shared/*": ["shared/*"], -+ "@hooks/*": ["app/hooks/*"], - }, - "target": "ES2020", - "useDefineForClassFields": true, -diff --git a/vite.config.ts b/vite.config.ts -index da57b11..cd835bf 100644 ---- a/vite.config.ts -+++ b/vite.config.ts -@@ -25,6 +25,14 @@ export default defineConfig({ - { - find: "@pages", - replacement: resolve(__dirname, './src/app/pages') -+ }, -+ { -+ find: "@shared", -+ replacement: resolve(__dirname, './src/shared') -+ }, -+ { -+ find: "@hooks", -+ replacement: resolve(__dirname, './src/app/hooks') - }] - } - }) diff --git a/package-lock.json b/package-lock.json index 887ab51b..70d92710 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,6 @@ "eslint-plugin-import": "^2.29.0", "eslint-plugin-jsx-a11y": "^6.8.0", "eslint-plugin-react": "^7.33.2", - "framer-motion": "^10.16.4", "prettier": "^3.0.3", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -4367,9 +4366,10 @@ } }, "node_modules/framer-motion": { - "version": "10.16.4", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.16.4.tgz", - "integrity": "sha512-p9V9nGomS3m6/CALXqv6nFGMuFOxbWsmaOrdmhyQimMIlLl3LC7h7l86wge/Js/8cRu5ktutS/zlzgR7eBOtFA==", + "version": "10.16.5", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.16.5.tgz", + "integrity": "sha512-GEzVjOYP2MIpV9bT/GbhcsBNoImG3/2X3O/xVNWmktkv9MdJ7P/44zELm/7Fjb+O3v39SmKFnoDQB32giThzpg==", + "peer": true, "dependencies": { "tslib": "^2.4.0" }, @@ -4394,6 +4394,7 @@ "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", "optional": true, + "peer": true, "dependencies": { "@emotion/memoize": "0.7.4" } @@ -4402,7 +4403,8 @@ "version": "0.7.4", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", - "optional": true + "optional": true, + "peer": true }, "node_modules/framesync": { "version": "6.1.2", @@ -10425,9 +10427,10 @@ } }, "framer-motion": { - "version": "10.16.4", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.16.4.tgz", - "integrity": "sha512-p9V9nGomS3m6/CALXqv6nFGMuFOxbWsmaOrdmhyQimMIlLl3LC7h7l86wge/Js/8cRu5ktutS/zlzgR7eBOtFA==", + "version": "10.16.5", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.16.5.tgz", + "integrity": "sha512-GEzVjOYP2MIpV9bT/GbhcsBNoImG3/2X3O/xVNWmktkv9MdJ7P/44zELm/7Fjb+O3v39SmKFnoDQB32giThzpg==", + "peer": true, "requires": { "@emotion/is-prop-valid": "^0.8.2", "tslib": "^2.4.0" @@ -10438,6 +10441,7 @@ "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", "optional": true, + "peer": true, "requires": { "@emotion/memoize": "0.7.4" } @@ -10446,7 +10450,8 @@ "version": "0.7.4", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", - "optional": true + "optional": true, + "peer": true } } }, diff --git a/package.json b/package.json index d3b835c3..547555fa 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,6 @@ "eslint-plugin-import": "^2.29.0", "eslint-plugin-jsx-a11y": "^6.8.0", "eslint-plugin-react": "^7.33.2", - "framer-motion": "^10.16.4", "prettier": "^3.0.3", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/src/app/app.tsx b/src/app/app.tsx index 8e2a26d8..32a457b6 100644 --- a/src/app/app.tsx +++ b/src/app/app.tsx @@ -5,14 +5,14 @@ import { ModalContainer } from "@components/modals/components/modal-container"; import { About } from "./pages/about/about"; import { Dashboard } from "./pages/dashboard/dashboard"; -import { MyDLCBTC } from "@pages/my-dlc-btc/my-dlc-btc"; +import { MyVaults } from "@pages/my-vaults/my-vaults"; export function App(): React.JSX.Element { return ( <> } /> - } /> + } /> } /> diff --git a/src/app/components/custom-skeleton/custom-skeleton.tsx b/src/app/components/custom-skeleton/custom-skeleton.tsx index 2cf3b069..92fd9f69 100644 --- a/src/app/components/custom-skeleton/custom-skeleton.tsx +++ b/src/app/components/custom-skeleton/custom-skeleton.tsx @@ -13,8 +13,8 @@ export function CustomSkeleton({ }: CustomSkeletonProps): React.JSX.Element { return ( diff --git a/src/app/components/dlc-btc-item/components/vault-box-expand-button.tsx b/src/app/components/dlc-btc-item/components/vault-box-expand-button.tsx index 433a1f6f..9e688142 100644 --- a/src/app/components/dlc-btc-item/components/vault-box-expand-button.tsx +++ b/src/app/components/dlc-btc-item/components/vault-box-expand-button.tsx @@ -11,7 +11,7 @@ export function VaultBoxExpandButton({ handleClick, }: VaultBoxExpandButtonProps): React.JSX.Element { return ( - + ) : ( + handleClick()} /> + )} ); } diff --git a/src/app/components/dlc-btc-item/components/vault-box.layout.tsx b/src/app/components/dlc-btc-item/components/vault-box.layout.tsx index 8016aa6a..42487317 100644 --- a/src/app/components/dlc-btc-item/components/vault-box.layout.tsx +++ b/src/app/components/dlc-btc-item/components/vault-box.layout.tsx @@ -20,10 +20,10 @@ export function VaultBoxLayout({ h={"auto"} w={"100%"} spacing={"15px"} - bgGradient={"linear(to-r, background.04, background.05)"} + bgGradient={"linear(to-r, background.content.01, background.content.02)"} blendMode={"screen"} border={"1px solid"} - borderColor={"white.04"} + borderColor={"border.white.01"} borderRadius={"md"} > {children} diff --git a/src/app/components/dlc-btc-item/vault-box.tsx b/src/app/components/dlc-btc-item/vault-box.tsx index 4039904d..85bddff5 100644 --- a/src/app/components/dlc-btc-item/vault-box.tsx +++ b/src/app/components/dlc-btc-item/vault-box.tsx @@ -1,12 +1,21 @@ -import React, { useState } from "react"; +import React, { useState } from 'react'; -import { useLoadingDelay } from "@hooks/use-loading-delay"; -import { Vault } from "@models/vault"; +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"; +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, @@ -14,13 +23,14 @@ export function VaultBox({ state, fundingTX, closingTX, -}: Vault): React.JSX.Element { + preventLoad, +}: VaultBoxProps): React.JSX.Element { const isLoaded = useLoadingDelay(3000); const confirmedBlocks = 3; const [isExpanded, setIsExpanded] = useState(false); return ( - + void; +} + +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 5f0d922d..3d896f8f 100644 --- a/src/app/components/header/header.tsx +++ b/src/app/components/header/header.tsx @@ -1,41 +1,24 @@ -import React, { useState } from "react"; -import { useNavigate } from "react-router-dom"; +import React from 'react'; +import { useLocation, useNavigate } from 'react-router-dom'; -import { HStack } from "@chakra-ui/react"; -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 { TabButton } from "@components/tab-button/tab-button"; +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'; export function Header(): React.JSX.Element { const navigate = useNavigate(); - const [activeTab, setActiveTab] = useState("/"); + const location = useLocation(); const handleTabClick = (route: string) => { - setActiveTab(route); navigate(route); }; return ( - - handleTabClick("/")} - /> - handleTabClick("/my-dlc-btc")} - /> - handleTabClick("/how-it-works")} - /> - + ); diff --git a/src/app/components/mint-unmint-box/components/mint-unmint-box.layout.tsx b/src/app/components/mint-unmint-box/components/mint-unmint-box.layout.tsx index e51bb596..b7ff2f37 100644 --- a/src/app/components/mint-unmint-box/components/mint-unmint-box.layout.tsx +++ b/src/app/components/mint-unmint-box/components/mint-unmint-box.layout.tsx @@ -9,10 +9,10 @@ export function MintUnmintBoxLayout({ px={"15px"} w={"650px"} h={"625px"} - bg={"background.03"} + bg={"background.container.01"} border={"1px solid"} borderRadius={"md"} - borderColor={"accent.03"} + borderColor={"border.cyan.01"} > {children} diff --git a/src/app/components/mint-unmint-box/components/setup-information-stack/setup-information-stack.tsx b/src/app/components/mint-unmint-box/components/setup-information-stack/setup-information-stack.tsx index 84cba709..912d97ba 100644 --- a/src/app/components/mint-unmint-box/components/setup-information-stack/setup-information-stack.tsx +++ b/src/app/components/mint-unmint-box/components/setup-information-stack/setup-information-stack.tsx @@ -16,6 +16,7 @@ export function SetupInformationStack(): React.JSX.Element { function onConnectWalletClick(): void { dispatch(modalActions.toggleSelectWalletModalVisibility()); } + return ( @@ -41,7 +42,7 @@ export function SetupInformationStack(): React.JSX.Element { @@ -56,7 +57,7 @@ export function SetupInformationStack(): React.JSX.Element { diff --git a/src/app/components/mint-unmint-box/mint-unmint-box.tsx b/src/app/components/mint-unmint-box/mint-unmint-box.tsx index c9826dd4..be9d7448 100644 --- a/src/app/components/mint-unmint-box/mint-unmint-box.tsx +++ b/src/app/components/mint-unmint-box/mint-unmint-box.tsx @@ -19,7 +19,7 @@ export function MintUnmintBox(): React.JSX.Element { Mint Unmint - + diff --git a/src/app/components/modals/components/modal.layout.tsx b/src/app/components/modals/components/modal.layout.tsx index b720cbec..d302edf3 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/components/wallet-button.tsx b/src/app/components/modals/select-wallet-modal/components/wallet-button.tsx index 2251cf15..7cb7de80 100644 --- a/src/app/components/modals/select-wallet-modal/components/wallet-button.tsx +++ b/src/app/components/modals/select-wallet-modal/components/wallet-button.tsx @@ -18,7 +18,7 @@ export function WalletMenu({ onClick={() => handleClick("123456789123456789", wallet.id)} > - {name} + {name} {name} 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 ab4660b7..5460e2b5 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,32 +1,30 @@ -import { useState } from "react"; -import { useDispatch } from "react-redux"; +import { useState } from 'react'; +import { useDispatch } from 'react-redux'; -import { 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( accountActions.login({ address: address, walletType: walletType, + dlcBTCBalance: 0.54321, + lockedBTCBalance: 0.54321, network: currentNetwork?.id, - } as AccountState), + } as AccountState) ); setCurrentNetwork(undefined); handleClose(); @@ -37,32 +35,22 @@ export function SelectWalletModal({ }; return ( - handleClose()} - > - - - Choose Network - - - - - Select Wallet - {ethereumWallets.map((wallet) => ( - + handleClose()}> + + {!currentNetwork ? ( + Select Network + ) : ( + + Network Selected + + + )} + + + + Select Wallet + {ethereumWallets.map(wallet => ( + ))} diff --git a/src/app/components/my-dlc-btc/components/vault-group-container.tsx b/src/app/components/my-dlc-btc/components/vault-group-container.tsx deleted file mode 100644 index aff31809..00000000 --- a/src/app/components/my-dlc-btc/components/vault-group-container.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { HStack, Spinner, Text, VStack } from "@chakra-ui/react"; -import { VaultBox } from "@components/dlc-btc-item/vault-box"; -import { Vault } from "@models/vault"; - -interface VaultGroupContainerProps { - label: string; - vaults: Vault[]; - isProcessing: boolean; -} - -export function VaultGroupContainer({ - label, - vaults, - isProcessing, -}: VaultGroupContainerProps): React.JSX.Element | boolean { - if (vaults.length === 0) return false; - - return ( - - - {isProcessing && } - {label} - - {vaults.map((vault) => ( - - ))} - - ); -} diff --git a/src/app/components/my-dlc-btc/vault-list.tsx b/src/app/components/my-dlc-btc/vault-list.tsx deleted file mode 100644 index 63022dab..00000000 --- a/src/app/components/my-dlc-btc/vault-list.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { Button, Text, VStack } from "@chakra-ui/react"; -import { FadeLayer } from "@components/fade-layer/fade-layer"; -import { useVaults } from "@hooks/use-vaults"; - -import { scrollBarCSS } from "../../../styles/css-styles"; -import { VaultGroupContainer } from "./components/vault-group-container"; -import { VaultListLayout } from "./components/vault-list.layout"; - -export function VaultList(): React.JSX.Element { - 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 ( - - - - My dlcBTC - - {/* {fundingVaults.length === 0 && - closingVaults.length === 0 && - fundedVaults.length === 0 && - closedVaults.length === 0 && ( - - No Activity - - )} */} - - {vaultGroups.map((group, index) => ( - - ))} - - - - - ); -} 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 new file mode 100644 index 00000000..fe75d2f8 --- /dev/null +++ b/src/app/components/my-vaults-large-container/components/disconnected-info-stack.tsx @@ -0,0 +1,33 @@ +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 new file mode 100644 index 00000000..a66232fa --- /dev/null +++ b/src/app/components/my-vaults-large-container/components/my-vaults-large-container-header/components/balance-info.tsx @@ -0,0 +1,32 @@ +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 new file mode 100644 index 00000000..5bb8c131 --- /dev/null +++ b/src/app/components/my-vaults-large-container/components/my-vaults-large-container-header/my-vaults-large-container-header.tsx @@ -0,0 +1,40 @@ +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-dlc-btc/components/vault-list.layout.tsx b/src/app/components/my-vaults-large-container/components/my-vaults-large-container.layout.tsx similarity index 57% rename from src/app/components/my-dlc-btc/components/vault-list.layout.tsx rename to src/app/components/my-vaults-large-container/components/my-vaults-large-container.layout.tsx index 82b0f1e3..1b7229bd 100644 --- a/src/app/components/my-dlc-btc/components/vault-list.layout.tsx +++ b/src/app/components/my-vaults-large-container/components/my-vaults-large-container.layout.tsx @@ -1,17 +1,18 @@ import { VStack } from "@chakra-ui/react"; import { HasChildren } from "@models/has-children"; -export function VaultListLayout({ children }: HasChildren): React.JSX.Element { +export function MyVaultsLargeContainerLayout({ + children, +}: HasChildren): React.JSX.Element { return ( {children} 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 new file mode 100644 index 00000000..0da08a2c --- /dev/null +++ b/src/app/components/my-vaults-large-container/my-vaults-large-container.tsx @@ -0,0 +1,51 @@ +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-small-container/components/my-vaults-small-container.layout.tsx b/src/app/components/my-vaults-small-container/components/my-vaults-small-container.layout.tsx new file mode 100644 index 00000000..ff9394b1 --- /dev/null +++ b/src/app/components/my-vaults-small-container/components/my-vaults-small-container.layout.tsx @@ -0,0 +1,19 @@ +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 new file mode 100644 index 00000000..5aaaf705 --- /dev/null +++ b/src/app/components/my-vaults-small-container/my-vaults-small-container.tsx @@ -0,0 +1,46 @@ +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/protocol-history/components/protocol-history-item.tsx b/src/app/components/protocol-history/components/protocol-history-item.tsx index 1a352f90..8a622466 100644 --- a/src/app/components/protocol-history/components/protocol-history-item.tsx +++ b/src/app/components/protocol-history/components/protocol-history-item.tsx @@ -21,11 +21,11 @@ export function ProtocolHistoryItem( p={"10px"} w={"300px"} h={"35px"} - bgGradient={"linear(to-r, background.04, background.05)"} + bgGradient={"linear(to-r, background.content.01, background.content.02)"} blendMode={"screen"} border={"1px solid"} borderRadius={"md"} - borderColor={"white.04"} + borderColor={"border.white.01"} > + {label && ( + + {isProcessing && } + {label} + + )} + {preventLoad + ? exampleSkeletonVaults.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 new file mode 100644 index 00000000..a92b30bd --- /dev/null +++ b/src/app/components/vaults-list/vaults-list.tsx @@ -0,0 +1,30 @@ +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; + height: string; + children: React.ReactNode; +} + +export function VaultsList({ title, height, 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 340c3188..1dc8a363 100644 --- a/src/app/hooks/use-vaults.ts +++ b/src/app/hooks/use-vaults.ts @@ -1,33 +1,38 @@ -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[]; fundingVaults: Vault[]; - closingVaults: Vault[]; fundedVaults: Vault[]; + closingVaults: Vault[]; closedVaults: Vault[]; } { const { vaults } = useSelector((state: RootState) => state.vault); + const readyVaults = useMemo( + () => vaults.filter(vault => vault.state === VaultStatus.READY), + [vaults] + ); + const fundedVaults = useMemo( + () => 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], - ); - const fundedVaults = useMemo( - () => vaults.filter((vault) => vault.state === VaultStatus.FUNDED), - [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 { 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 new file mode 100644 index 00000000..75e2d8aa --- /dev/null +++ b/src/app/pages/components/page.layout.tsx @@ -0,0 +1,17 @@ +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 d29ddc0c..c3cb95e9 100644 --- a/src/app/pages/dashboard/dashboard.tsx +++ b/src/app/pages/dashboard/dashboard.tsx @@ -1,20 +1,22 @@ -import React from "react"; +import React from 'react'; +import { useSelector } from 'react-redux'; -import { HStack } from "@chakra-ui/react"; -import { MintUnmintBox } from "@components/mint-unmint-box/mint-unmint-box"; -import { VaultList } from "@components/my-dlc-btc/vault-list"; +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'; export function Dashboard(): React.JSX.Element { + const { address } = useSelector((state: RootState) => state.account); return ( - - - - + + + + + + + + ); } diff --git a/src/app/pages/my-dlc-btc/my-dlc-btc.tsx b/src/app/pages/my-dlc-btc/my-dlc-btc.tsx deleted file mode 100644 index 6db33712..00000000 --- a/src/app/pages/my-dlc-btc/my-dlc-btc.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { Text, VStack } from "@chakra-ui/react"; - -export function MyDLCBTC(): React.JSX.Element { - return ( - - My dlcBTC - - ); -} diff --git a/src/app/pages/my-vaults/my-vaults.tsx b/src/app/pages/my-vaults/my-vaults.tsx new file mode 100644 index 00000000..779c75cb --- /dev/null +++ b/src/app/pages/my-vaults/my-vaults.tsx @@ -0,0 +1,10 @@ +import { MyVaultsBox } from '@components/my-vaults-large-container/my-vaults-large-container'; +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 9e026344..01d4f268 100644 --- a/src/app/store/slices/account/account.slice.ts +++ b/src/app/store/slices/account/account.slice.ts @@ -6,6 +6,8 @@ export interface AccountState { address: string | undefined; walletType: WalletType | undefined; network: Network | undefined; + dlcBTCBalance: number | undefined; + lockedBTCBalance: number | undefined; loadedAt: string | undefined; } @@ -13,6 +15,8 @@ export const initialAccountState: AccountState = { address: undefined, walletType: undefined, network: undefined, + dlcBTCBalance: undefined, + lockedBTCBalance: undefined, loadedAt: undefined, }; @@ -24,11 +28,15 @@ export const accountSlice = createSlice({ state.address = action.payload.address; state.walletType = action.payload.walletType; state.network = action.payload.network; + state.dlcBTCBalance = action.payload.dlcBTCBalance; + state.lockedBTCBalance = action.payload.lockedBTCBalance; state.loadedAt = new Date().toJSON(); }, logout: (state) => { state.address = undefined; state.walletType = undefined; + state.dlcBTCBalance = undefined; + state.lockedBTCBalance = undefined; state.network = undefined; }, }, diff --git a/src/shared/examples/example-vaults.ts b/src/shared/examples/example-vaults.ts index dc2325f9..1c99ea90 100644 --- a/src/shared/examples/example-vaults.ts +++ b/src/shared/examples/example-vaults.ts @@ -1,86 +1,163 @@ -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', + collateral: 8.5, + state: VaultStatus.CLOSED, + fundingTX: + 'https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6', + closingTX: + 'https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6', + }, + { + uuid: '0x123456789', + collateral: 9.5, + state: VaultStatus.CLOSED, + fundingTX: + '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: '', }, ]; diff --git a/src/styles/app-theme.ts b/src/styles/app-theme.ts index dbb5576b..9414a00d 100644 --- a/src/styles/app-theme.ts +++ b/src/styles/app-theme.ts @@ -6,6 +6,7 @@ import { modalTheme } from "./modal-theme"; import { selectTheme } from "./select-theme"; import { tabsTheme } from "./tabs-theme"; import { textTheme } from "./text-theme"; +import { dividerTheme } from "./divider-theme"; export const appTheme = extendTheme({ components: { @@ -15,10 +16,11 @@ export const appTheme = extendTheme({ Select: selectTheme, Text: textTheme, Tabs: tabsTheme, + Divider: dividerTheme, Progress: { baseStyle: { filledTrack: { - bg: "accent.01", + bg: "accent.cyan.01", }, }, }, @@ -26,24 +28,24 @@ export const appTheme = extendTheme({ styles: { global: () => ({ body: { - bgGradient: "linear(to-r, background.01, background.02)", + bgGradient: "linear(to-r, background.website.01, background.website.02)", }, }), }, colors: { - "background.01": "rgba(50,3,69,1)", - "background.02": "rgba(0,9,51,1)", - "background.03": "rgba(40,7,78,1)", - "background.04": "rgba(31,9,78,0.25)", - "background.05": "rgba(4,13,72,0.25)", - "accent.01": "rgba(7,232,216,1)", - "accent.02": "rgba(0,40,187,1)", - "accent.03": "rgba(7,232,216,0.75)", - "accent.04": "rgba(247,147,26,1)", + "background.website.01": "rgba(50,3,69,1)", + "background.website.02": "rgba(0,9,51,1)", + "background.container.01": "rgba(40,7,78,1)", + "background.content.01": "rgba(31,9,78,0.25)", + "background.content.02": "rgba(4,13,72,0.25)", + "border.cyan.01": "rgba(7,232,216,0.75)", + "border.white.01": "rgba(255,255,255,0.25)", + "accent.cyan.01": "rgba(7,232,216,1)", + "accent.blue.01": "rgba(0,40,187,1)", + "accent.orange.01": "rgba(247,147,26,1)", "white.01": "rgba(255,255,255,1)", "white.02": "rgba(255,255,255,0.75)", "white.03": "rgba(255,255,255,0.35)", - "white.04": "rgba(255,255,255,0.25)", }, fonts: { body: "'Poppins', poppins", diff --git a/src/styles/button-theme.ts b/src/styles/button-theme.ts index 47c5ad55..68ea18e4 100644 --- a/src/styles/button-theme.ts +++ b/src/styles/button-theme.ts @@ -10,13 +10,13 @@ const action = defineStyle({ px: "25px", h: "50px", w: "100%", - fontSize: "lg", + fontSize: "sm", fontWeight: "extrabold", bg: "none", border: "1px solid", - borderColor: "accent.01", + borderColor: "accent.cyan.01", _hover: { - bg: "accent.01", + bg: "accent.cyan.01", }, }); @@ -29,7 +29,7 @@ const account = defineStyle({ fontWeight: "extrabold", bgSize: "400%", bgPosition: "left", - bgGradient: "linear(to-r, accent.01, accent.02, accent.02, accent.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", @@ -46,7 +46,7 @@ const tab = defineStyle({ bgColor: "none", borderBottom: "3.5px solid", borderRadius: "none", - borderColor: "accent.01", + borderColor: "accent.cyan.01", }); const company = defineStyle({ @@ -57,11 +57,11 @@ const company = defineStyle({ }); const wallet = defineStyle({ - bgColor: "background.02", + bgGradient: 'linear(to-b, background.content.01, background.content.02)', border: "0.5px solid", - borderColor: "accent.01", + borderColor: "border.white.01", _hover: { - bgColor: "accent.01", + bgColor: "white.03", }, }); diff --git a/src/styles/divider-theme.ts b/src/styles/divider-theme.ts new file mode 100644 index 00000000..2854bb07 --- /dev/null +++ b/src/styles/divider-theme.ts @@ -0,0 +1,11 @@ +import { defineStyle, defineStyleConfig } from '@chakra-ui/react' + +const thick = defineStyle({ + borderWidth: '3.5px', + borderStyle: "solid", + borderColor: "border.white.01", +}) + +export const dividerTheme = defineStyleConfig({ + variants: { thick }, +}) diff --git a/src/styles/menu-theme.ts b/src/styles/menu-theme.ts index ca3bc788..5943d65b 100644 --- a/src/styles/menu-theme.ts +++ b/src/styles/menu-theme.ts @@ -1,105 +1,95 @@ -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: "100%", - fontSize: "lg", - fontWeight: "extrabold", - color: "white", - bgColor: "none", - border: "1px solid", - borderRadius: "md", - borderColor: "accent.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.01", + bg: 'accent.cyan.01', }, }, list: { - py: "10px", - px: "5px", - h: "auto", - w: "275px", - bgColor: "background.02", - border: "1px solid", - borderRadius: "md", - borderColor: "accent.01", + p: '10px', + w: '275px', + bgColor: 'background.container.01', + border: '1.5px solid', + borderColor: 'border.white.01', + borderRadius: 'md', }, item: { - justifyContent: "center", - p: "10px", - h: "50px", - w: "100%", - fontSize: "sm", - fontWeight: "extrabold", - color: "white", - bgColor: "inherit", - borderRadius: "md", + justifyContent: 'center', + bgColor: 'inherit', + borderRadius: 'md', + color: 'white', + fontSize: 'xs', + fontWeight: 'extrabold', _hover: { - bgColor: "accent.01", + background: 'white.03', }, + transition: 'all 0.05s ease-in-out', }, }); const network = definePartsStyle({ button: { - padding: "10px", - height: "50px", - width: "275px", - shadow: "xl", - border: "1.5px solid", - borderColor: "accent.01", - borderRadius: "md", - background: "background.02", - color: "white", - fontSize: "sm", - fontWeight: "extrabold", - justifyContent: "center", + 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: "accent.01", + background: 'white.03', }, }, list: { - padding: "10px", - borderTop: "0px", - borderTopRadius: "0px", - borderLeft: "1.5px solid", - borderRight: "1.5px solid", - borderBottom: "1.5px solid", - borderColor: "accent.01", - borderRadius: "md", - width: "275px", - background: "background.02", - shadow: "none", + p: '10px', + w: '275px', + bgColor: 'background.container.01', + border: '1.5px solid', + borderColor: 'border.white.01', + borderRadius: 'md', }, item: { - backgroundColor: "inherit", - color: "white", - borderRadius: "md", - fontSize: "xs", - fontWeight: "extrabold", - padding: "10px", - justifyContent: "center", + justifyContent: 'center', + bgColor: 'inherit', + borderRadius: 'md', + color: 'white', + fontSize: 'xs', + fontWeight: 'extrabold', _hover: { - background: "accent.01", + 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 diff --git a/src/styles/modal-theme.ts b/src/styles/modal-theme.ts index c2117d33..3194da5a 100644 --- a/src/styles/modal-theme.ts +++ b/src/styles/modal-theme.ts @@ -12,9 +12,9 @@ const baseStyle = definePartsStyle({ padding: "15px", width: "350px", border: "1.5px solid", - borderColor: "accent.01", + borderColor: "border.cyan.01", borderRadius: "md", - backgroundColor: "background.02", + backgroundColor: "background.container.01", color: "white", alignItems: "center", }, diff --git a/src/styles/select-theme.ts b/src/styles/select-theme.ts index 4b5663fa..ee4e20f3 100644 --- a/src/styles/select-theme.ts +++ b/src/styles/select-theme.ts @@ -11,7 +11,7 @@ const baseStyle = definePartsStyle({ color: "white", }, icon: { - color: "accent.01", + color: "accent.cyan.01", }, }); diff --git a/src/styles/tabs-theme.ts b/src/styles/tabs-theme.ts index d99a6cb6..b2e18f34 100644 --- a/src/styles/tabs-theme.ts +++ b/src/styles/tabs-theme.ts @@ -17,7 +17,7 @@ const baseStyle = definePartsStyle({ fontSize: "lg", fontWeight: "semibold", _selected: { - color: "accent.01", + color: "accent.cyan.01", }, }, tabpanel: { diff --git a/src/styles/text-theme.ts b/src/styles/text-theme.ts index 103be7e2..4b1585ea 100644 --- a/src/styles/text-theme.ts +++ b/src/styles/text-theme.ts @@ -13,7 +13,7 @@ const welcome = defineStyle({ }); const navigate = defineStyle({ - color: "accent.01", + color: "accent.cyan.01", fontSize: "lg", fontWeight: "regular", textDecoration: "underline",