TrainProtocol · arentant · Mar 16, 2026 · Mar 13, 2026 · Mar 13, 2026 · Mar 13, 2026
diff --git a/apps/app/components/Icons/CheckIcon.tsx b/apps/app/components/Icons/CheckIcon.tsx
@@ -0,0 +1,9 @@
+import { SVGProps } from "react";
+
+const CheckIcon = (props: SVGProps<SVGSVGElement>) => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+        <path d="M16.25 5.62494C16.3934 5.75494 16.465 5.92494 16.465 6.13327C16.465 6.32827 16.3934 6.49161 16.25 6.62077L8.43754 14.4533C8.34156 14.5412 8.21607 14.59 8.08587 14.5899C8.02419 14.591 7.96295 14.5794 7.90592 14.5559C7.84888 14.5324 7.79725 14.4975 7.75421 14.4533L3.75004 10.4491C3.68083 10.3883 3.62574 10.313 3.5886 10.2287C3.55147 10.1443 3.53319 10.0529 3.53504 9.96077C3.53504 9.75244 3.60671 9.57744 3.75004 9.43327C3.888 9.30515 4.07012 9.23529 4.25837 9.23827C4.45337 9.23827 4.62254 9.30327 4.76587 9.43327L7.75337 12.4216C7.84504 12.5133 7.95504 12.5583 8.08504 12.5583C8.21524 12.5583 8.34073 12.5096 8.43671 12.4216L15.2334 5.62494C15.2989 5.55625 15.3778 5.50173 15.4653 5.46474C15.5527 5.42776 15.6468 5.40911 15.7417 5.40994C15.9367 5.40994 16.1059 5.48161 16.25 5.62494V5.62494Z" fill="currentColor" />
+    </svg>
+)
+
+export default CheckIcon;
diff --git a/apps/app/components/Icons/ConnectorIcons.tsx b/apps/app/components/Icons/ConnectorIcons.tsx
diff --git a/apps/app/components/Icons/GlobeIcon.tsx b/apps/app/components/Icons/GlobeIcon.tsx
@@ -0,0 +1,9 @@
+import { SVGProps } from "react";
+
+const GlobeIcon = (props: SVGProps<SVGSVGElement>) => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+        <path fillRule="evenodd" clipRule="evenodd" d="M10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0ZM7.26465 13.5C7.45716 14.7252 7.74486 15.8122 8.09961 16.6992C8.43365 17.5343 8.80718 18.1438 9.16992 18.5273C9.53052 18.9085 9.81134 19 10 19C10.1887 19 10.4695 18.9085 10.8301 18.5273C11.1928 18.1438 11.5664 17.5343 11.9004 16.6992C12.1109 16.1729 12.2967 15.576 12.4541 14.9219C11.7737 14.729 11.2425 14.1869 11.0654 13.5H7.26465ZM1.70605 13.5C2.83227 16.1655 5.20626 18.1733 8.0957 18.7959C7.25214 17.652 6.5925 15.7717 6.25293 13.5H1.70605ZM14.9346 13.5C14.7516 14.2101 14.1899 14.7648 13.4766 14.9395C13.1068 16.5637 12.5613 17.9038 11.9033 18.7959C14.7932 18.1735 17.1676 16.1658 18.2939 13.5H14.9346ZM1.35449 7.5C1.12532 8.29394 1 9.13227 1 10C1 10.8677 1.12532 11.7061 1.35449 12.5H6.12598C6.04371 11.701 6 10.8632 6 10C6 9.57633 6.0108 9.15883 6.03125 8.74902C5.55765 8.48615 5.20378 8.03685 5.06543 7.5H1.35449ZM13.874 7.5C13.9563 8.29905 14 9.13675 14 10C14 10.4233 13.9882 10.8405 13.9678 11.25C14.442 11.5128 14.7961 11.9627 14.9346 12.5H18.6455C18.8747 11.7061 19 10.8677 19 10C19 9.13227 18.8747 8.29394 18.6455 7.5H13.874ZM8.93457 7.5C8.71414 8.35537 7.94426 8.98789 7.02246 8.99805C7.0086 9.32666 7 9.66088 7 10C7 10.8698 7.04749 11.7077 7.13281 12.5H11.0654C11.2858 11.6449 12.0552 11.0116 12.9766 11.001C12.9904 10.6727 13 10.3388 13 10C13 9.13018 12.9525 8.29226 12.8672 7.5H8.93457ZM8.0957 1.20312C5.20617 1.82567 2.8323 3.83442 1.70605 6.5H5.06543C5.24836 5.79017 5.80944 5.23445 6.52246 5.05957C6.89199 3.43525 7.43773 2.0951 8.0957 1.20312ZM10 1C9.81134 1 9.53052 1.09148 9.16992 1.47266C8.80718 1.85623 8.43365 2.46568 8.09961 3.30078C7.88921 3.82687 7.70228 4.42326 7.54492 5.07715C8.22587 5.26974 8.75745 5.81269 8.93457 6.5H12.7354C12.5428 5.27477 12.2551 4.1878 11.9004 3.30078C11.5664 2.46568 11.1928 1.85623 10.8301 1.47266C10.4695 1.09148 10.1887 1 10 1ZM11.9033 1.20312C12.7473 2.34695 13.4074 4.22759 13.7471 6.5H18.2939C17.1676 3.83413 14.7933 1.82544 11.9033 1.20312Z" fill="currentColor" />
+    </svg>
+);
+
+export default GlobeIcon;
diff --git a/apps/app/components/Icons/InfoIcon.tsx b/apps/app/components/Icons/InfoIcon.tsx
@@ -0,0 +1,7 @@
+import { SVGProps } from "react";
+
+const InfoIcon = (props: SVGProps<SVGSVGElement>) => <svg {...props} width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.0002 -0.00765944C11.3381 -0.0151122 12.6636 0.256199 13.8908 0.789216C15.0818 1.28618 16.1645 2.01077 17.0783 2.92203C17.9896 3.83561 18.714 4.91871 19.2111 6.10953C19.7442 7.33695 20.0165 8.66198 20.0089 10.0002C20.0164 11.3381 19.7441 12.6636 19.2111 13.8908C18.7141 15.0819 17.9897 16.1645 17.0783 17.0783C16.1648 17.9896 15.0825 18.714 13.8918 19.2111C12.6642 19.7442 11.3384 20.0165 10.0002 20.0089C8.66232 20.0163 7.33762 19.7441 6.11051 19.2111C4.91934 18.7141 3.8359 17.9897 2.92203 17.0783C2.01085 16.1648 1.28627 15.0824 0.789218 13.8918C0.256065 12.6642 -0.0152493 11.3384 -0.00765747 10.0002C-0.0150617 8.66236 0.256278 7.33759 0.789218 6.1105C1.28627 4.91931 2.01059 3.83597 2.92203 2.92203C3.83567 2.0107 4.91869 1.28638 6.10953 0.789216C7.33692 0.256145 8.66203 -0.0152027 10.0002 -0.00765944ZM10.0011 13.0002C9.89991 13.0002 9.79908 13.0205 9.70621 13.0607C9.61355 13.1009 9.53025 13.16 9.46109 13.2336C9.39273 13.3006 9.33803 13.3812 9.30191 13.4699C9.26579 13.5586 9.24901 13.6544 9.25113 13.7502V14.2423C9.25121 14.4612 9.32117 14.6415 9.46109 14.7824C9.618 14.9221 9.79831 14.9923 10.0011 14.9923C10.2039 14.9922 10.3759 14.9222 10.5168 14.7824C10.5929 14.7151 10.6531 14.6315 10.6935 14.5382C10.7339 14.445 10.7541 14.3439 10.7511 14.2423V13.7502C10.7524 13.6523 10.7319 13.5551 10.6916 13.466C10.6511 13.3768 10.5912 13.2971 10.5168 13.2336C10.4532 13.1592 10.3734 13.1001 10.2843 13.0597C10.1954 13.0194 10.0988 12.999 10.0011 13.0002ZM10.0011 5.00797C9.801 5.00624 9.60753 5.08152 9.46109 5.21793C9.39117 5.28876 9.33608 5.37323 9.29996 5.46597C9.26385 5.55884 9.24743 5.65839 9.25113 5.75797V11.2423C9.24748 11.3417 9.26395 11.4407 9.29996 11.5334C9.33608 11.6262 9.39109 11.7115 9.46109 11.7824C9.60751 11.9187 9.80108 11.9941 10.0011 11.9923C10.0968 11.9944 10.1918 11.9766 10.2804 11.9406C10.3691 11.9045 10.4497 11.8507 10.5168 11.7824C10.5929 11.7151 10.6531 11.6315 10.6935 11.5382C10.7339 11.445 10.7541 11.3439 10.7511 11.2423V5.75797C10.7511 5.53899 10.6727 5.35892 10.5168 5.21793C10.3759 5.07803 10.2039 5.00807 10.0011 5.00797Z" fill="currentColor" />
+</svg>;
+
+export default InfoIcon;
diff --git a/apps/app/components/Icons/TokenIcon.tsx b/apps/app/components/Icons/TokenIcon.tsx
@@ -0,0 +1,14 @@
+import { SVGProps } from "react";
+
+const TokenIcon = (props: SVGProps<SVGSVGElement>) => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="16" viewBox="0 0 20 16" fill="none" {...props}>
+        <path d="M14.9218 2.63325L13.8251 1.16509C13.8251 1.16509 13.8285 1.52477 13.5588 2.15514C13.2891 2.78552 12.9607 3.4069 12.2133 4.28895C11.3599 5.25682 10.1565 6.33746 8.71729 7.37397C5.16277 9.88602 2.58804 10.4833 1.06317 10.5068L0.895811 10.4966L1.93675 11.89C2.75001 12.872 6.321 11.5898 9.88187 9.05121C13.4427 6.51259 15.6918 3.64606 14.9218 2.63325Z" fill="currentColor" />
+        <path d="M5.39436 3.27026C3.62404 4.50941 2.20666 5.85017 1.34244 7.0048C0.908899 7.58403 0.629339 8.09691 0.50427 8.51194C0.377246 8.93345 0.428928 9.17965 0.530975 9.31625C0.633022 9.45286 0.85836 9.57751 1.31168 9.5928C1.75803 9.60786 2.34877 9.51155 3.05285 9.29449C4.45637 8.8618 6.21579 7.97891 7.9861 6.73976C9.75642 5.50061 11.1738 4.15985 12.038 3.00522C12.4716 2.42599 12.7511 1.91311 12.8762 1.49808C13.0032 1.07657 12.9515 0.830373 12.8495 0.693766L13.1975 0.450193L13.2073 0.463676C14.0283 1.60841 11.8521 4.52465 8.32171 7.01757L8.23773 7.0766C4.64388 9.59216 1.03765 10.7039 0.182994 9.55983L0.173129 9.54634C-0.654305 8.39256 1.56291 5.43915 5.14273 2.93342L5.22696 2.87471C8.79276 0.40062 12.3495 -0.684979 13.1975 0.450193L12.8495 0.693766C12.7474 0.557158 12.5221 0.432515 12.0688 0.417221C11.6224 0.402162 11.0317 0.498465 10.3276 0.715527C8.92409 1.14822 7.16467 2.03111 5.39436 3.27026Z" fill="currentColor" />
+        <path d="M5.74663 3.74184C8.6294 1.72402 11.3888 0.653786 11.9099 1.35141C12.4311 2.04904 10.5166 4.25035 7.63382 6.26818C4.75106 8.286 1.99166 9.35624 1.47052 8.65861C0.949389 7.96098 2.86387 5.75967 5.74663 3.74184Z" fill="currentColor" />
+        <path d="M20 13.6569C20.0108 14.9144 16.4531 15.9616 12.0309 15.999C7.6087 16.0364 3.93884 15.0499 3.87423 13.7928V12.7793C4.13534 12.7498 4.42447 12.6919 4.7369 12.6075C6.12929 13.3217 8.43935 13.9955 12.1025 13.9793C13.8962 13.9557 15.5255 13.7626 16.8029 13.4623C17.9425 13.1715 18.5847 12.8542 19.1849 12.4964C19.785 12.1386 20 11.8451 20 11.8451V13.6569Z" fill="currentColor" />
+        <path d="M12.1366 8.35459C16.4593 8.39544 19.9241 9.52382 19.9241 10.9099L19.9239 10.9264C19.8962 12.3197 16.3675 13.4485 11.9977 13.4661L11.8939 13.4663C9.21486 13.4663 6.84229 13.0486 5.38347 12.4067C5.5702 12.3417 5.76297 12.2692 5.96101 12.1893C6.08435 12.2348 6.21397 12.2794 6.3498 12.3227C7.74905 12.7681 9.70922 13.0506 11.8939 13.0506C14.0785 13.0506 16.0387 12.7681 17.4379 12.3227C18.1399 12.0992 18.6769 11.8422 19.0294 11.5768C19.3875 11.3073 19.4947 11.0784 19.4947 10.9099C19.4947 10.7413 19.3875 10.5125 19.0294 10.2429C18.6769 9.97757 18.1399 9.72053 17.4379 9.49707C16.0387 9.05162 14.0785 8.7691 11.8939 8.7691C11.8048 8.7691 11.7162 8.76959 11.6279 8.77052C11.8019 8.63199 11.9715 8.49326 12.1366 8.35459Z" fill="currentColor" />
+        <path d="M11.8939 9.35105C15.4513 9.35105 18.3352 10.049 18.3352 10.9099C18.3352 11.7708 15.4513 12.4687 11.8939 12.4687C9.78981 12.4687 7.92139 12.2245 6.74588 11.8469C7.90559 11.3051 9.195 10.5513 10.4831 9.63302C10.6047 9.54632 10.7247 9.45917 10.8432 9.3718C11.1851 9.35822 11.5361 9.35105 11.8939 9.35105Z" fill="currentColor" />
+    </svg>
+);
+
+export default TokenIcon;
diff --git a/apps/app/components/Input/Address/AddressPicker/ConnectedWallets/ConnectWalletButton.tsx b/apps/app/components/Input/Address/AddressPicker/ConnectedWallets/ConnectWalletButton.tsx
@@ -1,51 +1,64 @@
 import { RefreshCw } from "lucide-react";
 import { ResolveConnectorIcon } from "../../../../Icons/ConnectorIcons";
