From 8f6fadb94c70d92e5b470f238c08ef756e2bd347 Mon Sep 17 00:00:00 2001 From: Henry Palacios Date: Thu, 10 Aug 2023 09:15:49 -0300 Subject: [PATCH 1/7] Adding CardStyled --- .../common/muiExtended/WidgetCard.tsx | 26 +++++++++++++++ src/pages/app/index.tsx | 33 +++++++++++++++---- 2 files changed, 53 insertions(+), 6 deletions(-) create mode 100644 src/components/common/muiExtended/WidgetCard.tsx diff --git a/src/components/common/muiExtended/WidgetCard.tsx b/src/components/common/muiExtended/WidgetCard.tsx new file mode 100644 index 00000000..1327702e --- /dev/null +++ b/src/components/common/muiExtended/WidgetCard.tsx @@ -0,0 +1,26 @@ +import { Card, CardProps, styled, useTheme } from "@mui/material"; +import { forwardRef, PropsWithChildren } from "react"; + +interface Props extends PropsWithChildren> { + border: boolean; +} + +const CardStyled = styled(Card)( + ({ hasborder }) => ({ + border: hasborder === "true" ? "1px solid" : "none", + borderRadius: 2, + }) +); + +export const WidgetCard: React.FC = forwardRef( + function RefMainCard({ children, border, ...props }, ref) { + const theme = useTheme(); + // boxShadow = theme.palette.mode === "dark" ? boxShadow || true : boxShadow; + + return ( + + {children} + + ); + } +); diff --git a/src/pages/app/index.tsx b/src/pages/app/index.tsx index 0517fa74..93104273 100644 --- a/src/pages/app/index.tsx +++ b/src/pages/app/index.tsx @@ -1,14 +1,35 @@ -import { Card, Grid } from "@mui/material"; +import { CardHeader, Grid, Typography } from "@mui/material"; + +import { WidgetCard } from "@/components/common/muiExtended/WidgetCard"; + +const SummaryCard = ({ captionTitle }: { captionTitle: string }) => { + return ( + + {captionTitle && ( + + {captionTitle} + + )} + + ); +}; export default function AppDashboard() { return ( - - - - + + Summary + + + + + + + + + + - Widgets ); } From 474685000ba483b6070882bbeb13849f4d81b736 Mon Sep 17 00:00:00 2001 From: Henry Palacios Date: Thu, 10 Aug 2023 10:34:13 -0300 Subject: [PATCH 2/7] Adding SummaryCard --- .../common/muiExtended/WidgetCard.tsx | 3 +- src/pages/app/index.tsx | 56 ++++++++++++++----- 2 files changed, 43 insertions(+), 16 deletions(-) diff --git a/src/components/common/muiExtended/WidgetCard.tsx b/src/components/common/muiExtended/WidgetCard.tsx index 1327702e..4d326d6f 100644 --- a/src/components/common/muiExtended/WidgetCard.tsx +++ b/src/components/common/muiExtended/WidgetCard.tsx @@ -7,8 +7,9 @@ interface Props extends PropsWithChildren> { const CardStyled = styled(Card)( ({ hasborder }) => ({ + minHeight: "5rem", border: hasborder === "true" ? "1px solid" : "none", - borderRadius: 2, + borderRadius: 8, }) ); diff --git a/src/pages/app/index.tsx b/src/pages/app/index.tsx index 93104273..dc80ef19 100644 --- a/src/pages/app/index.tsx +++ b/src/pages/app/index.tsx @@ -1,34 +1,60 @@ -import { CardHeader, Grid, Typography } from "@mui/material"; +import { CardHeader, Grid, Stack, Typography } from "@mui/material"; import { WidgetCard } from "@/components/common/muiExtended/WidgetCard"; -const SummaryCard = ({ captionTitle }: { captionTitle: string }) => { +const SummaryCard = ({ + captionTitle, + caption, +}: { + captionTitle: string; + caption?: string; +}) => { return ( - - {captionTitle && ( - - {captionTitle} - - )} + + + + {caption} + + {captionTitle && ( + + {captionTitle} + + } + /> + )} + ); }; export default function AppDashboard() { return ( - + Summary - - + + - - + + - - + + + + + ); From 001d01b0a98c4939c41ee9866970678465e56cf2 Mon Sep 17 00:00:00 2001 From: Henry Palacios Date: Thu, 10 Aug 2023 19:30:29 -0300 Subject: [PATCH 3/7] Getting address balance --- package.json | 2 +- src/components/SummaryCard/index.tsx | 48 ++++++++++++++++ src/components/SummaryCard/styled.ts | 16 ++++++ .../common/LoadingSkeleton/index.tsx | 20 +++++-- .../common/muiExtended/WidgetCard.tsx | 27 +++++---- src/hooks/useGetBalance.ts | 49 ++++++++++++++++ src/hooks/useNetworkApi.ts | 10 ++++ src/pages/app/index.tsx | 57 +++++++------------ src/stories/LoadingButton.stories.ts | 2 +- src/stories/SummaryCard.stories.tsx | 44 ++++++++++++++ tsconfig.json | 16 ++++-- yarn.lock | 2 +- 12 files changed, 230 insertions(+), 63 deletions(-) create mode 100644 src/components/SummaryCard/index.tsx create mode 100644 src/components/SummaryCard/styled.ts create mode 100644 src/hooks/useGetBalance.ts create mode 100644 src/hooks/useNetworkApi.ts create mode 100644 src/stories/SummaryCard.stories.tsx diff --git a/package.json b/package.json index 877b7031..b4300e72 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "react-dropzone": "^14.2.3", "react-loading-skeleton": "^3.3.1", "sass": "^1.63.6", - "useink": "^1.8.0" + "useink": "^1.13.0" }, "devDependencies": { "@storybook/addon-essentials": "^7.2.1", diff --git a/src/components/SummaryCard/index.tsx b/src/components/SummaryCard/index.tsx new file mode 100644 index 00000000..386a1b42 --- /dev/null +++ b/src/components/SummaryCard/index.tsx @@ -0,0 +1,48 @@ +import { Box, CardHeader, Typography } from "@mui/material"; + +import { LoadingSkeleton } from "../common/LoadingSkeleton"; +import { SummaryCardStyled, TextSummary } from "./styled"; + +export interface SummaryCardProps { + captionTitle: string; + caption?: string; + captionComponent?: React.ReactNode; + isLoading?: boolean; + widthSkeleton?: string; +} + +export const SummaryCard = ({ + captionTitle, + caption, + captionComponent, + isLoading, + widthSkeleton, +}: SummaryCardProps) => { + const _captionComponent = isLoading ? ( + + ) : ( + captionComponent + ); + + return ( + + {_captionComponent && !caption ? ( + _captionComponent + ) : ( + + {caption} + + )} + {captionTitle && ( + + {captionTitle} + + } + /> + )} + + ); +}; diff --git a/src/components/SummaryCard/styled.ts b/src/components/SummaryCard/styled.ts new file mode 100644 index 00000000..cc7fd267 --- /dev/null +++ b/src/components/SummaryCard/styled.ts @@ -0,0 +1,16 @@ +import { styled, Typography, TypographyProps } from "@mui/material"; + +import { WidgetCard, WidgetCardProps } from "../common/muiExtended/WidgetCard"; + +export const SummaryCardStyled = styled(WidgetCard)(() => ({ + minHeight: "9rem", + display: "flex", + alignItems: "center", + justifyContent: "center", + flexDirection: "column", + minWidth: "180px", +})); + +export const TextSummary = styled(Typography)(() => ({ + fontSize: "2em", +})); diff --git a/src/components/common/LoadingSkeleton/index.tsx b/src/components/common/LoadingSkeleton/index.tsx index da74810d..ed4e4235 100644 --- a/src/components/common/LoadingSkeleton/index.tsx +++ b/src/components/common/LoadingSkeleton/index.tsx @@ -1,21 +1,31 @@ -import { useTheme } from "@mui/material"; +import { Box, BoxProps, styled, useTheme } from "@mui/material"; import Skeleton, { SkeletonTheme } from "react-loading-skeleton"; export interface LoadingSkeletonProps { count?: number; + width?: string; } -export const LoadingSkeleton = ({ count = 1 }: LoadingSkeletonProps) => { +const BoxWrapper = styled(Box)(() => { + return { + justifyContent: "center", + }; +}); + +export const LoadingSkeleton = ({ + count = 1, + width = "80%", +}: LoadingSkeletonProps) => { const theme = useTheme(); return ( -

+ -

+ ); }; diff --git a/src/components/common/muiExtended/WidgetCard.tsx b/src/components/common/muiExtended/WidgetCard.tsx index 4d326d6f..cee25ea7 100644 --- a/src/components/common/muiExtended/WidgetCard.tsx +++ b/src/components/common/muiExtended/WidgetCard.tsx @@ -1,7 +1,8 @@ -import { Card, CardProps, styled, useTheme } from "@mui/material"; +import { Card, CardProps, styled } from "@mui/material"; import { forwardRef, PropsWithChildren } from "react"; -interface Props extends PropsWithChildren> { +export interface WidgetCardProps + extends PropsWithChildren> { border: boolean; } @@ -13,15 +14,13 @@ const CardStyled = styled(Card)( }) ); -export const WidgetCard: React.FC = forwardRef( - function RefMainCard({ children, border, ...props }, ref) { - const theme = useTheme(); - // boxShadow = theme.palette.mode === "dark" ? boxShadow || true : boxShadow; - - return ( - - {children} - - ); - } -); +export const WidgetCard: React.FC = forwardRef< + HTMLDivElement, + WidgetCardProps +>(function RefMainCard({ children, border, ...props }, ref) { + return ( + + {children} + + ); +}); diff --git a/src/hooks/useGetBalance.ts b/src/hooks/useGetBalance.ts new file mode 100644 index 00000000..9bc24869 --- /dev/null +++ b/src/hooks/useGetBalance.ts @@ -0,0 +1,49 @@ +import { useEffect, useMemo, useState } from "react"; +import { useBalance } from "useink"; +import { planckToDecimalFormatted } from "useink/utils"; + +import { useNetworkApi } from "./useNetworkApi"; + +interface XsignerBalance { + freeBalance?: string; + reservedBalance?: string; +} + +export function useGetBalance(address: string | undefined) { + const [isLoading, setIsLoading] = useState(true); + const [balance, setBalance] = useState(); + const _balance = useBalance({ address }); + const balanceWithoutFormat = useMemo( + () => ({ + freeBalance: _balance?.freeBalance, + reservedBalance: _balance?.reservedBalance, + }), + [_balance?.freeBalance, _balance?.reservedBalance] + ); + const api = useNetworkApi(); + + useEffect(() => { + if (!api?.api) return; + + setIsLoading(true); + const freeBalance = planckToDecimalFormatted( + balanceWithoutFormat?.freeBalance, + { + significantFigures: 4, + api: api?.api, + } + ); + const reservedBalance = planckToDecimalFormatted( + balanceWithoutFormat?.reservedBalance, + { + significantFigures: 4, + api: api?.api, + } + ); + + setBalance({ freeBalance, reservedBalance }); + setIsLoading(false); + }, [balanceWithoutFormat]); + + return { balance, isLoading }; +} diff --git a/src/hooks/useNetworkApi.ts b/src/hooks/useNetworkApi.ts new file mode 100644 index 00000000..76485fbf --- /dev/null +++ b/src/hooks/useNetworkApi.ts @@ -0,0 +1,10 @@ +import { useApi } from "useink"; + +import { usePolkadotContext } from "@/context/usePolkadotContext"; + +export function useNetworkApi() { + const { network } = usePolkadotContext(); + const api = useApi(network); + + return api; +} diff --git a/src/pages/app/index.tsx b/src/pages/app/index.tsx index dc80ef19..148e931e 100644 --- a/src/pages/app/index.tsx +++ b/src/pages/app/index.tsx @@ -1,43 +1,16 @@ -import { CardHeader, Grid, Stack, Typography } from "@mui/material"; +import { Grid, Typography } from "@mui/material"; -import { WidgetCard } from "@/components/common/muiExtended/WidgetCard"; +import { SummaryCard } from "@/components/SummaryCard"; +import { useGetBalance } from "@/hooks/useGetBalance"; +import { useGetXsignerSelected } from "@/hooks/xsignerSelected/useGetXsignerSelected"; -const SummaryCard = ({ - captionTitle, - caption, -}: { - captionTitle: string; - caption?: string; -}) => { - return ( - - - - {caption} - - {captionTitle && ( - - {captionTitle} - - } - /> - )} - - +export default function AppDashboard() { + const { xSignerSelected } = useGetXsignerSelected(); + + const { balance, isLoading: isLoadingBalance } = useGetBalance( + xSignerSelected?.address ); -}; -export default function AppDashboard() { return ( @@ -45,7 +18,17 @@ export default function AppDashboard() { - + + {balance?.freeBalance} + {balance?.reservedBalance} + + } + isLoading={isLoadingBalance} + /> diff --git a/src/stories/LoadingButton.stories.ts b/src/stories/LoadingButton.stories.ts index 20376717..5b868e24 100644 --- a/src/stories/LoadingButton.stories.ts +++ b/src/stories/LoadingButton.stories.ts @@ -7,7 +7,7 @@ import { // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export const meta = { - title: "Example/LoadingButton", + title: "Components/LoadingButton", component: LoadingButton, parameters: { layout: "centered", diff --git a/src/stories/SummaryCard.stories.tsx b/src/stories/SummaryCard.stories.tsx new file mode 100644 index 00000000..a42e7484 --- /dev/null +++ b/src/stories/SummaryCard.stories.tsx @@ -0,0 +1,44 @@ +import "react-loading-skeleton/dist/skeleton.css"; + +import { Meta, StoryObj } from "@storybook/react"; +import React from "react"; + +import { SummaryCard, SummaryCardProps } from "@/components/SummaryCard"; + +const meta = { + title: "Components/SummaryCard", + component: SummaryCard, + parameters: { + layout: "centered", + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + captionTitle: "Default Tokens", + caption: "57", + }, +}; + +export const LoadingState: Story = { + args: { + captionTitle: "Loading Title", + isLoading: true, + widthSkeleton: "60%", + }, +}; + +export const WithCustomComponent: Story = { + args: { + captionTitle: "Balance", + captionComponent: ( +
+
0.000 ROC
+
0.000 ROC
+
+ ), + }, +}; diff --git a/tsconfig.json b/tsconfig.json index ed2480fd..d822459d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,7 +1,11 @@ { "compilerOptions": { "target": "es2020", - "lib": ["dom", "dom.iterable", "esnext"], + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], "allowJs": true, "skipLibCheck": true, "strict": true, @@ -9,13 +13,15 @@ "noEmit": true, "esModuleInterop": true, "module": "esnext", - "moduleResolution": "node", + "moduleResolution": "NodeNext", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "paths": { - "@/*": ["./src/*"] + "@/*": [ + "./src/*" + ] } }, "include": [ @@ -24,5 +30,7 @@ "**/*.tsx", "node_modules/useink/**/*" ], - "exclude": ["node_modules"] + "exclude": [ + "node_modules" + ] } diff --git a/yarn.lock b/yarn.lock index 7b06f291..a75768eb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11505,7 +11505,7 @@ use-sidecar@^1.1.2: detect-node-es "^1.1.0" tslib "^2.0.0" -useink@^1.8.0: +useink@^1.13.0: version "1.13.0" resolved "https://registry.yarnpkg.com/useink/-/useink-1.13.0.tgz#7865eb3e75bd9efdb00dbefcca25f400d39534d3" integrity sha512-fBO0mdGUE6vKSyF+TtNNH2YeE2fIbrmHys+8x8kerha8GjK6zS0ENLVfAmWdVb56phJoPmS+qHfX2Aevk//GxA== From f65e60310ce1c19224d0f853b8d20ba7c9acc619 Mon Sep 17 00:00:00 2001 From: Henry Palacios Date: Thu, 10 Aug 2023 19:59:28 -0300 Subject: [PATCH 4/7] Testing another bundler --- tsconfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index d822459d..3b4aa679 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -13,7 +13,7 @@ "noEmit": true, "esModuleInterop": true, "module": "esnext", - "moduleResolution": "NodeNext", + "moduleResolution": "Bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", From 67003528185fe5c4e17470309d3d7d772709ec3e Mon Sep 17 00:00:00 2001 From: Henry Palacios Date: Thu, 10 Aug 2023 20:12:00 -0300 Subject: [PATCH 5/7] Adding parseUnit from useink services --- src/hooks/useGetBalance.ts | 5 +- src/services/useink/substrate/parseUnit.ts | 78 +++++++++++++++++++++ src/services/useink/substrate/tokenTypes.ts | 12 ++++ src/services/useink/types.ts | 4 +- tsconfig.json | 2 +- 5 files changed, 95 insertions(+), 6 deletions(-) create mode 100644 src/services/useink/substrate/parseUnit.ts create mode 100644 src/services/useink/substrate/tokenTypes.ts diff --git a/src/hooks/useGetBalance.ts b/src/hooks/useGetBalance.ts index 9bc24869..6942f7ce 100644 --- a/src/hooks/useGetBalance.ts +++ b/src/hooks/useGetBalance.ts @@ -1,6 +1,7 @@ import { useEffect, useMemo, useState } from "react"; import { useBalance } from "useink"; -import { planckToDecimalFormatted } from "useink/utils"; + +import { planckToDecimalFormatted } from "@/services/useink/substrate/parseUnit"; import { useNetworkApi } from "./useNetworkApi"; @@ -43,7 +44,7 @@ export function useGetBalance(address: string | undefined) { setBalance({ freeBalance, reservedBalance }); setIsLoading(false); - }, [balanceWithoutFormat]); + }, [api?.api, balanceWithoutFormat]); return { balance, isLoading }; } diff --git a/src/services/useink/substrate/parseUnit.ts b/src/services/useink/substrate/parseUnit.ts new file mode 100644 index 00000000..687e1feb --- /dev/null +++ b/src/services/useink/substrate/parseUnit.ts @@ -0,0 +1,78 @@ +import BN from "bn.js"; + +import { + chainTokenSymbol, + IRegistryInfo, +} from "@/services/useink/substrate/tokenTypes"; + +// convert string with commas to a BN e.g. 1,000,000 to new BN('1_000_000') +export const stringNumberToBN = (valWithCommas: string): BN => { + const v = valWithCommas.split(",").join(""); + return new BN(v); +}; + +interface DecimalOptions { + api?: IRegistryInfo; + decimals?: number; +} + +// convert decimal to planck unit e.g. 1.0000 to 1000000000000 +export const planckToDecimal = ( + amount: undefined | string | number | number[] | BN | Uint8Array | Buffer, + options: DecimalOptions +): number | undefined => { + const decimals = + options.decimals !== undefined + ? options.decimals + : options.api?.registry.chainDecimals[0]; + + if (!decimals || !amount) return; + if (decimals === undefined || amount === undefined) return; + + const base = new BN(10).pow(new BN(decimals)); + const { div, mod } = new BN(amount).divmod(base); + + return parseFloat( + `${div.toString()}.${mod.toString().padStart(decimals, "0")}` + ); +}; + +interface PlanckToDecimalOptions { + significantFigures?: number; + symbol?: string; +} + +// convert planck unit to decimal with token name (ROC,DOT,KSM) e.g. 100000000000 to 1.0000 ROC +export const planckToDecimalFormatted = ( + amount: undefined | string | number | number[] | BN | Uint8Array | Buffer, + options: PlanckToDecimalOptions & DecimalOptions +): string | undefined => { + const decimalAmount = planckToDecimal(amount, options); + if (decimalAmount === undefined) return; + + const formattedVal = + options?.significantFigures === undefined + ? decimalAmount.toString() + : decimalAmount.toFixed(options?.significantFigures).toString(); + + const symbol = options?.symbol + ? options.symbol + : options.api + ? chainTokenSymbol(options.api) + : ""; + + return `${formattedVal} ${symbol}`; +}; + +// convert decimal to planck unit e.g. 1.0000 to 1000000000000 +export const decimalToPlanck = ( + amount: number, + options: DecimalOptions | undefined +): bigint | undefined => { + const decimals = options?.decimals || options?.api?.registry.chainDecimals[0]; + if (!decimals) return; + + const convertedValue = BigInt(amount * 10 ** decimals); + + return convertedValue; +}; diff --git a/src/services/useink/substrate/tokenTypes.ts b/src/services/useink/substrate/tokenTypes.ts new file mode 100644 index 00000000..78e2f85d --- /dev/null +++ b/src/services/useink/substrate/tokenTypes.ts @@ -0,0 +1,12 @@ +export interface IRegistryInfo { + registry: { + chainDecimals: (number | undefined)[]; + chainTokens: (string | undefined)[]; + }; +} + +export const chainTokenSymbol = (api: IRegistryInfo): string | undefined => + api.registry.chainTokens[0]; + +export const chainDecimals = (api: IRegistryInfo): number | undefined => + api.registry.chainDecimals[0]; diff --git a/src/services/useink/types.ts b/src/services/useink/types.ts index 5c888e08..cd234e24 100644 --- a/src/services/useink/types.ts +++ b/src/services/useink/types.ts @@ -1,6 +1,4 @@ -export type { Chain, ChainId } from "useink/dist/chains"; -export type { WalletAccount } from "useink/dist/core"; -// 👆 Avoiding any using the implementation of talisman https://github.com/TalismanSociety/talisman-connect/blob/master/packages/connect-wallets/src/types.ts +// Avoiding any using the implementation of talisman https://github.com/TalismanSociety/talisman-connect/blob/master/packages/connect-wallets/src/types.ts export interface WalletAccount { address: string; diff --git a/tsconfig.json b/tsconfig.json index 3b4aa679..1bde117e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -13,7 +13,7 @@ "noEmit": true, "esModuleInterop": true, "module": "esnext", - "moduleResolution": "Bundler", + "moduleResolution": "Node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", From 133e33a86c9d87d0a7e8b6ff08b6f24b9743b851 Mon Sep 17 00:00:00 2001 From: Henry Palacios Date: Thu, 10 Aug 2023 20:16:45 -0300 Subject: [PATCH 6/7] Wrong deleted lines --- src/services/useink/types.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/services/useink/types.ts b/src/services/useink/types.ts index cd234e24..5c888e08 100644 --- a/src/services/useink/types.ts +++ b/src/services/useink/types.ts @@ -1,4 +1,6 @@ -// Avoiding any using the implementation of talisman https://github.com/TalismanSociety/talisman-connect/blob/master/packages/connect-wallets/src/types.ts +export type { Chain, ChainId } from "useink/dist/chains"; +export type { WalletAccount } from "useink/dist/core"; +// 👆 Avoiding any using the implementation of talisman https://github.com/TalismanSociety/talisman-connect/blob/master/packages/connect-wallets/src/types.ts export interface WalletAccount { address: string; From a681c0b056dbf16f015f918fb9a08d90297172e9 Mon Sep 17 00:00:00 2001 From: Henry Palacios Date: Thu, 10 Aug 2023 21:24:08 -0300 Subject: [PATCH 7/7] Use custom component on balance text --- .../SummaryCard/XsignerBalanceText.tsx | 17 +++++++++++++++++ src/pages/app/index.tsx | 9 +++++---- src/stories/SummaryCard.stories.tsx | 9 +++++---- 3 files changed, 27 insertions(+), 8 deletions(-) create mode 100644 src/components/SummaryCard/XsignerBalanceText.tsx diff --git a/src/components/SummaryCard/XsignerBalanceText.tsx b/src/components/SummaryCard/XsignerBalanceText.tsx new file mode 100644 index 00000000..6694401f --- /dev/null +++ b/src/components/SummaryCard/XsignerBalanceText.tsx @@ -0,0 +1,17 @@ +import { Box, BoxProps, styled, Typography } from "@mui/material"; + +const BoxWrapper = styled(Box)(() => ({})); + +interface Props { + freeBalance: string | undefined; + reservedBalance: string | undefined; +} + +export function XsignerBalanceText({ freeBalance, reservedBalance }: Props) { + return ( + + {freeBalance} + {reservedBalance} + + ); +} diff --git a/src/pages/app/index.tsx b/src/pages/app/index.tsx index 148e931e..3e9d446e 100644 --- a/src/pages/app/index.tsx +++ b/src/pages/app/index.tsx @@ -1,6 +1,7 @@ import { Grid, Typography } from "@mui/material"; import { SummaryCard } from "@/components/SummaryCard"; +import { XsignerBalanceText } from "@/components/SummaryCard/XsignerBalanceText"; import { useGetBalance } from "@/hooks/useGetBalance"; import { useGetXsignerSelected } from "@/hooks/xsignerSelected/useGetXsignerSelected"; @@ -22,10 +23,10 @@ export default function AppDashboard() { captionTitle="Balance" widthSkeleton="60%" captionComponent={ - <> - {balance?.freeBalance} - {balance?.reservedBalance} - + } isLoading={isLoadingBalance} /> diff --git a/src/stories/SummaryCard.stories.tsx b/src/stories/SummaryCard.stories.tsx index a42e7484..47544333 100644 --- a/src/stories/SummaryCard.stories.tsx +++ b/src/stories/SummaryCard.stories.tsx @@ -4,6 +4,7 @@ import { Meta, StoryObj } from "@storybook/react"; import React from "react"; import { SummaryCard, SummaryCardProps } from "@/components/SummaryCard"; +import { XsignerBalanceText } from "@/components/SummaryCard/XsignerBalanceText"; const meta = { title: "Components/SummaryCard", @@ -35,10 +36,10 @@ export const WithCustomComponent: Story = { args: { captionTitle: "Balance", captionComponent: ( -
-
0.000 ROC
-
0.000 ROC
-
+ ), }, };