Merge pull request #1110 from layerswap/dev-fuelWallet

Implement fuel wallet connect
layerswap · Nov 4, 2024 · 8aa68e0 · 8aa68e0
2 parents 6bdcea3 + eef880a
commit 8aa68e0
Show file tree

Hide file tree

Showing 33 changed files with 1,975 additions and 441 deletions.
diff --git a/Models/Network.ts b/Models/Network.ts
@@ -7,7 +7,8 @@ export enum NetworkType {
     Cosmos = "cosmos",
     StarkEx = "starkex",//TODO check this
     ZkSyncLite = "zksynclite",
-    TON = 'ton'
+    TON = 'ton',
+    Fuel = 'fuel',
 }
 
 export class Network {

diff --git a/components/HeaderWithMenu/index.tsx b/components/HeaderWithMenu/index.tsx
@@ -6,7 +6,6 @@ import { ArrowLeft } from 'lucide-react'
 import ChatIcon from "../icons/ChatIcon"
 import dynamic from "next/dynamic"
 import LayerswapMenu from "../LayerswapMenu"
-import { useRouter } from "next/router"
 import { useQueryState } from "../../context/query"
 
 const WalletsHeader = dynamic(() => import("../ConnectedWallets").then((comp) => comp.WalletsHeader), {
@@ -18,7 +17,6 @@ function HeaderWithMenu({ goBack }: { goBack: (() => void) | undefined | null })
    const { boot, show, update } = useIntercom()
    const updateWithProps = () => update({ userId, customAttributes: { email: email, } })
    const query = useQueryState()
-   const router = useRouter()
 
    return (
       <div className="w-full grid grid-cols-5 px-6 mt-3 pb-2" >

diff --git a/components/Input/Address/AddressPicker/index.tsx b/components/Input/Address/AddressPicker/index.tsx
@@ -61,7 +61,7 @@ const AddressPicker: FC<Input> = forwardRef<HTMLInputElement, Input>(function Ad
 
     const provider = useMemo(() => {
         if (destinationExchange) return undefined
-        
+
         return values?.to && getProvider(values?.to)
     }, [values?.to, getProvider, destinationExchange])
 
@@ -169,13 +169,24 @@ const AddressPicker: FC<Input> = forwardRef<HTMLInputElement, Input>(function Ad
 
                                 {
                                     destinationExchange ?
-                                        <ExchangeNote destination={destination} destinationAsset={destinationAsset} destinationExchange={destinationExchange} />
+                                        <ExchangeNote
+                                            destination={destination}
+                                            destinationAsset={destinationAsset}
+                                            destinationExchange={destinationExchange}
+                                        />
                                         :
                                         !disabled
                                         && destination
                                         && provider
                                         && !manualAddress &&
-                                        <ConnectWalletButton provider={provider} connectedWallet={connectedWallet} onClick={() => { connectedWallet && handleSelectAddress(connectedWallet.address) }} onConnect={() => setIsConnecting(true)} destination={destination} destination_address={destination_address} />
+                                        <ConnectWalletButton
+                                            provider={provider}
+                                            connectedWallet={connectedWallet}
+                                            onClick={() => { connectedWallet && handleSelectAddress(connectedWallet.address) }}
+                                            onConnect={() => setIsConnecting(true)}
+                                            destination={destination}
+                                            destination_address={destination_address}
+                                        />
                                 }
 
                                 {

diff --git a/components/Swap/Form/Form.tsx b/components/Swap/Form/Form.tsx
@@ -25,7 +25,7 @@ import CEXNetworkFormField from "../../Input/CEXNetworkFormField";
 import { RouteNetwork } from "../../../Models/Network";
 import { resolveExchangesURLForSelectedToken } from "../../../helpers/routes";
 import ValidationError from "../../validationError";
-import { ImtblPassportProvider } from "../../ImtblPassportProvider";
+import { ImtblPassportProvider } from "../../WalletProviders/ImtblPassportProvider";
 import { Exchange, ExchangeToken } from "../../../Models/Exchange";
 import { resolveRoutesURLForSelectedToken } from "../../../helpers/routes";
 import { useValidationContext } from "../../../context/validationErrorContext";

diff --git a/components/SwapWithdrawal.tsx b/components/SwapWithdrawal.tsx
@@ -4,7 +4,7 @@ import SwapDetails from "./Swap";
 import { Widget } from "./Widget/Index";
 import NotFound from "./Swap/NotFound";
 import { BalancesDataProvider } from "../context/balances";
-import { ImtblPassportProvider } from "./ImtblPassportProvider";
+import { ImtblPassportProvider } from "./WalletProviders/ImtblPassportProvider";
 
 const SwapWithdrawal: FC = () => {
     const { swapResponse: swap, swapApiError } = useSwapDataState()

diff --git a/components/WalletProviders/FuelProvider.tsx b/components/WalletProviders/FuelProvider.tsx
@@ -0,0 +1,44 @@
+
+import { defaultConnectors } from '@fuels/connectors';
+import { FuelProvider } from '@fuels/react';
+import { CHAIN_IDS, Provider } from '@fuel-ts/account';
+import { useConfig } from 'wagmi';
+import KnownInternalNames from '../../lib/knownIds';
+import { useSettingsState } from '../../context/settings';
+
+const FuelProviderWrapper = ({
+    children,
+}: { children: React.ReactNode }) => {
+
+    const WALLETCONNECT_PROJECT_ID = process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID || '28168903b2d30c75e5f7f2d71902581b';
+    const config = useConfig()
+    const { networks } = useSettingsState()
+
+    const network = networks.find(network => network.name === KnownInternalNames.Networks.FuelMainnet || network.name === KnownInternalNames.Networks.FuelTestnet)
+    const isMainnet = network?.name === KnownInternalNames.Networks.FuelMainnet
+
+    if (!network)
+        return <FuelProvider theme='dark' fuelConfig={{
+            connectors: defaultConnectors({ devMode: false, wcProjectId: WALLETCONNECT_PROJECT_ID }),
+        }}>
+            {children}
+        </FuelProvider>
+
+    const fuelConfig = {
+        connectors: defaultConnectors({
+            devMode: false,
+            wcProjectId: WALLETCONNECT_PROJECT_ID,
+            chainId: isMainnet ? CHAIN_IDS.fuel.mainnet : CHAIN_IDS.fuel.testnet,
+            fuelProvider: Provider.create(network?.node_url),
+            ethWagmiConfig: config
+        }),
+    };
+
+    return (
+        <FuelProvider uiConfig={{ suggestBridge: false }} theme={'dark'} fuelConfig={fuelConfig}>
+            {children}
+        </FuelProvider>
+    );
+};
+
+export default FuelProviderWrapper;
diff --git a/components/ImtblPassportProvider.tsx → ...WalletProviders/ImtblPassportProvider.tsx b/components/ImtblPassportProvider.tsx → ...WalletProviders/ImtblPassportProvider.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from "react"
-import { Network } from "../Models/Network";
+import { Network } from "../../Models/Network";
 import { useRouter } from "next/router";
 
 const PUBLISHABLE_KEY = process.env.NEXT_PUBLIC_IMMUTABLE_PUBLISHABLE_KEY;

diff --git a/components/RainbowKit.tsx → components/WalletProviders/RainbowKit.tsx b/components/RainbowKit.tsx → components/WalletProviders/RainbowKit.tsx
@@ -1,18 +1,18 @@
 
 import '@rainbow-me/rainbowkit/styles.css';
-import { useSettingsState } from "../context/settings";
+import { useSettingsState } from "../../context/settings";
 import {
     AvatarComponent,
     connectorsForWallets,
     darkTheme,
     DisclaimerComponent,
     RainbowKitProvider,
 } from '@rainbow-me/rainbowkit';
-import { NetworkType } from "../Models/Network";
-import resolveChain from "../lib/resolveChain";
+import { NetworkType } from "../../Models/Network";
+import resolveChain from "../../lib/resolveChain";
 import React from "react";
-import AddressIcon from "./AddressIcon";
-import NetworkSettings from "../lib/NetworkSettings";
+import AddressIcon from "../AddressIcon";
+import NetworkSettings from "../../lib/NetworkSettings";
 import { WagmiProvider } from 'wagmi'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { argentWallet, bitgetWallet, coinbaseWallet, injectedWallet, metaMaskWallet, phantomWallet, rainbowWallet, walletConnectWallet } from '@rainbow-me/rainbowkit/wallets';

diff --git a/components/SolanaProvider.tsx → ...onents/WalletProviders/SolanaProvider.tsx b/components/SolanaProvider.tsx → ...onents/WalletProviders/SolanaProvider.tsx
diff --git a/components/TonConnectProvider.tsx → ...ts/WalletProviders/TonConnectProvider.tsx b/components/TonConnectProvider.tsx → ...ts/WalletProviders/TonConnectProvider.tsx
@@ -1,5 +1,5 @@
 import { THEME, TonConnectUIProvider } from "@tonconnect/ui-react"
-import { ThemeData } from "../Models/Theme";
+import { ThemeData } from "../../Models/Theme";
 
 const TonConnectProvider = ({ children, basePath, themeData, appName }: { children: JSX.Element | JSX.Element[], basePath: string, themeData: ThemeData, appName: string | undefined }) => {
 

diff --git a/components/WalletProviders/index.tsx b/components/WalletProviders/index.tsx
@@ -0,0 +1,32 @@
+import { FC } from "react"
+import TonConnectProvider from "./TonConnectProvider"
+import RainbowKit from "./RainbowKit"
+import SolanaProvider from "./SolanaProvider"
+import { ThemeData } from "../../Models/Theme"
+import dynamic from "next/dynamic"
+
+const FuelProviderWrapper = dynamic(() => import("./FuelProvider").then((comp) => comp.default), {
+    loading: () => null
+})
+
+const WalletsProviders: FC<{ children: JSX.Element | JSX.Element[], basePath: string, themeData: ThemeData, appName: string | undefined }> = ({ children, basePath, themeData, appName }) => {
+    return (
+        <TonConnectProvider basePath={basePath} themeData={themeData} appName={appName}>
+            <RainbowKit>
+                <SolanaProvider>
+                    {
+                        FuelProviderWrapper ?
+                            <FuelProviderWrapper>
+                                {children}
+                            </FuelProviderWrapper> :
+                            <>
+                                {children}
+                            </>
+                    }
+                </SolanaProvider>
+            </RainbowKit>
+        </TonConnectProvider>
+    )
+}
+
+export default WalletsProviders
diff --git a/components/buttons/connectButton.tsx b/components/buttons/connectButton.tsx
@@ -48,6 +48,11 @@ const ConnectButton = ({
             id: "solana",
             type: NetworkType.Solana,
         },
+        {
+            name: "Fuel",
+            id: "fuel",
+            type: NetworkType.Fuel,
+        },
     ];
     const filteredConnectors = knownConnectors.filter(
         (c) => !wallets.map((w) => w?.providerName).includes(c.id)

diff --git a/components/icons/ConnectorIcons.tsx b/components/icons/ConnectorIcons.tsx
@@ -10,6 +10,9 @@ import OpenMask from "../icons/Wallets/OpenMask";
 import Phantom from "../icons/Wallets/Phantom";
 import CoinbaseIcon from "../icons/Wallets/Coinbase";
 import GlowIcon from "../icons/Wallets/Glow";
+import Fuel from "./Wallets/Fuel";
+import BakoSafe from "./Wallets/BakoSafe";
+import Ethereum from "./Wallets/Ethereum";
 
 export const ResolveConnectorIcon = ({
     connector,
@@ -59,6 +62,15 @@ export const ResolveConnectorIcon = ({
                     {children}
                 </div>
             );
+        case KnownConnectors.Fuel:
+            return (
+                <div className={className ?? "-space-x-2 flex"}>
+                    <Fuel className={iconClassName} />
+                    <BakoSafe className={iconClassName} />
+                    <Ethereum className={iconClassName} />
+                    {children}
+                </div>
+            );
         default:
             return <></>;
     }
@@ -69,5 +81,6 @@ const KnownConnectors = {
     EVM: "evm",
     TON: "ton",
     Solana: "solana",
-    Glow: "glow"
+    Glow: "glow",
+    Fuel: "fuel",
 };
diff --git a/components/icons/Wallets/BakoSafe.tsx b/components/icons/Wallets/BakoSafe.tsx
@@ -0,0 +1,23 @@
+import { SVGProps } from "react"
+
+const BakoSafe = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none" {...props}>
+    <rect width="50" height="50" fill="url(#paint0_linear_97_19)" />
+    <mask id="mask0_97_19" style={{ "maskType": "luminance" }} maskUnits="userSpaceOnUse" x="13" y="5" width="24" height="40">
+        <path d="M37 5H13V45H37V5Z" fill="white" />
+    </mask>
+    <g mask="url(#mask0_97_19)">
+        <path d="M13 25.9167L37 37.8671L25.0024 18.9893L13 25.9167Z" fill="#F5F5F5" />
+        <path d="M33.8864 22.2182L24.9976 17.0865V5.13574L13 12.0628V25.916L24.9976 18.9889V30.9396L13 37.8668L24.9976 44.7938L36.9952 37.8668V27.6033C36.9952 25.3816 35.8098 23.3291 33.8864 22.2182Z" fill="#1E1F22" />
+    </g>
+    <defs>
+        <linearGradient id="paint0_linear_97_19" x1="0" y1="0" x2="50" y2="50" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#FFC010" />
+            <stop offset="0.48" stopColor="#EBA312" />
+            <stop offset="0.71" stopColor="#D38015" />
+            <stop offset="0.99" stopColor="#B24F18" />
+        </linearGradient>
+    </defs>
+</svg>
+
+
+export default BakoSafe;
diff --git a/components/icons/Wallets/Ethereum.tsx b/components/icons/Wallets/Ethereum.tsx
@@ -0,0 +1,12 @@
+import { SVGProps } from "react"
+
+const Ethereum = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" fill="none" {...props}>
+    <path d="M253 335.122L255.886 338L388 259.987L255.886 41L253 50.7983V335.122Z" fill="#343434" />
+    <path d="M256 338V41L124 259.986L256 338Z" fill="#8C8C8C" />
+    <path d="M254 465.281L255.628 470L388 285L255.629 362.563L254.001 364.532L254 465.281Z" fill="#3C3C3B" />
+    <path d="M124 285L256 470V362.562L124 285Z" fill="#8C8C8C" />
+    <path d="M256 200V338L388 259.988L256 200Z" fill="#141414" />
+    <path d="M256 200L124 259.988L256 338V200Z" fill="#393939" />
+</svg>
+
+export default Ethereum;
diff --git a/components/icons/Wallets/Fuel.tsx b/components/icons/Wallets/Fuel.tsx
@@ -0,0 +1,12 @@
+import { SVGProps } from "react"
+
+const Fuel = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width="350" height="350" viewBox="0 0 350 350" fill="none" {...props}>
+    <rect width="350" height="350" fill="#00F58C" />
+    <path d="M23.2742 0C17.1029 -3.70471e-07 11.1842 2.45098 6.81969 6.814C2.45517 11.177 0.00213836 17.0948 0 23.2661V350H289.589C299.389 349.999 308.787 346.106 315.718 339.177L339.177 315.718C342.609 312.287 345.331 308.213 347.188 303.73C349.045 299.247 350 294.441 350 289.589V0H23.2742Z" fill="#00F58C" />
+    <path d="M228.524 45L114.702 158.823C111.875 161.645 108.043 163.232 104.048 163.234C101.195 163.234 98.3999 162.423 95.9887 160.897C93.5774 159.371 91.6489 157.192 90.4275 154.613L46.3307 61.379C45.504 59.6297 45.133 57.6997 45.2523 55.7685C45.3715 53.8373 45.9772 51.9676 47.0128 50.3333C48.0485 48.6989 49.4805 47.353 51.1759 46.4205C52.8713 45.4881 54.7749 44.9994 56.7097 45H228.524Z" fill="black" />
+    <path d="M45 305V194.25C45.0021 191.413 46.1306 188.693 48.1373 186.688C50.144 184.683 52.8648 183.556 55.7016 183.556H166.444L45 305Z" fill="black" />
+    <path d="M175.589 163.234H138.919L249.25 52.9113C251.756 50.4036 254.732 48.4142 258.007 47.0567C261.283 45.6993 264.793 45.0004 268.339 45H305L194.678 155.331C189.612 160.389 182.747 163.231 175.589 163.234Z" fill="black" />
+</svg>
+
+
+export default Fuel;
diff --git a/components/icons/Wallets/Fuelet.tsx b/components/icons/Wallets/Fuelet.tsx
@@ -0,0 +1,7 @@
+import { SVGProps } from "react"
+
+const Fuelet = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none" {...props}>
+    <path d="M20 40C14.9355 40 10.3145 38.114 6.7905 35.0105L18.146 26.907C18.845 26.4085 19.8065 26.9645 19.722 27.8195L19.2745 32.3605C19.182 33.295 20.3125 33.8295 20.9765 33.1655L27.071 27.071C31.062 23.08 30.9745 16.5555 26.8085 12.6755C22.8405 8.98 16.5935 9.264 12.7595 13.0985L6.853 19.0045C6.187 19.671 6.7275 20.8045 7.6645 20.7065L12.209 20.231C13.0655 20.1415 13.6275 21.105 13.127 21.8065L4.9895 33.2095C1.886 29.6855 0 25.0645 0 20C0 8.9545 8.9545 0 20 0C31.0455 0 40 8.9545 40 20C40 31.0455 31.0455 40 20 40Z" fill="white" />
+</svg>
+
+export default Fuelet;
diff --git a/components/icons/Wallets/Solana.tsx b/components/icons/Wallets/Solana.tsx
@@ -0,0 +1,17 @@
+import { SVGProps } from "react"
+
+const Solana = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width="101" height="88" viewBox="0 0 101 88" fill="none" {...props}>
+    <path d="M100.48 69.3817L83.8068 86.8015C83.4444 87.1799 83.0058 87.4816 82.5185 87.6878C82.0312 87.894 81.5055 88.0003 80.9743 88H1.93563C1.55849 88 1.18957 87.8926 0.874202 87.6912C0.558829 87.4897 0.31074 87.2029 0.160416 86.8659C0.0100923 86.529 -0.0359181 86.1566 0.0280382 85.7945C0.0919944 85.4324 0.263131 85.0964 0.520422 84.8278L17.2061 67.408C17.5676 67.0306 18.0047 66.7295 18.4904 66.5234C18.9762 66.3172 19.5002 66.2104 20.0301 66.2095H99.0644C99.4415 66.2095 99.8104 66.3169 100.126 66.5183C100.441 66.7198 100.689 67.0067 100.84 67.3436C100.99 67.6806 101.036 68.0529 100.972 68.415C100.908 68.7771 100.737 69.1131 100.48 69.3817ZM83.8068 34.3032C83.4444 33.9248 83.0058 33.6231 82.5185 33.4169C82.0312 33.2108 81.5055 33.1045 80.9743 33.1048H1.93563C1.55849 33.1048 1.18957 33.2121 0.874202 33.4136C0.558829 33.6151 0.31074 33.9019 0.160416 34.2388C0.0100923 34.5758 -0.0359181 34.9482 0.0280382 35.3103C0.0919944 35.6723 0.263131 36.0083 0.520422 36.277L17.2061 53.6968C17.5676 54.0742 18.0047 54.3752 18.4904 54.5814C18.9762 54.7875 19.5002 54.8944 20.0301 54.8952H99.0644C99.4415 54.8952 99.8104 54.7879 100.126 54.5864C100.441 54.3849 100.689 54.0981 100.84 53.7612C100.99 53.4242 101.036 53.0518 100.972 52.6897C100.908 52.3277 100.737 51.9917 100.48 51.723L83.8068 34.3032ZM1.93563 21.7905H80.9743C81.5055 21.7907 82.0312 21.6845 82.5185 21.4783C83.0058 21.2721 83.4444 20.9704 83.8068 20.592L100.48 3.17219C100.737 2.90357 100.908 2.56758 100.972 2.2055C101.036 1.84342 100.99 1.47103 100.84 1.13408C100.689 0.79713 100.441 0.510296 100.126 0.308823C99.8104 0.107349 99.4415 1.24074e-05 99.0644 0L20.0301 0C19.5002 0.000878397 18.9762 0.107699 18.4904 0.313848C18.0047 0.519998 17.5676 0.821087 17.2061 1.19848L0.524723 18.6183C0.267681 18.8866 0.0966198 19.2223 0.0325185 19.5839C-0.0315829 19.9456 0.0140624 20.3177 0.163856 20.6545C0.31365 20.9913 0.561081 21.2781 0.875804 21.4799C1.19053 21.6817 1.55886 21.7896 1.93563 21.7905Z" fill="url(#paint0_linear_174_4403)" />
+    <defs>
+        <linearGradient id="paint0_linear_174_4403" x1="8.52558" y1="90.0973" x2="88.9933" y2="-3.01622" gradientUnits="userSpaceOnUse">
+            <stop offset="0.08" stop-color="#9945FF" />
+            <stop offset="0.3" stop-color="#8752F3" />
+            <stop offset="0.5" stop-color="#5497D5" />
+            <stop offset="0.6" stop-color="#43B4CA" />
+            <stop offset="0.72" stop-color="#28E0B9" />
+            <stop offset="0.97" stop-color="#19FB9B" />
+        </linearGradient>
+    </defs>
+</svg>
+
+export default Solana;
diff --git a/components/icons/Wallets/TON.tsx b/components/icons/Wallets/TON.tsx
@@ -1,4 +1,6 @@
-const TON = (props) => <svg {...props} xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none">
+import { SVGProps } from "react"
+
+const TON = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none" {...props}>
     <path d="M28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28C0 43.464 12.536 56 28 56Z" fill="#0098EA" />
     <path d="M37.5603 15.6277H18.4386C14.9228 15.6277 12.6944 19.4202 14.4632 22.4861L26.2644 42.9409C27.0345 44.2765 28.9644 44.2765 29.7345 42.9409L41.5381 22.4861C43.3045 19.4251 41.0761 15.6277 37.5627 15.6277H37.5603ZM26.2548 36.8068L23.6847 31.8327L17.4833 20.7414C17.0742 20.0315 17.5795 19.1218 18.4362 19.1218H26.2524V36.8092L26.2548 36.8068ZM38.5108 20.739L32.3118 31.8351L29.7417 36.8068V19.1194H37.5579C38.4146 19.1194 38.9199 20.0291 38.5108 20.739Z" fill="white" />
 </svg>