Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: make Web Wallet use styled components as well #281

Open
wants to merge 43 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
43 commits
Select commit Hold shift + click to select a range
8842243
feat: web wallet composite
leonardocbsr Sep 2, 2024
9333ef7
feature: components
leonardocbsr Sep 2, 2024
4222f76
feat: webwallet component
leonardocbsr Sep 5, 2024
79c9b97
chore: dark mode support
leonardocbsr Sep 6, 2024
5c7a4e7
chore: prevent auto focus
leonardocbsr Sep 6, 2024
5ffc446
chore: webwallet as a opt-in feat
leonardocbsr Sep 6, 2024
4a11ca8
Merge branch 'main' into feature/web-wallet-composite
leocourbassier Sep 6, 2024
ae0a86f
chore: make the webwallet look like fuels wallet
leonardocbsr Sep 6, 2024
d8f982e
chore: a few tweaks to the wallet
leonardocbsr Sep 6, 2024
f120616
doc: update changeset
leonardocbsr Sep 6, 2024
eaa5bb2
chore: refetch everything if connected again
leonardocbsr Sep 6, 2024
7efff84
chore: styles update
leonardocbsr Sep 13, 2024
1ceb2af
fix: change @fuels/ui package location
leonardocbsr Sep 13, 2024
137aea9
chore: update variant to outline
leonardocbsr Sep 13, 2024
593e681
Merge remote-tracking branch 'upstream/main' into feature/web-wallet-…
leonardocbsr Sep 13, 2024
c86683d
chore: a few tweaks to web wallet & cleanup
leonardocbsr Sep 18, 2024
10172a8
chore: bump @fuels/ui
leonardocbsr Sep 21, 2024
d3e6f82
Merge remote-tracking branch 'upstream/main' into feature/web-wallet-…
leonardocbsr Sep 21, 2024
7cf7357
chore: add fuels
leonardocbsr Sep 21, 2024
c466f79
feat: make web-wallet styledcomponents
LuizAsFight Sep 23, 2024
223b811
feat: add footer and other tweaks
leonardocbsr Sep 23, 2024
26bf7ae
fix: make tooltip hidden
leonardocbsr Sep 23, 2024
04744ba
chore: a few tweaks to web wallet
leonardocbsr Sep 24, 2024
6dcbc33
chore: fix fuels react's build
leonardocbsr Sep 24, 2024
d2e3dd6
Merge remote-tracking branch 'upstream/main' into lf/feat/remove-fuel…
leonardocbsr Sep 24, 2024
b55c0bb
chore: update lock
leonardocbsr Sep 24, 2024
d39e653
Merge branch 'main' into lf/feat/remove-fuels-ui-from-web-wallet
LuizAsFight Sep 24, 2024
8e0bdfe
chore: update react version to match fuels/react
leonardocbsr Sep 25, 2024
780add8
Merge remote-tracking branch 'upstream/main' into lf/feat/remove-fuel…
leonardocbsr Sep 25, 2024
786395b
chore: fix merge conflicts
leonardocbsr Sep 25, 2024
a317df7
chore: fix issues 292 & 293
leonardocbsr Sep 25, 2024
e956600
Merge remote-tracking branch 'upstream/main' into lf/feat/remove-fuel…
leonardocbsr Sep 26, 2024
4d99a29
chore: reconcile with main branch
leonardocbsr Sep 26, 2024
1315962
Merge remote-tracking branch 'upstream/main' into lf/feat/remove-fuel…
leonardocbsr Sep 27, 2024
4a58dbd
Merge remote-tracking branch 'upstream/main' into lf/feat/remove-fuel…
leonardocbsr Sep 30, 2024
fb7aab5
chore: fix conflicts with main branch
leonardocbsr Sep 30, 2024
1dfec1b
Merge branch 'main' into lf/feat/remove-fuels-ui-from-web-wallet
leocourbassier Sep 30, 2024
00accd1
Merge remote-tracking branch 'upstream/main' into lf/feat/remove-fuel…
leonardocbsr Oct 1, 2024
7a6153d
chore: reconcile with main branch
leonardocbsr Oct 1, 2024
456d823
chore: remove styled components from react
leonardocbsr Oct 2, 2024
dc1b9cf
fix: use right props for container
leonardocbsr Oct 2, 2024
41c6c5e
chore: inject styles in the UI Provider
leonardocbsr Oct 2, 2024
b15cdfc
Merge branch 'main' into lf/feat/remove-fuels-ui-from-web-wallet
leocourbassier Oct 2, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions .changeset/famous-falcons-punch.md
Original file line number Diff line number Diff line change
@@ -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
5 changes: 5 additions & 0 deletions .changeset/little-crabs-travel.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@fuels/react": minor
---

