Implement multiwallet

.gitignore

@@ -11,6 +11,7 @@
 # next.js
 /.next/
 /out/
+next-env.d.ts
 
 # production
 /build
@@ -37,3 +38,4 @@ storybook-static/*
 # Sentry Config File
 .sentryclirc
 .env*.local
+

Models/Balance.ts

@@ -1,5 +1,5 @@
-import { Wallet } from "../stores/walletStore"
 import { Network, Token } from "./Network"
+import { Wallet } from "./WalletProvider"
 
 export type BalanceProps = {
     networkName: string,
@@ -17,7 +17,6 @@ export type GasProps = {
     token: Token,
     address?: `0x${string}`,
     recipientAddress?: string,
-    isSweeplessTx?: boolean,
     wallet?: Wallet
 }
 

Models/WalletProvider.ts

@@ -0,0 +1,52 @@
+import { AccountInterface } from 'starknet';
+import { StarknetWindowObject } from 'starknetkit';
+import { RouteNetwork } from './Network';
+
+
+export type InternalConnector = {
+    name: string,
+    id: string,
+    icon?: string | undefined,
+    order?: number,
+    type?: 'injected' | 'other'
+}
+
+export type Wallet = {
+    // TODO: might be unused and unnecessary check
+    isActive: boolean;
+    address: string | `0x${string}`;
+    addresses: string[];
+    providerName: string
+    icon: (props: any) => React.JSX.Element;
+    //TODO: this is name of the connector, should be changed to connectorId
+    connector?: string;
+    metadata?: {
+        starknetAccount?: AccountInterface,
+        wallet?: StarknetWindowObject
+    }
+    chainId?: string | number,
+    isLoading?: boolean,
+    disconnect: () => Promise<void> | undefined | void;
+    connect: () => Promise<Wallet | undefined>;
+    isNotAvailable?: boolean;
+    //TODO: refactor
+    withdrawalSupportedNetworks?: string[],
+    asSourceSupportedNetworks?: string[],
+    autofillSupportedNetworks?: string[],
+}
+
+
+export type WalletProvider = {
+    connectWallet: (props?: { chain?: string | number | undefined | null, destination?: RouteNetwork }) => Promise<Wallet | undefined>,
+    connectConnector?: (props?: { connector: InternalConnector }) => Promise<Wallet | undefined> | undefined
+    disconnectWallets: () => Promise<void> | undefined | void,
+    switchAccount?: (connector: Wallet, address: string) => Promise<void>
+    availableWalletsForConnect?: InternalConnector[],
+    connectedWallets: Wallet[] | undefined,
+    activeWallet: Wallet | undefined,
+    autofillSupportedNetworks?: string[],
+    withdrawalSupportedNetworks?: string[],
+    asSourceSupportedNetworks?: string[],
+    name: string,
+    id: string,
+}

components/AddressIcon.tsx

@@ -7,13 +7,13 @@ type Props = {
     className?: string;
 }
 
-const AddressIcon: FC<Props> = ({ address, size, className}) => {
+const AddressIcon: FC<Props> = ({ address, size, className }) => {
     const ref = useRef<HTMLDivElement>(null)
     useEffect(() => {
         if (address && ref.current) {
             ref.current.innerHTML = "";
             const iconElement = Jazzicon(size, parseInt(address.slice(2, 10), 16))
-            if(iconElement){
+            if (iconElement) {
                 iconElement.style.display = 'block'
                 iconElement.style.width = "100%"
                 iconElement.style.height = "100%"
@@ -22,6 +22,6 @@ const AddressIcon: FC<Props> = ({ address, size, className}) => {
         }
     }, [address, size]);
 
-    return <div className={className}  ref={ref as any} />
+    return <div className={className} ref={ref as any} />
 }
 export default AddressIcon

components/Campaigns/Details/Rewards.tsx

@@ -1,5 +1,5 @@
 
-import { FC, useMemo } from "react"
+import { FC } from "react"
 import Image from 'next/image'
 import BackgroundField from "../../backgroundField";
 import { Clock } from "lucide-react"
@@ -19,11 +19,8 @@ type Props = {
 const Rewards: FC<Props> = ({ campaign }) => {
     const network = campaign?.network
 
-    const { getAutofillProvider: getProvider } = useWallet()
-    const provider = useMemo(() => {
-        return network && getProvider(network)
-    }, [network, getProvider])
-    const wallet = provider?.getConnectedWallet()
+    const { provider } = useWallet(network, 'autofil')
+    const wallet = provider?.activeWallet
 
     const address = wallet?.address
 

components/Campaigns/Details/index.tsx

@@ -1,11 +1,10 @@
 import { useRouter } from "next/router"
-import { FC, useCallback, useMemo } from "react"
+import { FC, useCallback } from "react"
 import Image from 'next/image'
 import { Gift } from "lucide-react"
 import LayerSwapApiClient, { Campaign } from "../../../lib/layerSwapApiClient"
 import useSWR from "swr"
 import { ApiResponse } from "../../../Models/ApiResponse"
-import { useAccount } from "wagmi"
 import SubmitButton from "../../buttons/submitButton";
 import WalletIcon from "../../icons/WalletIcon";
 import LinkWrapper from "../../LinkWraapper";
@@ -24,16 +23,13 @@ function CampaignDetails() {
     const campaign = campaignsData?.data?.find(c => c.name === camapaignName)
     const network = campaign?.network
 
-    const { getAutofillProvider: getProvider } = useWallet()
-    const provider = useMemo(() => {
-        return network && getProvider(network)
-    }, [network, getProvider])
+    const { provider } = useWallet(network, 'autofil')
 
     const handleConnect = useCallback(async () => {
         await provider?.connectWallet({ chain: network?.chain_id })
     }, [provider, network])
 
-    const wallet = provider?.getConnectedWallet()
+    const wallet = provider?.activeWallet
     const isConnected = !!wallet?.address
 
     if (isLoading) {

components/DTOs/SwapFormValues.ts

@@ -4,7 +4,6 @@ import { Exchange, ExchangeToken } from "../../Models/Exchange";
 export type SwapFormValues = {
   amount?: string;
   destination_address?: string;
-  // source_address?: string;
   fromCurrency?: RouteToken;
   toCurrency?: RouteToken;
   refuel?: boolean;
@@ -13,7 +12,7 @@ export type SwapFormValues = {
   fromExchange?: Exchange,
   toExchange?: Exchange,
   currencyGroup?: ExchangeToken
-  depositMethod?: string,
+  depositMethod?: 'wallet' | 'deposit_address',
 }
 
 

components/FeeDetails/DepositMethod/index.tsx

@@ -54,7 +54,7 @@ const DepositMethodComponent: FC = () => {
             setFieldValue(name, defaultMethod?.id, true)
             return
         }
-        else {
+        else if (!(menuItems?.find(i => i.id === depositMethod))) {
             setFieldValue(name, first, true)
             return
         }
@@ -74,9 +74,9 @@ const DepositMethodComponent: FC = () => {
         return null
 
     return (
-        <div className="relative w-full mb-1.5">
+        <div className="relative w-full mb-1">
             <Popover open={showModal} onOpenChange={setShowModal}>
-                <PopoverTrigger className="font-semibold text-secondary-text text-xs flex items-center space-x-1">
+                <PopoverTrigger className="font-semibold text-secondary-text text-xs flex items-center space-x-1 p-2">
                     <span> Transfer via </span> <span>{selectedMethod?.toLowerCase()}</span> <motion.div
                         animate={showModal ? "open" : "closed"}
                         variants={variants}

components/FeeDetails/Refuel.tsx

@@ -3,10 +3,9 @@ import { useFormikContext } from "formik";
 import { SwapFormValues } from "../DTOs/SwapFormValues";
 import { FC, useEffect, useRef } from "react";
 import { Info } from "lucide-react";
-import useBalance from "../../hooks/useBalance";
 import { isValidAddress } from "../../lib/address/validator";
-import { useBalancesState } from "../../context/balances";
 import ResizablePanel from "../ResizablePanel";
+import useSWRBalance from "../../lib/newbalances/useSWRBalance";
 
 type RefuelProps = {
     onButtonClick: () => void
@@ -20,21 +19,13 @@ const RefuelToggle: FC<RefuelProps> = ({ onButtonClick }) => {
     } = useFormikContext<SwapFormValues>();
     const { toCurrency, to, destination_address, refuel } = values
 
-    const { fetchBalance } = useBalance()
-    const { balances } = useBalancesState()
+    const { balance } = useSWRBalance(destination_address, to)
 
-    const destinationNativeBalance = destination_address && balances[destination_address]?.find(b => (b.token === to?.token?.symbol) && (b.network === to.name))
+    const destinationNativeBalance = destination_address && balance?.find(b => (b.token === to?.token?.symbol) && (b.network === to.name))
     const needRefuel = toCurrency && toCurrency.refuel && to && to.token && isValidAddress(destination_address, to) && destinationNativeBalance && destinationNativeBalance?.amount == 0 && !refuel
     const precviouslySelectedDestination = useRef(to)
 
     useEffect(() => {
-
-        if (toCurrency && toCurrency.refuel && to && to.token && isValidAddress(destination_address, to)) {
-            (async () => {
-                to.token && await fetchBalance(to, to.token, destination_address)
-            })()
-        }
-
         if (to && precviouslySelectedDestination.current !== to && !!refuel) {
             setFieldValue('refuel', false)
         }