-import { Network } from "../../../../../Models/Network";
 import { FC, useState } from "react";
 import { Wallet, WalletProvider } from "../../../../../Models/WalletProvider";
 import { useConnectModal } from "../../../../WalletModal";
 
-type Props = {
-    provider: WalletProvider,
+interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    provider?: WalletProvider,
     onConnect?: (wallet: Wallet) => void,
+    descriptionText?: string
 }
 
-const ConnectWalletButton: FC<Props> = ({ provider, onConnect }) => {
-    const { connect } = useConnectModal()
+const ConnectWalletButton: FC<Props> = ({ provider, onConnect, descriptionText, ...rest }) => {
     const [isLoading, setIsLoading] = useState(false)
+    const { connect } = useConnectModal()
+    const isProviderReady = provider?.ready ?? true
 
     const handleConnect = async () => {
+        if (!isProviderReady) return
         setIsLoading(true)
         const result = await connect(provider)
         if (onConnect && result) onConnect(result)
         setIsLoading(false)
     }
 
-    return <>
-        <button typeof="button" onClick={handleConnect} type="button" className={`py-5 px-6 bg-secondary-700 hover:bg-secondary-600 transition-colors duration-200 rounded-xl ${isLoading && 'cursor-progress opacity-80'}`}>
-            <div className="flex flex-row justify-between gap-9 items-stretch">
-                <ResolveConnectorIcon
-                    connector={provider.id}
-                    iconClassName="w-10 h-10 p-0.5 rounded-lg bg-secondary-800 border border-secondary-400"
-                    className="grid grid-cols-2 gap-1 min-w-fit"
-                />
-                <div className="h-full space-y-2">
-                    <p className="text-sm font-medium text-secondary-text text-start">Connect your wallet to browse and select from your addresses</p>
-                    <div className="bg-primary-700/30 border-none !text-primary py-2 rounded-lg text-base font-semibold">
-                        {
+    return <button
+        {...rest}
+        type="button"
+        onClick={handleConnect}
+        data-attr="connect-wallet"
+        disabled={!isProviderReady || rest.disabled}
+        className={`focus-ring-primary-bold py-5 px-6 bg-secondary-500 hover:bg-secondary-400 transition-colors duration-200 rounded-xl ${(isLoading || !isProviderReady) ? 'cursor-progress opacity-80' : ''} disabled:opacity-50 disabled:cursor-not-allowed ${rest.className ?? ''}`}
+    >
+        <div className="flex flex-row justify-between gap-9 items-stretch">
+            <ResolveConnectorIcon
+                connector={provider?.name}
+                iconClassName="w-10 h-10 p-0.5 rounded-lg bg-secondary-800 border border-secondary-400"
+                className="grid grid-cols-2 gap-1 min-w-fit"
+            />
+            <div className="h-full space-y-2">
+                <p className="text-sm font-medium text-secondary-text text-start">{descriptionText ?? 'Connect your wallet to browse and select from your addresses'}</p>
+                <div className="bg-primary-700/30 border-none text-primary! py-2 rounded-lg text-base font-semibold">
+                    {
+                        !isProviderReady ?
+                            <div className="flex items-center gap-1 justify-center">
+                                <RefreshCw className="h-3 w-auto animate-spin" />
+                                <span className="ml-1">Initializing...</span>
+                            </div>
+                            :
                             isLoading ?
                                 <div className="flex items-center gap-1 justify-center">
                                     <RefreshCw className="h-3 w-auto animate-spin" />
                                     <span className="ml-1">Connecting...</span>
                                 </div>
                                 :
-                                <>Connect Now</>
-                        }
-                    </div>
+                                <span>Connect Now</span>
+                    }
                 </div>
             </div>
-        </button>
-    </>
+        </div>
+    </button>
 }
 
-export default ConnectWalletButton
+export default ConnectWalletButton
diff --git a/apps/app/components/Input/RoutePicker/Content.tsx b/apps/app/components/Input/RoutePicker/Content.tsx
@@ -7,6 +7,8 @@ import Row from "./Rows";
 import { Network, Token } from "@/Models/Network";
 import RouteSearch from "./RouteSearch";
 import NavigatableList from "@/components/NavigatableList";
+import useWallet from "@/hooks/useWallet";
+import ConnectWalletButton from "@/components/Input/Address/AddressPicker/ConnectedWallets/ConnectWalletButton";
 
 type ContentProps = {
     onSelect: (network: Network, token: Token) => Promise<void> | void;
@@ -32,19 +34,22 @@ export const Content: FC<ContentProps> = (props) => {
             shouldFocus={true}
             direction={props.direction}
         />
-        <Items {...props} onScroll={handleScroll} setIsItemsScrolling={setIsItemsScrolling} />
+        <Items {...props} isScrolling={isItemsScrolling} onScroll={handleScroll} setIsItemsScrolling={setIsItemsScrolling} />
     </>
 }
 
 type ItemsProps = ContentProps & {
+    isScrolling: boolean;
     onScroll: () => void;
     setIsItemsScrolling: (isScrolling: boolean) => void;
 }
 
-const Items: FC<ItemsProps> = ({ searchQuery, setSearchQuery, rowElements, selectedToken, selectedNetwork, direction, onSelect, onScroll, setIsItemsScrolling }) => {
+const Items: FC<ItemsProps> = ({ searchQuery, setSearchQuery, rowElements, selectedToken, selectedNetwork, direction, onSelect, isScrolling, onScroll, setIsItemsScrolling }) => {
     const parentRef = useRef<HTMLDivElement>(null)
     const [openValues, setOpenValues] = useState<string[]>(selectedNetwork ? [selectedNetwork] : [])
     const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+    const { wallets, providers } = useWallet()
+    const isProvidersReady = providers.every(p => p.ready)
 
     const isSingleNetwork = useMemo(() => {
         if (!searchQuery) return false;
@@ -76,7 +81,7 @@ const Items: FC<ItemsProps> = ({ searchQuery, setSearchQuery, rowElements, selec
         count: rowElements.length,
         estimateSize: (index) => {
             const item = rowElements[index];
-            const key = (item as any)?.network?.name || (item as any)?.symbol;
+            const key = (item as any)?.network?.caip2Id || (item as any)?.symbol;
             const isOpen = openValues.includes(key);
             // Better size estimation based on open state
             if (isOpen && (item.type === 'network' || item.type === 'grouped_token')) {
@@ -109,15 +114,22 @@ const Items: FC<ItemsProps> = ({ searchQuery, setSearchQuery, rowElements, selec
         }
         scrollTimeoutRef.current = setTimeout(() => {
             setIsItemsScrolling(false);
-        }, 150);
+        }, 1000);
     };
 
     return (
         <div
-            className="select-text overflow-y-auto overflow-x-hidden scrollbar:w-1! scrollbar:h-1! pr-0.5 styled-scroll h-full"
+            className={`select-text overflow-y-auto overflow-x-hidden scrollbar:w-1! scrollbar:h-1! scrollbar-thumb:bg-transparent pr-0.5 h-full${isScrolling ? " styled-scroll!" : ""}`}
             ref={parentRef}
             onScroll={handleScrollEvent}
         >
+            {wallets.length === 0 && direction === 'from' && !searchQuery &&
+                <ConnectWalletButton
+                    descriptionText="Connect your wallet to browse your assets and choose easier"
+                    className="w-full my-2.5"
+                    disabled={!isProvidersReady}
+                />
+            }
             <NavigatableList enabled={true} onReset={onReset} navigateToFirstChild={isSingleNetwork}>
                 <div id="sticky_accordion_header" />
                 <div className="relative">
@@ -140,7 +152,7 @@ const Items: FC<ItemsProps> = ({ searchQuery, setSearchQuery, rowElements, selec
                                     }}>
                                     {items.map((virtualRow) => {
                                         const data = rowElements?.[virtualRow.index]
-                                        const key = ((data as any)?.network as any)?.name || virtualRow.key;
+                                        const key = ((data as any)?.network as any)?.caip2Id || (data as any)?.symbol || virtualRow.key;
                                         return <div
                                             className="py-1 box-border w-full overflow-hidden select-none"
                                             key={key}