feat: web wallet composite

.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

.changeset/little-crabs-travel.md

@@ -0,0 +1,5 @@
+---
+"@fuels/react": minor
+---
+
+Added a new hook to fetch the current connected connector `useCurrentConnector`

.changeset/poor-beers-march.md

@@ -0,0 +1,5 @@
+---
+"@fuels/react": minor
+---
+
+Added a component "WebWallet" to increase UX when using connectors

.changeset/weak-pots-fetch.md

@@ -0,0 +1,5 @@
+---
+"docs": minor
+---
+
+Added a new section on the docs for the hook `useCurrentConnector`

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",

examples/react-app/src/main.tsx

@@ -71,7 +71,12 @@ const FUEL_CONFIG = {
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
-      <FuelProvider theme="dark" networks={NETWORKS} fuelConfig={FUEL_CONFIG}>
+      <FuelProvider
+        theme="dark"
+        networks={NETWORKS}
+        fuelConfig={FUEL_CONFIG}
+        showWebWallet
+      >
         <Toast.Provider>
           <App />
           <Toast.Viewport
@@ -82,7 +87,7 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
         <ScreenSizeIndicator />
       </FuelProvider>
 
-      <ReactQueryDevtools initialIsOpen={false} />
+      <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" />
     </QueryClientProvider>
   </React.StrictMode>,
 );

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"
   }

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: {

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;

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"
   }
 }

packages/react/postcss.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    'tailwindcss/nesting': {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

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';

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<NetworkConfig>;
@@ -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}
         >
           <Connect />
+          {showWebWallet && <WebWallet />}
           {networks != null && <NetworkDialog theme={theme} />}
           {uiConfig.suggestBridge && <BridgeDialog theme={theme} />}
           {children}

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);

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<HTMLButtonElement> | null,
+) => {
+  return (
+    <Button
+      radius="full"
+      onClick={onClick}
+      leftIcon={IconWallet}
+      size={'2'}
+      isLoading={isLoading && isConnected}
+      disabled={!isConnected}
+      ref={ref}
+      color="gray"
+    >
+      {address && isConnected ? address : 'Connect your wallet'}
+    </Button>
+  );
+};
+
+export const Anchor = React.forwardRef(AnchorComponent);

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 (
+    <VStack
+      gap={{
+        md: '3',
+        initial: '2',
+      }}
+    >
+      <HStack gap="1" align="center">
+        <Icon icon={IconCoins} />
+        <Text
+          size={{
+            md: '3',
+            initial: '1',
+          }}
+          weight="medium"
+        >
+          Assets
+        </Text>
+      </HStack>
+      <VStack gap="1">
+        {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 (
+            <Card key={asset.id} variant="classic" p={'4'}>
+              <HStack align="center" justify="between">
+                <EntityItem key={asset.id}>
+                  <EntityItemSlot>
+                    <AvatarGenerated
+                      size="2"
+                      src={asset.icon}
+                      hash={asset.id}
+                    />
+                  </EntityItemSlot>
+                  <EntityItemInfo
+                    id={tokenOrId}
+                    title={
+                      (
+                        <Text size="2" color="gray" highContrast>
+                          {asset.name}
+                        </Text>
+                      ) as string & React.ReactElement
+                    }
+                  />
+                </EntityItem>
+
+                <Tooltip content={formattedBalanceFull}>
+                  <Text size="2" weight="regular" color="gray" highContrast>
+                    {valueOrHidden}
+                  </Text>
+                </Tooltip>
+              </HStack>
+            </Card>
+          );
+        })}
+      </VStack>
+    </VStack>
+  );
+};

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 (
+    <div
+      className="h-full w-full rounded-full"
+      style={{
+        background: useGenerateBackground(hash),
+      }}
+    />
+  );
+};
+
+export const AvatarGenerated = ({ hash, ...props }: AvatarGeneratedProps) => {
+  return (
+    <Avatar {...props} size="4" fallback={<GeneratedFallback hash={hash} />} />
+  );
+};