@layerswap/wallet-fuel 1.0.0 → 1.1.1

package/README.md

@@ -0,0 +1,68 @@
+# @layerswap/wallet-fuel
+
+Fuel wallet provider for the Layerswap Widget. Enables Fuel blockchain wallet connections and transactions.
+
+## Installation
+
+```bash
+npm install @layerswap/wallet-fuel wagmi viem @wagmi/core @tanstack/react-query
+# or
+yarn add @layerswap/wallet-fuel wagmi viem @wagmi/core @tanstack/react-query
+# or
+pnpm add @layerswap/wallet-fuel wagmi viem @wagmi/core @tanstack/react-query
+```
+
+## Quick Start
+
+```tsx
+import { LayerswapProvider, Swap } from "@layerswap/widget";
+import { createFuelProvider } from "@layerswap/wallet-fuel";
+
+export default function Page() {
+  const fuelProvider = createFuelProvider();
+  
+  return (
+    <LayerswapProvider walletProviders={[fuelProvider]}>
+      <Swap />
+    </LayerswapProvider>
+  );
+}
+```
+
+## Usage
+
+Use `createFuelProvider()` to create a Fuel wallet provider:
+
+```tsx
+import { createFuelProvider } from "@layerswap/wallet-fuel";
+
+const fuelProvider = createFuelProvider({
+  // Custom configuration options
+});
+```
+
+## Documentation
+
+For detailed setup instructions, configuration options, and usage examples, see the [Fuel Wallet Provider documentation](https://docs.layerswap.io/integration/UI/Widget/WalletManagement/FuelProvider).
+
+## Features
+
+- Fuel wallet connection via Fuel SDK
+- Balance checking
+- Gas estimation
+- Address validation and utilities
+- Fuel transaction support
+- Integration with `@fuels/react` for React hooks
+
+## TypeScript
+
+This package includes TypeScript definitions. All types are exported from the main entry point.
+
+## License
+
+MIT
+
+## Repository
+
+[GitHub](https://github.com/layerswap/layerswapapp/tree/main/packages/wallets/fuel)
+

package/dist/esm/FuelProvider.js

@@ -6,9 +6,10 @@ import { FueletWalletConnector } from './connectors/fuelet-wallet';
 import { FuelWalletConnector } from './connectors/fuel-wallet';
 import { useSettingsState } from '@layerswap/widget/internal';
 import { NetworkType } from '@layerswap/widget/types';
-import { useMemo } from 'react';
+import { useMemo, useContext } from 'react';
+import { QueryClient, QueryClientContext, QueryClientProvider } from '@tanstack/react-query';
 const HOST_URL = 'https://api.bako.global';
-const FuelProviderWrapper = ({ children }) => {
+const Comp = ({ children }) => {
     const { networks } = useSettingsState();
     const fuelConfig = {
         connectors: [
@@ -24,4 +25,12 @@ const FuelProviderWrapper = ({ children }) => {
     })), [networks]);
     return (_jsx(FuelProvider, { uiConfig: { suggestBridge: false }, theme: 'dark', fuelConfig: fuelConfig, networks: fuelNetworks, children: children }));
 };
+const queryClient = new QueryClient();
+const FuelProviderWrapper = ({ children }) => {
+    const context = useContext(QueryClientContext);
+    if (context) {
+        return _jsx(Comp, { children: children });
+    }
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(Comp, { children: children }) }));
+};
 export default FuelProviderWrapper;

package/dist/esm/fuelBalanceProvider.js

@@ -46,14 +46,13 @@ export class FuelBalanceProvider extends BalanceProvider {
                         decimals: token.decimals,
                         isNativeCurrency: network.token?.symbol === token.symbol,
                         token: token.symbol,
-                        request_time: new Date().toJSON(),
-                        error: balance?.amount === undefined ? `Could not fetch balance for ${token.symbol}` : undefined
+                        request_time: new Date().toJSON()
                     };
                     balances.push(balanceObj);
                 }
             }
             catch (e) {
-                return network.tokens.map((currency) => (this.resolveTokenBalanceFetchError(e, currency, network)));
+                throw e;
             }
             return balances;
         };

package/dist/esm/fuelGasProvider.js

@@ -1,5 +1,5 @@
 import WatchdogAbi from './jsons/FUELWATCHDOG.json';
-import { KnownInternalNames, formatUnits } from "@layerswap/widget/internal";
+import { ErrorHandler, KnownInternalNames, formatUnits } from "@layerswap/widget/internal";
 export class FuelGasProvider {
     supportsNetwork(network) {
         return (KnownInternalNames.Networks.FuelMainnet.includes(network.name) || KnownInternalNames.Networks.FuelTestnet.includes(network.name));
@@ -32,7 +32,14 @@ export class FuelGasProvider {
                 return { gas: formatedGas, token: network.token };
         }
         catch (e) {
-            console.log(e);
+            const error = e;
+            ErrorHandler({
+                type: "GasProviderError",
+                message: error.message,
+                name: error.name,
+                stack: error.stack,
+                cause: error.cause
+            });
         }
     }
 }

