global bug fixes

components/Input/Address/AddressPicker/AddressBook.tsx

@@ -36,7 +36,7 @@ const AddressBook: FC<AddressBookProps> = ({ addressBook, onSelectAddress, desti
                             {addressBook.sort(sortingByDate).map(item => {
                                 const isSelected = addressFormat(item.address, destination!) === addressFormat(destination_address!, destination!)
                                 return (
-                                    <button type="button" key={item.address} onClick={() => onSelectAddress(item.address, item.wallet)} className={`group/addressItem px-3 py-3 rounded-md hover:bg-secondary-700 w-full transition duration-200 ${isSelected && 'bg-secondary-800'}`}>
+                                    <button type="button" key={item.address} onClick={() => onSelectAddress(item.address, item.wallet)} className={`group/addressItem px-3 py-3 rounded-lg hover:bg-secondary-600 w-full transition duration-200 bg-secondary-700 ${isSelected && 'bg-secondary-800'}`}>
                                         <div className={`flex items-center justify-between w-full`}>
                                             <AddressWithIcon addressItem={item} partner={partner} network={destination} connectedWallet={item.wallet} />
                                             <div className="flex h-6 items-center px-1">

components/Input/Address/AddressPicker/ConnectedWallets/index.tsx

@@ -33,7 +33,7 @@ const ConnectedWallets: FC<Props> = ({ provider, wallets, onClick, onConnect, de
 
     const notCompatibleWallets = wallets.filter(wallet => wallet.providerName !== provider.name || wallet.isNotAvailable)
 
-    return <>
+    return <div className="space-y-2">
         {
             connectedWallets && connectedWallets?.length > 0 &&
             <div className="flex flex-col gap-2">
@@ -159,7 +159,7 @@ const ConnectedWallets: FC<Props> = ({ provider, wallets, onClick, onConnect, de
         }
 
 
-    </>
+    </div>
 }
 
 export default ConnectedWallets;

components/Input/SourceWalletPicker.tsx

@@ -117,7 +117,7 @@ const Component: FC = () => {
                     provider={provider}
                     wallets={wallets}
                     onSelect={handleSelectWallet}
-                    token={values.fromCurrency}
+                    token={source_token}
                     network={walletNetwork}
                     selectable
                 />

components/ResizablePanel.tsx

@@ -8,12 +8,12 @@ export default function ResizablePanel({ children, className }: { children: Reac
     return (
         <motion.div
             animate={{ height: height || "auto", width: "100%" }}
-            className="relative"
+            className="relative overflow-hidden"
         >
             <AnimatePresence initial={false}>
                 <div
                     ref={ref}
-                    className={`${className}`}
+                    className={className}
                 >
                     {children}
                 </div>

components/Swap/Form/Form.tsx

@@ -196,9 +196,8 @@ const SwapForm: FC<Props> = ({ partner }) => {
     const shoouldConnectWallet = sourceWalletNetwork && values.depositMethod !== 'deposit_address' && !selectedSourceAccount
 
     return <ImtblPassportProvider from={source} to={destination}>
-        <>
-            <Form className={`h-full ${(isSubmitting) ? 'pointer-events-none' : 'pointer-events-auto'}`} >
-                <Widget className="sm:min-h-[504px]">
+            <Widget className="sm:min-h-[504px] h-full">
+                <Form className={`h-full grow flex flex-col justify-between ${(isSubmitting) ? 'pointer-events-none' : 'pointer-events-auto'}`} >
                     <Widget.Content>
                         <div className='flex-col relative flex justify-between w-full space-y-0.5 mb-3.5 leading-4'>
                             {!(query?.hideFrom && values?.from) && <div className="flex flex-col w-full">
@@ -265,9 +264,8 @@ const SwapForm: FC<Props> = ({ partner }) => {
                                 </SwapButton>
                         }
                     </Widget.Footer>
-                </Widget>
-            </Form>
-        </>
+                </Form>
+            </Widget>
     </ImtblPassportProvider>
 }
 

components/Swap/Withdraw/ManualTransfer.tsx

@@ -41,7 +41,7 @@ const ManualTransfer: FC = () => {
                         </p>
                     </div>
                 </div>
-                <SubmitButton isDisabled={false} isSubmitting={false} size="medium" onClick={handleCloseNote}>
+                <SubmitButton type="button" size="medium" onClick={handleCloseNote}>
                     OK
                 </SubmitButton>
             </div>

components/Swap/Withdraw/Wallet/SolanaWalletWithdraw.tsx

@@ -19,11 +19,11 @@ const SolanaWalletWithdrawStep: FC<WithdrawPageProps> = ({ network, callData, sw
     const { publicKey: walletPublicKey, signTransaction } = useSolanaWallet();
     const solanaNode = network?.node_url
     const handleTransfer = useCallback(async () => {
-
-        if (!signTransaction || !callData || !swapId) return
-
         setLoading(true)
         try {
+
+            if (!signTransaction || !callData || !swapId) throw new Error('Missing data')
+
             const connection = new Connection(
                 `${solanaNode}`,
                 "confirmed"

components/Swap/Withdraw/Wallet/WalletTransfer/buttons.tsx

@@ -108,6 +108,7 @@ export const ButtonWrapper: FC<SubmitButtonProps> = ({
             text_align='center'
             buttonStyle='filled'
             size="medium"
+            type="button"
             {...props}
         >
             {props.children}

components/Swap/Withdraw/WalletTransferContent.tsx

@@ -85,6 +85,7 @@ const WalletTransferContent: FC = () => {
         {
             source_network &&
             source_token &&
+            provider &&
             <VaulDrawer
                 show={openModal}
                 setShow={setOpenModal}
@@ -98,6 +99,7 @@ const WalletTransferContent: FC = () => {
                         onSelect={changeWallet}
                         selectable
                         wallets={wallets}
+                        provider={provider}
                     />
                 </VaulDrawer.Snap>
             </VaulDrawer>

components/Wallet/WalletsList.tsx

@@ -13,23 +13,32 @@ import useSWRBalance from "../../lib/newbalances/useSWRBalance";
 import { useSettingsState } from "../../context/settings";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../shadcn/tooltip";
 
-type Props = {
+type Props = ({
+    selectable?: false;
     wallets: Wallet[];
     token?: Token;
     network?: Network;
-    provider?: WalletProvider;
-    selectable?: boolean;
+    provider?: WalletProvider | undefined;
     onSelect?: (wallet: Wallet, address: string) => void;
-}
+} | {
+    selectable?: true;
+    wallets: Wallet[];
+    token: Token;
+    network: Network;
+    provider: WalletProvider | undefined;
+    onSelect: (wallet: Wallet, address: string) => void;
+})
+
+const WalletsList: FC<Props> = (props) => {
 
-const WalletsList: FC<Props> = ({ wallets, selectable, onSelect, provider, token, network }) => {
+    const { wallets, token, network, provider, selectable, onSelect } = props
 
     const { connect } = useConnectModal()
 
     const connectWallet = async () => {
         const result = await connect(provider)
 
-        if (result && onSelect) {
+        if (result && onSelect && result.withdrawalSupportedNetworks?.some(n => n === network?.name)) {
             onSelect(result, result.address)
         }
 
@@ -90,22 +99,28 @@ export const WalletItem: FC<HTMLAttributes<HTMLDivElement> & WalletItemProps> =
             <div
                 onClick={() => (selectable && wallet.addresses.length == 1 && onWalletSelect) && onWalletSelect(wallet, wallet.address)}
                 className={clsx('w-full relative items-center justify-between gap-2 flex rounded-lg outline-none bg-secondary-700 text-primary-text p-3 group/addressItem', {
-                    'hover:bg-secondary-600 cursor-pointer': selectable && wallet.addresses.length == 1
+                    'hover:bg-secondary-600 cursor-pointer': selectable && wallet.addresses.length == 1,
+                    'bg-secondary-800 py-2': wallet.addresses.length > 1
                 })}>
 
-                <div className="flex space-x-4 items-center grow">
+                <div className="flex space-x-2 items-center grow">
                     {
                         wallet.connector &&
                         <div className="inline-flex items-center relative">
-                            <wallet.icon className="w-9 h-9 p-0.5 rounded-md bg-secondary-800" />
+                            <wallet.icon
+                                className={clsx('w-9 h-9 p-0.5 rounded-md bg-secondary-800', {
+                                    '!w-6 !h-6': wallet.addresses.length > 1,
+                                })}
+                            />
                         </div>
                     }
                     {
                         wallet.addresses.length > 1 ?
                             <div>
-                                <span className="text-base">{wallet.connector}</span>
+                                <span className="text-sm">{wallet.connector}</span>
                             </div>
-                            : <div className="w-full inline-flex items-center justify-between grow">
+                            :
+                            <div className="w-full inline-flex items-center justify-between grow">
                                 <div>
                                     {
                                         !wallet.isLoading && wallet.address &&
@@ -211,11 +226,11 @@ const NestedWalletAddress: FC<HTMLAttributes<HTMLDivElement> & NestedWalletAddre
             })}
         >
             <div className='flex items-center w-fit gap-3' >
-                <div className="flex bg-secondary-400  items-center justify-center rounded-md h-6 overflow-hidden w-6 ">
+                <div className="flex bg-secondary-400  items-center justify-center rounded-md h-8 w-8 overflow-hidden">
                     <AddressIcon
-                        className="scale-150 h-6 w-6 p-0.5"
+                        className="scale-150 h-8 w-8 p-0.5"
                         address={address}
-                        size={24}
+                        size={32}
                     />
                 </div>
 

components/WalletModal/ProvidersList.tsx

@@ -2,20 +2,29 @@ import { FC } from "react";
 import useWallet from "../../hooks/useWallet";
 import { ResolveConnectorIcon } from "../icons/ConnectorIcons";
 import { useConnectModal } from ".";
+import { WalletProvider } from "../../Models/WalletProvider";
 
 const ProvidersList: FC = () => {
     const { providers } = useWallet();
     const filteredProviders = providers.filter(p => !!p.autofillSupportedNetworks)
     const { setSelectedProvider } = useConnectModal()
 
+    const connect = async (provider: WalletProvider) => {
+        if (!provider.availableWalletsForConnect) {
+            await provider.connectWallet()
+        } else {
+            setSelectedProvider(provider)
+        }
+    }
+
     return (
         <div className="text-primary-text space-y-2">
             {filteredProviders.map((provider, index) => (
                 <button
                     type="button"
                     key={index}
                     className="w-full h-fit bg-secondary-700 hover:bg-secondary-500 transition-colors duration-200 rounded-xl px-2 p-3"
-                    onClick={async () => setSelectedProvider(provider)}
+                    onClick={async () => connect(provider)}
                 >
                     <div className="flex flex-row gap-3 items-center justify-between font-semibold px-4">
                         <p>{provider.name}</p>

components/WalletModal/index.tsx

@@ -32,8 +32,10 @@ export function WalletModalProvider({ children }) {
     const [selectedProvider, setSelectedProvider] = useState<ModalWalletProvider | undefined>(undefined);
     const [open, setOpen] = useState(false);
     const [isWalletModalOpen, setIsWalletModalOpen] = useState(false);
+    const [isPorivderProvidedInitally, setIsPorivderProvidedInitally] = useState(false);
 
     const connect = async ({ provider, connectCallback }: SharedType) => {
+        setIsPorivderProvidedInitally(!!provider)
         if (!provider?.availableWalletsForConnect) {
             await provider?.connectWallet()
         }
@@ -85,7 +87,7 @@ export function WalletModalProvider({ children }) {
                 header={
                     <div className="flex items-center gap-1">
                         {
-                            selectedProvider &&
+                            selectedProvider && !isPorivderProvidedInitally &&
                             <div className='-ml-2 mt-0.5'>
                                 <IconButton onClick={goBack} icon={
                                     <ChevronLeft className="h-6 w-6" />

context/swap.tsx

@@ -186,5 +186,6 @@ export function useSwapDataUpdate() {
 }
 
 const WalletIsSupportedForSource = ({ providers, sourceNetwork, sourceWallet }: { providers: WalletProvider[] | undefined, sourceWallet: Wallet | undefined, sourceNetwork: Network | undefined }) => {
-    return sourceWallet && providers?.find(p => p.id === sourceWallet.providerName)?.asSourceSupportedNetworks?.some(n => n === sourceNetwork?.name) || false
+    const isSupported = sourceWallet && providers?.find(p => p.name === sourceWallet.providerName)?.asSourceSupportedNetworks?.some(n => n === sourceNetwork?.name) || false
+    return isSupported
 }

lib/wallets/evm/useEVM.ts

@@ -98,7 +98,10 @@ export default function useEVM({ network }: Props): WalletProvider {
                 icon: resolveWalletConnectorIcon({ connector: evmConnectorNameResolver(activeAccount.connector), address, iconUrl: activeAccount.connector?.icon }),
                 connect: connectWallet,
                 disconnect: () => disconnectWallet(activeAccount.connector?.name || ""),
-                isNotAvailable: isNotAvailable(activeAccount.connector, network)
+                isNotAvailable: isNotAvailable(activeAccount.connector, network),
+                asSourceSupportedNetworks: activeAccount.connector.id === "com.immutable.passport" ? asSourceSupportedNetworks.filter(n => n.toLowerCase().startsWith("immutable")) : asSourceSupportedNetworks,
+                autofillSupportedNetworks: activeAccount.connector.id === "com.immutable.passport" ? autofillSupportedNetworks.filter(n => n.toLowerCase().startsWith("immutable")) : autofillSupportedNetworks,
+                withdrawalSupportedNetworks: activeAccount.connector.id === "com.immutable.passport" ? withdrawalSupportedNetworks.filter(n => n.toLowerCase().startsWith("immutable")) : withdrawalSupportedNetworks,
             }
 
             return wallet

lib/wallets/fuel/useFuel.ts

@@ -19,7 +19,10 @@ import { useConnectModal } from "../../../components/WalletModal";
 import { useMemo } from "react";
 
 export default function useFuel(): WalletProvider {
-    const autofillSupportedNetworks = [KnownInternalNames.Networks.FuelTestnet, KnownInternalNames.Networks.FuelMainnet]
+    const autofillSupportedNetworks = [
+        KnownInternalNames.Networks.FuelTestnet,
+        KnownInternalNames.Networks.FuelMainnet
+    ]
     const name = 'Fuel'
     const id = 'fuel'
 
@@ -32,7 +35,7 @@ export default function useFuel(): WalletProvider {
     const connectedWallets: Wallet[] | undefined = useMemo(() => {
 
         if (!wallet) return
-        const result = resolveWallet(wallet.address.toB256(), connectors, evmAddress, evmConnector, connectWallet, disconnectWallets, name, getItem)
+        const result = resolveWallet(wallet.address.toB256(), connectors, evmAddress, evmConnector, connectWallet, disconnectWallets, name, getItem, autofillSupportedNetworks)
 
         return [result]
     }, [wallet, connectors, evmAddress, evmConnector, name])
@@ -70,7 +73,7 @@ export default function useFuel(): WalletProvider {
             if (connectedWallets) {
                 const wallet = Address.fromAddressOrString(connectedWallets[0]).toB256()
 
-                const result = resolveWallet(wallet, connectors, evmAddress, evmConnector, connectWallet, disconnectWallets, name, getItem)
+                const result = resolveWallet(wallet, connectors, evmAddress, evmConnector, connectWallet, disconnectWallets, name, getItem, autofillSupportedNetworks)
 
                 return result
             }
@@ -129,7 +132,7 @@ export default function useFuel(): WalletProvider {
     return provider
 }
 
-const resolveWallet = (address: string, connectors, evmAddress, evmConnector, connectWallet, disconnectWallets, name, getItem) => {
+const resolveWallet = (address: string, connectors, evmAddress, evmConnector, connectWallet, disconnectWallets, name, getItem, autofillSupportedNetworks) => {
     let fuelCurrentConnector = getItem('fuel-current-connector', 'localStorage')
 
     let customConnectorname: string | undefined = undefined
@@ -160,7 +163,8 @@ const resolveWallet = (address: string, connectors, evmAddress, evmConnector, co
         disconnect: disconnectWallets,
         connector: fuelCurrentConnector,
         providerName: name,
-        icon: resolveWalletConnectorIcon({ connector: customConnectorname || fuelCurrentConnector, address: address })
+        icon: resolveWalletConnectorIcon({ connector: customConnectorname || fuelCurrentConnector, address: address }),
+        autofillSupportedNetworks
     }
 
     return w

lib/wallets/imtblX/useImtblX.ts

@@ -43,7 +43,9 @@ export default function useImtblX(): WalletProvider {
                 disconnect: () => disconnectWallet(),
                 connect: () => connectWallet({ chain }),
                 isActive: true,
-                addresses: [res.address]
+                addresses: [res.address],
+                withdrawalSupportedNetworks,
+                asSourceSupportedNetworks: withdrawalSupportedNetworks,
             }
 
             addWallet(wallet);

lib/wallets/solana/useSolana.tsx

@@ -27,7 +27,10 @@ export default function useSolana({ network }: { network: Network | undefined })
         disconnect,
         connect: () => connectWallet(),
         isActive: true,
-        addresses: [publicKey.toBase58()]
+        addresses: [publicKey.toBase58()],
+        withdrawalSupportedNetworks: commonSupportedNetworks,
+        asSourceSupportedNetworks: commonSupportedNetworks,
+        autofillSupportedNetworks: commonSupportedNetworks,
     } : undefined
 
     const getWallet = () => {
@@ -69,7 +72,10 @@ export default function useSolana({ network }: { network: Network | undefined })
             disconnect,
             connect: () => connectWallet(),
             isActive: true,
-            addresses: [connectedAddress]
+            addresses: [connectedAddress],
+            withdrawalSupportedNetworks: commonSupportedNetworks,
+            asSourceSupportedNetworks: commonSupportedNetworks,
+            autofillSupportedNetworks: commonSupportedNetworks,
         } : undefined
 
         return wallet

lib/wallets/starknet/useStarknet.ts

@@ -98,8 +98,10 @@ export default function useStarknet(): WalletProvider {
                     },
                     isActive: true,
                     connect: () => connectWallet(),
-                    disconnect: () => disconnectWallets()
-
+                    disconnect: () => disconnectWallets(),
+                    withdrawalSupportedNetworks,
+                    autofillSupportedNetworks: commonSupportedNetworks,
+                    asSourceSupportedNetworks: commonSupportedNetworks,
                 }
 
                 addWallet(wallet)
@@ -146,7 +148,7 @@ export default function useStarknet(): WalletProvider {
         withdrawalSupportedNetworks,
         autofillSupportedNetworks: commonSupportedNetworks,
         asSourceSupportedNetworks: commonSupportedNetworks,
-        availableWalletsForConnect: availableWalletsForConnect,
+        availableWalletsForConnect,
         name,
         id,
     }