From 38a78bcb9fcf045a9f56b3401d41e4aceea5e7bd Mon Sep 17 00:00:00 2001 From: Arthur Geron <3487334+arthurgeron@users.noreply.github.com> Date: Fri, 7 Feb 2025 17:45:22 -0300 Subject: [PATCH 01/12] fix: nft list getting cut off --- .../src/systems/Account/components/BalanceNFTs/constants.ts | 1 + packages/app/src/systems/Home/pages/Home/Home.tsx | 3 +-- 2 files changed, 2 insertions(+), 2 deletions(-) create mode 100644 packages/app/src/systems/Account/components/BalanceNFTs/constants.ts diff --git a/packages/app/src/systems/Account/components/BalanceNFTs/constants.ts b/packages/app/src/systems/Account/components/BalanceNFTs/constants.ts new file mode 100644 index 0000000000..b2c1aad024 --- /dev/null +++ b/packages/app/src/systems/Account/components/BalanceNFTs/constants.ts @@ -0,0 +1 @@ +export const BALANCE_NFTS_TAB_HEIGHT = 244; diff --git a/packages/app/src/systems/Home/pages/Home/Home.tsx b/packages/app/src/systems/Home/pages/Home/Home.tsx index 23600b7c05..cd1c649703 100644 --- a/packages/app/src/systems/Home/pages/Home/Home.tsx +++ b/packages/app/src/systems/Home/pages/Home/Home.tsx @@ -69,8 +69,7 @@ const styles = { }, }), assetsList: cssObj({ - maxHeight: 200, - paddingBottom: '$4', + height: BALANCE_NFTS_TAB_HEIGHT, ...scrollable(), overflowY: 'scroll !important', }), From 05c2093aa05cd4597494388eb76653669ec823dc Mon Sep 17 00:00:00 2001 From: Arthur Geron <3487334+arthurgeron@users.noreply.github.com> Date: Tue, 11 Feb 2025 14:05:45 -0300 Subject: [PATCH 02/12] feat: add loading state --- .../components/BalanceNFTs/BalanceNFTs.tsx | 42 +++++++++++-------- .../components/AssetList/AssetListEmpty.tsx | 42 ++++++++++--------- .../app/src/systems/Home/pages/Home/Home.tsx | 3 +- 3 files changed, 48 insertions(+), 39 deletions(-) diff --git a/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx b/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx index 59712e6250..bab7849c69 100644 --- a/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx +++ b/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx @@ -1,7 +1,8 @@ import { cssObj } from '@fuel-ui/css'; -import { Accordion, Badge, Box, Copyable, VStack } from '@fuel-ui/react'; +import { Accordion, Badge, Box, Copyable } from '@fuel-ui/react'; import type { CoinAsset } from '@fuel-wallet/types'; import { useMemo } from 'react'; +import { AssetList } from '~/systems/Asset'; import { AssetListEmpty } from '~/systems/Asset/components/AssetList/AssetListEmpty'; import { shortAddress } from '~/systems/Core'; import { NFTImage } from './NFTImage'; @@ -12,9 +13,15 @@ import { interface BalanceNFTsProps { balances: CoinAsset[] | undefined; + isLoading?: boolean; } -export const BalanceNFTs = ({ balances = [] }: BalanceNFTsProps) => { +const EMPTY_ARRAY: CoinAsset[] = []; + +export const BalanceNFTs = ({ + balances = EMPTY_ARRAY, + isLoading, +}: BalanceNFTsProps) => { const { collections, defaultValue } = useMemo(() => { const collections = groupNFTsByCollection(balances); const defaultValue = collections @@ -27,21 +34,20 @@ export const BalanceNFTs = ({ balances = [] }: BalanceNFTsProps) => { }; }, [balances]); - if (collections.length === 0) { - return ( - - ); - } - return ( - - {collections.map((collection) => { - return ( + {isLoading ? ( + + ) : ( + + {true && ( + + )} + {collections.map((collection) => ( @@ -64,9 +70,9 @@ export const BalanceNFTs = ({ balances = [] }: BalanceNFTsProps) => { - ); - })} - + ))} + + )} ); }; diff --git a/packages/app/src/systems/Asset/components/AssetList/AssetListEmpty.tsx b/packages/app/src/systems/Asset/components/AssetList/AssetListEmpty.tsx index e1d3816eba..03e42e3d10 100644 --- a/packages/app/src/systems/Asset/components/AssetList/AssetListEmpty.tsx +++ b/packages/app/src/systems/Asset/components/AssetList/AssetListEmpty.tsx @@ -1,5 +1,5 @@ import { cssObj } from '@fuel-ui/css'; -import { Button, Card, Heading, Icon, Text } from '@fuel-ui/react'; +import { Box, Button, Card, Heading, Icon, Text } from '@fuel-ui/react'; import { useFundWallet } from '~/systems/FundWallet'; export type AssetListEmptyProps = { @@ -17,25 +17,27 @@ export function AssetListEmpty({ const showFund = hasFaucet || hasBridge; return ( - - - {!!text && {text}} - {!!supportText && {supportText}} - {showFund && !hideFaucet && ( - /** - * TODO: need to add right faucet icon on @fuel-ui - */ - - )} - - + + + + {!!text && {text}} + {!!supportText && {supportText}} + {showFund && !hideFaucet && ( + /** + * TODO: need to add right faucet icon on @fuel-ui + */ + + )} + + + ); } diff --git a/packages/app/src/systems/Home/pages/Home/Home.tsx b/packages/app/src/systems/Home/pages/Home/Home.tsx index cd1c649703..2df6066dc0 100644 --- a/packages/app/src/systems/Home/pages/Home/Home.tsx +++ b/packages/app/src/systems/Home/pages/Home/Home.tsx @@ -7,6 +7,7 @@ import { useBalanceVisibility } from '~/systems/Core/hooks/useVisibility'; import { BalanceAssets } from '~/systems/Account/components/BalanceAssets/BalanceAssets'; import { BalanceNFTs } from '~/systems/Account/components/BalanceNFTs/BalanceNFTs'; +import { BALANCE_NFTS_TAB_HEIGHT } from '~/systems/Account/components/BalanceNFTs/constants'; import { QuickAccountConnect } from '~/systems/Account/components/QuickAccountConnect/QuickAccountConnect'; import { HomeActions } from '../../components'; @@ -52,7 +53,7 @@ export function Home() { - + From 7b0519f30a1e9cd7d8c27904095309e08aed424a Mon Sep 17 00:00:00 2001 From: Arthur Geron <3487334+arthurgeron@users.noreply.github.com> Date: Tue, 11 Feb 2025 14:06:41 -0300 Subject: [PATCH 03/12] fix: reloading nft list --- .../components/BalanceNFTs/BalanceNFTs.tsx | 29 +++++++++++-------- 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx b/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx index bab7849c69..ce625d824b 100644 --- a/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx +++ b/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx @@ -1,7 +1,7 @@ import { cssObj } from '@fuel-ui/css'; import { Accordion, Badge, Box, Copyable } from '@fuel-ui/react'; import type { CoinAsset } from '@fuel-wallet/types'; -import { useMemo } from 'react'; +import { memo, useMemo } from 'react'; import { AssetList } from '~/systems/Asset'; import { AssetListEmpty } from '~/systems/Asset/components/AssetList/AssetListEmpty'; import { shortAddress } from '~/systems/Core'; @@ -18,7 +18,7 @@ interface BalanceNFTsProps { const EMPTY_ARRAY: CoinAsset[] = []; -export const BalanceNFTs = ({ +const _BalanceNFTs = ({ balances = EMPTY_ARRAY, isLoading, }: BalanceNFTsProps) => { @@ -36,17 +36,9 @@ export const BalanceNFTs = ({ return ( - {isLoading ? ( - - ) : ( + {isLoading && } + {!!collections.length && ( - {true && ( - - )} {collections.map((collection) => ( @@ -73,6 +65,13 @@ export const BalanceNFTs = ({ ))} )} + {!collections?.length && ( + + )} ); }; @@ -142,3 +141,9 @@ const styles = { textAlign: 'center', }), }; + +export const BalanceNFTs = memo( + _BalanceNFTs, + (a: BalanceNFTsProps, b: BalanceNFTsProps) => + a.balances?.length === b.balances?.length && a.isLoading === b.isLoading +); From 599f54c9b423d5f5991f42e3aa6811ef9ae213bf Mon Sep 17 00:00:00 2001 From: Arthur Geron <3487334+arthurgeron@users.noreply.github.com> Date: Tue, 11 Feb 2025 15:08:11 -0300 Subject: [PATCH 04/12] fix: nft cutoff --- .../components/BalanceNFTs/BalanceNFTs.tsx | 18 ++++++- .../components/BalanceNFTs/NFTImage.tsx | 50 ++++++++++--------- .../BalanceNFTs/NFTImageLoading.tsx | 17 +++++++ 3 files changed, 60 insertions(+), 25 deletions(-) create mode 100644 packages/app/src/systems/Account/components/BalanceNFTs/NFTImageLoading.tsx diff --git a/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx b/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx index ce625d824b..844a86a299 100644 --- a/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx +++ b/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx @@ -2,6 +2,7 @@ import { cssObj } from '@fuel-ui/css'; import { Accordion, Badge, Box, Copyable } from '@fuel-ui/react'; import type { CoinAsset } from '@fuel-wallet/types'; import { memo, useMemo } from 'react'; +import { NFTImageLoading } from '~/systems/Account/components/BalanceNFTs/NFTImageLoading'; import { AssetList } from '~/systems/Asset'; import { AssetListEmpty } from '~/systems/Asset/components/AssetList/AssetListEmpty'; import { shortAddress } from '~/systems/Core'; @@ -36,7 +37,13 @@ const _BalanceNFTs = ({ return ( - {isLoading && } + {isLoading && !collections.length && ( + + + + + + )} {!!collections.length && ( {collections.map((collection) => ( @@ -107,7 +114,6 @@ const styles = { svg: { width: '$3', - height: '$3', }, }, '.fuel_Accordion-content': { @@ -133,6 +139,14 @@ const styles = { gridTemplateColumns: 'repeat(3, 1fr)', gap: '$3', }), + gridLoading: cssObj({ + display: 'grid', + gridTemplateColumns: 'repeat(3, 1fr)', + gap: '$3', + marginTop: '45px', + paddingLeft: '$5', + paddingRight: '$2', + }), name: cssObj({ marginTop: '$1', gap: '$0', diff --git a/packages/app/src/systems/Account/components/BalanceNFTs/NFTImage.tsx b/packages/app/src/systems/Account/components/BalanceNFTs/NFTImage.tsx index 6ad543e539..442dd75baf 100644 --- a/packages/app/src/systems/Account/components/BalanceNFTs/NFTImage.tsx +++ b/packages/app/src/systems/Account/components/BalanceNFTs/NFTImage.tsx @@ -1,6 +1,7 @@ import { cssObj } from '@fuel-ui/css'; -import { Box, ContentLoader, Icon } from '@fuel-ui/react'; -import { useEffect, useRef, useState } from 'react'; +import { Box, ContentLoader, Icon, Image } from '@fuel-ui/react'; +import { memo, useEffect, useRef, useState } from 'react'; +import { NFTImageLoading } from '~/systems/Account/components/BalanceNFTs/NFTImageLoading'; import { shortAddress } from '~/systems/Core'; interface NFTImageProps { @@ -8,7 +9,15 @@ interface NFTImageProps { image: string | undefined; } -export const NFTImage = ({ assetId, image }: NFTImageProps) => { +function Empty() { + return ( + + + + ); +} + +const _NFTImage = ({ assetId, image }: NFTImageProps) => { const imgRef = useRef(null); const [fallback, setFallback] = useState(false); @@ -25,31 +34,22 @@ export const NFTImage = ({ assetId, image }: NFTImageProps) => { } }, []); - if (image && !fallback) { - return ( - - {isLoading && ( - - - - )} - + {(!image || !!fallback) && } + + {image && !fallback && isLoading && } + {image && !fallback && ( + {shortAddress(assetId)} setLoading(false)} - onError={() => { - setFallback(true); - }} + onError={() => setFallback(true)} /> - - ); - } - - return ( - - + )} ); }; @@ -59,7 +59,7 @@ const styles = { aspectRatio: '1 / 1', borderRadius: '12px', overflow: 'hidden', - + minHeight: '89px', img: { width: '100%', objectFit: 'cover', @@ -79,3 +79,7 @@ const styles = { alignItems: 'center', }), }; + +export const NFTImage = memo(_NFTImage, (a, b) => { + return a.assetId === b.assetId && a.image === b.image; +}); diff --git a/packages/app/src/systems/Account/components/BalanceNFTs/NFTImageLoading.tsx b/packages/app/src/systems/Account/components/BalanceNFTs/NFTImageLoading.tsx new file mode 100644 index 0000000000..2e14b50f67 --- /dev/null +++ b/packages/app/src/systems/Account/components/BalanceNFTs/NFTImageLoading.tsx @@ -0,0 +1,17 @@ +import { cssObj } from '@fuel-ui/css'; +import { ContentLoader } from '@fuel-ui/react'; + +export function NFTImageLoading({ height = 89 }: { height?: number }) { + return ( + + + + ); +} From 3d9cbcd46840198a777d380fe3a12ec17ef8dcb5 Mon Sep 17 00:00:00 2001 From: Arthur Geron <3487334+arthurgeron@users.noreply.github.com> Date: Tue, 11 Feb 2025 15:11:32 -0300 Subject: [PATCH 05/12] chore: --- .../systems/Asset/components/AssetList/AssetListEmpty.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/app/src/systems/Asset/components/AssetList/AssetListEmpty.tsx b/packages/app/src/systems/Asset/components/AssetList/AssetListEmpty.tsx index 03e42e3d10..623981d478 100644 --- a/packages/app/src/systems/Asset/components/AssetList/AssetListEmpty.tsx +++ b/packages/app/src/systems/Asset/components/AssetList/AssetListEmpty.tsx @@ -1,5 +1,6 @@ import { cssObj } from '@fuel-ui/css'; import { Box, Button, Card, Heading, Icon, Text } from '@fuel-ui/react'; +import { BALANCE_NFTS_TAB_HEIGHT } from '~/systems/Account/components/BalanceNFTs/constants'; import { useFundWallet } from '~/systems/FundWallet'; export type AssetListEmptyProps = { @@ -17,7 +18,7 @@ export function AssetListEmpty({ const showFund = hasFaucet || hasBridge; return ( - + {!!text && {text}} @@ -42,6 +43,9 @@ export function AssetListEmpty({ } const styles = { + container: cssObj({ + minHeight: BALANCE_NFTS_TAB_HEIGHT, + }), empty: cssObj({ h5: { margin: 0, From 4be88d14eeb4315bbf9cd2f0fddc871feb777f1b Mon Sep 17 00:00:00 2001 From: Arthur Geron <3487334+arthurgeron@users.noreply.github.com> Date: Tue, 11 Feb 2025 15:12:13 -0300 Subject: [PATCH 06/12] chore: changeset --- .changeset/rotten-toes-glow.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/rotten-toes-glow.md diff --git a/.changeset/rotten-toes-glow.md b/.changeset/rotten-toes-glow.md new file mode 100644 index 0000000000..c575ba3dca --- /dev/null +++ b/.changeset/rotten-toes-glow.md @@ -0,0 +1,5 @@ +--- +"fuels-wallet": patch +--- + +fix: nft list getting cut off From 57693a9681f22ca6214a2ad620be0d8eb69a14c4 Mon Sep 17 00:00:00 2001 From: Arthur Geron <3487334+arthurgeron@users.noreply.github.com> Date: Tue, 11 Feb 2025 16:11:30 -0300 Subject: [PATCH 07/12] chore: --- .../src/systems/Account/components/BalanceNFTs/NFTImage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/app/src/systems/Account/components/BalanceNFTs/NFTImage.tsx b/packages/app/src/systems/Account/components/BalanceNFTs/NFTImage.tsx index 442dd75baf..8c04a91722 100644 --- a/packages/app/src/systems/Account/components/BalanceNFTs/NFTImage.tsx +++ b/packages/app/src/systems/Account/components/BalanceNFTs/NFTImage.tsx @@ -34,10 +34,10 @@ const _NFTImage = ({ assetId, image }: NFTImageProps) => { } }, []); + if (!image || !!fallback) return ; + return ( - {(!image || !!fallback) && } - {image && !fallback && isLoading && } {image && !fallback && ( Date: Tue, 11 Feb 2025 16:13:50 -0300 Subject: [PATCH 08/12] chore: --- .../Account/components/BalanceNFTs/BalanceNFTs.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx b/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx index 844a86a299..a073640094 100644 --- a/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx +++ b/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx @@ -19,7 +19,7 @@ interface BalanceNFTsProps { const EMPTY_ARRAY: CoinAsset[] = []; -const _BalanceNFTs = ({ +export const BalanceNFTs = ({ balances = EMPTY_ARRAY, isLoading, }: BalanceNFTsProps) => { @@ -155,9 +155,3 @@ const styles = { textAlign: 'center', }), }; - -export const BalanceNFTs = memo( - _BalanceNFTs, - (a: BalanceNFTsProps, b: BalanceNFTsProps) => - a.balances?.length === b.balances?.length && a.isLoading === b.isLoading -); From e933509d3d4732f090e08b858fab70c5513a0a31 Mon Sep 17 00:00:00 2001 From: Arthur Geron <3487334+arthurgeron@users.noreply.github.com> Date: Tue, 11 Feb 2025 16:15:33 -0300 Subject: [PATCH 09/12] chore: --- .../components/BalanceNFTs/BalanceNFTs.tsx | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx b/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx index a073640094..5932e7f707 100644 --- a/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx +++ b/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx @@ -42,8 +42,18 @@ export const BalanceNFTs = ({ + + + )} + {!isLoading && !collections?.length && ( + + )} {!!collections.length && ( {collections.map((collection) => ( @@ -72,13 +82,6 @@ export const BalanceNFTs = ({ ))} )} - {!collections?.length && ( - - )} ); }; From 5087a4600c59173e4f7886e380c09c0c45a90fa5 Mon Sep 17 00:00:00 2001 From: LuizAsFight Date: Wed, 12 Feb 2025 00:10:42 -0300 Subject: [PATCH 10/12] chore: make loadings more similar to screen --- .../components/BalanceNFTs/BalanceNFTs.tsx | 24 ++++++++++++------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx b/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx index 5932e7f707..39a8c4d806 100644 --- a/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx +++ b/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx @@ -7,6 +7,8 @@ import { AssetList } from '~/systems/Asset'; import { AssetListEmpty } from '~/systems/Asset/components/AssetList/AssetListEmpty'; import { shortAddress } from '~/systems/Core'; import { NFTImage } from './NFTImage'; +import { NFTListItemLoading } from './NFTListItemLoading'; +import { NFTTitleLoading } from './NFTTitleLoading'; import { UNKNOWN_COLLECTION_TITLE, groupNFTsByCollection, @@ -38,13 +40,16 @@ export const BalanceNFTs = ({ return ( {isLoading && !collections.length && ( - - - - - - - + + + + + + + + + + )} {!isLoading && !collections?.length && ( @@ -146,10 +151,13 @@ const styles = { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '$3', - marginTop: '45px', + marginTop: '14px', paddingLeft: '$5', paddingRight: '$2', }), + titleLoading: cssObj({ + marginTop: '16px', + }), name: cssObj({ marginTop: '$1', gap: '$0', From 4156b55d23d2745bd3b7d444578161cf0c43f086 Mon Sep 17 00:00:00 2001 From: LuizAsFight Date: Wed, 12 Feb 2025 00:12:48 -0300 Subject: [PATCH 11/12] fix: internal image loader not with full width --- .../BalanceNFTs/NFTImageLoading.tsx | 22 ++++++++++-------- .../BalanceNFTs/NFTListItemLoading.tsx | 19 +++++++++++++++ .../BalanceNFTs/NFTTitleLoading.tsx | 23 +++++++++++++++++++ 3 files changed, 54 insertions(+), 10 deletions(-) create mode 100644 packages/app/src/systems/Account/components/BalanceNFTs/NFTListItemLoading.tsx create mode 100644 packages/app/src/systems/Account/components/BalanceNFTs/NFTTitleLoading.tsx diff --git a/packages/app/src/systems/Account/components/BalanceNFTs/NFTImageLoading.tsx b/packages/app/src/systems/Account/components/BalanceNFTs/NFTImageLoading.tsx index 2e14b50f67..ec3f904e31 100644 --- a/packages/app/src/systems/Account/components/BalanceNFTs/NFTImageLoading.tsx +++ b/packages/app/src/systems/Account/components/BalanceNFTs/NFTImageLoading.tsx @@ -1,17 +1,19 @@ import { cssObj } from '@fuel-ui/css'; -import { ContentLoader } from '@fuel-ui/react'; +import { Box, ContentLoader } from '@fuel-ui/react'; -export function NFTImageLoading({ height = 89 }: { height?: number }) { +export function NFTImageLoading({ size = 89 }: { size?: number }) { return ( - - - + + + + ); } diff --git a/packages/app/src/systems/Account/components/BalanceNFTs/NFTListItemLoading.tsx b/packages/app/src/systems/Account/components/BalanceNFTs/NFTListItemLoading.tsx new file mode 100644 index 0000000000..bd9d4007a7 --- /dev/null +++ b/packages/app/src/systems/Account/components/BalanceNFTs/NFTListItemLoading.tsx @@ -0,0 +1,19 @@ +import { cssObj } from '@fuel-ui/css'; +import { Box } from '@fuel-ui/react'; +import { NFTImageLoading } from './NFTImageLoading'; +import { NFTTitleLoading } from './NFTTitleLoading'; + +export function NFTListItemLoading() { + return ( + + + + + ); +} diff --git a/packages/app/src/systems/Account/components/BalanceNFTs/NFTTitleLoading.tsx b/packages/app/src/systems/Account/components/BalanceNFTs/NFTTitleLoading.tsx new file mode 100644 index 0000000000..360f3f8f5a --- /dev/null +++ b/packages/app/src/systems/Account/components/BalanceNFTs/NFTTitleLoading.tsx @@ -0,0 +1,23 @@ +import { cssObj } from '@fuel-ui/css'; +import { Box, ContentLoader } from '@fuel-ui/react'; + +export function NFTTitleLoading({ height = 18 }: { height?: number }) { + return ( + + + + + + ); +} From 5c5a2ee8d1f0f1cdfb3e08002924442dce53f3b1 Mon Sep 17 00:00:00 2001 From: LuizAsFight Date: Wed, 12 Feb 2025 00:28:50 -0300 Subject: [PATCH 12/12] chore --- .../app/src/systems/Account/components/BalanceNFTs/constants.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app/src/systems/Account/components/BalanceNFTs/constants.ts b/packages/app/src/systems/Account/components/BalanceNFTs/constants.ts index b2c1aad024..335b16345e 100644 --- a/packages/app/src/systems/Account/components/BalanceNFTs/constants.ts +++ b/packages/app/src/systems/Account/components/BalanceNFTs/constants.ts @@ -1 +1 @@ -export const BALANCE_NFTS_TAB_HEIGHT = 244; +export const BALANCE_NFTS_TAB_HEIGHT = 244; \ No newline at end of file