package/dist/esm/index.js

@@ -1,13 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { FuelAddressUtilsProvider } from "./fuelAddressUtilsProvider";
 import { FuelBalanceProvider } from "./fuelBalanceProvider";
 import { FuelGasProvider } from "./fuelGasProvider";
 import FuelProviderWrapper from "./FuelProvider";
 import useFuelConnection from "./useFuelConnection";
+import React from "react";
+import { useFuelTransfer } from "./transferProvider/useFuelTransfer";
+export function createFuelProvider(config = {}) {
+    const { customHook, balanceProviders, gasProviders, addressUtilsProviders, transferProviders } = config;
+    const WrapperComponent = ({ children }) => {
+        return (_jsx(FuelProviderWrapper, { children: children }));
+    };
+    const walletConnectionProvider = customHook || useFuelConnection;
+    const defaultBalanceProviders = [new FuelBalanceProvider()];
+    const finalBalanceProviders = balanceProviders !== undefined
+        ? (Array.isArray(balanceProviders) ? balanceProviders : [balanceProviders])
+        : defaultBalanceProviders;
+    const defaultGasProviders = [new FuelGasProvider()];
+    const finalGasProviders = gasProviders !== undefined
+        ? (Array.isArray(gasProviders) ? gasProviders : [gasProviders])
+        : defaultGasProviders;
+    const defaultAddressUtilsProviders = [new FuelAddressUtilsProvider()];
+    const finalAddressUtilsProviders = addressUtilsProviders !== undefined
+        ? (Array.isArray(addressUtilsProviders) ? addressUtilsProviders : [addressUtilsProviders])
+        : defaultAddressUtilsProviders;
+    const defaultTransferProviders = [useFuelTransfer];
+    const finalTransferProviders = transferProviders !== undefined
+        ? (Array.isArray(transferProviders) ? transferProviders : [transferProviders])
+        : defaultTransferProviders;
+    return {
+        id: "fuel",
+        wrapper: WrapperComponent,
+        walletConnectionProvider,
+        addressUtilsProvider: finalAddressUtilsProviders,
+        gasProvider: finalGasProviders,
+        balanceProvider: finalBalanceProviders,
+        transferProvider: finalTransferProviders,
+    };
+}
+/**
+ * @deprecated Use createFuelProvider() instead. This export will be removed in a future version.
+ */
 export const FuelProvider = {
     id: "fuel",
     wrapper: FuelProviderWrapper,
     walletConnectionProvider: useFuelConnection,
-    addressUtilsProvider: new FuelAddressUtilsProvider(),
-    balanceProvider: new FuelBalanceProvider(),
-    gasProvider: new FuelGasProvider(),
+    addressUtilsProvider: [new FuelAddressUtilsProvider()],
+    gasProvider: [new FuelGasProvider()],
+    balanceProvider: [new FuelBalanceProvider()],
+    transferProvider: [useFuelTransfer],
 };

package/dist/esm/transferProvider/useFuelTransfer.js

@@ -0,0 +1,57 @@
+import { ActionMessageType } from "@layerswap/widget/types";
+import { useFuel } from '@fuels/react';
+import { Provider } from '@fuel-ts/account';
+import { transactionBuilder } from "./transactionBuilder";
+import { KnownInternalNames } from "@layerswap/widget/internal";
+const supportedNetworks = [
+    KnownInternalNames.Networks.FuelTestnet,
+    KnownInternalNames.Networks.FuelDevnet,
+    KnownInternalNames.Networks.FuelMainnet
+];
+export function useFuelTransfer() {
+    const { fuel } = useFuel();
+    return {
+        supportsNetwork(network) {
+            return supportedNetworks.includes(network.name);
+        },
+        async executeTransfer(params) {
+            if (!fuel) {
+                throw new Error("Fuel not initialized");
+            }
+            const { callData, network, selectedWallet, swapId } = params;
+            const fuelProvider = new Provider(network.node_url);
+            const fuelWallet = await fuel.getWallet(selectedWallet.address, fuelProvider);
+            if (!fuelWallet) {
+                throw new Error("Fuel wallet not found");
+            }
+            try {
+                const scriptTransaction = await transactionBuilder({ fuelWallet, callData });
+                await fuelProvider.simulate(scriptTransaction);
+                const transactionResponse = await fuelWallet.sendTransaction(scriptTransaction);
+                if (swapId && transactionResponse) {
+                    return transactionResponse.id;
+                }
+                throw new Error("No transaction ID returned");
+            }
+            catch (error) {
+                const e = new Error();
+                e.message = error.message;
+                if (error.message === "The account(s) sending the transaction don't have enough funds to cover the transaction."
+                    || error.message === "the target cannot be met due to no coins available or exceeding the 255 coin limit.") {
+                    e.name = ActionMessageType.InsufficientFunds;
+                    throw e;
+                }
+                else if (error.message === "Request cancelled without user response!"
+                    || error.message === "User rejected the transaction!"
+                    || error.message === "User canceled sending transaction") {
+                    e.name = ActionMessageType.TransactionRejected;
+                    throw e;
+                }
+                else {
+                    e.name = ActionMessageType.UnexpectedErrorMessage;
+                    throw e;
+                }
+            }
+        }
+    };
+}