Added a new hook to fetch the current connected connector `useCurrentConnector`
5 changes: 5 additions & 0 deletions .changeset/poor-beers-march.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@fuels/react": minor
---

Added a component "WebWallet" to increase UX when using connectors
5 changes: 5 additions & 0 deletions .changeset/weak-pots-fetch.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"docs": minor
---

Added a new section on the docs for the hook `useCurrentConnector`
6 changes: 3 additions & 3 deletions examples/react-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion examples/react-app/src/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<ScreenSizeIndicator />
</FuelProvider>

<ReactQueryDevtools initialIsOpen={false} />
<ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" />
</QueryClientProvider>
</React.StrictMode>,
);
6 changes: 3 additions & 3 deletions examples/react-next/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,14 @@
"@wagmi/connectors": "5.1.7",
"fuels": "0.94.8",
"next": "14.2.3",
"react": "18.3.1",
"react-dom": "18.3.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"wagmi": "2.12.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"
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
2 changes: 1 addition & 1 deletion packages/fuel-wallet/src/FuelWalletConnector.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import {
} from './types';

export class FuelWalletConnector extends FuelConnector {
name = '';
name = 'Fuel Wallet';
connected = false;
installed = false;
external = false;
Expand Down
11 changes: 7 additions & 4 deletions packages/react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
}
}
},
"files": ["dist"],
"scripts": {
"build": "pnpm ts:check && tsup",
"build:watch": "tsup --watch",
Expand All @@ -32,14 +33,16 @@
},
"dependencies": {
"@radix-ui/react-dialog": "1.1.1",
"events": "3.3.0"
"@tabler/icons-react": "2.47.0",
"events": "^3.3.0"
},
"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",
"events": "3.3.0",
"fuels": "0.94.8",
"react": "18.3.1",
"react": "18.2.0",
"tsup": "7.3.0",
"tsx": "4.9.3",
"typescript": "5.4.5"
Expand Down
11 changes: 11 additions & 0 deletions packages/react/src/constants/themes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,25 @@ const shared = {
/* Fonts */
'--fuel-font-family':
'"Inter", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
'--fuel-font-size-lg': '24px',
'--fuel-font-size': '16px',
'--fuel-font-size-sm': '14px',
'--fuel-font-size-xs': '12px',
'--fuel-letter-spacing': '-0.64px',
'--fuel-letter-spacing-lg': '1.5px',
/* Spacing */
'--fuel-border-radius': '6px',
'--fuel-items-gap': '8px',
/* Border */
'--fuel-border': '1px solid var(--fuel-border-color)',
'--fuel-border-danger': '2px solid var(--fuel-red-3)',
'--fuel-color-error': '#f25a68',
} as React.CSSProperties;

