From 81a6794242ff5ef2119e0e1118fa2a0af90bc1dd Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Fri, 7 Apr 2023 09:49:42 +0200 Subject: [PATCH 01/10] Fix custom `Icon` component Pass `as` prop if the icon is not defined in the `Icon` enum which maps enum to an icon component. Otherwise we can't use custom icons in eg. `TokenBalance` component. We need to revist this component and consider removing it. --- src/components/Icon.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index 1ab046f05..e0fd4f277 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -1,5 +1,9 @@ import { FC } from "react" -import { As, Icon as ChakraIcon, IconProps } from "@chakra-ui/react" +import { + As, + Icon as ChakraIcon, + IconProps, +} from "@threshold-network/components" import IconEnum from "../enums/icon" import iconMap from "../static/icons/iconMap" @@ -10,7 +14,7 @@ const Icon: FC = ({ as, ...props }) => { } // @ts-ignore - return + return } export default Icon From 332c75364856f10f92d965e2875ee70b3087480f Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Fri, 7 Apr 2023 09:55:48 +0200 Subject: [PATCH 02/10] Create a `tBTCText` component The word `tBTC` should always start with a lowercase letter - so here we add a component that forces `t` to be lowercase, even if we use it inside a component that transforms text to uppercase, e.g. `Label` component from Threshold typography components. --- src/components/tBTC/index.ts | 1 + src/components/tBTC/tBTCText.tsx | 13 +++++++++++++ 2 files changed, 14 insertions(+) create mode 100644 src/components/tBTC/tBTCText.tsx diff --git a/src/components/tBTC/index.ts b/src/components/tBTC/index.ts index 564c7c00d..6a2e64017 100644 --- a/src/components/tBTC/index.ts +++ b/src/components/tBTC/index.ts @@ -1,3 +1,4 @@ export * from "./TakeNoteList" export * from "./Links" export * from "./Stats" +export * from "./tBTCText" diff --git a/src/components/tBTC/tBTCText.tsx b/src/components/tBTC/tBTCText.tsx new file mode 100644 index 000000000..2ceaa1ccb --- /dev/null +++ b/src/components/tBTC/tBTCText.tsx @@ -0,0 +1,13 @@ +import { FC } from "react" +import { Box, BoxProps } from "@threshold-network/components" + +export const TBTCText: FC = (props) => { + return ( + + + t + + BTC + + ) +} From c04a09690a70d14b875be8dbc8ac1059d5261427 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Fri, 7 Apr 2023 10:01:21 +0200 Subject: [PATCH 03/10] Refactor `BridgeActivity` component We want to use the same bridge activity components on the overview page. Here we move the `BridgeActivity` component to shared components and add a context so we can keep the same logic(like displaying empty states) in different places of the dapp. --- src/components/tBTC/BridgeActivity.tsx | 194 ++++++++++++++++++ src/components/tBTC/index.ts | 1 + .../tBTC/Bridge/BridgeActivity/index.tsx | 145 ------------- .../tBTC/Bridge/BridgeActivityCard/index.tsx | 24 +++ src/pages/tBTC/Bridge/index.tsx | 17 +- 5 files changed, 224 insertions(+), 157 deletions(-) create mode 100644 src/components/tBTC/BridgeActivity.tsx delete mode 100644 src/pages/tBTC/Bridge/BridgeActivity/index.tsx create mode 100644 src/pages/tBTC/Bridge/BridgeActivityCard/index.tsx diff --git a/src/components/tBTC/BridgeActivity.tsx b/src/components/tBTC/BridgeActivity.tsx new file mode 100644 index 000000000..a91e9ce4f --- /dev/null +++ b/src/components/tBTC/BridgeActivity.tsx @@ -0,0 +1,194 @@ +import { FC, createContext, useContext } from "react" +import { + Badge, + BodyMd, + Image, + List, + useColorModeValue, + Box, + LinkBox, + LinkOverlay, + Stack, + Skeleton, + ListProps, + HStack, + StackProps, + LabelSm, +} from "@threshold-network/components" +import { + BridgeActivityStatus, + BridgeActivity as BridgeActivityType, +} from "../../threshold-ts/tbtc" +import emptyHistoryImageSrcDark from "../../static/images/tBTC-bridge-no-history-dark.svg" +import emptyHistoryImageSrcLight from "../../static/images/tBTC-bridge-no-history-light.svg" +import { InlineTokenBalance } from "../TokenBalance" +import Link from "../Link" +import { OutlineListItem } from "../OutlineListItem" + +const BridgeActivityContext = createContext< + | { + data: BridgeActivityType[] + isBridgeHistoryEmpty: boolean + isFetching: boolean + } + | undefined +>(undefined) + +const useBridgeActivityContext = () => { + const context = useContext(BridgeActivityContext) + if (!context) { + throw new Error( + "BridgeActivityContext used outside of the BridgeActivity component." + ) + } + + return context +} + +export type BridgeActivityProps = { + data: BridgeActivityType[] + isFetching: boolean +} + +export const BridgeActivity: FC = ({ + data, + isFetching, + children, +}) => { + const isBridgeHistoryEmpty = data.length === 0 + + return ( + + {children} + + ) +} + +export const BridgeAcivityHeader: FC = (props) => { + return ( + + tBTC + state + + ) +} + +export const BridgeActivityData: FC = (props) => { + const { data, isBridgeHistoryEmpty, isFetching } = useBridgeActivityContext() + + return isFetching ? ( + + ) : ( + + {isBridgeHistoryEmpty ? : data.map(renderActivityItem)} + + ) +} + +const ActivityItem: FC = ({ + amount, + status, + depositKey, +}) => { + return ( + + + + + + + ) +} + +const renderActivityItem = (item: BridgeActivityType) => ( + +) + +const bridgeActivityStatusToBadgeProps: Record< + BridgeActivityStatus, + { colorScheme: string } +> = { + [BridgeActivityStatus.MINTED]: { + colorScheme: "green", + }, + [BridgeActivityStatus.PENDING]: { + colorScheme: "yellow", + }, + [BridgeActivityStatus.ERROR]: { + colorScheme: "red", + }, +} + +const TBTCStatusBadge: FC<{ status: BridgeActivityStatus }> = ({ status }) => { + return ( + + {status} + + ) +} + +const ActivityItemWrapper: FC = ({ children }) => ( + + {children} + +) + +export const BridgeActivityEmptyHistoryImg: FC = () => { + const { isBridgeHistoryEmpty, isFetching } = useBridgeActivityContext() + const epmtyHistoryImg = useColorModeValue( + emptyHistoryImageSrcLight, + emptyHistoryImageSrcDark + ) + + return isBridgeHistoryEmpty && !isFetching ? ( + <> + no-history + You have no history yet. + + ) : ( + <> + ) +} + +const EmptyActivity: FC = () => { + return ( + <> + + -.-- + -.-- + + + -.-- + -.-- + + + ) +} + +const BridgeActivityLoadingState = () => { + return ( + + + + + + ) +} diff --git a/src/components/tBTC/index.ts b/src/components/tBTC/index.ts index 6a2e64017..2787366df 100644 --- a/src/components/tBTC/index.ts +++ b/src/components/tBTC/index.ts @@ -2,3 +2,4 @@ export * from "./TakeNoteList" export * from "./Links" export * from "./Stats" export * from "./tBTCText" +export * from "./BridgeActivity" diff --git a/src/pages/tBTC/Bridge/BridgeActivity/index.tsx b/src/pages/tBTC/Bridge/BridgeActivity/index.tsx deleted file mode 100644 index ac37bad42..000000000 --- a/src/pages/tBTC/Bridge/BridgeActivity/index.tsx +++ /dev/null @@ -1,145 +0,0 @@ -import { ComponentProps, FC } from "react" -import { - Badge, - BodyMd, - Card, - HStack, - Image, - LabelSm, - List, - useColorModeValue, - Box, - LinkBox, - LinkOverlay, -} from "@threshold-network/components" -import { - BridgeActivityStatus, - BridgeActivity as BridgeActivityType, -} from "../../../../threshold-ts/tbtc" -import emptyHistoryImageSrcDark from "../../../../static/images/tBTC-bridge-no-history-dark.svg" -import emptyHistoryImageSrcLight from "../../../../static/images/tBTC-bridge-no-history-light.svg" -import { InlineTokenBalance } from "../../../../components/TokenBalance" -import Link from "../../../../components/Link" -import { OutlineListItem } from "../../../../components/OutlineListItem" - -const bridgeActivityStatusToBadgeProps: Record< - BridgeActivityStatus, - { colorScheme: string } -> = { - [BridgeActivityStatus.MINTED]: { - colorScheme: "green", - }, - [BridgeActivityStatus.PENDING]: { - colorScheme: "yellow", - }, - [BridgeActivityStatus.ERROR]: { - colorScheme: "red", - }, -} - -const TBTCStatusBadge: FC<{ status: BridgeActivityStatus }> = ({ status }) => { - return ( - - {status} - - ) -} - -export const BridgeActivityCard: FC> = ({ - children, - ...props -}) => { - return ( - - my activity - {children} - - ) -} - -const ActivityItemWrapper: FC = ({ children }) => ( - - {children} - -) - -const ActivityItem: FC = ({ - amount, - status, - depositKey, -}) => { - return ( - - - - - - - ) -} - -const renderActivityItem = (item: BridgeActivityType) => ( - -) - -export const BridgeActivity: FC<{ - data: BridgeActivityType[] -}> = ({ data }) => { - const epmtyHistoryImg = useColorModeValue( - emptyHistoryImageSrcLight, - emptyHistoryImageSrcDark - ) - - const isHistoryEmpty = data.length === 0 - - return ( - <> - - tBTC - state - - - {isHistoryEmpty ? : data.map(renderActivityItem)} - - {isHistoryEmpty && ( - <> - no-history - You have no history yet. - - )} - - ) -} - -const EmptyActivity: FC = () => { - return ( - <> - - -.-- - -.-- - - - -.-- - -.-- - - - ) -} diff --git a/src/pages/tBTC/Bridge/BridgeActivityCard/index.tsx b/src/pages/tBTC/Bridge/BridgeActivityCard/index.tsx new file mode 100644 index 000000000..154622adc --- /dev/null +++ b/src/pages/tBTC/Bridge/BridgeActivityCard/index.tsx @@ -0,0 +1,24 @@ +import { ComponentProps, FC } from "react" +import { Card, LabelSm } from "@threshold-network/components" +import { + BridgeAcivityHeader, + BridgeActivity, + BridgeActivityData, + BridgeActivityEmptyHistoryImg, + BridgeActivityProps, +} from "../../../../components/tBTC" + +export const BridgeActivityCard: FC< + ComponentProps & BridgeActivityProps +> = ({ isFetching, data, children, ...props }) => { + return ( + + my activity + + + + + + + ) +} diff --git a/src/pages/tBTC/Bridge/index.tsx b/src/pages/tBTC/Bridge/index.tsx index 3cd643f3d..6b1614358 100644 --- a/src/pages/tBTC/Bridge/index.tsx +++ b/src/pages/tBTC/Bridge/index.tsx @@ -3,7 +3,7 @@ import { Grid, Box, Skeleton, Stack } from "@threshold-network/components" import { PageComponent } from "../../../types" import { TbtcBalanceCard } from "./TbtcBalanceCard" import { MintUnmintNav } from "./MintUnmintNav" -import { BridgeActivityCard, BridgeActivity } from "./BridgeActivity" +import { BridgeActivityCard } from "./BridgeActivityCard" import { useModal } from "../../../hooks/useModal" import { ModalType } from "../../../enums" import { useTBTCTerms } from "../../../hooks/useTBTCTerms" @@ -58,17 +58,10 @@ const TBTCBridge: PageComponent = (props) => { - - {isBridgeActivityFetching ? ( - - - - - - ) : ( - - )} - + ) From 8b0873d1a1c992fbee0c3eb63a5767392189e04d Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Fri, 7 Apr 2023 10:11:02 +0200 Subject: [PATCH 04/10] Update copy on the overview page --- src/pages/Overview/Network/CardTemplate.tsx | 4 +--- src/pages/Overview/Network/StakingOverview.tsx | 6 ++++-- src/pages/Overview/Network/tBTCBridgeStats.tsx | 5 ++++- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/pages/Overview/Network/CardTemplate.tsx b/src/pages/Overview/Network/CardTemplate.tsx index c523a33ed..36cab6c7c 100644 --- a/src/pages/Overview/Network/CardTemplate.tsx +++ b/src/pages/Overview/Network/CardTemplate.tsx @@ -1,6 +1,5 @@ import { FC } from "react" -import { LabelSm, Card, LineDivider } from "@threshold-network/components" -import { BoxProps } from "@chakra-ui/react" +import { LabelSm, Card, BoxProps } from "@threshold-network/components" const CardTemplate: FC<{ title: string | JSX.Element } & BoxProps> = ({ title, @@ -10,7 +9,6 @@ const CardTemplate: FC<{ title: string | JSX.Element } & BoxProps> = ({ return ( {typeof title === "string" ? {title} : title} - {children} ) diff --git a/src/pages/Overview/Network/StakingOverview.tsx b/src/pages/Overview/Network/StakingOverview.tsx index cf7605d3b..2720ddaa4 100644 --- a/src/pages/Overview/Network/StakingOverview.tsx +++ b/src/pages/Overview/Network/StakingOverview.tsx @@ -16,8 +16,10 @@ const StakingOverview: FC = () => { return ( - Staked Balance - + + My Staked Balance + + = ({ }) => { return ( - tBTC Bridge Stats + + Bridge Stats + From 1adb87fcdaaee1e5f7a443dd720bb9e2a2aff598 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Fri, 7 Apr 2023 10:12:15 +0200 Subject: [PATCH 05/10] Add tBTC user stats card on the overview page Display user's tBTC balance and their latest 2 bridge activities. Also user can navigate to a tBTC page from this card. --- src/pages/Overview/Network/index.tsx | 24 +++++++ src/pages/Overview/Network/tBTCUserStats.tsx | 69 ++++++++++++++++++++ 2 files changed, 93 insertions(+) create mode 100644 src/pages/Overview/Network/tBTCUserStats.tsx diff --git a/src/pages/Overview/Network/index.tsx b/src/pages/Overview/Network/index.tsx index 2e714ea29..1ffe518a9 100644 --- a/src/pages/Overview/Network/index.tsx +++ b/src/pages/Overview/Network/index.tsx @@ -1,15 +1,35 @@ import { useEffect } from "react" import { SimpleGrid, Stack } from "@threshold-network/components" +import { useWeb3React } from "@web3-react/core" import TotalValueLocked from "./TotalValueLocked" import StakingOverview from "./StakingOverview" import { useFetchTvl } from "../../../hooks/useFetchTvl" import { PageComponent } from "../../../types" import { TBTCBrdigeStats } from "./tBTCBridgeStats" import { useFetchRecentDeposits } from "../../../hooks/tbtc" +import { TBTCUserStats } from "./tBTCUserStats" +import { useAppDispatch, useAppSelector } from "../../../hooks/store" +import { selectBridgeActivity, tbtcSlice } from "../../../store/tbtc" const Network: PageComponent = () => { const [tvlInUSD, fetchtTvlData, tvlInTokenUnits] = useFetchTvl() const [deposits, isFetching, error] = useFetchRecentDeposits() + const { account } = useWeb3React() + const dispatch = useAppDispatch() + const bridgeActivity = useAppSelector(selectBridgeActivity) + const isBridgeActivityFetching = useAppSelector( + (state) => state.tbtc.bridgeActivity.isFetching + ) + + useEffect(() => { + if (!account) return + + dispatch( + tbtcSlice.actions.requestBridgeActivity({ + depositor: account, + }) + ) + }, [dispatch, account]) useEffect(() => { fetchtTvlData() @@ -23,6 +43,10 @@ const Network: PageComponent = () => { deposits={deposits} /> + diff --git a/src/pages/Overview/Network/tBTCUserStats.tsx b/src/pages/Overview/Network/tBTCUserStats.tsx new file mode 100644 index 000000000..a73d1fae2 --- /dev/null +++ b/src/pages/Overview/Network/tBTCUserStats.tsx @@ -0,0 +1,69 @@ +import { FC } from "react" +import { + BodyMd, + Box, + Card, + Divider, + LabelSm, +} from "@threshold-network/components" +import InfoBox from "../../../components/InfoBox" +import TokenBalance from "../../../components/TokenBalance" +import ButtonLink from "../../../components/ButtonLink" +import { useTokenState } from "../../../hooks/useTokenState" +import { + BridgeActivity, + BridgeActivityData, + BridgeActivityProps, + TBTCText, +} from "../../../components/tBTC" +import { tBTCFillBlack } from "../../../static/icons/tBTCFillBlack" +import Link from "../../../components/Link" + +type TBTCUserStatsProps = { + bridgeActivity: BridgeActivityProps["data"] + isBridgeActivityFetching: BridgeActivityProps["isFetching"] +} + +export const TBTCUserStats: FC = ({ + bridgeActivity, + isBridgeActivityFetching, +}) => { + const { tbtcv2 } = useTokenState() + const _bridgeActivity = bridgeActivity.slice(0, 2) + + return ( + + + My Stats + + + My Balance + + + + + + New Mint + + + My Activity + + + + + + View All + + + + ) +} From 599939bc3c614834c73afa9f24d48218de55c795 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Fri, 7 Apr 2023 10:52:21 +0200 Subject: [PATCH 06/10] Update the overview page layout Add new upgrade T tokens card and update the layout according to the Figma views. --- .../Overview/Network/TotalValueLocked.tsx | 11 ++--- src/pages/Overview/Network/index.tsx | 45 +++++++++++++++---- src/static/images/upgrade-to-t.svg | 17 +++++++ 3 files changed, 58 insertions(+), 15 deletions(-) create mode 100644 src/static/images/upgrade-to-t.svg diff --git a/src/pages/Overview/Network/TotalValueLocked.tsx b/src/pages/Overview/Network/TotalValueLocked.tsx index 4c1178fb0..37095c983 100644 --- a/src/pages/Overview/Network/TotalValueLocked.tsx +++ b/src/pages/Overview/Network/TotalValueLocked.tsx @@ -1,5 +1,4 @@ import { FC } from "react" -import { Flex } from "@chakra-ui/react" import CardTemplate from "./CardTemplate" import { H1 } from "@threshold-network/components" import { formatFiatCurrencyAmount } from "../../../utils/formatAmount" @@ -10,12 +9,10 @@ const TotalValueLocked: FC<{ totalValueLocked: number | string }> = ({ const tvl = formatFiatCurrencyAmount(totalValueLocked) return ( - - -

- {tvl} -

- + +

+ {tvl} +

) } diff --git a/src/pages/Overview/Network/index.tsx b/src/pages/Overview/Network/index.tsx index 1ffe518a9..ae2008625 100644 --- a/src/pages/Overview/Network/index.tsx +++ b/src/pages/Overview/Network/index.tsx @@ -1,5 +1,14 @@ import { useEffect } from "react" -import { SimpleGrid, Stack } from "@threshold-network/components" +import { + Box, + Card, + HStack, + SimpleGrid, + Image, + H5, + BodyMd, + VStack, +} from "@threshold-network/components" import { useWeb3React } from "@web3-react/core" import TotalValueLocked from "./TotalValueLocked" import StakingOverview from "./StakingOverview" @@ -10,6 +19,8 @@ import { useFetchRecentDeposits } from "../../../hooks/tbtc" import { TBTCUserStats } from "./tBTCUserStats" import { useAppDispatch, useAppSelector } from "../../../hooks/store" import { selectBridgeActivity, tbtcSlice } from "../../../store/tbtc" +import ButtonLink from "../../../components/ButtonLink" +import upgradeToTIcon from "../../../static/images/upgrade-to-t.svg" const Network: PageComponent = () => { const [tvlInUSD, fetchtTvlData, tvlInTokenUnits] = useFetchTvl() @@ -42,14 +53,32 @@ const Network: PageComponent = () => { tvlInUSD={tvlInUSD.tBTC} deposits={deposits} /> - - - + + - + + + + +
Do you own KEEP or NU tokens?
+ Upgrade your tokens to T. + + + + Upgrade + + + + ) } diff --git a/src/static/images/upgrade-to-t.svg b/src/static/images/upgrade-to-t.svg new file mode 100644 index 000000000..bb91b92c2 --- /dev/null +++ b/src/static/images/upgrade-to-t.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + From 7bc0b2f44590180f1126b29eaddb561abba2dc84 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Wed, 19 Apr 2023 09:59:15 +0200 Subject: [PATCH 07/10] Fix bridge activity layout on overview page The bridge activity items are too wide in comparison with `My Balance` section. --- src/components/tBTC/BridgeActivity.tsx | 2 +- src/pages/tBTC/Bridge/BridgeActivityCard/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/tBTC/BridgeActivity.tsx b/src/components/tBTC/BridgeActivity.tsx index a91e9ce4f..5cf01e637 100644 --- a/src/components/tBTC/BridgeActivity.tsx +++ b/src/components/tBTC/BridgeActivity.tsx @@ -146,7 +146,7 @@ const TBTCStatusBadge: FC<{ status: BridgeActivityStatus }> = ({ status }) => { } const ActivityItemWrapper: FC = ({ children }) => ( - + {children} ) diff --git a/src/pages/tBTC/Bridge/BridgeActivityCard/index.tsx b/src/pages/tBTC/Bridge/BridgeActivityCard/index.tsx index 154622adc..ab5c19ec5 100644 --- a/src/pages/tBTC/Bridge/BridgeActivityCard/index.tsx +++ b/src/pages/tBTC/Bridge/BridgeActivityCard/index.tsx @@ -16,7 +16,7 @@ export const BridgeActivityCard: FC< my activity - + From 517d81f160555b8eb74b78d906c8959366cef840 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Wed, 19 Apr 2023 10:24:59 +0200 Subject: [PATCH 08/10] Update tbtc user stats card on overview page Render custom empty state for bridge activity component. --- src/components/tBTC/BridgeActivity.tsx | 33 +++++++++++--------- src/pages/Overview/Network/tBTCUserStats.tsx | 25 +++++++++++++++ src/theme/Badge.ts | 7 ++++- 3 files changed, 49 insertions(+), 16 deletions(-) diff --git a/src/components/tBTC/BridgeActivity.tsx b/src/components/tBTC/BridgeActivity.tsx index 5cf01e637..47db5c9b0 100644 --- a/src/components/tBTC/BridgeActivity.tsx +++ b/src/components/tBTC/BridgeActivity.tsx @@ -1,4 +1,4 @@ -import { FC, createContext, useContext } from "react" +import { FC, createContext, useContext, ReactElement } from "react" import { Badge, BodyMd, @@ -25,13 +25,18 @@ import { InlineTokenBalance } from "../TokenBalance" import Link from "../Link" import { OutlineListItem } from "../OutlineListItem" +export type BridgeActivityProps = { + data: BridgeActivityType[] + isFetching: boolean + emptyState?: ReactElement +} + +type BridgeActivityContextValue = { + [Property in keyof BridgeActivityProps]-?: BridgeActivityProps[Property] +} & { isBridgeHistoryEmpty: boolean } + const BridgeActivityContext = createContext< - | { - data: BridgeActivityType[] - isBridgeHistoryEmpty: boolean - isFetching: boolean - } - | undefined + BridgeActivityContextValue | undefined >(undefined) const useBridgeActivityContext = () => { @@ -45,14 +50,10 @@ const useBridgeActivityContext = () => { return context } -export type BridgeActivityProps = { - data: BridgeActivityType[] - isFetching: boolean -} - export const BridgeActivity: FC = ({ data, isFetching, + emptyState, children, }) => { const isBridgeHistoryEmpty = data.length === 0 @@ -63,6 +64,7 @@ export const BridgeActivity: FC = ({ data, isBridgeHistoryEmpty, isFetching, + emptyState: emptyState ?? , }} > {children} @@ -80,13 +82,14 @@ export const BridgeAcivityHeader: FC = (props) => { } export const BridgeActivityData: FC = (props) => { - const { data, isBridgeHistoryEmpty, isFetching } = useBridgeActivityContext() + const { data, isBridgeHistoryEmpty, isFetching, emptyState } = + useBridgeActivityContext() return isFetching ? ( ) : ( - {isBridgeHistoryEmpty ? : data.map(renderActivityItem)} + {isBridgeHistoryEmpty ? emptyState : data.map(renderActivityItem)} ) } @@ -145,7 +148,7 @@ const TBTCStatusBadge: FC<{ status: BridgeActivityStatus }> = ({ status }) => { ) } -const ActivityItemWrapper: FC = ({ children }) => ( +export const ActivityItemWrapper: FC = ({ children }) => ( {children} diff --git a/src/pages/Overview/Network/tBTCUserStats.tsx b/src/pages/Overview/Network/tBTCUserStats.tsx index a73d1fae2..d86529275 100644 --- a/src/pages/Overview/Network/tBTCUserStats.tsx +++ b/src/pages/Overview/Network/tBTCUserStats.tsx @@ -1,5 +1,6 @@ import { FC } from "react" import { + Badge, BodyMd, Box, Card, @@ -11,6 +12,7 @@ import TokenBalance from "../../../components/TokenBalance" import ButtonLink from "../../../components/ButtonLink" import { useTokenState } from "../../../hooks/useTokenState" import { + ActivityItemWrapper, BridgeActivity, BridgeActivityData, BridgeActivityProps, @@ -56,6 +58,7 @@ export const TBTCUserStats: FC = ({ } > @@ -67,3 +70,25 @@ export const TBTCUserStats: FC = ({ ) } + +const BridgeActivityCustomEmptyStateItem = () => { + return ( + + + -.-- tBTC + + + connect your wallet + + + ) +} + +const BridgeActivityCustomEmptyState = () => { + return ( + <> + + + + ) +} diff --git a/src/theme/Badge.ts b/src/theme/Badge.ts index 6f9e725eb..93b7b7586 100644 --- a/src/theme/Badge.ts +++ b/src/theme/Badge.ts @@ -23,7 +23,12 @@ const variants = { const { colorScheme: c, theme } = props const whiteAlpha200 = "rgba(255, 255, 255, 0.08);" - const bgVariant = c === "brand" ? "75" : "50" + let bgVariant = "50" + if (c === "brand") { + bgVariant = "75" + } else if (c === "gray") { + bgVariant = "100" + } // The `brand.75` color is already defined in the default theme but for some // reason chakra can't find the `brand.75` color. const brand75 = "#F2EDFF" From 7dbaa9b19cade32da94e8c8fe41d7009a357bdf8 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Wed, 19 Apr 2023 10:30:48 +0200 Subject: [PATCH 09/10] Update Bridge activity empty state component Set correct text color according to the Figma views. --- src/components/tBTC/BridgeActivity.tsx | 20 ++++++++++++-------- src/pages/Overview/Network/tBTCUserStats.tsx | 2 +- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/src/components/tBTC/BridgeActivity.tsx b/src/components/tBTC/BridgeActivity.tsx index 47db5c9b0..a999c19ef 100644 --- a/src/components/tBTC/BridgeActivity.tsx +++ b/src/components/tBTC/BridgeActivity.tsx @@ -171,17 +171,21 @@ export const BridgeActivityEmptyHistoryImg: FC = () => { ) } +const EmptyActivityItem: FC = () => ( + + + -.-- + + + -.-- + + +) const EmptyActivity: FC = () => { return ( <> - - -.-- - -.-- - - - -.-- - -.-- - + + ) } diff --git a/src/pages/Overview/Network/tBTCUserStats.tsx b/src/pages/Overview/Network/tBTCUserStats.tsx index d86529275..9d53c349c 100644 --- a/src/pages/Overview/Network/tBTCUserStats.tsx +++ b/src/pages/Overview/Network/tBTCUserStats.tsx @@ -74,7 +74,7 @@ export const TBTCUserStats: FC = ({ const BridgeActivityCustomEmptyStateItem = () => { return ( - + -.-- tBTC From e33f6ae5e117a9d78d1ced46bdb4609414ab2c8b Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Wed, 19 Apr 2023 10:36:04 +0200 Subject: [PATCH 10/10] Set correct spacing between cards on overview page --- src/pages/Overview/Network/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Overview/Network/index.tsx b/src/pages/Overview/Network/index.tsx index ae2008625..33d4994ed 100644 --- a/src/pages/Overview/Network/index.tsx +++ b/src/pages/Overview/Network/index.tsx @@ -57,7 +57,7 @@ const Network: PageComponent = () => { bridgeActivity={bridgeActivity} isBridgeActivityFetching={isBridgeActivityFetching} /> - +