package/dist/esm/useFuelConnection.js

@@ -1,12 +1,11 @@
-import { useConnectors, useFuel as useGlobalFuel, } from '@fuels/react';
-import { FuelConnectorEventTypes, Provider, } from '@fuel-ts/account';
+import { useConnectors, useFuel as useGlobalFuel } from '@fuels/react';
+import { FuelConnectorEventTypes } from '@fuel-ts/account';
 import { Address } from '@fuel-ts/address';
 import { useWalletStore, sleep, KnownInternalNames } from "@layerswap/widget/internal";
 import { useEffect, useMemo } from "react";
-import { transactionBuilder } from "./services/transferService/transactionBuilder";
 import { BAKO_STATE } from "./connectors/bako-safe/Bako";
-import { TransactionMessageType } from "@layerswap/widget/types";
 import { resolveFuelWalletConnectorIcon } from './utils';
+import { useFuelTransfer } from './transferProvider/useFuelTransfer';
 export default function useFuelConnection({ networks }) {
     const commonSupportedNetworks = [
         KnownInternalNames.Networks.FuelTestnet,
@@ -51,7 +50,6 @@ export default function useFuelConnection({ networks }) {
                     await sleep(1000);
                     return await attemptConnection(true);
                 }
-                console.log(e);
                 throw new Error(e);
             }
         };
@@ -65,6 +63,7 @@ export default function useFuelConnection({ networks }) {
             await fuelConnector.disconnect();
         }
         catch (e) {
+            //TODO: handle error
             console.log(e);
         }
         finally {
@@ -81,6 +80,7 @@ export default function useFuelConnection({ networks }) {
             }
         }
         catch (e) {
+            //TODO: handle error
             console.log(e);
         }
     };
@@ -91,6 +91,7 @@ export default function useFuelConnection({ networks }) {
                 throw new Error('Could not switch account');
         }
         catch (e) {
+            //TODO: handle error
             console.log(e);
         }
     };
@@ -104,41 +105,11 @@ export default function useFuelConnection({ networks }) {
                 throw new Error('Could not switch chain');
         }
         catch (e) {
+            //TODO: handle error
             console.log(e);
         }
     };
-    const transfer = async (params) => {
-        const { callData, network, selectedWallet, swapId } = params;
-        const fuelProvider = new Provider(network.node_url);
-        const fuelWallet = await fuel.getWallet(selectedWallet.address, fuelProvider);
-        if (!fuelWallet)
-            throw Error("Fuel wallet not found");
-        try {
-            const scriptTransaction = await transactionBuilder({ fuelWallet, callData });
-            await fuelProvider.simulate(scriptTransaction);
-            const transactionResponse = await fuelWallet.sendTransaction(scriptTransaction);
-            if (swapId && transactionResponse) {
-                return transactionResponse.id;
-            }
-        }
-        catch (error) {
-            const e = new Error();
-            e.message = error.message;
-            if (error === "The account(s) sending the transaction don't have enough funds to cover the transaction."
-                || error === "the target cannot be met due to no coins available or exceeding the 255 coin limit.") {
-                error.name = TransactionMessageType.InsufficientFunds;
-                throw e;
-            }
-            else if (error === "Request cancelled without user response!" || error === "User rejected the transaction!" || error === "User canceled sending transaction") {
-                e.name = TransactionMessageType.TransactionRejected;
-                throw e;
-            }
-            else {
-                e.name = TransactionMessageType.UexpectedErrorMessage;
-                throw e;
-            }
-        }
-    };
+    const { executeTransfer: transfer } = useFuelTransfer();
     const connectedConnectors = useMemo(() => connectors.filter(w => w.connected), [connectors]);
     useEffect(() => {
         (async () => {
@@ -163,6 +134,7 @@ export default function useFuelConnection({ networks }) {
                 }
             }
             catch (e) {
+                //TODO: handle error
                 console.log(e);
             }
         }
@@ -205,6 +177,7 @@ export default function useFuelConnection({ networks }) {
         connectedWallets,
         name,
         id,
+        ready: connectors.length > 0
     };
     return provider;
 }