const light = {
'--fuel-color': '#141414',
'--fuel-color-bold': '#000000',
'--fuel-color-muted': '#a5a3a3',
'--fuel-dialog-background': 'white',
'--fuel-overlay-background': 'rgba(71,88,107,0.24)',
'--fuel-connector-background': 'rgb(250 250 250)',
Expand All @@ -30,6 +35,8 @@ const light = {
'--fuel-green-11': '#008347',
'--fuel-blue-3': '#E6F4FE',
'--fuel-blue-11': '#0D74CE',
'--fuel-red-3': '#3B1219',
'--fuel-red-11': '#FF9592',
'--fuel-color-light-gray': 'rgb(83 79 79 / 84%)',
'--fuel-separator-color': 'rgb(83 79 79 / 13%)',
'--fuel-black-color': '#FFFFFF',
Expand All @@ -38,6 +45,7 @@ const light = {
const dark = {
'--fuel-color': '#e4e7e7',
'--fuel-color-bold': '#ffffff',
'--fuel-color-muted': '#808080',
'--fuel-dialog-background': 'rgb(25 26 26)',
'--fuel-overlay-background': 'rgba(20, 20, 20, 0.8)',
'--fuel-connector-background': 'rgba(255, 255, 255, 0.02)',
Expand All @@ -46,12 +54,15 @@ const dark = {
'--fuel-border-hover': 'hsla(0, 0%, 50%, 1)',
'--fuel-button-background': 'hsla(0, 0%, 30%, 1)',
'--fuel-button-background-hover': 'hsla(0, 0%, 40%, 1)',
'--fuel-card-background': '#242525',
'--fuel-loader-background':
'linear-gradient(to right, hsl(0, 0%, 20%) 8%, hsl(0, 0%, 25%) 18%, hsl(0, 0%, 20%) 33%)',
'--fuel-green-3': '#0F2E1B',
'--fuel-green-11': '#00DD75',
'--fuel-blue-3': '#0D2847',
'--fuel-blue-11': '#70B9FF',
'--fuel-red-3': '#B54548',
'--fuel-red-11': '#FF9592',
'--fuel-color-light-gray': 'rgb(165 165 165 / 84%)',
'--fuel-separator-color': 'rgb(165 165 165 / 13%)',
'--fuel-black-color': '#141414',
Expand Down
1 change: 1 addition & 0 deletions packages/react/src/hooks/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
8 changes: 5 additions & 3 deletions packages/react/src/providers/FuelProvider.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
import type { FuelConfig } from 'fuels';

import { Connect } from '../ui/Connect';

import { useMemo } from 'react';
import type { NetworkConfig, UIConfig } from '../types';
import { Connect } from '../ui/Connect';
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';

Expand All @@ -15,6 +14,7 @@ export { useConnectUI } from './FuelUIProvider';

type FuelProviderProps = {
ui?: boolean;
hideWebWallet?: boolean;
uiConfig?: UIConfig;
fuelConfig?: FuelConfig;
networks?: Array<NetworkConfig>;
Expand All @@ -26,6 +26,7 @@ export function FuelProvider({
fuelConfig,
uiConfig: _uiConfig,
ui = true,
hideWebWallet,
networks: _networks,
}: FuelProviderProps) {
const theme = _theme || 'light';
Expand All @@ -49,6 +50,7 @@ export function FuelProvider({
uiConfig={uiConfig}
>
<Connect />
{!hideWebWallet && <WebWallet />}
{networks != null && <NetworkDialog theme={theme} />}
{uiConfig.suggestBridge && <BridgeDialog theme={theme} />}
{children}
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/providers/FuelUIProvider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ export function FuelUIProvider({
const css = document.createElement('style');
css.appendChild(
document.createTextNode(
`@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,[email protected],100..900&display=swap"); .fuel-connectors * { box-sizing: border-box; } .fuel-connectors .fuel-connectors-dialog-content:focus { outline: none; } @media (max-width: 430px) { .fuel-connectors .fuel-connectors-dialog-content { top: 50%; width: 100%; border-radius: 36px; } } .fuel-connectors .fuel-connectors-connector-item { transition: background-color 50ms cubic-bezier(0.16, 1, 0.3, 1); background-color: var(--fuel-connector-background); } .fuel-connectors .fuel-connectors-connector-item:active { opacity: 0.8; } .fuel-connectors .fuel-connectors-connector-item:hover { background-color: var(--fuel-connector-hover); } .fuel-connectors .fuel-connectors-disclaimer-list > li { margin: 0.6em 0; } .fuel-connectors .fuel-connectors-connector-button { transition: background-color 50ms cubic-bezier(0.16, 1, 0.3, 1); background-color: var(--fuel-button-background); color: var(--fuel-color-bold); } .fuel-connectors .fuel-connectors-connector-button:visited { color: var(--fuel-color-bold); } .fuel-connectors .fuel-connectors-connector-button:hover { background-color: var(--fuel-button-background-hover); } .fuel-connectors .fuel-connectors-connector-button-primary { transition: background-color 50ms cubic-bezier(0.16, 1, 0.3, 1); background-color: var(--fuel-green-11); color: var(--fuel-black-color); } .fuel-connectors .fuel-connectors-connector-button-primary:visited { color: var(--fuel-black-color); } .fuel-connectors .fuel-connectors-connector-button-primary:hover { background-color: var(--fuel-green-11); } .fuel-connectors .fuel-connectors-back-icon { transition: background-color 50ms cubic-bezier(0.16, 1, 0.3, 1); } .fuel-connectors .fuel-connectors-back-icon[data-connector='false'] { visibility: hidden; } .fuel-connectors .fuel-connectors-back-icon:hover, .fuel-connectors .fuel-connectors-back-icon:active { opacity: 1; background-color: var(--fuel-connector-hover); } .fuel-connectors .fuel-connectors-close-icon { transition: background-color 50ms cubic-bezier(0.16, 1, 0.3, 1); } .fuel-connectors .fuel-connectors-close-icon:hover, .fuel-connectors .fuel-connectors-close-icon:active { opacity: 1; background-color: var(--fuel-connector-hover); } .fuel-connectors .fuel-connectors-button-base { cursor: pointer; } .fuel-connectors .fuel-connectors-button:disabled { cursor: not-allowed; } .fuel-connectors .fuel-connectors-button { transition: background-color 50ms cubic-bezier(0.16, 1, 0.3, 1); background-color: var(--fuel-green-11); } .fuel-connectors .fuel-connectors-button:disabled { background-color: var(--fuel-border-color); } .fuel-connectors .fuel-connectors-button-disconnect { transition: background-color 50ms cubic-bezier(0.16, 1, 0.3, 1); background-color: var(--fuel-button-background); } .fuel-connectors .fuel-connectors-button-disconnect:hover { background-color: var(--fuel-button-background-hover); } @keyframes fuelOverlayShow { from { opacity: 0; } to { opacity: 1; } } @keyframes fuelSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes fuelContentShow { from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @keyframes fuelLoader { 0% { background-position: -468px 0 } 100% { background-position: 468px 0 } }`,
`@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,[email protected],100..900&display=swap"); body { pointer-events: auto !important; } .fuel-connectors * { box-sizing: border-box; } .fuel-connectors .fuel-connectors-dialog-content:focus { outline: none; } @media (max-width: 430px) { .fuel-connectors .fuel-connectors-dialog-content { top: 50%; width: 100%; border-radius: 36px; } } .fuel-connectors .fuel-connectors-connector-item { transition: background-color 50ms cubic-bezier(0.16, 1, 0.3, 1); background-color: var(--fuel-connector-background); } .fuel-connectors .fuel-connectors-connector-item:active { opacity: 0.8; } .fuel-connectors .fuel-connectors-connector-item:hover { background-color: var(--fuel-connector-hover); } .fuel-connectors .fuel-connectors-disclaimer-list > li { margin: 0.6em 0; } .fuel-connectors .fuel-connectors-connector-button { transition: background-color 50ms cubic-bezier(0.16, 1, 0.3, 1); background-color: var(--fuel-button-background); color: var(--fuel-color-bold); } .fuel-connectors .fuel-connectors-connector-button:visited { color: var(--fuel-color-bold); } .fuel-connectors .fuel-connectors-connector-button:hover { background-color: var(--fuel-button-background-hover); } .fuel-connectors .fuel-connectors-connector-button-primary { transition: background-color 50ms cubic-bezier(0.16, 1, 0.3, 1); background-color: var(--fuel-green-11); color: var(--fuel-black-color); } .fuel-connectors .fuel-connectors-connector-button-primary:visited { color: var(--fuel-black-color); } .fuel-connectors .fuel-connectors-connector-button-primary:hover { background-color: var(--fuel-green-11); } .fuel-connectors-wallet-button-danger,.fuel-connectors-wallet-button-danger:visited { transition: background-color 50ms cubic-bezier(0.16, 1, 0.3, 1); background-color: var(--fuel-card-background); color: var(--fuel-red-11);border: var(--fuel-border-danger); } .fuel-connectors-wallet-button-danger:hover { background-color: var(--fuel-red-3);color: var(--fuel-color); } .fuel-connectors .fuel-connectors-back-icon { transition: background-color 50ms cubic-bezier(0.16, 1, 0.3, 1); } .fuel-connectors .fuel-connectors-back-icon[data-connector='false'] { visibility: hidden; } .fuel-connectors .fuel-connectors-back-icon:hover, .fuel-connectors .fuel-connectors-back-icon:active { opacity: 1; background-color: var(--fuel-connector-hover); } .fuel-connectors .fuel-connectors-close-icon { transition: background-color 50ms cubic-bezier(0.16, 1, 0.3, 1); } .fuel-connectors .fuel-connectors-close-icon:hover, .fuel-connectors .fuel-connectors-close-icon:active { opacity: 1; background-color: var(--fuel-connector-hover); } .fuel-connectors .fuel-connectors-button-base { cursor: pointer; } .fuel-connectors .fuel-connectors-button:disabled { cursor: not-allowed; } .fuel-connectors .fuel-connectors-button { transition: background-color 50ms cubic-bezier(0.16, 1, 0.3, 1); background-color: var(--fuel-green-11); } .fuel-connectors .fuel-connectors-button:disabled { background-color: var(--fuel-border-color); } .fuel-connectors .fuel-connectors-button-disconnect { transition: background-color 50ms cubic-bezier(0.16, 1, 0.3, 1); background-color: var(--fuel-button-background); } .fuel-connectors .fuel-connectors-button-disconnect:hover { background-color: var(--fuel-button-background-hover); } @keyframes fuelOverlayShow { from { opacity: 0; } to { opacity: 1; } } @keyframes fuelSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes fuelContentShow { from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @keyframes fuelLoader { 0% { background-position: -468px 0 } 100% { background-position: 468px 0 }} .fuel-connectors-wallet-scrollable::-webkit-scrollbar { width: 6px; background-color: transparent;} .fuel-connectors-wallet-scrollable::-webkit-scrollbar-track{background-color:transparent;} .fuel-connectors-wallet-scrollable::-webkit-scrollbar-thumb { background-color: var(--fuel-color-muted); opacity: 0.7; border: none; border-radius: 12px;} .fuel-connectors-wallet-scrollable::-webkit-scrollbar-thumb:hover { background-color: var(--fuel-color); } .fuel-connectors-wallet-dialog-content { bottom: 72px; right: 25px; width: 370px; maxWidth: 370px; border-radius: 36px; @media (max-width: 1024px) { bottom: 0px; right: 0px; width: 100vw; max-height: 100vh; max-width: 100%; border-radius: 36px 36px 0 0;}} .fuel-connectors-dialog-trigger[data-state="open"] { pointer-events: none; } .fuel-connectors-wallet-button-primary, .fuel-connectors-wallet-button-primary:visited { transition: background-color 50ms cubic-bezier(0.16, 1, 0.3, 1); background-color: var(--fuel-button-background); color: var(--fuel-color);}.fuel-connectors-wallet-button-primary:hover{ background-color: var(--fuel-button-background-hover);} .fuel-connectors-wallet-root > * {font-family: var(--fuel-font-family);}`,
),
);
document.head.appendChild(css);
Expand Down
107 changes: 107 additions & 0 deletions packages/react/src/ui/WebWallet/components/Assets/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
import { IconCoins } from '@tabler/icons-react';
import type { Network } from 'fuels';
import { useMemo } from 'react';
import { useProvider } from '../../../../hooks';
import {
type IAssetsBalance,
isUnknownAsset,
shortAddress,
} from '../../../../utils';
import { useNetworkConfigs } from '../../../Connect/hooks/useNetworkConfigs';
import { useBalanceFormat } from '../../hooks/useBalanceFormat';
import { Container } from '../../styles';
import { AvatarGenerated } from '../AvatarGenerated';
import { CopyButton } from '../CopyButton';
import {
AssetCard,
AssetCardAssetInfoName,
AssetCardAssetInfoSymbol,
AssetCardAssetInfoSymbolWrapper,
AssetCardAssetInfoWrapper,
AssetCardLeft,
AssetCardValue,
AssetsCardList,
AssetsTitle,
AssetsTitleWrapper,
AssetsWrapper,
NoAssetButton,
NoAssetDescription,
} from './styles';

export interface AssetsProps {
assets: IAssetsBalance[];
hideAmount: boolean;
}

export const AssetsList = ({ assets, hideAmount }: AssetsProps) => {
return (
<AssetsWrapper>
<AssetsTitleWrapper>
<IconCoins color="var(--fuel-green-11)" stroke={1.5} />
<AssetsTitle>Assets</AssetsTitle>
</AssetsTitleWrapper>
<AssetsCardList>
{assets.map((asset) => {
const { formattedBalance, formattedBalanceFull: _ } =
useBalanceFormat(asset);
const valueOrHidden = hideAmount ? '•'.repeat(5) : formattedBalance;

return (
<AssetCard key={asset.id}>
<AssetCardLeft>
<AvatarGenerated src={asset.icon} hash={asset.id} />
<AssetCardAssetInfoWrapper>
{!isUnknownAsset(asset) && (
<AssetCardAssetInfoName>
{asset?.name}
</AssetCardAssetInfoName>
)}
<AssetCardAssetInfoSymbolWrapper>
<AssetCardAssetInfoSymbol>
{isUnknownAsset(asset)
? shortAddress(asset.id)
: asset.symbol}
</AssetCardAssetInfoSymbol>
<CopyButton size={18} address={asset.id} />
</AssetCardAssetInfoSymbolWrapper>
</AssetCardAssetInfoWrapper>
</AssetCardLeft>
<AssetCardValue>{valueOrHidden}</AssetCardValue>
</AssetCard>
);
})}
</AssetsCardList>
</AssetsWrapper>
);
};

export const NoAssets = () => {
const { networks } = useNetworkConfigs();
const { provider } = useProvider();
const bridgeHref = useMemo(() => {
const network = networks.find((n) => n.chainId === provider?.getChainId());
if (!network) return;
if (!network.bridgeURL) return;
const url = new URL(network.bridgeURL);
url.searchParams.set('', 'true');
return url.toString();
}, [networks, provider]);

return (
<Container flexDirection="column" gap="16px">
<NoAssetDescription>
Looks like you don't have ETH balance, bridge funds to Fuel Ignition and
use the application without stopping.
</NoAssetDescription>
<NoAssetButton href={bridgeHref ?? ''} target="_blank">
Bridge now
</NoAssetButton>
</Container>
);
};

export const Assets = ({ assets, hideAmount }: AssetsProps) => {
if (assets.length === 0) return <NoAssets />;

return <AssetsList assets={assets} hideAmount={hideAmount} />;
};
Loading
Loading