diff --git a/.changeset/famous-falcons-punch.md b/.changeset/famous-falcons-punch.md new file mode 100644 index 00000000..b4f8bd82 --- /dev/null +++ b/.changeset/famous-falcons-punch.md @@ -0,0 +1,9 @@ +--- +"@fuel-connectors/fuel-development-wallet": minor +"@fuel-connectors/walletconnect-connector": minor +"@fuel-connectors/solana-connector": minor +"@fuel-connectors/evm-connector": minor +"@fuel-connectors/fuel-wallet": minor +--- + +Added/Modified connector's name so it'll appear correctly in the web wallet diff --git a/.changeset/little-crabs-travel.md b/.changeset/little-crabs-travel.md new file mode 100644 index 00000000..32359481 --- /dev/null +++ b/.changeset/little-crabs-travel.md @@ -0,0 +1,5 @@ +--- +"@fuels/react": minor +--- + +Added a new hook to fetch the current connected connector `useCurrentConnector` diff --git a/.changeset/poor-beers-march.md b/.changeset/poor-beers-march.md new file mode 100644 index 00000000..74996fc3 --- /dev/null +++ b/.changeset/poor-beers-march.md @@ -0,0 +1,5 @@ +--- +"@fuels/react": minor +--- + +Added a component "WebWallet" to increase UX when using connectors diff --git a/.changeset/weak-pots-fetch.md b/.changeset/weak-pots-fetch.md new file mode 100644 index 00000000..2126e127 --- /dev/null +++ b/.changeset/weak-pots-fetch.md @@ -0,0 +1,5 @@ +--- +"docs": minor +--- + +Added a new section on the docs for the hook `useCurrentConnector` diff --git a/examples/react-app/package.json b/examples/react-app/package.json index 2c7e2201..688a105c 100644 --- a/examples/react-app/package.json +++ b/examples/react-app/package.json @@ -19,12 +19,12 @@ "@wagmi/core": "2.13.4", "clsx": "2.1.1", "fuels": "0.94.8", - "react": "18.3.1", - "react-dom": "18.3.1" + "react": "18.2.0", + "react-dom": "18.2.0" }, "devDependencies": { "@tanstack/react-query-devtools": "5.35.1", - "@types/react": "18.3.1", + "@types/react": "18.2.54", "@types/react-dom": "18.3.0", "@vitejs/plugin-react": "4.2.1", "autoprefixer": "10.4.19", diff --git a/examples/react-app/src/main.tsx b/examples/react-app/src/main.tsx index 1eb0626f..a4b7b221 100644 --- a/examples/react-app/src/main.tsx +++ b/examples/react-app/src/main.tsx @@ -71,7 +71,12 @@ const FUEL_CONFIG = { ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( - + - + , ); diff --git a/examples/react-next/package.json b/examples/react-next/package.json index f89fd832..6054ef84 100644 --- a/examples/react-next/package.json +++ b/examples/react-next/package.json @@ -21,7 +21,7 @@ "devDependencies": { "@tanstack/react-query-devtools": "5.35.1", "@types/node": "20.12.11", - "@types/react": "18.3.1", + "@types/react": "18.2.54", "@types/react-dom": "18.3.0", "typescript": "5.4.5" } diff --git a/packages/fuel-development-wallet/src/FuelWalletDevelopmentConnector.ts b/packages/fuel-development-wallet/src/FuelWalletDevelopmentConnector.ts index ed529cfd..714651d8 100644 --- a/packages/fuel-development-wallet/src/FuelWalletDevelopmentConnector.ts +++ b/packages/fuel-development-wallet/src/FuelWalletDevelopmentConnector.ts @@ -2,6 +2,7 @@ import { FuelWalletConnector } from '@fuel-connectors/fuel-wallet'; import type { ConnectorMetadata } from 'fuels'; export class FuelWalletDevelopmentConnector extends FuelWalletConnector { + name = 'Fuel Wallet Development'; metadata: ConnectorMetadata = { image: '/connectors/fuel-wallet-dev.svg', install: { diff --git a/packages/fuel-wallet/src/FuelWalletConnector.ts b/packages/fuel-wallet/src/FuelWalletConnector.ts index b1930f9a..031f567b 100644 --- a/packages/fuel-wallet/src/FuelWalletConnector.ts +++ b/packages/fuel-wallet/src/FuelWalletConnector.ts @@ -30,7 +30,7 @@ import { } from './types'; export class FuelWalletConnector extends FuelConnector { - name = ''; + name = 'Fuel Wallet'; connected = false; installed = false; external = false; diff --git a/packages/react/package.json b/packages/react/package.json index c95e2d71..54bb04fd 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -20,6 +20,7 @@ } } }, + "files": ["dist"], "scripts": { "build": "pnpm ts:check && tsup", "build:watch": "tsup --watch", @@ -31,17 +32,25 @@ "react": ">=18.0.0" }, "dependencies": { - "@radix-ui/react-dialog": "1.1.1", - "events": "3.3.0" + "@fuels/ui": "0.1.2", + "@tabler/icons-react": "2.47.0", + "events": "^3.3.0", + "tailwind-variants": "0.1.20" }, "devDependencies": { "@tanstack/react-query": "5.35.1", - "@types/react": "18.3.1", - "compare-versions": "6.1.0", + "@types/react": "18.2.54", + "compare-versions": "^6.1.0", "fuels": "0.94.8", - "react": "18.3.1", + "react": "^18.2.0", + "styled-components": "6.1.12", + "tailwindcss": "3.4.4", + "@radix-ui/react-dialog": "1.1.1", + "events": "3.3.0", "tsup": "7.3.0", "tsx": "4.9.3", - "typescript": "5.4.5" + "typescript": "5.4.5", + "postcss": "8.4.35", + "postcss-import": "16.0.1" } } diff --git a/packages/react/postcss.config.js b/packages/react/postcss.config.js new file mode 100644 index 00000000..e569373f --- /dev/null +++ b/packages/react/postcss.config.js @@ -0,0 +1,8 @@ +module.exports = { + plugins: { + 'postcss-import': {}, + 'tailwindcss/nesting': {}, + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/packages/react/src/hooks/index.ts b/packages/react/src/hooks/index.ts index b3da396b..d179166c 100644 --- a/packages/react/src/hooks/index.ts +++ b/packages/react/src/hooks/index.ts @@ -7,6 +7,7 @@ export * from './useBalance'; export * from './useChain'; export * from './useConnect'; export * from './useContractRead'; +export * from './useCurrentConnector'; export * from './useConnectors'; export * from './useDisconnect'; export * from './useIsConnected'; diff --git a/packages/react/src/providers/FuelProvider.tsx b/packages/react/src/providers/FuelProvider.tsx index 612097e0..de8fae5e 100644 --- a/packages/react/src/providers/FuelProvider.tsx +++ b/packages/react/src/providers/FuelProvider.tsx @@ -7,6 +7,7 @@ import type { NetworkConfig, UIConfig } from '../types'; import { BridgeDialog } from '../ui/Connect/components/Bridge/BridgeDialog'; import { NetworkDialog } from '../ui/Connect/components/Network/NetworkDialog'; import { useNetworkConfigs } from '../ui/Connect/hooks/useNetworkConfigs'; +import { WebWallet } from '../ui/WebWallet'; import { FuelHooksProvider } from './FuelHooksProvider'; import { FuelUIProvider, type FuelUIProviderProps } from './FuelUIProvider'; @@ -15,6 +16,7 @@ export { useConnectUI } from './FuelUIProvider'; type FuelProviderProps = { ui?: boolean; + showWebWallet?: boolean; uiConfig?: UIConfig; fuelConfig?: FuelConfig; networks?: Array; @@ -26,6 +28,7 @@ export function FuelProvider({ fuelConfig, uiConfig: _uiConfig, ui = true, + showWebWallet = false, networks: _networks, }: FuelProviderProps) { const theme = _theme || 'light'; @@ -49,6 +52,7 @@ export function FuelProvider({ uiConfig={uiConfig} > + {showWebWallet && } {networks != null && } {uiConfig.suggestBridge && } {children} diff --git a/packages/react/src/providers/FuelUIProvider.tsx b/packages/react/src/providers/FuelUIProvider.tsx index 5ab7d17e..c50a7726 100644 --- a/packages/react/src/providers/FuelUIProvider.tsx +++ b/packages/react/src/providers/FuelUIProvider.tsx @@ -9,11 +9,11 @@ import { useState, } from 'react'; -import { useConnect } from '../hooks/useConnect'; -import { useConnectors } from '../hooks/useConnectors'; - +import { Theme, type ThemeProps } from '@fuels/ui'; import { NATIVE_CONNECTORS } from '../config'; import { useIsConnected } from '../hooks'; +import { useConnect } from '../hooks/useConnect'; +import { useConnectors } from '../hooks/useConnectors'; import type { UIConfig } from '../types'; import { isNativeConnector } from '../utils'; @@ -174,6 +174,10 @@ export function FuelUIProvider({ return isLoadingConnectors || hasLoadedConnectors; }, [connectors, isLoadingConnectors, fuelConfig]); + const _dsTheme: ThemeProps = { + hasBackground: false, + appearance: theme === 'dark' ? 'dark' : 'light', + }; const handleConnect = useCallback(() => { setConnector(null); setError(null); diff --git a/packages/react/src/ui/WebWallet/components/Anchor/index.tsx b/packages/react/src/ui/WebWallet/components/Anchor/index.tsx new file mode 100644 index 00000000..cdad4fbf --- /dev/null +++ b/packages/react/src/ui/WebWallet/components/Anchor/index.tsx @@ -0,0 +1,32 @@ +import { Button } from '@fuels/ui'; +import { IconWallet } from '@tabler/icons-react'; +import React from 'react'; + +export interface AnchorProps { + address: string; + onClick?: () => void; + isLoading: boolean; + isConnected: boolean; +} + +const AnchorComponent = ( + { address, onClick, isLoading, isConnected }: AnchorProps, + ref: React.ForwardedRef | null, +) => { + return ( + + ); +}; + +export const Anchor = React.forwardRef(AnchorComponent); diff --git a/packages/react/src/ui/WebWallet/components/Assets/index.tsx b/packages/react/src/ui/WebWallet/components/Assets/index.tsx new file mode 100644 index 00000000..472c273d --- /dev/null +++ b/packages/react/src/ui/WebWallet/components/Assets/index.tsx @@ -0,0 +1,86 @@ +import { + Card, + EntityItem, + EntityItemInfo, + EntityItemSlot, + HStack, + Icon, + Text, + Tooltip, + VStack, +} from '@fuels/ui'; +import { IconCoins } from '@tabler/icons-react'; +import { useBalanceFormat } from '../../hooks/useBalanceFormat'; +import type { IAssetsBalance } from '../../types'; +import { AvatarGenerated } from '../AvatarGenerated'; + +export interface AssetsProps { + assets: IAssetsBalance[]; + hideAmount: boolean; +} + +export const Assets = ({ assets, hideAmount }: AssetsProps) => { + return ( + + + + + Assets + + + + {assets.map((asset) => { + const { formattedBalance, formattedBalanceFull } = useBalanceFormat( + asset.amount, + asset.decimals, + ); + const valueOrHidden = hideAmount ? '•'.repeat(5) : formattedBalance; + const tokenOrId = asset.symbol === 'UNK' ? asset.id : asset.symbol; + + return ( + + + + + + + + {asset.name} + + ) as string & React.ReactElement + } + /> + + + + + {valueOrHidden} + + + + + ); + })} + + + ); +}; diff --git a/packages/react/src/ui/WebWallet/components/AvatarGenerated/index.tsx b/packages/react/src/ui/WebWallet/components/AvatarGenerated/index.tsx new file mode 100644 index 00000000..8f458d1d --- /dev/null +++ b/packages/react/src/ui/WebWallet/components/AvatarGenerated/index.tsx @@ -0,0 +1,24 @@ +import { Avatar, type AvatarProps } from '@fuels/ui'; +import { useGenerateBackground } from '../../hooks/useGenerateBackground'; + +export type AvatarGeneratedProps = { hash: string } & Omit< + AvatarProps, + 'fallback' +>; + +const GeneratedFallback = ({ hash }: { hash: string }) => { + return ( +
+ ); +}; + +export const AvatarGenerated = ({ hash, ...props }: AvatarGeneratedProps) => { + return ( + } /> + ); +}; diff --git a/packages/react/src/ui/WebWallet/components/Balance/index.tsx b/packages/react/src/ui/WebWallet/components/Balance/index.tsx new file mode 100644 index 00000000..4076bc00 --- /dev/null +++ b/packages/react/src/ui/WebWallet/components/Balance/index.tsx @@ -0,0 +1,72 @@ +import { HStack, Icon, Text, Tooltip, VStack } from '@fuels/ui'; +import { IconEye, IconEyeClosed } from '@tabler/icons-react'; +import type { BN } from 'fuels'; +import { useBalanceFormat } from '../../hooks/useBalanceFormat'; + +export interface BalanceProps { + value: BN; + decimals: number; + toggleHideAmount: () => void; + hideAmount: boolean; +} + +export const Balance = ({ + value, + decimals, + toggleHideAmount, + hideAmount, +}: BalanceProps) => { + const { formattedBalance, formattedBalanceFull } = useBalanceFormat( + value, + decimals, + ); + const normalProps = { + value: formattedBalance, + icon: IconEye, + tooltip: formattedBalanceFull, + }; + const hiddenProps = { + value: '•'.repeat(5), + icon: IconEyeClosed, + tooltip: 'Hidden balance', + }; + const props = hideAmount ? hiddenProps : normalProps; + + return ( + + + Balance + + + + ETH + + + + {props.value} + + + + + + ); +}; diff --git a/packages/react/src/ui/WebWallet/components/DisconnectButton/index.tsx b/packages/react/src/ui/WebWallet/components/DisconnectButton/index.tsx new file mode 100644 index 00000000..f0856c8d --- /dev/null +++ b/packages/react/src/ui/WebWallet/components/DisconnectButton/index.tsx @@ -0,0 +1,21 @@ +import { Button } from '@fuels/ui'; +import { IconLogout } from '@tabler/icons-react'; + +export interface DisconnectButtonProps { + disconnect: () => void; +} + +export const DisconnectButton = ({ disconnect }: DisconnectButtonProps) => { + return ( + + ); +}; diff --git a/packages/react/src/ui/WebWallet/components/Footer/index.tsx b/packages/react/src/ui/WebWallet/components/Footer/index.tsx new file mode 100644 index 00000000..82658e33 --- /dev/null +++ b/packages/react/src/ui/WebWallet/components/Footer/index.tsx @@ -0,0 +1,21 @@ +import { Container, Flex, Icon } from '@fuels/ui'; +import { IconX } from '@tabler/icons-react'; +import { DisconnectButton } from '../DisconnectButton'; +import { HistoryButton } from '../HistoryButton'; + +export interface FooterProps { + address: string; + disconnect: () => void; +} + +export const Footer = ({ address, disconnect }: FooterProps) => { + return ( + + + + + + + + ); +}; diff --git a/packages/react/src/ui/WebWallet/components/Header/index.tsx b/packages/react/src/ui/WebWallet/components/Header/index.tsx new file mode 100644 index 00000000..6c3edb07 --- /dev/null +++ b/packages/react/src/ui/WebWallet/components/Header/index.tsx @@ -0,0 +1,18 @@ +import { EntityItem, EntityItemInfo, EntityItemSlot } from '@fuels/ui'; +import { AvatarGenerated } from '../AvatarGenerated'; + +export interface HeaderProps { + address: string; + title?: string; +} + +export const Header = ({ address, title }: HeaderProps) => { + return ( + + + + + + + ); +}; diff --git a/packages/react/src/ui/WebWallet/components/HistoryButton/index.tsx b/packages/react/src/ui/WebWallet/components/HistoryButton/index.tsx new file mode 100644 index 00000000..ce60f372 --- /dev/null +++ b/packages/react/src/ui/WebWallet/components/HistoryButton/index.tsx @@ -0,0 +1,20 @@ +import { Button } from '@fuels/ui'; +import { IconHistory } from '@tabler/icons-react'; + +export const HistoryButton = ({ address }: { address: string }) => { + return ( + + ); +}; diff --git a/packages/react/src/ui/WebWallet/components/ScrollableContent/index.tsx b/packages/react/src/ui/WebWallet/components/ScrollableContent/index.tsx new file mode 100644 index 00000000..2baf94b7 --- /dev/null +++ b/packages/react/src/ui/WebWallet/components/ScrollableContent/index.tsx @@ -0,0 +1,34 @@ +import { Inset, ScrollArea, Separator, VStack } from '@fuels/ui'; +import type { IAssetsBalance } from '../../types'; +import { Assets } from '../Assets'; +import { Balance } from '../Balance'; + +export interface ScrollableContentProps { + mainAsset: IAssetsBalance; + assetsBalances: IAssetsBalance[]; + hideAmount: boolean; + toggleHideAmount: () => void; +} +export const ScrollableContent = ({ + mainAsset, + hideAmount, + toggleHideAmount, + assetsBalances, +}: ScrollableContentProps) => { + return ( + + + + + + + + + + ); +}; diff --git a/packages/react/src/ui/WebWallet/components/index.tsx b/packages/react/src/ui/WebWallet/components/index.tsx new file mode 100644 index 00000000..91e4009c --- /dev/null +++ b/packages/react/src/ui/WebWallet/components/index.tsx @@ -0,0 +1,9 @@ +export * from './Anchor'; +export * from './Assets'; +export * from './AvatarGenerated'; +export * from './Balance'; +export * from './DisconnectButton'; +export * from './Footer'; +export * from './Header'; +export * from './HistoryButton'; +export * from './ScrollableContent'; diff --git a/packages/react/src/ui/WebWallet/hooks/index.ts b/packages/react/src/ui/WebWallet/hooks/index.ts new file mode 100644 index 00000000..fef19af3 --- /dev/null +++ b/packages/react/src/ui/WebWallet/hooks/index.ts @@ -0,0 +1,3 @@ +export * from './useAssetsBalance'; +export * from './useBalanceFormat'; +export * from './useGenerateBackground'; diff --git a/packages/react/src/ui/WebWallet/hooks/useAssetsBalance.ts b/packages/react/src/ui/WebWallet/hooks/useAssetsBalance.ts new file mode 100644 index 00000000..c24667b9 --- /dev/null +++ b/packages/react/src/ui/WebWallet/hooks/useAssetsBalance.ts @@ -0,0 +1,48 @@ +import { + assets as AssetsSDK, + bn, + getAssetFuel, + getDefaultChainId, +} from 'fuels'; +import { useNamedQuery } from '../../../core/useNamedQuery'; +import { useFuel } from '../../../providers'; +import { QUERY_KEYS } from '../../../utils'; +import type { IAssetsBalance } from '../types'; + +export const useAssetsBalance = () => { + const { fuel } = useFuel(); + + return useNamedQuery('assetsBalance', { + queryKey: QUERY_KEYS.assetsBalance(), + queryFn: async () => { + try { + const [assets, wallet] = await Promise.all([ + fuel.assets(), + fuel.getWallet((await fuel.currentAccount()) ?? ''), + ]); + const provider = wallet.provider; + + const fullAssets = [...assets, ...AssetsSDK]; + const { balances } = await wallet.getBalances(); + const chainId = provider.getChainId() ?? getDefaultChainId('fuel'); + + return balances.map((balance) => { + const asset = fullAssets + .map((a) => getAssetFuel(a, chainId)) + .find((a) => a?.assetId === balance.assetId); + return { + name: asset?.name ?? 'Unknown', + symbol: asset?.symbol ?? 'UNK', + icon: asset?.icon ?? '', + amount: balance.amount ?? bn(0), + id: balance.assetId, + decimals: asset?.decimals ?? 0, + } as IAssetsBalance; + }); + } catch (_error: unknown) { + return []; + } + }, + initialData: [], + }); +}; diff --git a/packages/react/src/ui/WebWallet/hooks/useBalanceFormat.ts b/packages/react/src/ui/WebWallet/hooks/useBalanceFormat.ts new file mode 100644 index 00000000..f8013def --- /dev/null +++ b/packages/react/src/ui/WebWallet/hooks/useBalanceFormat.ts @@ -0,0 +1,29 @@ +import { type BN, type FormatConfig, format } from 'fuels'; +import { useMemo } from 'react'; + +export const DEFAULT_MIN_PRECISION = 3; +export const DECIMAL_UNITS = 9; +export const formatOpts: FormatConfig = { + units: DECIMAL_UNITS, + precision: DECIMAL_UNITS, +}; + +export type IBalanceFormat = { + formattedBalance: string; + formattedBalanceFull: string; +}; +export const useBalanceFormat = (value: BN, decimals: number) => + useMemo( + () => ({ + formattedBalance: value.format({ + ...formatOpts, + precision: value.isZero() ? 1 : DEFAULT_MIN_PRECISION, + units: decimals, + }), + formattedBalanceFull: format(value, { + ...formatOpts, + units: decimals, + }), + }), + [value, decimals], + ); diff --git a/packages/react/src/ui/WebWallet/hooks/useGenerateBackground.ts b/packages/react/src/ui/WebWallet/hooks/useGenerateBackground.ts new file mode 100644 index 00000000..5aa0cf1a --- /dev/null +++ b/packages/react/src/ui/WebWallet/hooks/useGenerateBackground.ts @@ -0,0 +1,41 @@ +function getFixedGradientDirection(hash: string) { + const sum = hash + .slice(4, 7) + .split('') + .reduce((acc, char) => { + return acc + char.charCodeAt(0); + }, 0); + + return `${sum}deg`; +} + +function hashToGradient(hash: string): string { + let fixedHex = ''; + const length = hash?.length || 0; + if (length === 0) { + return '$cardBg'; + } + + for (let i = 0; i < length; i++) { + const char = hash.charAt(i); + if (/\d/.test(char)) { + fixedHex += char; + } + } + + if (fixedHex.length < 12) { + const diff = 12 - fixedHex.length; + for (let i = 0; i < diff; i++) { + fixedHex += '0'; + } + } + + const color1 = fixedHex.slice(0, 6); + const color2 = fixedHex.slice(6, 12); + const direction = getFixedGradientDirection(hash); + return `linear-gradient(${direction}, #${color1}, #${color2})`; +} + +export function useGenerateBackground(hash: string) { + return hashToGradient(hash); +} diff --git a/packages/react/src/ui/WebWallet/index.css b/packages/react/src/ui/WebWallet/index.css new file mode 100644 index 00000000..ed4a38d6 --- /dev/null +++ b/packages/react/src/ui/WebWallet/index.css @@ -0,0 +1,29 @@ + +/* Fix for popper content wrapper */ +[data-radix-popper-content-wrapper] { + @media (max-width: 1024px) { + transform: none !important; + bottom: 0px; + top: auto !important; + + & > .fuel-PopoverContent { + --radius-factor: 1.5; + --radius-full: 0px; + --radius-thumb: 9999px; + border-radius: var(--radius-6) var(--radius-6) 0 0; + height: 70vh; + max-height: 70vh; + width: 100vw; + max-width: 100%; + } + } + + @media (min-width: 1025px) { + & > .fuel-PopoverContent { + height: 50vh; + max-height: 50vh; + width: 370px; + max-width: 370px; + } + } +} diff --git a/packages/react/src/ui/WebWallet/index.tsx b/packages/react/src/ui/WebWallet/index.tsx new file mode 100644 index 00000000..5c1f4bae --- /dev/null +++ b/packages/react/src/ui/WebWallet/index.tsx @@ -0,0 +1,124 @@ +import { Inset, Popover, Separator, VStack, shortAddress } from '@fuels/ui'; +import { useEffect, useState } from 'react'; +import { + useAccount, + useCurrentConnector, + useDisconnect, + useIsConnected, +} from '../../hooks'; +import { Anchor, Footer, Header, ScrollableContent } from './components'; +import { useAssetsBalance } from './hooks'; +import { Overlay } from './styles'; +import type { IAssetsBalance } from './types'; + +import '@fuels/ui/styles.css'; +import './index.css'; + +export const WebWallet = () => { + const [address, setAddress] = useState(''); + const [mainAsset, setMainAsset] = useState({} as IAssetsBalance); + const [hideAmount, setHideAmount] = useState(false); + const [isFetchedBalance, setFetchedBalance] = useState(false); + + const { isConnected } = useIsConnected(); + const { disconnect } = useDisconnect(); + const { + account, + isFetched: isFetchedAccount, + refetch: refetchAccount, + } = useAccount(); + + const { + assetsBalance, + isFetched: isFetchedAssetsBalance, + refetch: refetchAssetsBalance, + } = useAssetsBalance(); + + const { + currentConnector: connector, + isFetched: isFetchedConnector, + refetch, + } = useCurrentConnector(); + + const toggleHideAmount = () => { + setHideAmount(!hideAmount); + }; + + useEffect(() => { + if (!isConnected) { + setAddress(''); + setMainAsset({} as IAssetsBalance); + setFetchedBalance(false); + } else { + refetch(); + refetchAccount(); + refetchAssetsBalance(); + setFetchedBalance(false); + } + }, [isConnected, refetch, refetchAccount, refetchAssetsBalance]); + + useEffect(() => { + if (assetsBalance.length > 0 && !isFetchedBalance) { + const asset = + assetsBalance.find((ab) => ab.symbol === 'ETH') ?? assetsBalance[0]; + setMainAsset(asset); + setFetchedBalance(true); + } + }, [assetsBalance, isFetchedBalance]); + + useEffect(() => { + if (isFetchedAccount && account && address === '') { + setAddress(account); + } + }, [account, isFetchedAccount, address]); + + const isLoading = + !isFetchedAccount || + !isFetchedAssetsBalance || + !isFetchedConnector || + !isFetchedBalance; + + // Fixes an issue where the Tooltip would be the focused element + const preventAutoFocus = (e: Event) => { + e.preventDefault(); + }; + + if (!isConnected) { + return null; + } + return ( + + + + + + + +
+ + + + + + + + + + +