compiles and runs

.gitignore

@@ -39,4 +39,4 @@ storybook-static/*
 .sentryclirc
 .sedbak
 
-
+**/tsconfig.tsbuildinfo

app/Models/BridgeAppSettings.ts

@@ -2,13 +2,26 @@ import { CryptoNetwork, NetworkCurrency } from "./CryptoNetwork";
 import { Currency } from "./Currency";
 import { Exchange, ExchangeCurrency } from "./Exchange";
 import { BaseL2Asset, ExchangeAsset, Layer, NetworkAsset } from "./Layer";
-import { BridgeSettings } from "./BridgeSettings";
+import type { BridgeSettings, OauthProveider, Discovery } from "./BridgeSettings";
 import { Partner } from "./Partner";
 
-export class BridgeAppSettings extends BridgeSettings {
+export class BridgeAppSettings implements BridgeSettings {
+
+    exchanges: Exchange[]
+    networks: CryptoNetwork[]
+    currencies: Currency[] 
+    discovery: Discovery
+    validSignatureisPresent: boolean = false
+
     constructor(settings: BridgeSettings | any) {
-        super();
-        Object.assign(this, BridgeAppSettings.ResolveSettings(settings))
+//        super();
+        BridgeAppSettings.ResolveSettings(settings)
+        this.networks = settings.networks
+        this.exchanges = settings.exchanges
+        this.currencies = settings.currencies
+        this.discovery = settings.discovery
+        this.validSignatureisPresent = settings.validSignatureisPresent ?? undefined
+        
 
         this.layers = BridgeAppSettings.ResolveLayers(this.exchanges, this.networks);
     }

app/Models/BridgeAuth.ts

@@ -1,4 +1,4 @@
-export class AuthGetCodeResponse {
+export interface AuthGetCodeResponse {
     data: {
         next: Date,
         already_sent: boolean
@@ -6,7 +6,7 @@ export class AuthGetCodeResponse {
     error: string;
 }
 
-export class AuthConnectResponse {
+export interface AuthConnectResponse {
     access_token: string;
     expires_in: number;
     token_type: string;

app/Models/BridgeSettings.ts

@@ -2,20 +2,23 @@ import { CryptoNetwork } from "./CryptoNetwork";
 import { Currency } from "./Currency";
 import { Exchange } from "./Exchange";
 
-export class BridgeSettings {
-    exchanges: Exchange[];
-    networks: CryptoNetwork[];
-    currencies: Currency[];
-    discovery: {
-        identity_url: string;
-        resource_storage_url: string;
-        o_auth_providers: OauthProveider[]
-    }
-    validSignatureisPresent?: boolean;
+export type OauthProveider = {
+  provider: string,
+  oauth_connect_url: string,
+  oauth_authorize_url: string
+}
+
+export type Discovery = {
+  identity_url: string;
+  resource_storage_url: string;
+  o_auth_providers: OauthProveider[]
+}
+
+export interface BridgeSettings {
+    exchanges: Exchange[]
+    networks: CryptoNetwork[]
+    currencies: Currency[]
+    discovery: Discovery
+    validSignatureisPresent?: boolean
 };
 
-type OauthProveider = {
-    provider: string,
-    oauth_connect_url: string,
-    oauth_authorize_url: string
-}

app/Models/CryptoNetwork.ts

@@ -11,7 +11,7 @@ export enum NetworkType {
 }
 
 
-export class CryptoNetwork {
+export interface CryptoNetwork {
     display_name: string;
     internal_name: string;
     native_currency: string | null | undefined;
@@ -31,7 +31,7 @@ export class CryptoNetwork {
     img_url?: string
 }
 
-export class NetworkCurrency {
+export interface NetworkCurrency {
     name: string;
     asset: string;
     status: LayerStatus;
@@ -47,13 +47,13 @@ export class NetworkCurrency {
     source_base_fee: number;
     destination_base_fee: number;
 }
-export class NetworkNode {
+export interface NetworkNode {
     url: string;
 }
-export class ManagedAccount {
+export interface ManagedAccount {
     address: `0x${string}`;
 }
-export class Metadata {
+export interface Metadata {
     multicall3?: {
         address: `0x${string}`
         blockCreated: number

app/Models/Currency.ts

@@ -1,4 +1,4 @@
-export class Currency {
+export interface Currency {
     asset: string;
     usd_price: number;
     precision: number;

app/Models/CurrencyExchange.ts

@@ -1,4 +1,4 @@
-export class CurrencyExchange {
+export interface CurrencyExchange {
     exchange_id: string;
     fee: number;
     is_off_ramp_enabled: boolean;

app/Models/Exchange.ts

@@ -1,7 +1,7 @@
 import { NetworkCurrency } from "./CryptoNetwork";
 import { LayerStatus } from "./Layer";
 
-export class Exchange {
+export interface Exchange {
     display_name: string;
     internal_name: string;
     authorization_flow: "o_auth2" | "api_credentials" | 'none'
@@ -13,7 +13,7 @@ export class Exchange {
     img_url?: string
 }
 
-export class ExchangeCurrency {
+export interface ExchangeCurrency {
     asset: string;
     withdrawal_fee: number;
     min_deposit_amount: number;

app/Models/Partner.ts

@@ -1,4 +1,4 @@
-export class Partner {
+export interface Partner {
     display_name: string;
     logo_url: string;
     is_wallet: boolean;

app/Models/Wizard.ts

@@ -66,7 +66,7 @@ export const OfframpExchangeAuthorizationSteps: { [key: string]: SwapCreateStep
     "o_auth2": SwapCreateStep.OffRampOAuth
 }
 
-export class WizardStep<T> {
+export interface WizardStep<T> {
     Name: T;
     Content: FC;
     onBack?: () => void;

app/components/AddressIcon.tsx

@@ -1,11 +1,11 @@
+import { useEffect, useRef } from "react";
 import Jazzicon from "@metamask/jazzicon";
-import { FC, useEffect, useRef } from "react";
 
 type Props = {
     address: string;
     size: number;
 }
-const AddressIcon: FC<Props> = ({ address, size }) => {
+const AddressIcon: React.FC<Props> = ({ address, size }) => {
     const ref = useRef<HTMLDivElement>(null)
     useEffect(() => {
         if (address && ref.current) {
@@ -20,4 +20,5 @@ const AddressIcon: FC<Props> = ({ address, size }) => {
 
     return <div ref={ref as any} />
 }
+
 export default AddressIcon

app/components/BridgeMenu/Menu.tsx

@@ -1,15 +1,18 @@
+import React, { type PropsWithChildren, type ReactNode } from "react"
 import { ChevronRight, ExternalLink } from "lucide-react"
 import LinkWrapper from "../LinkWraapper"
-import { ReactNode } from "react"
 
-const Menu = ({ children }: { children: ReactNode }) => {
-    return <div className="flex flex-col gap-3 mt-3">
-        {children}
-        <div style={{ height: '70px' }} />
-    </div>
-}
+  // aa: Do not use React.FC as we add props to the function object below
+const Menu = ({ 
+  children 
+}: PropsWithChildren) => (
+  <div className="flex flex-col gap-3 mt-3">
+    {children}
+    <div style={{ height: '70px' }} />
+  </div>
+)
 
-const Group = ({ children }: { children: JSX.Element | JSX.Element[] }) => {
+const Group = ({ children }: PropsWithChildren) => {
     return (
         <div>
             <div className="divide-y divide-secondary-500 rounded-md bg-secondary-700 overflow-hidden">
@@ -65,7 +68,7 @@ type MenuIemProps = {
     target?: Target;
 };
 
-const Footer = ({ children }: { children: JSX.Element | JSX.Element[] }) => {
+const Footer = ({ children }: PropsWithChildren) => {
     return (
         <div className={`text-primary-text text-base border-t border-secondary-500 fixed inset-x-0 bottom-0 z-30 bg-secondary-900 shadow-widget-footer px-6 py-4 w-full `}>
             {children}

app/components/BridgeMenu/index.tsx

@@ -58,37 +58,37 @@ export default function BridgeMenu() {
             {
                 name: 'Twitter',
                 href: 'https://twitter.com/luxdefi',
-                icon: (props) => TwitterLogo(props),
+                Icon: ((props) => (TwitterLogo(props))) as React.FC<{className: string, ariaHidden: string}>,
                 className: 'plausible-event-name=Twitter'
             },
             {
                 name: 'GitHub',
                 href: 'https://github.com/luxdefi',
-                icon: (props) => GitHubLogo(props),
+                Icon: ((props) => (GitHubLogo(props))) as React.FC<{className: string, ariaHidden: string}>,
                 className: 'plausible-event-name=GitHub'
             },
             {
                 name: 'Discord',
                 href: 'https://discord.gg/XsD63KMbV2',
-                icon: (props) => DiscordLogo(props),
+                Icon: ((props) => (DiscordLogo(props))) as React.FC<{className: string, ariaHidden: string}>,
                 className: 'plausible-event-name=Discord'
             },
             {
                 name: 'YouTube',
                 href: 'https://www.youtube.com/@luxdefi',
-                icon: (props) => YoutubeLogo(props),
+                Icon: ((props) => (YoutubeLogo(props))) as React.FC<{className: string, ariaHidden: string}>,
                 className: 'plausible-event-name=Youtube'
             },
             {
                 name: 'Substack',
                 href: 'https://luxdefi.substack.com/',
-                icon: (props) => SubstackLogo(props),
+                Icon: ((props) => (SubstackLogo(props))) as React.FC<{className: string, ariaHidden: string}>,
                 className: 'plausible-event-name=Substack'
             },
             {
                 name: 'Roadmap',
                 href: 'https://github.com/orgs/luxdefi/projects/1/views/4',
-                icon: (props) => <Map {...props}></Map>,
+                Icon: ((props) => (<Map {...props}></Map>)) as React.FC<{className: string, ariaHidden: string}>,
                 className: 'plausible-event-name=Roadmap'
             },
         ]
@@ -190,11 +190,11 @@ export default function BridgeMenu() {
                                 </div>
 
                                 <div className="grid grid-cols-2 gap-2 justify-center">
-                                    {navigation.social.map((item, index) => (
-                                        <Link key={index} target="_blank" href={item.href} className={`flex relative bg-secondary-700 hover:bg-secondary-600 rounded-md cursor-pointer select-none items-center outline-none text-primary-text ${item.className}`}>
+                                    {navigation.social.map(({name, Icon, href, className}, index) => (
+                                        <Link key={index} target="_blank" href={href} className={`flex relative bg-secondary-700 hover:bg-secondary-600 rounded-md cursor-pointer select-none items-center outline-none text-primary-text ${className}`}>
                                             <div className="p-2 w-full flex justify-center gap-1">
-                                                <item.icon className="h-5 w-5" aria-hidden="true" />
-                                                <p>{item.name}</p>
+                                                <Icon className="h-5 w-5" ariaHidden="true" />
+                                                <p>{name}</p>
                                             </div>
                                         </Link>
                                     ))}

app/components/Carousel.tsx

@@ -32,7 +32,7 @@ export type CarouselRef = {
 const Carousel = forwardRef<CarouselRef, CarouselProps>(function Carousel({ onFirst, onLast, children, starAtLast }, ref) {
     const [activeIndex, setActiveIndex] = useState(starAtLast ? React.Children.count(children) - 1 : 0);
 
-    const updateIndex = useCallback((newIndex) => {
+    const updateIndex = useCallback((newIndex: number) => {
         onFirst(false)
         onLast(false)
         if (newIndex >= 0 && newIndex <= React.Children.count(children) - 1) {

app/components/ConnectedWallets.tsx

@@ -112,15 +112,24 @@ export const WalletsMenu = () => {
     )
 }
 
+/*
+                <DialogHeader>
+                  <DialogTitle className="text-center">{'Wallets'}</DialogTitle>
+                </DialogHeader>
+*/
+
+
 const ConnectedWalletsDialog = ({ openDialog, setOpenDialog }: { openDialog: boolean, setOpenDialog: (open: boolean) => void }) => {
-    const { wallets, disconnectWallet } = useWallet()
+
+  const { wallets, disconnectWallet } = useWallet()
 
     return (
         <Dialog open={openDialog} onOpenChange={setOpenDialog}>
             <DialogContent className="sm:max-w-[425px]">
                 <DialogHeader>
-                    <DialogTitle className="text-center">Wallets</DialogTitle>
+                  <h2 className="text-center">Wallets</h2>
                 </DialogHeader>
+
                 <div className="flex flex-col justify-start space-y-2">
                     {
                         wallets.map((wallet, index) => (

app/components/DisclosureComponents/FeeDetails/index.tsx

@@ -2,7 +2,7 @@
 import { useSettingsState } from '../../../context/settings';
 import { CalculateFee, CalculateReceiveAmount } from '../../../lib/fees';
 import { SwapFormValues } from '../../DTOs/SwapFormValues';
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../../shadcn/accordion';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@luxdefi/ui/primitives';
 import { ReceiveAmounts } from './ReceiveAmounts';
 import DetailedEstimates from './DetailedEstimates';
 import Campaign from './Campaign';
@@ -13,13 +13,15 @@ export default function FeeDetails({ values }: { values: SwapFormValues }) {
 
     let fee = CalculateFee(values, networks);
     let receive_amount = CalculateReceiveAmount(values, networks, currencies);
-
     return (
         <>
             <div className="mx-auto relative w-full rounded-lg border border-secondary-500 hover:border-secondary-300 bg-secondary-700 px-3.5 py-3 z-[1] transition-all duration-200">
+                    {/* @ts-ignore */}
                 <Accordion type="single" collapsible>
+                    {/* @ts-ignore */}
                     <AccordionItem value='item-1'>
-                        <AccordionTrigger className="items-center flex w-full relative gap-2 rounded-lg text-left text-base font-medium">
+                    {/* @ts-ignore */}
+                    <AccordionTrigger className="items-center flex w-full relative gap-2 rounded-lg text-left text-base font-medium">
                             <ReceiveAmounts
                                 currencies={currencies}
                                 currency={currency}
@@ -28,7 +30,8 @@ export default function FeeDetails({ values }: { values: SwapFormValues }) {
                                 refuel={!!refuel}
                             />
                         </AccordionTrigger>
-                        <AccordionContent className="text-sm text-secondary-text font-normal">
+                    {/* @ts-ignore */}
+                    <AccordionContent className="text-sm text-secondary-text font-normal">
                             <DetailedEstimates
                                 currencies={currencies}
                                 networks={networks}

app/components/ErrorFallback.tsx

@@ -6,7 +6,10 @@ import MessageComponent from "./MessageComponent"
 import Navbar from "./navbar"
 import GoHomeButton from "./utils/GoHome"
 
-export default function ErrorFallback({ error, resetErrorBoundary }) {
+import type { FallbackProps } from 'react-error-boundary'
+
+
+export default function ErrorFallback({ error, resetErrorBoundary}: FallbackProps) {
 
     const extension_error = error.stack.includes("chrome-extension", "app://")
 
@@ -56,9 +59,7 @@ export default function ErrorFallback({ error, resetErrorBoundary }) {
                                     </div>
                                     <div className='basis-2/3'>
                                         <SubmitButton button_align="right" text_align="left" isDisabled={false} isSubmitting={false}
-                                            onClick={() =>
-                                                resetErrorBoundary()
-                                            }
+                                            onClick={resetErrorBoundary}
                                             icon={<RefreshCcw className="h-5 w-5" aria-hidden="true" />}>
                                             Try Again
                                         </SubmitButton>

app/components/Input/CurrencyFormField.tsx

@@ -1,11 +1,12 @@
-import { useFormikContext } from "formik";
 import { FC, useCallback, useEffect, useMemo } from "react";
+import { useFormikContext } from "formik";
+
 import { useSettingsState } from "../../context/settings";
 import { SwapFormValues } from "../DTOs/SwapFormValues";
 import { FilterCurrencies, GetNetworkCurrency } from "../../helpers/settingsHelper";
 import { Currency } from "../../Models/Currency";
-import { SelectMenuItem } from "../Select/Shared/Props/selectMenuItem";
-import PopoverSelectWrapper from "../Select/Popover/PopoverSelectWrapper";
+import { ISelectMenuItem, SelectMenuItem } from "../Select/Shared/Props/selectMenuItem";
+import PopoverSelectWrapper, { type PopoverSelectWrapperProps} from "../Select/Popover/PopoverSelectWrapper";
 import CurrencySettings from "../../lib/CurrencySettings";
 import { SortingByOrder } from "../../lib/sorting";
 import { Layer } from "../../Models/Layer";
@@ -61,7 +62,7 @@ const CurrencyFormField: FC = () => {
         setFieldValue(name, item.baseObject, true)
     }, [name])
 
-    return <PopoverSelectWrapper values={currencyMenuItems} value={value} setValue={handleSelect} disabled={!value?.isAvailable?.value} />;
+    return <PopoverSelectWrapper<Currency> values={currencyMenuItems} value={value} setValue={handleSelect} disabled={!value?.isAvailable?.value} />;
 };
 
 export function GenerateCurrencyMenuItems(currencies: Currency[], source: Layer, resolveImgSrc: (item: Layer | Currency) => string, lockedCurrency?: Currency, balances?: Balance[]): SelectMenuItem<Currency>[] {

app/components/Input/NetworkFormField.tsx

@@ -19,7 +19,18 @@ type Props = {
     direction: SwapDirection,
     label: string,
 }
-const GROUP_ORDERS = { "Popular": 1, "New": 2, "Fiat": 3, "Networks": 4, "Exchanges": 5, "Other": 10 };
+const GROUP_ORDERS = { 
+  "Popular": 1, 
+  "New": 2, 
+  "Fiat": 3, 
+  "Networks": 4, 
+  "Exchanges": 5, 
+  "Other": 10 
+}
+
+type GroupOrderKeysType = keyof typeof GROUP_ORDERS
+
+
 const getGroupName = (layer: Layer) => {
 
     if (layer.is_featured) {
@@ -60,7 +71,7 @@ const NetworkFormField = forwardRef(function NetworkFormField({ direction, label
         currencies?.find(c => c?.asset?.toUpperCase() === (asset as string)?.toUpperCase())
         : null
 
-    let valueGrouper: (values: ISelectMenuItem[]) => SelectMenuItemGroup[];
+    //let valueGrouper: (values: ISelectMenuItem<Layer>[]) => SelectMenuItemGroup[];
 
     if (direction === "from") {
         placeholder = "Source";
@@ -74,10 +85,10 @@ const NetworkFormField = forwardRef(function NetworkFormField({ direction, label
         filteredLayers = FilterDestinationLayers(layers, from, lockedCurrency);
         menuItems = GenerateMenuItems(filteredLayers, resolveImgSrc, direction, !!(to && lockTo));
     }
-    valueGrouper = groupByType
+    const valueGrouper = groupByType
 
     const value = menuItems.find(x => x.id == (direction === "from" ? from : to)?.internal_name);
-    const handleSelect = useCallback((item: SelectMenuItem<Layer>) => {
+    const handleSelect = useCallback((item: ISelectMenuItem<Layer>) => {
         setFieldValue(name, item.baseObject, true)
     }, [name])
 
@@ -86,7 +97,7 @@ const NetworkFormField = forwardRef(function NetworkFormField({ direction, label
             {label}
         </label>
         <div ref={ref} className={`mt-1.5 `}>
-            <CommandSelectWrapper
+            <CommandSelectWrapper<Layer>
                 disabled={false}
                 valueGrouper={valueGrouper}
                 placeholder={placeholder}
@@ -99,10 +110,10 @@ const NetworkFormField = forwardRef(function NetworkFormField({ direction, label
     </div>)
 });
 
-function groupByType(values: ISelectMenuItem[]) {
-    let groups: SelectMenuItemGroup[] = [];
+function groupByType(values: SelectMenuItem<Layer>[]) {
+    let groups: SelectMenuItemGroup<Layer>[] = [];
     values.forEach((v) => {
-        let group = groups.find(x => x.name == v.group) || new SelectMenuItemGroup({ name: v.group, items: [] });
+        let group = groups.find(x => x.name == v.group) || new SelectMenuItemGroup<Layer>({ name: v.group, items: [] });
         group.items.push(v);
         if (!groups.find(x => x.name == v.group)) {
             groups.push(group);
@@ -115,7 +126,7 @@ function groupByType(values: ISelectMenuItem[]) {
 
     groups.sort((a, b) => {
         // Sort put networks first then exchanges
-        return (GROUP_ORDERS[a.name] || GROUP_ORDERS.Other) - (GROUP_ORDERS[b.name] || GROUP_ORDERS.Other);
+        return (GROUP_ORDERS[a.name as GroupOrderKeysType] || GROUP_ORDERS.Other) - (GROUP_ORDERS[b.name as GroupOrderKeysType] || GROUP_ORDERS.Other);
     });
 
     return groups;

app/components/Input/NumericInput.tsx

@@ -21,9 +21,34 @@ type Input = {
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
 
+const onInput = (event: React.ChangeEvent<HTMLInputElement>, precision: number) => { 
+  replaceComma(event); 
+  limitDecimalPlaces(event, precision) 
+}
+
+
 // Use with Formik
 const NumericInput: FC<Input> = forwardRef<HTMLInputElement, Input>(
-    function NumericInput({ label, pattern, disabled, placeholder, min, max, minLength, maxLength, precision, step, name, className, children, onChange }, ref) {
+
+    function NumericInput(
+      { 
+        label, 
+        pattern, 
+        disabled, 
+        placeholder, 
+        min, 
+        max, 
+        minLength, 
+        maxLength, 
+        precision, 
+        step, 
+        name, 
+        className, 
+        children, 
+        onChange 
+      }, 
+      ref
+    ) {
         const { handleChange } = useFormikContext<SwapFormValues>();
         const [field] = useField(name)
 
@@ -46,7 +71,7 @@ const NumericInput: FC<Input> = forwardRef<HTMLInputElement, Input>(
                     max={max}
                     minLength={minLength}
                     maxLength={maxLength}
-                    onInput={(event: React.ChangeEvent<HTMLInputElement>) => { replaceComma(event); limitDecimalPlaces(event, precision) }}
+                    onInput={(event: React.ChangeEvent<HTMLInputElement>) => { onInput(event, precision as number) }}
                     type="text"
                     step={step}
                     name={name}
@@ -69,20 +94,20 @@ const NumericInput: FC<Input> = forwardRef<HTMLInputElement, Input>(
         </>;
     });
 
-function limitDecimalPlaces(e, count) {
+function limitDecimalPlaces(e: React.ChangeEvent<HTMLInputElement>, count: number) {
     if (e.target.value.indexOf('.') == -1) { return; }
     if ((e.target.value.length - e.target.value.indexOf('.')) > count) {
-        e.target.value = ParseFloat(e.target.value, count);
+        e.target.value = ParseFloat(e.target.value, count).toString()
     }
 }
 
-function ParseFloat(str, val) {
+function ParseFloat(str: string, val: number): number {
     str = str.toString();
     str = str.slice(0, (str.indexOf(".")) + val + 1);
     return Number(str);
 }
 
-function replaceComma(e) {
+function replaceComma(e: React.ChangeEvent<HTMLInputElement>) {
     var val = e.target.value;
     if (val.match(/\,/)) {
         val = val.replace(/\,/g, '.');

app/components/MessageComponent.tsx

@@ -1,10 +1,11 @@
+import { PropsWithChildren } from "react";
 import CancelIcon from "./icons/CancelIcon";
 import DelayIcon from "./icons/DelayIcon";
 import FailIcon from "./icons/FailIcon";
 import SuccessIcon from "./icons/SuccessIcon";
 type iconStyle = 'red' | 'green' | 'yellow' | 'gray'
 
-class MessageComponentProps {
+interface MessageComponentProps {
     children: JSX.Element | JSX.Element[];
     center?: boolean
     icon: iconStyle
@@ -31,48 +32,56 @@ function constructIcons(icon: iconStyle) {
     return iconStyle
 }
 
-const MessageComponent = ({ children }) => {
-    return <div className="w-full flex flex-col h-full justify-between pt-6 min-h-full">
-        {children}
-    </div>
-}
+  // Don't use FC
+const MessageComponent = ({ 
+  children 
+}: PropsWithChildren) => (
+  <div className="w-full flex flex-col h-full justify-between pt-6 min-h-full">
+    {children}
+  </div>
+)
 
-const Content = ({ children, icon, center }: MessageComponentProps) => {
-    return (
-        center ?
-            <div className='flex flex-col self-center grow w-full'>
-                <div className='flex self-center grow w-full'>
-                    <div className='flex flex-col space-y-8 self-center w-full'>
-                        <div className='flex place-content-center'>{constructIcons(icon)}</div>
-                        {children}
-                    </div>
-                </div>
-            </div>
-            :
-            <div className='space-y-3'>
+const Content: React.FC<MessageComponentProps> = ({ children, icon, center }) => (
+  center ? (
+    <div className='flex flex-col self-center grow w-full'>
+        <div className='flex self-center grow w-full'>
+            <div className='flex flex-col space-y-8 self-center w-full'>
                 <div className='flex place-content-center'>{constructIcons(icon)}</div>
                 {children}
             </div>
-    )
-}
-
-const Header = ({ children }) => {
-    return <div className='md:text-3xl text-lg font-bold text-primary-text leading-6 text-center'>
+        </div>
+    </div>
+  ) : (
+    <div className='space-y-3'>
+        <div className='flex place-content-center'>{constructIcons(icon)}</div>
         {children}
     </div>
-}
+  )
+)
 
-const Description = ({ children }) => {
-    return <div className="text-base font-medium space-y-6 text-secondary-text text-center mb-6">
-        {children}
-    </div>
-}
+const Header: React.FC<PropsWithChildren> = ({ 
+  children 
+}) => (
+  <div className='md:text-3xl text-lg font-bold text-primary-text leading-6 text-center'>
+    {children}
+  </div>
+)
 
-const Buttons = ({ children }) => {
-    return <div className="space-y-3">
-        {children}
-    </div>
-}
+const Description: React.FC<PropsWithChildren> = ({ 
+  children 
+}) => (
+  <div className="text-base font-medium space-y-6 text-secondary-text text-center mb-6">
+    {children}
+  </div>
+)
+
+const Buttons: React.FC<PropsWithChildren> = ({ 
+  children 
+}) => (
+    <div className="space-y-3">
+      {children}
+  </div>
+)
 
 MessageComponent.Content = Content
 MessageComponent.Header = Header

app/components/NoCookies.tsx

@@ -1,11 +1,9 @@
-import { useEffect, useState } from "react";
-import MessageComponent from "./MessageComponent";
-import Navbar from "./navbar";
-import inIframe from "./utils/inIframe";
-import Link from "next/link";
-import { useRouter } from "next/router";
+import React, { useEffect, useState } from "react"
+import MessageComponent from "./MessageComponent"
+import inIframe from "./utils/inIframe"
+import Link from "next/link"
 
-function NoCookies(props) {
+const NoCookies: React.FC = () => {
     const [embedded, setEmbedded] = useState<boolean>()
 
     useEffect(() => {
@@ -49,4 +47,4 @@ function NoCookies(props) {
     );
 }
 
-export default NoCookies;
+export default NoCookies

app/components/ProgressBar.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 "use client"
 
 import * as React from "react"
@@ -7,8 +8,9 @@ import { classNames } from "./utils/classNames"
 const Progress = React.forwardRef<
     React.ElementRef<typeof ProgressPrimitive.Root>,
     React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+// @ts-ignore
 >(({ className, value, ...props }, ref) => (
-    <ProgressPrimitive.Root
+  <ProgressPrimitive.Root
         ref={ref}
         className={classNames(
             "relative h-4 w-full overflow-hidden rounded-full bg-primary/20",

app/components/QRCodeWallet.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { FC, useState } from "react"
 import { QRCodeSVG } from "qrcode.react";
 import { classNames } from "./utils/classNames";

app/components/ResizablePanel.tsx

@@ -37,7 +37,7 @@ export default function ResizablePanel({ children, className }: { children: Reac
 
 const ignoreCircularReferences = () => {
     const seen = new WeakSet();
-    return (key, value) => {
+    return (key: string, value: any) => {
         if (key.startsWith("_")) return; // Don't compare React's internal props.
         if (typeof value === "object" && value !== null) {
             if (seen.has(value)) return;

app/components/Select/Command/CommandSelectWrapper.tsx

@@ -1,17 +1,17 @@
 import { useCallback, useState } from 'react'
 import Image from 'next/image'
 import {ChevronDown } from 'lucide-react'
-import { ISelectMenuItem, SelectMenuItem } from '../Shared/Props/selectMenuItem'
+import { SelectMenuItem } from '../Shared/Props/selectMenuItem'
 import CommandSelect, { SelectMenuItemGroup } from './commandSelect'
 
-type CommandSelectWrapperProps = {
-    setValue: (value: ISelectMenuItem) => void;
-    values: ISelectMenuItem[];
-    value?: ISelectMenuItem;
+type CommandSelectWrapperProps<T> = {
+    setValue: (value: SelectMenuItem<T>) => void;
+    values: SelectMenuItem<T>[];
+    value?: SelectMenuItem<T>;
     placeholder: string;
     searchHint: string;
     disabled: boolean;
-    valueGrouper: (values: ISelectMenuItem[]) => SelectMenuItemGroup[];
+    valueGrouper: (values: SelectMenuItem<T>[]) => SelectMenuItemGroup<T>[];
 }
 
 export default function CommandSelectWrapper<T>({
@@ -22,7 +22,7 @@ export default function CommandSelectWrapper<T>({
     searchHint,
     values,
     valueGrouper
-}: CommandSelectWrapperProps) {
+}: CommandSelectWrapperProps<T>) {
     const [showModal, setShowModal] = useState(false)
 
     function openModal() {
@@ -77,7 +77,7 @@ export default function CommandSelectWrapper<T>({
                     </span>
                 </button>
             </div>
-            <CommandSelect
+            <CommandSelect<T>
                 setShow={setShowModal}
                 setValue={handleSelect}
                 show={showModal}

app/components/Select/Command/commandSelect.tsx

@@ -1,4 +1,5 @@
-import { ISelectMenuItem } from '../Shared/Props/selectMenuItem'
+import React, { Dispatch, SetStateAction } from "react";
+import { SelectMenuItem } from '../Shared/Props/selectMenuItem'
 import {
     CommandEmpty,
     CommandGroup,
@@ -7,7 +8,6 @@ import {
     CommandList,
     CommandWrapper
 } from '../../shadcn/command'
-import React from "react";
 import useWindowDimensions from '../../../hooks/useWindowDimensions';
 import SelectItem from '../Shared/SelectItem';
 import { SelectProps } from '../Shared/Props/SelectProps'
@@ -15,25 +15,33 @@ import Modal from '../../modal/modal';
 import { Info } from 'lucide-react';
 import { LayerDisabledReason } from '../Popover/PopoverSelect';
 
-export interface CommandSelectProps extends SelectProps {
+export interface CommandSelectProps<T> extends SelectProps<T> {
     show: boolean;
-    setShow: (value: boolean) => void;
+    setShow:  Dispatch<SetStateAction<boolean>>
     searchHint: string;
-    valueGrouper: (values: ISelectMenuItem[]) => SelectMenuItemGroup[];
+    valueGrouper: (values: SelectMenuItem<T>[]) => SelectMenuItemGroup<T>[];
 }
 
-export class SelectMenuItemGroup {
-    constructor(init?: Partial<SelectMenuItemGroup>) {
+export class SelectMenuItemGroup<T> {
+    constructor(init?: Partial<SelectMenuItemGroup<T>>) {
         Object.assign(this, init);
     }
 
-    name: string;
-    items: ISelectMenuItem[];
+    name: string = ''
+    items: SelectMenuItem<T>[] = []
 }
 
-export default function CommandSelect({ values, setValue, show, setShow, searchHint, valueGrouper }: CommandSelectProps) {
+export default function CommandSelect<T>({ 
+  values, 
+  setValue, 
+  show, 
+  setShow, 
+  searchHint, 
+  valueGrouper 
+}: CommandSelectProps<T>) {
+
     const { isDesktop } = useWindowDimensions();
-    let groups: SelectMenuItemGroup[] = valueGrouper(values);
+    let groups: SelectMenuItemGroup<T>[] = valueGrouper(values);
     return (
         <Modal height='full' show={show} setShow={setShow}>
             {show ?
@@ -55,7 +63,7 @@ export default function CommandSelect({ values, setValue, show, setShow, searchH
                                             setValue(item)
                                             setShow(false)
                                         }}>
-                                            <SelectItem item={item} />
+                                            <SelectItem<T> item={item} />
                                         </CommandItem>)
                                     }
                                 </CommandGroup>)

app/components/Select/Popover/PopoverSelect.tsx

@@ -2,7 +2,7 @@ import { SelectProps } from '../Shared/Props/SelectProps'
 import { CommandItem, CommandList, CommandWrapper } from '../../shadcn/command';
 import SelectItem from '../Shared/SelectItem';
 
-export default function PopoverSelect({ values, value, setValue }: SelectProps) {
+export default function PopoverSelect<T>({ values, value, setValue }: SelectProps<T>) {
 
     return (
         <CommandWrapper>
@@ -11,7 +11,7 @@ export default function PopoverSelect({ values, value, setValue }: SelectProps)
                     <CommandItem disabled={!item.isAvailable.value} value={item.id} key={item.id} onSelect={() => {
                         setValue(item)
                     }}>
-                        <SelectItem item={item} />
+                        <SelectItem<T> item={item} />
                     </CommandItem>)
                 }
             </CommandList>

app/components/Select/Popover/PopoverSelectWrapper.tsx

@@ -1,16 +1,17 @@
+// @ts-nocheck
 import { useCallback, useState } from 'react'
 import Image from 'next/image'
 import { ChevronDown } from 'lucide-react'
-import { ISelectMenuItem, SelectMenuItem } from '../Shared/Props/selectMenuItem'
+import { SelectMenuItem } from '../Shared/Props/selectMenuItem'
 import { Popover, PopoverContent, PopoverTrigger } from '../../shadcn/popover'
 import PopoverSelect from './PopoverSelect'
 
-type PopoverSelectWrapper = {
-    setValue: (value: ISelectMenuItem) => void;
-    values: ISelectMenuItem[];
-    value?: ISelectMenuItem;
-    placeholder?: string;
-    searchHint?: string;
+export interface PopoverSelectWrapperProps<T> {
+    setValue: (value: SelectMenuItem<T>) => void
+    values: SelectMenuItem<T>[]
+    value?: SelectMenuItem<T>
+    placeholder?: string
+    searchHint?: string
     disabled?: boolean
 }
 
@@ -19,7 +20,7 @@ export default function PopoverSelectWrapper<T>({
     value,
     values,
     disabled
-}: PopoverSelectWrapper) {
+}: PopoverSelectWrapperProps<T>) {
     const [showModal, setShowModal] = useState(false)
 
     const handleSelect = useCallback((item: SelectMenuItem<T>) => {
@@ -28,7 +29,7 @@ export default function PopoverSelectWrapper<T>({
     }, [])
 
     return (
-        disabled ?
+        disabled ? (
             <div className="relative">
                 <div className='w-full py-0 px-3 md:px-5  border-transparent bg-transparent font-semibold rounded-md'>
                     <span className="flex items-center">
@@ -49,7 +50,8 @@ export default function PopoverSelectWrapper<T>({
                     </span>
                 </div>
             </div>
-            :
+
+        ) : (
             <Popover open={showModal} onOpenChange={() => setShowModal(!showModal)}>
                 <PopoverTrigger asChild>
                     {
@@ -81,8 +83,9 @@ export default function PopoverSelectWrapper<T>({
                     }
                 </PopoverTrigger>
                 <PopoverContent className="w-fit">
-                    <PopoverSelect setValue={handleSelect} value={value} values={values} />
+                    <PopoverSelect<T> setValue={handleSelect} value={value} values={values} />
                 </PopoverContent>
             </Popover>
+        )
     )
 }

app/components/Select/Shared/Props/SelectProps.tsx

@@ -1,7 +1,7 @@
-import { ISelectMenuItem } from '../../Shared/Props/selectMenuItem'
+import { SelectMenuItem } from '../../Shared/Props/selectMenuItem'
 
-export interface SelectProps {
-    values: ISelectMenuItem[],
-    value?: ISelectMenuItem;
-    setValue: (value: ISelectMenuItem) => void;
+export interface SelectProps<T> {
+    values: SelectMenuItem<T>[]
+    value?: SelectMenuItem<T>
+    setValue: (value: SelectMenuItem<T>) => void
 }

app/components/Select/Shared/Props/selectMenuItem.tsx

@@ -1,7 +1,7 @@
 import { CurrencyDisabledReason } from "../../../Input/CurrencyFormField";
 import { LayerDisabledReason } from "../../Popover/PopoverSelect";
 
-export class SelectMenuItem<T> implements ISelectMenuItem {
+export class SelectMenuItem<T> implements ISelectMenuItem<T> {
     id: string;
     name: string;
     order: number;
@@ -28,14 +28,16 @@ export class SelectMenuItem<T> implements ISelectMenuItem {
     }
 }
 
-export interface ISelectMenuItem {
-    id: string;
-    name: string;
-    imgSrc: string;
-    group?: string;
+export interface ISelectMenuItem<T> {
+    id: string
+    name: string
+    imgSrc: string
+    group?: string
     isAvailable: {
         value: boolean;
         disabledReason: LayerDisabledReason | CurrencyDisabledReason | null
-    };
-    details?: string;
+    }
+    details?: string
+    baseObject: T
+
 }

app/components/Select/Shared/SelectItem.tsx

@@ -1,7 +1,7 @@
-import { ISelectMenuItem } from "./Props/selectMenuItem";
+import { SelectMenuItem } from "./Props/selectMenuItem";
 import Image from 'next/image'
 
-export default function SelectItem({ item }: { item: ISelectMenuItem }) {
+export default function SelectItem<T>({ item }: { item: SelectMenuItem<T> }) {
     return (<div className="flex items-center w-full">
         <div className="flex-shrink-0 h-6 w-6 relative">
             {item.imgSrc && <Image

app/components/SendEmail.tsx

@@ -1,6 +1,6 @@
 import { Disclosure } from '@headlessui/react';
 import { Album, ChevronDown, Mail, ScrollText, User } from 'lucide-react';
-import { Field, Form, Formik, FormikErrors } from 'formik';
+import { Field, FieldProps, Form, Formik, FormikErrors } from 'formik';
 import { FC, useCallback } from 'react'
 import toast from 'react-hot-toast';
 import { useAuthDataUpdate, useAuthState } from '../context/authContext';
@@ -9,6 +9,7 @@ import TokenService from '../lib/TokenService';
 import BridgeAuthApiClient from '../lib/userAuthApiClient';
 import SubmitButton from './buttons/submitButton';
 import { Widget } from './Widget/Index';
+import toastError from '../helpers/toastError';
 
 type EmailFormValues = {
     email: string;
@@ -46,12 +47,12 @@ const SendEmail: FC<Props> = ({ onSend, disclosureLogin }) => {
             onSend(inputEmail)
         }
         catch (error) {
-            if (error.response?.data?.errors?.length > 0) {
-                const message = error.response.data.errors.map(e => e.message).join(", ")
+            if ((error as any).response?.data?.errors?.length > 0) {
+                const message = (error as any).response.data.errors.map((e: any) => (e.message!)).join(", ")
                 toast.error(message)
             }
             else {
-                toast.error(error.message)
+              toastError(error)
             }
         }
     }, [tempEmail])
@@ -102,7 +103,7 @@ const SendEmail: FC<Props> = ({ onSend, disclosureLogin }) => {
                                                     <div className='grid gap-4 grid-cols-5  items-center'>
                                                         <div className="relative rounded-md shadow-sm col-span-3">
                                                             <Field name="email">
-                                                                {({ field }) => (
+                                                                {({ field }: FieldProps<any>) => (
                                                                     <input
                                                                         {...field}
                                                                         id='email'
@@ -137,7 +138,7 @@ const SendEmail: FC<Props> = ({ onSend, disclosureLogin }) => {
                                         </div>
                                         <div className="relative rounded-md shadow-sm">
                                             <Field name="email">
-                                                {({ field }) => (
+                                                {({ field }: FieldProps<any>) => (
                                                     <input
                                                         {...field}
                                                         id='email'

app/components/SolanaProvider.tsx

@@ -11,11 +11,11 @@ import {
     WalletProvider,
 } from "@solana/wallet-adapter-react";
 import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
-import { ReactNode, useMemo } from "react";
+import { PropsWithChildren, ReactNode, useMemo } from "react";
 require("@solana/wallet-adapter-react-ui/styles.css");
 const WALLETCONNECT_PROJECT_ID = '28168903b2d30c75e5f7f2d71902581b';
 
-function SolanaProvider({ children }: { children: ReactNode }) {
+function SolanaProvider({ children }: PropsWithChildren) {
     const solNetwork = WalletAdapterNetwork.Mainnet;
     const endpoint = useMemo(() => clusterApiUrl(solNetwork), [solNetwork]);
     const wallets = useMemo(

app/components/Swap/Form/index.tsx

@@ -27,6 +27,7 @@ import { ChevronRight } from "lucide-react";
 import { AnimatePresence, motion } from "framer-motion";
 import dynamic from "next/dynamic";
 import ResizablePanel from "../../ResizablePanel";
+import toastError from "../../../helpers/toastError";
 
 type NetworkToConnect = {
     DisplayName: string;
@@ -81,7 +82,7 @@ export default function Form() {
                     setUserType(UserType.GuestUser)
                 }
                 catch (error) {
-                    toast.error(error.response?.data?.error || error.message)
+                    toast.error(((error as any).response?.data?.error || (error as any).message) as string)
                     return;
                 }
             }
@@ -102,7 +103,7 @@ export default function Form() {
             }
         }
         catch (error) {
-            const data: ApiError = error?.response?.data?.error
+            const data: ApiError = (error as any).response?.data?.error
             if (data?.code === LSAPIKnownErrorCode.BLACKLISTED_ADDRESS) {
                 toast.error("You can't transfer to that address. Please double check.")
             }
@@ -117,7 +118,7 @@ export default function Form() {
                 setShowConnectNetworkModal(true);
             }
             else {
-                toast.error(error.message)
+              toastError(error)
             }
         }
     }, [createSwap, query, partner, router, updateAuthData, setUserType, swap])

app/components/Swap/Withdraw/Coinbase/Authorize.tsx

@@ -19,6 +19,7 @@ import { motion } from 'framer-motion';
 import { useCoinbaseStore } from './CoinbaseStore';
 import { useRouter } from 'next/router';
 import { Widget } from '../../../Widget/Index';
+import toastError from '../../../../helpers/toastError';
 
 type Props = {
     onAuthorized: () => void,
@@ -33,7 +34,7 @@ const Authorize: FC<Props> = ({ onAuthorized, stickyFooter, onDoNotConnect, hide
     const router = useRouter()
     let alreadyFamiliar = useCoinbaseStore((state) => state.alreadyFamiliar);
     let toggleAlreadyFamiliar = useCoinbaseStore((state) => state.toggleAlreadyFamiliar);
-    const [carouselFinished, setCarouselFinished] = useState(alreadyFamiliar)
+    const [carouselFinished, setCarouselFinished] = useState<boolean>(alreadyFamiliar)
 
     const [authWindow, setAuthWindow] = useState<Window | null>()
     const [firstScreen, setFirstScreen] = useState<boolean>(true)
@@ -68,7 +69,7 @@ const Authorize: FC<Props> = ({ onAuthorized, stickyFooter, onDoNotConnect, hide
 
     useInterval(
         checkShouldStartPolling,
-        authWindow && !authWindow.closed ? 1000 : null,
+        authWindow && !authWindow.closed ? 1000 : 0,
     )
 
     const handleConnect = useCallback(() => {
@@ -89,8 +90,8 @@ const Authorize: FC<Props> = ({ onAuthorized, stickyFooter, onDoNotConnect, hide
             const authWindow = OpenLink({ link: oauth_authorize_url + encoded, query: router.query, swapId: swap.id })
             setAuthWindow(authWindow)
         }
-        catch (e) {
-            toast.error(e.message)
+        catch (error) {
+          toastError(error)
         }
     }, [carouselFinished, alreadyFamiliar, swap?.id, oauth_authorize_url, router.query])
 
@@ -101,11 +102,11 @@ const Authorize: FC<Props> = ({ onAuthorized, stickyFooter, onDoNotConnect, hide
 
     const exchange_name = exchange?.display_name
 
-    const onCarouselLast = (value) => {
+    const onCarouselLast = (value: boolean) => {
         setCarouselFinished(value)
     }
 
-    const handleToggleChange = (e) => {
+    const handleToggleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         if (e.target.checked) {
             carouselRef?.current?.goToLast();
         } else {
@@ -128,19 +129,19 @@ const Authorize: FC<Props> = ({ onAuthorized, stickyFooter, onDoNotConnect, hide
                     <div className="w-full flex flex-col self-center h-[100%]">
                         {swap && <Carousel onLast={onCarouselLast} onFirst={setFirstScreen} ref={carouselRef} starAtLast={alreadyFamiliar}>
                             <CarouselItem width={100} >
-                                <FirstScreen exchange_name={exchange_name} />
+                                <FirstScreen name={exchange_name} />
                             </CarouselItem>
                             <CarouselItem width={100}>
                                 <SecondScreen />
                             </CarouselItem>
                             <CarouselItem width={100}>
-                                <ThirdScreen minimalAuthorizeAmount={minimalAuthorizeAmount} />
+                                <ThirdScreen minimalAuthorizeAmount={minimalAuthorizeAmount as number} />
                             </CarouselItem>
                             <CarouselItem width={100}>
-                                <FourthScreen minimalAuthorizeAmount={minimalAuthorizeAmount} />
+                                <FourthScreen minimalAuthorizeAmount={minimalAuthorizeAmount as number} />
                             </CarouselItem>
                             <CarouselItem width={100}>
-                                <LastScreen number={!alreadyFamiliar} minimalAuthorizeAmount={Number(minimalAuthorizeAmount)} />
+                                <LastScreen number={!alreadyFamiliar} minimalAuthorizeAmount={minimalAuthorizeAmount as number} />
                             </CarouselItem>
                         </Carousel>}
                     </div>

app/components/Swap/Withdraw/Coinbase/Coinbase2FA.tsx

@@ -13,6 +13,7 @@ import MessageComponent from '../../../MessageComponent';
 import Modal from '../../../modal/modal';
 import TimerWithContext from '../../../TimerComponent';
 import { Widget } from '../../../Widget/Index';
+import toastError from '../../../../helpers/toastError';
 
 const TIMER_SECONDS = 120
 
@@ -47,11 +48,11 @@ const Coinbase2FA: FC<Props> = ({ onSuccess, footerStickiness = true }) => {
             await onSuccess(swap.id)
         }
         catch (error) {
-            const data: ApiError = error?.response?.data?.error
+            const data: ApiError = (error as any).response?.data?.error
 
             if (!data) {
-                toast.error(error.message)
-                return
+              toastError(error)
+              return
             }
             else if (data.code === LSAPIKnownErrorCode.INSUFFICIENT_FUNDS) {
                 setShowInsufficientFundsModal(true)
@@ -75,15 +76,13 @@ const Coinbase2FA: FC<Props> = ({ onSuccess, footerStickiness = true }) => {
             const bridgeApiClient = new BridgeApiClient()
             await bridgeApiClient.WithdrawFromExchange(swap.id, swap.source_exchange)
         } catch (error) {
-            const data: ApiError = error?.response?.data?.error
+            const data: ApiError = (error as any).response?.data?.error
 
             if (!data) {
-                toast.error(error.message)
-                return
+                toastError(error)
             }
-            if (data.code === LSAPIKnownErrorCode.COINBASE_INVALID_2FA) {
+            else if (data.code === LSAPIKnownErrorCode.COINBASE_INVALID_2FA) {
                 startTimer(TIMER_SECONDS)
-                return
             }
             else {
                 toast.error(data.message)

app/components/Swap/Withdraw/Coinbase/ConnectGuideScreens.tsx

@@ -1,13 +1,19 @@
-export const FirstScreen = ({ exchange_name }) => {
+import React from "react"
+
+export const FirstScreen: React.FC<{
+  name: string
+}> = ({ 
+  name 
+}) => {
     return <div className="inline-flex flex-col relative top-0 left-0 grow w-full">
-        <div className='whitespace-normal text-primary-text grow text-md font-normal pb-2'><span className='font-medium text-primary'>.01</span><span>&nbsp;After this guide you&apos;ll be redirected to </span>{exchange_name}<span></span></div>
+        <div className='whitespace-normal text-primary-text grow text-md font-normal pb-2'><span className='font-medium text-primary'>.01</span><span>&nbsp;After this guide you&apos;ll be redirected to </span>{name}<span></span></div>
         <div className="w-1/2 m-auto">
             <FirstScreenImage />
         </div>
     </div>
 }
 
-export const SecondScreen = () => {
+export const SecondScreen: React.FC = () => {
     return <div className="inline-flex flex-col relative top-0 left-0 grow w-full">
         <div className='whitespace-normal text-primary-text grow text-md font-normal pb-2'><span className='font-medium text-primary'>.02</span><span>&nbsp;When in Coinbase, click&nbsp;</span><span className='strong-highlight font-medium'>Change this amount</span></div>
         <div className="w-1/2 m-auto">
@@ -16,40 +22,52 @@ export const SecondScreen = () => {
     </div>
 }
 
-export const ThirdScreen = ({ minimalAuthorizeAmount }) => {
-    return <div className="inline-flex flex-col relative top-0 left-0 grow w-full">
-        <div className='whitespace-normal text-primary-text grow text-md font-normal pb-2'><span className='font-medium text-primary'>.03</span><span>&nbsp;Change the existing 1.0 value to&nbsp;</span><span className='strong-highlight font-medium'>{minimalAuthorizeAmount}</span><span>&nbsp;and click Save</span></div>
-        <div className="w-1/2  m-auto">
-            <ThirdScreenImage minimalAuthorizeAmount={minimalAuthorizeAmount} />
-        </div>
+export const ThirdScreen: React.FC<{
+  minimalAuthorizeAmount: number
+}> = ({ 
+  minimalAuthorizeAmount 
+}) => (
+  <div className="inline-flex flex-col relative top-0 left-0 grow w-full">
+    <div className='whitespace-normal text-primary-text grow text-md font-normal pb-2'><span className='font-medium text-primary'>.03</span><span>&nbsp;Change the existing 1.0 value to&nbsp;</span><span className='strong-highlight font-medium'>{minimalAuthorizeAmount}</span><span>&nbsp;and click Save</span></div>
+    <div className="w-1/2  m-auto">
+      <ThirdScreenImage minimalAuthorizeAmount={minimalAuthorizeAmount} />
     </div>
-}
+  </div>
+)
 
-export const FourthScreen = ({ minimalAuthorizeAmount }) => {
-    return <div className="inline-flex flex-col relative top-0 left-0 grow w-full">
-        <div className='whitespace-normal text-primary-text grow text-md font-normal pb-2'><span className='font-medium text-primary'>.04</span><span>&nbsp;Make sure that the amount is&nbsp;</span><span className='strong-highlight font-medium'>{minimalAuthorizeAmount}</span><span>&nbsp;and click&nbsp;</span><span className='strong-highlight font-medium'>Authorize</span></div>
-        <div className="w-1/2  m-auto">
-            <FourthScreenImage minimalAuthorizeAmount={minimalAuthorizeAmount} />
-        </div>
+export const FourthScreen: React.FC<{
+  minimalAuthorizeAmount: number
+}> = ({ 
+  minimalAuthorizeAmount 
+}) => (
+  <div className="inline-flex flex-col relative top-0 left-0 grow w-full">
+    <div className='whitespace-normal text-primary-text grow text-md font-normal pb-2'><span className='font-medium text-primary'>.04</span><span>&nbsp;Make sure that the amount is&nbsp;</span><span className='strong-highlight font-medium'>{minimalAuthorizeAmount}</span><span>&nbsp;and click&nbsp;</span><span className='strong-highlight font-medium'>Authorize</span></div>
+    <div className="w-1/2  m-auto">
+      <FourthScreenImage minimalAuthorizeAmount={minimalAuthorizeAmount} />
     </div>
-}
+  </div>
+)
 
-export const LastScreen = ({ minimalAuthorizeAmount, number }: { minimalAuthorizeAmount: number, number?: boolean }) => {
-    return (
-        <div className="inline-flex flex-col left-0 l relative top-0 grow w-full">
-            <div className='text-primary-text text-md font-normal grow w-full pb-2 '>
-                {number &&
-                    <span className='font-medium text-primary'>.05</span>
-                }
-                <span>&nbsp;Make sure to change the allowed amount to&nbsp;</span>
-                <span className='strong-highlight'>{minimalAuthorizeAmount}</span>
-            </div>
-            <div className="w-1/2  m-auto">
-                <LastScreenImage minimalAuthorizeAmount={minimalAuthorizeAmount} />
-            </div>
-        </div>
-    );
-}
+
+
+export const LastScreen: React.FC<{
+  minimalAuthorizeAmount: number
+  number?: boolean 
+}> = ({ 
+  minimalAuthorizeAmount, 
+  number
+}) => (
+  <div className="inline-flex flex-col left-0 l relative top-0 grow w-full">
+    <div className='text-primary-text text-md font-normal grow w-full pb-2 '>
+      {number && (<span className='font-medium text-primary'>.05</span>) }
+      <span>&nbsp;Make sure to change the allowed amount to&nbsp;</span>
+      <span className='strong-highlight'>{minimalAuthorizeAmount}</span>
+    </div>
+    <div className="w-1/2  m-auto">
+      <LastScreenImage minimalAuthorizeAmount={minimalAuthorizeAmount} />
+    </div>
+  </div>
+)
 
 export const FirstScreenImage = () => {
     return <svg viewBox="0 0 413 484" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -221,8 +239,12 @@ export const SecondScreenImage = () => {
     </svg>
 }
 
-export const ThirdScreenImage = ({ minimalAuthorizeAmount }) => {
-    return <svg viewBox="0 0 413 484" fill="none" xmlns="http://www.w3.org/2000/svg">
+export const ThirdScreenImage: React.FC<{
+  minimalAuthorizeAmount: number
+}> = ({ 
+  minimalAuthorizeAmount 
+}) => (
+    <svg viewBox="0 0 413 484" fill="none" xmlns="http://www.w3.org/2000/svg">
         <g clipPath="url(#clip0_1740_1883)">
             <rect x="3" width="407" height="844" rx="50" fill="url(#paint0_linear_1740_1883)" />
             <rect x="19" y="16" width="375" height="812" rx="36" fill="#2261EB" />
@@ -407,11 +429,14 @@ export const ThirdScreenImage = ({ minimalAuthorizeAmount }) => {
             </clipPath>
         </defs>
     </svg>
+)
 
-}
-
-export const FourthScreenImage = ({ minimalAuthorizeAmount }) => {
-    return <svg viewBox="0 0 413 484" fill="none" xmlns="http://www.w3.org/2000/svg">
+export const FourthScreenImage: React.FC<{
+  minimalAuthorizeAmount: number
+}> = ({ 
+  minimalAuthorizeAmount 
+}) => (
+    <svg viewBox="0 0 413 484" fill="none" xmlns="http://www.w3.org/2000/svg">
         <g clipPath="url(#clip0_1743_2570)">
             <rect x="3" width="407" height="844" rx="50" fill="url(#paint0_linear_1743_2570)" />
             <rect x="19" y="16" width="375" height="812" rx="36" fill="#2261EB" />
@@ -519,10 +544,15 @@ export const FourthScreenImage = ({ minimalAuthorizeAmount }) => {
             </clipPath>
         </defs>
     </svg>
-}
+)
 
-export const LastScreenImage = ({ minimalAuthorizeAmount }) => {
-    return <svg viewBox="0 0 413 484" fill="none" className="h-full" xmlns="http://www.w3.org/2000/svg">
+export const LastScreenImage: React.FC<{
+  minimalAuthorizeAmount: number
+}> = ({ 
+  minimalAuthorizeAmount 
+}) => (
+  
+    <svg viewBox="0 0 413 484" fill="none" className="h-full" xmlns="http://www.w3.org/2000/svg">
         <g clipPath="url(#clip0_1743_2866)">
             <rect x="3" width="407" height="844" rx="50" fill="url(#paint0_linear_1743_2866)" />
             <g clipPath="url(#clip1_1743_2866)">
@@ -649,4 +679,4 @@ export const LastScreenImage = ({ minimalAuthorizeAmount }) => {
             </clipPath>
         </defs>
     </svg>
-}
+)

app/components/Swap/Withdraw/Coinbase/index.tsx

@@ -8,6 +8,7 @@ import { useSwapDataState, useSwapDataUpdate } from '../../../../context/swap';
 import BridgeApiClient, { PublishedSwapTransactionStatus } from '../../../../lib/BridgeApiClient';
 import { LSAPIKnownErrorCode } from '../../../../Models/ApiError';
 import toast from 'react-hot-toast';
+import toastError from '../../../../helpers/toastError';
 import { useSettingsState } from '../../../../context/settings';
 import { TimerProvider, useTimerState } from '../../../../context/timerContext';
 import { useSwapTransactionStore } from '../../../../stores/swapTransactionStore';
@@ -48,20 +49,28 @@ const TransferElements: FC = () => {
                 await bridgeApiClient.WithdrawFromExchange(swap.id, swap.source_exchange)
             }
             catch (e) {
-                if (e?.response?.data?.error?.code === LSAPIKnownErrorCode.COINBASE_INVALID_2FA) {
+                const code = (e as any).response?.data?.error?.code
+                const message = (e as any).response?.data?.error?.message
+
+                if (code === LSAPIKnownErrorCode.COINBASE_INVALID_2FA) {
                     startTimer(TIMER_SECONDS)
                     setCodeRequested(true)
                     setOpenCoinbase2FA(true)
                 }
-                else if (e?.response?.data?.error?.code === LSAPIKnownErrorCode.INVALID_CREDENTIALS || e?.response?.data?.error?.code === LSAPIKnownErrorCode.COINBASE_AUTHORIZATION_LIMIT_EXCEEDED) {
+                else if (
+                  code === LSAPIKnownErrorCode.INVALID_CREDENTIALS 
+                  || 
+                  code === LSAPIKnownErrorCode.COINBASE_AUTHORIZATION_LIMIT_EXCEEDED
+                ) {
                     setCodeRequested(false)
                     alert("You have not authorized enough to be able to complete the transfer. Please authorize again.")
                 }
-                else if (e?.response?.data?.error?.message) {
-                    toast(e?.response?.data?.error?.message)
+                else if (message) {
+                    toast(message)
+                }
+                else  {
+                  toastError(e)
                 }
-                else if (e?.message)
-                    toast(e.message)
             }
         }
         setLoading(false)

app/components/Swap/Withdraw/FiatTransfer.tsx

@@ -1,6 +1,6 @@
 import { Context, FC, createContext, useContext, useEffect, useRef, useState } from "react";
 import { useSwapDataState } from "../../../context/swap";
-import { StripeOnramp, loadStripeOnramp } from "@stripe/crypto";
+import { OnrampUIEventMap, StripeOnramp, loadStripeOnramp } from "@stripe/crypto";
 import { PublishedSwapTransactionStatus } from "../../../lib/BridgeApiClient";
 import { useSwapTransactionStore } from "../../../stores/swapTransactionStore";
 import inIframe from "../../utils/inIframe";
@@ -97,7 +97,7 @@ export const OnrampElement: FC<OnrampElementProps> = ({
                         },
                     })
                     .mount(containerRef)
-                const eventListener = async (e) => {
+                const eventListener = async (e: OnrampUIEventMap['onramp_session_updated']) => {
                     let transactionStatus: PublishedSwapTransactionStatus
                     if (e.payload.session.status === "fulfillment_complete")
                         transactionStatus = PublishedSwapTransactionStatus.Completed
@@ -108,10 +108,18 @@ export const OnrampElement: FC<OnrampElementProps> = ({
                         return
                     }
                     await setSwapTransaction(swapId, PublishedSwapTransactionStatus.Completed, e.payload.session.id);
+                } 
+
+                const uiLoaded = () => {
+                  setLoading(false)  
                 }
 
                 session.addEventListener("onramp_session_updated", eventListener)
-                session.addEventListener("onramp_ui_loaded", () => setLoading(false))
+                session.addEventListener("onramp_ui_loaded", uiLoaded)
+                return () => {
+                  session.removeEventListener("onramp_session_updated", eventListener)
+                  session.removeEventListener("onramp_ui_loaded", uiLoaded)
+                }
             }
         }
 

app/components/Swap/Withdraw/ManualTransfer.tsx

@@ -1,6 +1,7 @@
+// @ts-nocheck
 import { FC, useCallback } from "react"
 import useSWR from "swr"
-import { ArrowLeftRight } from "lucide-react"
+import { ArrowLeftRight, Network } from "lucide-react"
 import Image from 'next/image';
 import { ApiResponse } from "../../../Models/ApiResponse";
 import { useSettingsState } from "../../../context/settings";

app/components/Swap/Withdraw/Wallet/ImtblxWalletWithdrawStep.tsx

@@ -9,6 +9,7 @@ import WarningMessage from '../../../WarningMessage';
 import GuideLink from '../../../guideLink';
 import useWallet from '../../../../hooks/useWallet';
 import { useSwapTransactionStore } from '../../../../stores/swapTransactionStore';
+import toastError from '../../../../helpers/toastError';
 
 type Props = {
     depositAddress?: string
@@ -66,8 +67,7 @@ const ImtblxWalletWithdrawStep: FC<Props> = ({ depositAddress }) => {
             }
         }
         catch (e) {
-            if (e?.message)
-                toast(e.message)
+          toastError(e)
         }
         setLoading(false)
     }, [imxAccount, swap, source_network, depositAddress])

app/components/Swap/Withdraw/Wallet/RainbowKit.tsx

@@ -1,10 +1,10 @@
 import '@rainbow-me/rainbowkit/styles.css';
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import {
     ConnectButton,
 } from '@rainbow-me/rainbowkit';
 
-const RainbowKit: FC<{ children?: React.ReactNode }> = ({ children }) => {
+const RainbowKit: FC<PropsWithChildren> = ({ children }) => {
     return (
         <ConnectButton.Custom>
             {({

app/components/Swap/Withdraw/Wallet/StarknetWalletWithdraw.tsx

@@ -14,6 +14,7 @@ import KnownInternalNames from '../../../../lib/knownIds';
 import { parseUnits } from 'viem'
 import useWallet from '../../../../hooks/useWallet';
 import { useSwapTransactionStore } from '../../../../stores/swapTransactionStore';
+import toastError from '../../../../helpers/toastError';
 
 type Props = {
     depositAddress?: string;
@@ -63,7 +64,7 @@ const StarknetWalletWithdrawStep: FC<Props> = ({ depositAddress, amount }) => {
             await provider.connectWallet(source_layer?.chain_id)
         }
         catch (e) {
-            toast(e.message)
+          toastError(e)
         }
         setLoading(false)
     }, [source_layer, provider])
@@ -137,13 +138,12 @@ const StarknetWalletWithdrawStep: FC<Props> = ({ depositAddress, amount }) => {
                 }
             }
             catch (e) {
-                toast(e.message)
+              toastError(e)
             }
         }
         catch (e) {
-            if (e?.message)
-                toast(e.message)
-        }
+          toastError(e)
+      }
         setLoading(false)
     }, [wallet, swap, source_network, depositAddress, userId, sourceCurrency])
 

app/components/Swap/Withdraw/Wallet/WalletTransfer/TransferErc20.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { FC, useCallback, useEffect, useState } from "react";
 import {
     useAccount,
@@ -93,9 +94,10 @@ const TransferErc20Button: FC<TransferERC20ButtonProps> = ({
             }
         }
         catch (e) {
-            //TODO log to logger
-            console.error(e.message)
-        }
+            if ('message' in (e as Object)) {
+              console.error((e as any).message!)
+            }
+          }
     }, [contractWrite?.data?.hash, swapId, isContractWallet?.isContract])
 
     const clickHandler = useCallback(() => {

app/components/Swap/Withdraw/Wallet/WalletTransfer/TransferNativeToken.tsx

@@ -6,7 +6,7 @@ import {
     useWaitForTransaction,
     useNetwork,
 } from "wagmi";
-import { parseEther, createPublicClient, http } from 'viem'
+import { parseEther, createPublicClient, http, TransactionReceipt } from 'viem'
 import SubmitButton from "../../../../buttons/submitButton";
 import { PublishedSwapTransactionStatus } from "../../../../../lib/BridgeApiClient";
 import WalletIcon from "../../../../icons/WalletIcon";
@@ -40,6 +40,7 @@ const TransferNativeTokenButton: FC<TransferNativeTokenButtonProps> = ({
     const { setSwapTransaction } = useSwapTransactionStore();
     const { canDoSweepless, isContractWallet } = useWalletTransferOptions()
 
+      // @ts-ignore
     const sendTransactionPrepare = usePrepareSendTransaction({
         enabled: !!depositAddress && isContractWallet?.ready,
         to: depositAddress,
@@ -86,19 +87,21 @@ const TransferNativeTokenButton: FC<TransferNativeTokenButtonProps> = ({
             }
         }
         catch (e) {
-            //TODO log to logger
-            console.error(e.message)
-        }
+          if ('message' in (e as Object)) {
+            console.error((e as any).message!)
+          }
+      }
     }, [transaction?.data?.hash, swapId, isContractWallet?.isContract])
 
+      // @ts-ignore
     const waitForTransaction = useWaitForTransaction({
         hash: transaction?.data?.hash || savedTransactionHash,
-        onSuccess: async (trxRcpt) => {
+        onSuccess: async (trxRcpt: TransactionReceipt) => {
             setApplyingTransaction(true)
             setSwapTransaction(swapId, PublishedSwapTransactionStatus.Completed, trxRcpt.transactionHash);
             setApplyingTransaction(false)
         },
-        onError: async (err) => {
+        onError: async (err: Error) => {
             if (transaction?.data?.hash)
                 setSwapTransaction(swapId, PublishedSwapTransactionStatus.Error, transaction?.data?.hash, err.message);
         }

app/components/Swap/Withdraw/Wallet/WalletTransfer/index.tsx

@@ -54,9 +54,10 @@ const TransferFromWallet: FC<Props> = ({ networkDisplayName,
                 setSavedTransactionHash(hash)
         }
         catch (e) {
-            //TODO log to logger
-            console.error(e.message)
-        }
+          if ('message' in (e as Object)) {
+            console.error((e as any).message!)
+          }
+      }
     }, [swapId])
 
     const hexed_sequence_number = sequenceNumber?.toString(16)

app/components/Swap/Withdraw/Wallet/WalletTransfer/resolveError.tsx

@@ -3,33 +3,48 @@ import { BaseError, InsufficientFundsError, EstimateGasExecutionError, UserRejec
 
 type ResolvedError = "insufficient_funds" | "transaction_rejected"
 
+const walk = (obj: any): any => {
+  if (obj.code) return obj.code
+  if (obj.cause) {
+    return walk(obj.cause)
+  }
+  return undefined
+}
+
 const resolveError = (error: BaseError): ResolvedError | undefined => {
 
-    const isInsufficientFundsError = typeof error?.walk === "function" && error?.walk((e: BaseError) => (e instanceof InsufficientFundsError)
-        || (e instanceof EstimateGasExecutionError) || e?.['data']?.args?.some((a: string) => a?.includes("amount exceeds")))
+    const isInsufficientFundsError = error.walk(
+      (e: unknown): boolean => {
+        if (e instanceof InsufficientFundsError || e instanceof EstimateGasExecutionError) {
+          return true
+        }
+        const args = (e as any).data?.args
+        if (args) {
+          return args.some((a: string) => (a?.includes("amount exceeds")))
+        }
+        return false
+      }
+    )
+    if (isInsufficientFundsError) return "insufficient_funds"
 
-    if (isInsufficientFundsError)
-        return "insufficient_funds"
+    const isUserRejectedRequestError = error.walk((e: unknown) => (e instanceof UserRejectedRequestError)) 
+      instanceof UserRejectedRequestError
 
-    const isUserRejectedRequestError = typeof error?.walk === "function" && error?.walk && error?.walk((e: BaseError) => e instanceof UserRejectedRequestError) instanceof UserRejectedRequestError
+    if (isUserRejectedRequestError) return "transaction_rejected"
 
-    if (isUserRejectedRequestError)
-        return "transaction_rejected"
-
-    const code_name = error?.['code']
-        || error?.["name"]
-    const inner_code = error?.['data']?.['code']
-        || error?.['cause']?.['code']
-        || error?.["cause"]?.["cause"]?.["cause"]?.["code"]
+    const code_name = (error as any).code ? (error as any).code : (error as any).name ? (error as any).name : undefined
+    const inner_code = (error as any).data?.code || walk(error)
 
     if (code_name === 'INSUFFICIENT_FUNDS'
         || code_name === 'UNPREDICTABLE_GAS_LIMIT'
         || (code_name === -32603 && inner_code === 3)
         || inner_code === -32000
-        || code_name === 'EstimateGasExecutionError')
-        return "insufficient_funds"
+        || code_name === 'EstimateGasExecutionError'
+    ) {
+      return "insufficient_funds"
+    }
     else if (code_name === 4001) {
-        return "transaction_rejected"
+      return "transaction_rejected"
     }
 }
 

app/components/Swap/Withdraw/Wallet/WalletTransfer/transactionMessage.tsx

@@ -21,24 +21,25 @@ const TransactionMessage: FC<TransactionMessageProps> = ({
     if (wait?.isLoading || applyingTransaction) {
         return <TransactionInProgressMessage />
     }
-    else if (transaction?.isLoading || applyingTransaction) {
+    else if (transaction.isLoading || applyingTransaction) {
         return <ConfirmTransactionMessage />
     }
-    else if (prepare?.isLoading) {
+    else if (prepare.isLoading) {
         return <PreparingTransactionMessage />
     }
-    else if (prepare?.isError && prepareResolvedError === "insufficient_funds") {
+    else if (prepare.isError && prepareResolvedError === "insufficient_funds") {
         return <InsufficientFundsMessage />
     }
-    else if (transaction?.isError && transactionResolvedError) {
+    else if (transaction.isError && transactionResolvedError) {
         return <TransactionRejectedMessage />
-    } else if (hasError) {
-        const unexpectedError = prepare?.error
-            || transaction?.error?.['data']?.message || transaction?.error
-            || wait?.error
-        return <UexpectedErrorMessage message={unexpectedError?.message} />
+    } 
+    else if (hasError) {
+        const unexpectedError = 
+          prepare.error || transaction.error || wait?.error ||
+          (transaction.error as any).data?.message 
+        return <UnexpectedErrorMessage message={unexpectedError?.message} />
     }
-    else return <></>
+    return <></>
 }
 
 const PreparingTransactionMessage: FC = () => {
@@ -76,7 +77,7 @@ const TransactionRejectedMessage: FC = () => {
         details={`You've rejected the transaction in your wallet. Click “Try again” to open the prompt again.`} />
 }
 
-const UexpectedErrorMessage: FC<{ message: string }> = ({ message }) => {
+const UnexpectedErrorMessage: FC<{ message: string }> = ({ message }) => {
     return <WalletMessage
         status="error"
         header='Unexpected error'

app/components/Swap/Withdraw/Wallet/ZKsyncWalletWithdraw.tsx

@@ -2,6 +2,7 @@ import { Link, ArrowLeftRight } from 'lucide-react';
 import { FC, useCallback, useEffect, useState } from 'react'
 import SubmitButton from '../../../buttons/submitButton';
 import toast from 'react-hot-toast';
+import toastError from '../../../../helpers/toastError'
 import * as zksync from 'zksync';
 import { utils } from 'ethers';
 import { useEthersSigner } from '../../../../lib/ethersToViem/ethers';
@@ -63,7 +64,7 @@ const ZkSyncWalletWithdrawStep: FC<Props> = ({ depositAddress, amount }) => {
             setSyncWallet(wallet)
         }
         catch (e) {
-            toast(e.message)
+            toastError(e)
         }
         finally {
             setLoading(false)
@@ -96,10 +97,7 @@ const ZkSyncWalletWithdrawStep: FC<Props> = ({ depositAddress, amount }) => {
             }
         }
         catch (e) {
-            if (e?.message) {
-                toast(e.message)
-                return
-            }
+          toastError(e)
         }
         setLoading(false)
 

app/components/Swap/Withdraw/Wallet/index.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import { FC, PropsWithChildren } from "react"
 import { ApiResponse } from "../../../../Models/ApiResponse"
 import { useSettingsState } from "../../../../context/settings"
 import { useSwapDataState } from "../../../../context/swap"
@@ -87,7 +87,7 @@ const WalletTransfer: FC = () => {
 
 }
 
-const Wrapper: FC<{ children?: React.ReactNode }> = ({ children }) => {
+const Wrapper: FC<PropsWithChildren> = ({ children }) => {
     return <div className='border-secondary-500 rounded-md border bg-secondary-700 p-3'>
         {children}
     </div>

app/components/SwapHistory/SwapDetailsComponent.tsx

@@ -11,6 +11,7 @@ import StatusIcon from './StatusIcons';
 import { ExternalLink } from 'lucide-react';
 import isGuid from '../utils/isGuid';
 import KnownInternalNames from '../../lib/knownIds';
+import toastError from '../../helpers/toastError';
 
 type Props = {
     id: string
@@ -56,7 +57,7 @@ const SwapDetails: FC<Props> = ({ id }) => {
                 setSwap(swapResponse.data)
             }
             catch (e) {
-                toast.error(e.message)
+                toastError(e)
             }
             finally {
                 setLoading(false)

app/components/SwapHistory/index.tsx

@@ -19,6 +19,7 @@ import Link from "next/link";
 import { resolvePersistantQueryParams } from "../../helpers/querryHelper";
 import AppSettings from "../../lib/AppSettings";
 import { truncateDecimals } from "../utils/RoundDecimals";
+import toastError from "../../helpers/toastError";
 
 function TransactionsHistory() {
   const [page, setPage] = useState(0)
@@ -36,9 +37,10 @@ function TransactionsHistory() {
   const PAGE_SIZE = 20
 
   const goBack = useCallback(() => {
-    window?.['navigation']?.['canGoBack'] ?
+    window.history?.length > 2 ?
       router.back()
-      : router.push({
+      : 
+      router.push({
         pathname: "/",
         query: resolvePersistantQueryParams(router.query)
       })
@@ -63,7 +65,7 @@ function TransactionsHistory() {
         const { data, error } = await bridgeApiClient.GetSwapsAsync(1)
 
         if (error) {
-          toast.error(error.message);
+          toastError(error)
           return;
         }
 
@@ -79,7 +81,7 @@ function TransactionsHistory() {
         const { data, error } = await bridgeApiClient.GetSwapsAsync(1, SwapStatusInNumbers.SwapsWithoutCancelledAndExpired)
 
         if (error) {
-          toast.error(error.message);
+          toastError(error)
           return;
         }
 
@@ -101,7 +103,7 @@ function TransactionsHistory() {
       const { data, error } = await bridgeApiClient.GetSwapsAsync(nextPage)
 
       if (error) {
-        toast.error(error.message);
+        toastError(error)
         return;
       }
 
@@ -115,7 +117,7 @@ function TransactionsHistory() {
       const { data, error } = await bridgeApiClient.GetSwapsAsync(nextPage, SwapStatusInNumbers.SwapsWithoutCancelledAndExpired)
 
       if (error) {
-        toast.error(error.message);
+        toastError(error)
         return;
       }
 

app/components/Tabs/Header.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { motion } from "framer-motion"
 import { FC } from "react"
 import { Tab } from "./Index"

app/components/TimerComponent.tsx

@@ -11,7 +11,7 @@ type TimerProps = {
 
 const TimerWithContext: FC<TimerProps> = (({ isStarted, waitingComponent, children }, ref) => {
     const { secondsRemaining, started } = useTimerState()
-    const twoDigits = (num) => String(num).padStart(2, '0')
+    const twoDigits = (num: number) => (String(num).padStart(2, '0'))
 
     const secondsToDisplay = Number(secondsRemaining) % 60
     const minutesRemaining = (Number(secondsRemaining) - secondsToDisplay) / 60

app/components/TonConnectProvider.tsx

@@ -1,3 +1,4 @@
+// @ts-ignore
 import { THEME, TonConnectUIProvider } from "@tonconnect/ui-react"
 import { ThemeData } from "../Models/Theme";
 

app/components/VerifyEmailCode.tsx

@@ -14,6 +14,7 @@ import Modal from './modal/modal';
 import TimerWithContext from './TimerComponent';
 import { classNames } from './utils/classNames';
 import { Widget } from './Widget/Index';
+import toastError from '../helpers/toastError';
 interface VerifyEmailCodeProps {
     onSuccessfullVerify: (authresponse: AuthConnectResponse) => Promise<void>;
     disclosureLogin?: boolean
@@ -34,19 +35,19 @@ const VerifyEmailCode: FC<VerifyEmailCodeProps> = ({ onSuccessfullVerify, disclo
     const handleResendCode = useCallback(async () => {
         try {
             const apiClient = new BridgeAuthApiClient();
-            const res = await apiClient.getCodeAsync(tempEmail)
+            const res = await apiClient.getCodeAsync(tempEmail as string)
             const next = new Date(res?.data?.next)
             const now = new Date()
             const miliseconds = next.getTime() - now.getTime()
             startTimer(Math.round((res?.data?.already_sent ? 60000 : miliseconds) / 1000))
         }
         catch (error) {
-            if (error.response?.data?.errors?.length > 0) {
-                const message = error.response.data.errors.map(e => e.message).join(", ")
+            if ((error as any).response?.data?.errors?.length > 0) {
+                const message = (error as any).response.data.errors.map((e: Error) => (e.message)).join(", ")
                 toast.error(message)
             }
             else {
-                toast.error(error.message)
+                toastError(error)
             }
         }
     }, [tempEmail])
@@ -92,17 +93,17 @@ const VerifyEmailCode: FC<VerifyEmailCodeProps> = ({ onSuccessfullVerify, disclo
                     if (userType == UserType.GuestUser && guestAuthData?.access_token) await apiClient.SwapsMigration(guestAuthData?.access_token)
                 }
                 catch (error) {
-                    const message = error.response.data.error_description
-                    if (error.response?.data?.error === 'USER_LOCKED_OUT_ERROR') {
+                    const message = (error as any).response?.data?.error_description
+                    if ((error as any).response?.data?.error === 'USER_LOCKED_OUT_ERROR') {
                         toast.error(message)
                         setUserLockedOut(true)
                         startTimer(600)
                     }
-                    else if (error.response?.data?.error_description) {
+                    else if (message) {
                         toast.error(message)
                     }
                     else {
-                        toast.error(error.message)
+                        toastError(error)
                     }
                 }
             }}

app/components/Widget/Footer.tsx

@@ -1,29 +1,22 @@
-import { motion } from "framer-motion";
 import { useEffect, useRef, useState } from "react"
-import ReactPortal from "../Common/ReactPortal";
-
+import { motion } from "framer-motion";
 
 const variants = {
-    enter: () => {
-        return ({
-            opacity: 0,
-            y: '100%',
-        })
-    },
-    center: () => {
-        return ({
-            opacity: 1,
-            y: 0,
-        })
-    },
-    exit: () => {
-        return ({
-            y: '100%',
-            zIndex: 0,
-            opacity: 0,
-        })
-    },
+  enter: () => ({
+    opacity: 0,
+    y: '100%',
+  }),
+  center: () => ({
+    opacity: 1,
+    y: 0,
+  }),
+  exit: () => ({
+    y: '100%',
+    zIndex: 0,
+    opacity: 0,
+  }),
 };
+type VariantType = keyof typeof variants
 
 type FooterProps = {
     hidden?: boolean,
@@ -39,10 +32,10 @@ const Footer = ({ children, hidden, sticky = true }: FooterProps) => {
         setHeight(Number(ref?.current?.clientHeight))
     }, [])
 
-    const handleAnimationEnd = (variant) => {
-        if (variant == "center") {
-            setHeight(Number(ref?.current?.clientHeight))
-        }
+    const handleAnimationEnd = (variant: VariantType) => {
+      if (variant === "center") {
+        setHeight(Number(ref?.current?.clientHeight))
+      }
     }
     return (
         sticky ?

app/components/Widget/Index.tsx

@@ -17,7 +17,7 @@ const Widget = ({ children, className, hideMenu }: Props) => {
    const wrapper = useRef(null);
 
    const goBack = useCallback(() => {
-      window?.['navigation']?.['canGoBack'] ?
+      window.history?.length > 2 ?
          router.back()
          : router.push({
             pathname: "/",

app/components/Wizard/Wizard.tsx

@@ -1,13 +1,9 @@
-import { FC, useEffect, useRef } from 'react'
+import { FC, PropsWithChildren, useEffect, useRef } from 'react'
 import { useFormWizardaUpdate, useFormWizardState } from '../../context/formWizardProvider';
 import { AnimatePresence } from 'framer-motion';
 import HeaderWithMenu from '../HeaderWithMenu';
 
-type Props = {
-   children: JSX.Element | JSX.Element[];
-}
-
-const Wizard: FC<Props> = ({ children }) => {
+const Wizard: FC<PropsWithChildren> = ({ children }) => {
 
    const wrapper = useRef<HTMLDivElement>(null);
 

app/components/Wizard/WizardItem.tsx

@@ -1,5 +1,7 @@
-import { motion } from 'framer-motion';
 import { FC, useEffect } from 'react'
+
+import { Variants, motion } from 'framer-motion';
+
 import { useFormWizardaUpdate, useFormWizardState } from '../../context/formWizardProvider';
 import { Steps } from '../../Models/Wizard';
 
@@ -18,7 +20,9 @@ const WizardItem: FC<Props> = (({ StepName, children, GoBack, PositionPercent, f
 
     useEffect(() => {
         if (currentStepName === StepName) {
-            setGoBack(GoBack)
+            if (GoBack) {
+              setGoBack(GoBack)
+            }
             PositionPercent && setPositionPercent(PositionPercent)
         }
     }, [currentStepName, GoBack, PositionPercent, StepName, setGoBack, setPositionPercent])
@@ -42,7 +46,7 @@ const WizardItem: FC<Props> = (({ StepName, children, GoBack, PositionPercent, f
         : null
 })
 
-let variants = {
+const variants: Variants = {
     enter: ({ direction, width }) => ({
         x: direction * width,
     }),

app/components/buttons/connectButton.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { ReactNode, useState } from "react";
 import { Popover, PopoverContent, PopoverTrigger } from "../shadcn/popover";
 
@@ -7,7 +8,6 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-//} from "../shadcn/dialog";
 } from "@luxdefi/ui/primitives"
 
 import useWallet from "../../hooks/useWallet";

app/components/buttons/submitButton.tsx

@@ -7,8 +7,8 @@ type text_align = 'center' | 'left'
 type button_align = 'left' | 'right'
 
 export class SubmitButtonProps {
-    isDisabled: boolean;
-    isSubmitting: boolean;
+    isDisabled: boolean = false;
+    isSubmitting: boolean = false;
     type?: 'submit' | 'reset' | 'button' | undefined;
     onClick?: MouseEventHandler<HTMLButtonElement> | undefined;
     icon?: React.ReactNode;

app/components/buttons/toggleButton.tsx

@@ -3,7 +3,7 @@ import { Field, FieldProps } from 'formik'
 import { Switch } from '@headlessui/react'
 import { classNames } from '../utils/classNames';
 
-export class ToggleButtonProps {
+export interface ToggleButtonProps {
     value: boolean;
     onChange: (isChecked: boolean) => void;
     name?: string;

app/components/cardContainer.tsx

@@ -1,4 +1,4 @@
-export default function CardContainer(props) {
+export default function CardContainer(props :  React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) {
     return (<div {...props}>
         <div className="bg-secondary-900 shadow-card rounded-lg w-full mt-10 overflow-hidden relative">
             <div className="relative overflow-hidden h-1 flex rounded-t-lg bg-secondary-500"></div>

app/components/icons/BridgeLogo.tsx

@@ -1,15 +1,8 @@
+import { LucideProps } from 'lucide-react';
 import { FC } from "react";
 
-interface Props {
-    className?: string
-}
-
-const BridgeLogo: FC<Props> = (({ className }) => {
-    return (
-        <>
-          <svg className={className} xmlns="http://www.w3.org/2000/svg" width="302" height="77" viewBox="0 0 302 77" fill="white"></svg>
-        </>
-    )
-})
+const BridgeLogo: FC<LucideProps> = ({ className }) => (
+    <svg className={className} xmlns="http://www.w3.org/2000/svg" width="302" height="77" viewBox="0 0 302 77" fill="white"></svg>
+)
 
 export default BridgeLogo;

app/components/icons/BridgeLogoSmall.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
+import { LucideProps } from 'lucide-react';
 
-const BridgeLogoSmall = (props) => (
+const BridgeLogoSmall = (props: LucideProps) => (
     <svg {...props} xmlns="http://www.w3.org/2000/svg" width="302" height="77" viewBox="0 0 302 77" fill="white"></svg>
 )
 

app/components/icons/Cancell.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
+import { LucideProps } from 'lucide-react';
 
-const CancelIcon = (props) => (
+const CancelIcon = (props: LucideProps) => (
     <svg xmlns="http://www.w3.org/2000/svg" {...props}  width="24" height="24" viewBox="0 0 116 116" fill="none">
         <circle cx="58" cy="58" r="58" fill="#4E5460" fillOpacity="0.1" />
         <circle cx="58" cy="58" r="45" fill="#4E5460" fillOpacity="0.5" />

app/components/icons/ChatIcon.tsx

@@ -1,4 +1,6 @@
-const ChatIcon = (props) => (
+import { LucideProps } from 'lucide-react';
+
+const ChatIcon = (props: LucideProps) => (
     <svg {...props} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M3 7.24C3 6.08213 3 5.5032 3.23247 5.06414C3.42007 4.70983 3.70983 4.42007 4.06414 4.23247C4.5032 4 5.08213 4 6.24 4H17.5559C18.7138 4 19.2927 4 19.7318 4.23247C20.0861 4.42007 20.3759 4.70983 20.5635 5.06414C20.7959 5.5032 20.7959 6.08213 20.7959 7.24V13.2831C20.7959 14.4409 20.7959 15.0199 20.5635 15.4589C20.3759 15.8132 20.0861 16.103 19.7318 16.2906C19.2927 16.5231 18.7138 16.5231 17.5559 16.5231H8.94898C8.58856 16.5231 8.40835 16.5231 8.23562 16.5536C8.09332 16.5787 7.95813 16.6179 7.82445 16.6728C7.66218 16.7394 7.5081 16.8369 7.19996 17.032C5.78761 17.9261 3 19.6694 3 19.5V7.24Z" stroke="currentColor" />
         <path d="M8 9H15" stroke="currentColor" strokeLinecap="round" />

app/components/icons/DelayIcon.tsx

@@ -1,4 +1,6 @@
-const DelayIcon = (props) => <svg xmlns="http://www.w3.org/2000/svg" {...props} viewBox="0 0 116 116" fill="none">
+import { LucideProps } from 'lucide-react';
+
+const DelayIcon = (props: LucideProps) => <svg xmlns="http://www.w3.org/2000/svg" {...props} viewBox="0 0 116 116" fill="none">
     <g clipPath="url(#clip0_1021_821)">
         <path d="M58 116C90.0325 116 116 90.0325 116 58C116 25.9675 90.0325 0 58 0C25.9675 0 0 25.9675 0 58C0 90.0325 25.9675 116 58 116Z" fill="#E3D557" fillOpacity="0.1" />
         <path d="M58 103C82.8528 103 103 82.8528 103 58C103 33.1472 82.8528 13 58 13C33.1472 13 13 33.1472 13 58C13 82.8528 33.1472 103 58 103Z" fill="#E3D557" fillOpacity="0.3" />

app/components/icons/DiscordLogo.tsx

@@ -1,4 +1,6 @@
-const DiscordLogo = (props) => (
+import { LucideProps } from 'lucide-react';
+
+const DiscordLogo = (props: LucideProps) => (
     <svg {...props} viewBox="0 0 71 55" fill="none" xmlns="http://www.w3.org/2000/svg">
         <g clipPath="url(#clip0)">
             <path d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z" fill="currentColor" />

app/components/icons/FailIcon.tsx

@@ -1,4 +1,6 @@
-const FailIcon = (props) => <svg {...props} xmlns="http://www.w3.org/2000/svg" width="116" height="116" viewBox="0 0 116 116" fill="none">
+import { LucideProps } from 'lucide-react';
+
+const FailIcon = (props: LucideProps) => <svg {...props} xmlns="http://www.w3.org/2000/svg" width="116" height="116" viewBox="0 0 116 116" fill="none">
     <circle cx="58" cy="58" r="58" fill="#E43636" fillOpacity="0.1" />
     <circle cx="58" cy="58" r="45" fill="#E43636" fillOpacity="0.5" />
     <circle cx="58" cy="58" r="30" fill="#E43636" />

app/components/icons/GitHubLogo.tsx

@@ -1,4 +1,6 @@
-const GitHubLogo = (props) => (
+import { LucideProps } from 'lucide-react';
+
+const GitHubLogo = (props: LucideProps) => (
     <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
         <path
             fillRule="evenodd"

app/components/icons/Question.tsx

@@ -1,5 +1,6 @@
+import { LucideProps } from 'lucide-react';
 
-const QuestionIcon = (props) => (
+const QuestionIcon = (props: LucideProps) => (
     <svg xmlns="http://www.w3.org/2000/svg" {...props} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" >
         <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
         <path d="M12 17h.01" />

app/components/icons/SubstackLogo.tsx

@@ -1,4 +1,6 @@
-const SubstackLogo = (props) => (
+import { LucideProps } from 'lucide-react';
+
+const SubstackLogo = (props: LucideProps) => (
     <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 27 24" {...props}>
         <path d="M22.539 8.242H1.46V5.406h21.08v2.836zM1.46 10.812V24L12 18.11 22.54 24V10.812H1.46zM22.54 0H1.46v2.836h21.08V0z" />
     </svg>

app/components/icons/SuccessIcon.tsx

@@ -1,4 +1,6 @@
-const SuccessIcon = (props) => <svg xmlns="http://www.w3.org/2000/svg" {...props} viewBox="0 0 116 116" fill="none">
+import { LucideProps } from 'lucide-react';
+
+const SuccessIcon = (props: LucideProps) => <svg xmlns="http://www.w3.org/2000/svg" {...props} viewBox="0 0 116 116" fill="none">
     <circle cx="58" cy="58" r="58" fill="#55B585" />
     <path d="M44.5781 57.245L53.7516 66.6843L70.6308 49.3159" stroke="white" strokeWidth="4" strokeLinecap="round" />
 </svg>;

app/components/icons/TwitterLogo.tsx

@@ -1,4 +1,7 @@
-const TwitterLogo = (props) => (
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const TwitterLogo: React.FC<LucideProps> = (props) => (
   <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
     <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
   </svg>

app/components/icons/WalletIcon.tsx

@@ -1,4 +1,6 @@
-const WalletIcon = (props) => (
+import { LucideProps } from 'lucide-react';
+
+const WalletIcon = (props: LucideProps) => (
     <svg {...props} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M3 15.1021V6.72875C3 5.75359 3 5.266 3.19856 4.89623C3.35879 4.59782 3.60628 4.35378 3.90891 4.19579C4.28392 4 4.77841 4 5.76738 4H16.066C17.0549 4 17.5494 4 17.9244 4.19579C18.227 4.35378 18.4745 4.59782 18.6348 4.89623C18.8333 5.266 18.8333 5.75359 18.8333 6.72875V8.23385M5.76738 21H19.2326C20.2216 21 20.7161 21 21.0911 20.8042C21.3937 20.6462 21.6412 20.4022 21.8014 20.1038C22 19.734 22 19.2464 22 18.2712V10.545C22 9.56983 22 9.08225 21.8014 8.71248C21.6412 8.41407 21.3937 8.17003 21.0911 8.01204C20.7161 7.81625 20.2216 7.81625 19.2326 7.81625H5.76738C4.77841 7.81625 4.28392 7.81625 3.90891 8.01204C3.60628 8.17003 3.35879 8.41407 3.19856 8.71248C3 9.08225 3 9.56983 3 10.545V18.2713C3 19.2464 3 19.734 3.19856 20.1038C3.35879 20.4022 3.60628 20.6462 3.90891 20.8042C4.28392 21 4.77841 21 5.76738 21ZM14.0834 13.3793H17.6019C17.699 13.3793 17.7778 13.3016 17.7778 13.2058C17.7778 13.11 17.6991 13.0323 17.6019 13.0323H14.0834C13.9862 13.0323 13.9074 13.11 13.9074 13.2058C13.9074 13.3016 13.9862 13.3793 14.0834 13.3793Z" stroke="currentColor" />
     </svg>

app/components/icons/Wallets/Argent.tsx

@@ -1,4 +1,5 @@
-const Argent = (props) => <svg {...props} width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+import { LucideProps } from 'lucide-react';
+const Argent = (props: LucideProps) => <svg {...props} width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect width="28" height="28" fill="white" />
     <path d="M15.9033 7H11.8495C11.714 7 11.6055 7.10935 11.6026 7.24527C11.5207 11.0658 9.52894 14.6919 6.10076 17.2603C5.99192 17.3418 5.96712 17.495 6.04669 17.6053L8.41849 20.8966C8.49918 21.0086 8.6564 21.0338 8.76706 20.9515C10.9106 19.3561 12.6348 17.4314 13.8764 15.2981C15.118 17.4314 16.8423 19.3561 18.9858 20.9515C19.0964 21.0338 19.2536 21.0086 19.3344 20.8966L21.7062 17.6053C21.7857 17.495 21.7609 17.3418 21.6522 17.2603C18.2239 14.6919 16.2322 11.0658 16.1504 7.24527C16.1474 7.10935 16.0388 7 15.9033 7Z" fill="#FF875B" />
 </svg>

app/components/icons/Wallets/ArgentX.tsx

@@ -1,4 +1,6 @@
-const ArgentX = (props) => {
+import { LucideProps } from 'lucide-react';
+
+const ArgentX = (props: LucideProps) => {
     return (
         <svg {...props} xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
             <rect width="32" height="32" rx="8" fill="black" />

app/components/icons/Wallets/BitKeep.tsx

@@ -1,4 +1,6 @@
-const BitKeep = (props) => <svg {...props} version="1.0" xmlns="http://www.w3.org/2000/svg"
+import { LucideProps } from 'lucide-react';
+
+const BitKeep = (props: LucideProps) => <svg {...props} version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="170.000000pt" height="170.000000pt" viewBox="0 0 170.000000 170.000000"
 preserveAspectRatio="xMidYMid meet">
 

app/components/icons/Wallets/Braavos.tsx

@@ -1,4 +1,6 @@
-const Braavos = (props) => <svg {...props} xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" fill="none">
+import { LucideProps } from 'lucide-react';
+
+const Braavos = (props: LucideProps) => <svg {...props} xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" fill="none">
 <path d="M62.705 13.9116C62.8359 14.1333 62.6621 14.407 62.4039 14.407C57.1807 14.407 52.9348 18.5427 52.8351 23.6817C51.0465 23.3477 49.1933 23.3226 47.3626 23.6311C47.2361 18.5156 43.0009 14.407 37.7948 14.407C37.5365 14.407 37.3625 14.1331 37.4935 13.9112C40.0217 9.62809 44.7204 6.75 50.0991 6.75C55.4781 6.75 60.1769 9.62826 62.705 13.9116Z" fill="url(#paint0_linear_372_40259)"/>
 <path d="M78.7606 45.8718C80.2725 46.3297 81.7025 45.0055 81.1714 43.5222C76.4137 30.2334 61.3911 24.8039 50.0277 24.8039C38.6442 24.8039 23.2868 30.407 18.8754 43.5912C18.3824 45.0645 19.8083 46.3446 21.2978 45.8881L48.872 37.4381C49.5331 37.2355 50.2399 37.2344 50.9017 37.4348L78.7606 45.8718Z" fill="url(#paint1_linear_372_40259)"/>
 <path d="M18.8132 48.1707L48.8935 39.0472C49.5506 38.8478 50.2524 38.8473 50.9098 39.0456L81.1781 48.1752C83.6912 48.9332 85.411 51.2483 85.411 53.8735V81.2233C85.2944 87.8991 79.2977 93.25 72.6245 93.25H61.5406C60.4449 93.25 59.5577 92.3637 59.5577 91.268V81.6789C59.5577 77.9031 61.7921 74.4855 65.2498 72.9729C69.8849 70.9454 75.3681 68.2028 76.3994 62.6992C76.7323 60.9229 75.5741 59.2094 73.8024 58.8573C69.3226 57.9667 64.3562 58.3107 60.1564 60.1893C55.3887 62.3219 54.1415 65.8694 53.6797 70.6337L53.1201 75.7662C52.9491 77.3349 51.4785 78.5366 49.9014 78.5366C48.2699 78.5366 47.0465 77.294 46.8696 75.6712L46.3204 70.6337C45.9249 66.5529 45.2079 62.5887 40.9895 60.7018C36.1776 58.5494 31.3419 57.8347 26.1976 58.8573C24.426 59.2094 23.2678 60.9229 23.6007 62.6992C24.641 68.2507 30.0812 70.9305 34.7503 72.9729C38.208 74.4855 40.4424 77.9031 40.4424 81.6789V91.2663C40.4424 92.362 39.5555 93.25 38.4599 93.25H27.3756C20.7024 93.25 14.7057 87.8991 14.5891 81.2233V53.8663C14.5891 51.2446 16.3045 48.9316 18.8132 48.1707Z" fill="url(#paint2_linear_372_40259)"/>

app/components/icons/Wallets/Coinbase.tsx

@@ -1,4 +1,6 @@
-const CoinbaseIcon = (props) => <svg {...props} width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+import { LucideProps } from 'lucide-react';
+
+const CoinbaseIcon = (props: LucideProps) => <svg {...props} width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect width="28" height="28" fill="#2C5FF6" />
     <path fillRule="evenodd" clipRule="evenodd" d="M14 23.8C19.4124 23.8 23.8 19.4124 23.8 14C23.8 8.58761 19.4124 4.2 14 4.2C8.58761 4.2 4.2 8.58761 4.2 14C4.2 19.4124 8.58761 23.8 14 23.8ZM11.55 10.8C11.1358 10.8 10.8 11.1358 10.8 11.55V16.45C10.8 16.8642 11.1358 17.2 11.55 17.2H16.45C16.8642 17.2 17.2 16.8642 17.2 16.45V11.55C17.2 11.1358 16.8642 10.8 16.45 10.8H11.55Z" fill="white" />
 </svg>

app/components/icons/Wallets/Glow.tsx

@@ -1,4 +1,5 @@
-const GlowIcon = (props) => <svg {...props} width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+import { LucideProps } from 'lucide-react';
+const GlowIcon = (props: LucideProps) => <svg {...props} width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect width="28" height="28" fill="#2C5FF6" />
     <path fillRule="evenodd" clipRule="evenodd" d="M14 23.8C19.4124 23.8 23.8 19.4124 23.8 14C23.8 8.58761 19.4124 4.2 14 4.2C8.58761 4.2 4.2 8.58761 4.2 14C4.2 19.4124 8.58761 23.8 14 23.8ZM11.55 10.8C11.1358 10.8 10.8 11.1358 10.8 11.55V16.45C10.8 16.8642 11.1358 17.2 11.55 17.2H16.45C16.8642 17.2 17.2 16.8642 17.2 16.45V11.55C17.2 11.1358 16.8642 10.8 16.45 10.8H11.55Z" fill="white" />
 </svg>

app/components/icons/Wallets/IMX.tsx

@@ -1,10 +1,10 @@
-const IMX = (props) => {
-    return (
-        <svg {...props} xmlns="http://www.w3.org/2000/svg" width="2499" height="2499" viewBox="0 0 2499 2499" fill="none">
-            <rect x="447" y="528" width="1591" height="1401" fill="white" />
-            <path d="M1858 1857C1858 1857 1583 1536 1492 1429C1482 1417 1478 1400 1482 1385C1485 1377 1491 1367 1497 1361L1539 1314L2008 1856H1859L1858 1857ZM1568 1857L1228 1460L1211 1438C1195 1419 1195 1391 1212 1372L1846 633H2003L1365 1362C1348 1380 1348 1409 1364 1427L1732 1855H1568V1857ZM1172 1274C1041 1426 672 1857 672 1857H508L1010 1275C1026 1256 1026 1229 1010 1210L512 633H670L1171 1215C1184 1232 1186 1257 1172 1273V1274ZM1166 1604L1117 1661L949 1857H797L1119 1482C1119 1482 1155 1525 1167 1539C1183 1558 1183 1586 1166 1604ZM947 634C947 634 1217 957 1315 1057C1331 1073 1328 1093 1314 1110C1262 1171 1261 1172 1261 1172L797 634H949H947ZM1352 887L1401 830L1569 634H1721L1399 1009C1399 1009 1363 966 1351 952C1335 933 1335 905 1352 887ZM1250 -1C560 -1 0 559 0 1249C0 1939 560 2499 1250 2499C1940 2499 2500 1939 2500 1249C2500 559 1940 -1 1250 -1Z" fill="black" />
-        </svg>
-    )
-}
+import { LucideProps } from 'lucide-react';
+
+const IMX = (props: LucideProps) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="2499" height="2499" viewBox="0 0 2499 2499" fill="none">
+        <rect x="447" y="528" width="1591" height="1401" fill="white" />
+        <path d="M1858 1857C1858 1857 1583 1536 1492 1429C1482 1417 1478 1400 1482 1385C1485 1377 1491 1367 1497 1361L1539 1314L2008 1856H1859L1858 1857ZM1568 1857L1228 1460L1211 1438C1195 1419 1195 1391 1212 1372L1846 633H2003L1365 1362C1348 1380 1348 1409 1364 1427L1732 1855H1568V1857ZM1172 1274C1041 1426 672 1857 672 1857H508L1010 1275C1026 1256 1026 1229 1010 1210L512 633H670L1171 1215C1184 1232 1186 1257 1172 1273V1274ZM1166 1604L1117 1661L949 1857H797L1119 1482C1119 1482 1155 1525 1167 1539C1183 1558 1183 1586 1166 1604ZM947 634C947 634 1217 957 1315 1057C1331 1073 1328 1093 1314 1110C1262 1171 1261 1172 1261 1172L797 634H949H947ZM1352 887L1401 830L1569 634H1721L1399 1009C1399 1009 1363 966 1351 952C1335 933 1335 905 1352 887ZM1250 -1C560 -1 0 559 0 1249C0 1939 560 2499 1250 2499C1940 2499 2500 1939 2500 1249C2500 559 1940 -1 1250 -1Z" fill="black" />
+    </svg>
+)
 
 export default IMX

app/components/icons/Wallets/MetaMask.tsx

@@ -1,4 +1,6 @@
-const MetaMaskIcon = (props) => <svg {...props} viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+import { LucideProps } from 'lucide-react';
+
+const MetaMaskIcon = (props: LucideProps) => <svg {...props} viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect fill="white" />
     <path d="M24.0891 3.1199L15.3446 9.61456L16.9617 5.7828L24.0891 3.1199Z" fill="#E2761B" stroke="#E2761B" strokeWidth="0.0878845" strokeLinecap="round" strokeLinejoin="round" />
     <path d="M3.90207 3.1199L12.5763 9.67608L11.0383 5.7828L3.90207 3.1199Z" fill="#E4761B" stroke="#E4761B" strokeWidth="0.0878845" strokeLinecap="round" strokeLinejoin="round" />

app/components/icons/Wallets/OpenMask.tsx

@@ -1,16 +1,16 @@
-const OpenMask = (props) => {
-    return (
-        <svg {...props} xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300" fill="none">
-            <path d="M85 0L150 250L215 0H85Z" fill="#A0DDFE" stroke="#A0DDFE" />
-            <path d="M215 0L150 250L300 85L215 0Z" fill="#88D3FF" stroke="#88D3FF" />
-            <path d="M300 85L150 250L300 215V85Z" fill="#73CBFF" stroke="#73CBFF" />
-            <path d="M300 215L150 250L215 300L300 215Z" fill="#5BC1FF" stroke="#5BC1FF" />
-            <path d="M215 300L150 250L85 300H215Z" fill="#80CFFF" stroke="#80CFFF" />
-            <path d="M85 300L150 250L0 215L85 300Z" fill="#95D9FF" stroke="#95D9FF" />
-            <path d="M0 215L150 250L0 85V215Z" fill="#ADE2FF" stroke="#ADE2FF" />
-            <path d="M0 85L150 250L85 0L0 85Z" fill="#B7E7FF" stroke="#B7E7FF" />
-        </svg>
-    )
-}
+import { LucideProps } from 'lucide-react';
 
-export default OpenMask
+const OpenMask = (props: LucideProps) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300" fill="none">
+      <path d="M85 0L150 250L215 0H85Z" fill="#A0DDFE" stroke="#A0DDFE" />
+      <path d="M215 0L150 250L300 85L215 0Z" fill="#88D3FF" stroke="#88D3FF" />
+      <path d="M300 85L150 250L300 215V85Z" fill="#73CBFF" stroke="#73CBFF" />
+      <path d="M300 215L150 250L215 300L300 215Z" fill="#5BC1FF" stroke="#5BC1FF" />
+      <path d="M215 300L150 250L85 300H215Z" fill="#80CFFF" stroke="#80CFFF" />
+      <path d="M85 300L150 250L0 215L85 300Z" fill="#95D9FF" stroke="#95D9FF" />
+      <path d="M0 215L150 250L0 85V215Z" fill="#ADE2FF" stroke="#ADE2FF" />
+      <path d="M0 85L150 250L85 0L0 85Z" fill="#B7E7FF" stroke="#B7E7FF" />
+  </svg>
+)
+
+export default OpenMask

app/components/icons/Wallets/Phantom.tsx

@@ -1,29 +1,29 @@
-const Phantom = (props) => {
-    return (
-        <svg
-            {...props}
-            xmlns="http://www.w3.org/2000/svg"
-            width="32"
-            height="32"
-            viewBox="0 0 1200 1200"
-            fill="none"
-        >
-            <g clipPath="url(#clip0_2596_138588)">
-                <rect width="1200" height="1200" rx="257.592" fill="#AB9FF2" />
-                <path
-                    fillRule="evenodd"
-                    clipRule="evenodd"
-                    d="M517.219 779.814C470.102 852.012 391.148 943.378 286.09 943.378C236.426 943.378 188.672 922.933 188.672 834.122C188.672 607.943 497.48 257.813 784.004 257.813C947.004 257.813 1011.95 370.902 1011.95 499.326C1011.95 664.168 904.98 852.651 798.648 852.651C764.902 852.651 748.347 834.122 748.347 804.732C748.347 797.065 749.621 788.759 752.168 779.814C715.875 841.789 645.836 899.292 580.254 899.292C532.5 899.292 508.305 869.263 508.305 827.094C508.305 811.76 511.488 795.787 517.219 779.814ZM904.363 494.869C904.363 532.291 882.284 551.002 857.586 551.002C832.514 551.002 810.809 532.291 810.809 494.869C810.809 457.448 832.514 438.737 857.586 438.737C882.284 438.737 904.363 457.448 904.363 494.869ZM764.031 494.871C764.031 532.293 741.952 551.004 717.254 551.004C692.182 551.004 670.477 532.293 670.477 494.871C670.477 457.449 692.182 438.739 717.254 438.739C741.952 438.739 764.031 457.449 764.031 494.871Z"
-                    fill="#FFFDF8"
-                />
-            </g>
-            <defs>
-                <clipPath id="clip0_2596_138588">
-                    <rect width="1200" height="1200" fill="white" />
-                </clipPath>
-            </defs>
-        </svg>
-    );
-};
+import { LucideProps } from 'lucide-react';
+
+const Phantom = (props: LucideProps) => (
+  <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox="0 0 1200 1200"
+      fill="none"
+  >
+      <g clipPath="url(#clip0_2596_138588)">
+          <rect width="1200" height="1200" rx="257.592" fill="#AB9FF2" />
+          <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M517.219 779.814C470.102 852.012 391.148 943.378 286.09 943.378C236.426 943.378 188.672 922.933 188.672 834.122C188.672 607.943 497.48 257.813 784.004 257.813C947.004 257.813 1011.95 370.902 1011.95 499.326C1011.95 664.168 904.98 852.651 798.648 852.651C764.902 852.651 748.347 834.122 748.347 804.732C748.347 797.065 749.621 788.759 752.168 779.814C715.875 841.789 645.836 899.292 580.254 899.292C532.5 899.292 508.305 869.263 508.305 827.094C508.305 811.76 511.488 795.787 517.219 779.814ZM904.363 494.869C904.363 532.291 882.284 551.002 857.586 551.002C832.514 551.002 810.809 532.291 810.809 494.869C810.809 457.448 832.514 438.737 857.586 438.737C882.284 438.737 904.363 457.448 904.363 494.869ZM764.031 494.871C764.031 532.293 741.952 551.004 717.254 551.004C692.182 551.004 670.477 532.293 670.477 494.871C670.477 457.449 692.182 438.739 717.254 438.739C741.952 438.739 764.031 457.449 764.031 494.871Z"
+              fill="#FFFDF8"
+          />
+      </g>
+      <defs>
+          <clipPath id="clip0_2596_138588">
+              <rect width="1200" height="1200" fill="white" />
+          </clipPath>
+      </defs>
+  </svg>
+)
 
 export default Phantom;

app/components/icons/Wallets/Rainbow.tsx

@@ -1,4 +1,7 @@
-const RainbowIcon = (props) => <svg {...props} width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+import { LucideProps } from 'lucide-react';
+
+const RainbowIcon = (props: LucideProps) => (
+<svg {...props} width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect width="120" height="120" fill="url(#paint0_linear_62_329)"/>
 <path d="M20 38H26C56.9279 38 82 63.0721 82 94V100H94C97.3137 100 100 97.3137 100 94C100 53.1309 66.8691 20 26 20C22.6863 20 20 22.6863 20 26V38Z" fill="url(#paint1_radial_62_329)"/>
 <path d="M84 94H100C100 97.3137 97.3137 100 94 100H84V94Z" fill="url(#paint2_linear_62_329)"/>
@@ -52,4 +55,5 @@ const RainbowIcon = (props) => <svg {...props} width="120" height="120" viewBox=
 </radialGradient>
 </defs>
 </svg>
+)
 export default RainbowIcon

app/components/icons/Wallets/Solflare.tsx

@@ -1,25 +1,25 @@
-const Solflare = (props) => {
-    return (
-        <svg
-            {...props}
-            xmlns="http://www.w3.org/2000/svg"
-            width="32"
-            height="32"
-            viewBox="0 0 40 40"
-            fill="none"
-        >
-            <defs>
-                <linearGradient id="solflareGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-                    <stop offset="0%" style={{ stopColor: '#ff9900', stopOpacity: 1 }} />
-                    <stop offset="100%" style={{ stopColor: '#ff3366', stopOpacity: 1 }} />
-                </linearGradient>
-            </defs>
-            <path
-                d="M20.3068 38.4893C20.7304 38.4893 21.0737 38.8274 21.0737 39.2446C21.0737 39.6618 20.7304 40 20.3068 40C19.8832 40 19.5398 39.6618 19.5398 39.2446C19.5398 38.8274 19.8832 38.4893 20.3068 38.4893ZM19.4736 2.40586C19.8484 2.43668 20.1511 2.71949 20.2018 3.08615L21.114 9.68635C21.4204 11.8669 24.0615 12.8117 25.6918 11.3299L34.8317 3.04603C35.0522 2.84621 35.3955 2.86006 35.5986 3.07697C35.785 3.27597 35.7906 3.58065 35.6117 3.78615L27.6416 12.9411C26.1743 14.6235 27.2569 17.2506 29.4936 17.4381L36.5259 18.1132C36.8762 18.1468 37.1324 18.4534 37.0982 18.7979C37.07 19.0821 36.8502 19.3117 36.5635 19.3562L29.1741 20.5052C27.0286 20.7964 26.057 23.3263 27.4525 24.9699L30.0503 28.0195C30.2596 28.2652 30.2268 28.6313 29.977 28.8372C29.7654 29.0117 29.4592 29.0185 29.2398 28.8535L26.0374 26.4452C24.3093 25.1511 21.8183 26.251 21.6357 28.3928L20.93 36.7458C20.9008 37.0908 20.5929 37.3473 20.2422 37.3186C19.9446 37.2943 19.7041 37.0698 19.6637 36.7786L18.5447 28.7099C18.2447 26.5293 15.6037 25.5845 13.9669 27.0664L4.24383 35.8824C4.04257 36.0649 3.72905 36.0523 3.54357 35.8543C3.37339 35.6726 3.36822 35.3945 3.53152 35.2068L12.0171 25.4552C13.4844 23.7728 12.4084 21.1457 10.1716 20.9582L3.13771 20.283C2.78748 20.2494 2.53126 19.9428 2.56543 19.5982C2.59361 19.314 2.81342 19.0845 3.10007 19.0399L10.4846 17.8911C12.6301 17.5999 13.6083 15.07 12.2128 13.4264L10.4444 11.3505C10.1849 11.0458 10.2255 10.5918 10.5352 10.3365C10.7977 10.1201 11.1776 10.1118 11.4496 10.3165L13.6213 11.9511C15.3494 13.2452 17.8404 12.1453 18.023 10.0035L18.6072 3.12677C18.6441 2.69231 19.032 2.36955 19.4736 2.40586ZM0.766962 18.8263C1.19054 18.8263 1.53392 19.1645 1.53392 19.5816C1.53392 19.9988 1.19054 20.337 0.766962 20.337C0.34338 20.337 0 19.9988 0 19.5816C0 19.1645 0.34338 18.8263 0.766962 18.8263ZM39.233 18.0593C39.6566 18.0593 40 18.3975 40 18.8146C40 19.2318 39.6566 19.57 39.233 19.57C38.8095 19.57 38.4661 19.2318 38.4661 18.8146C38.4661 18.3975 38.8095 18.0593 39.233 18.0593ZM19.3628 0C19.7864 0 20.1298 0.338193 20.1298 0.755375C20.1298 1.17256 19.7864 1.51075 19.3628 1.51075C18.9393 1.51075 18.5959 1.17256 18.5959 0.755375C18.5959 0.338193 18.9393 0 19.3628 0Z"
-                fill="url(#solflareGradient)"
-            />
-        </svg>
-    );
-};
+import { LucideProps } from 'lucide-react';
 
-export default Solflare;
+const Solflare = (props: LucideProps) => (
+  <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox="0 0 40 40"
+      fill="none"
+  >
+      <defs>
+          <linearGradient id="solflareGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" style={{ stopColor: '#ff9900', stopOpacity: 1 }} />
+              <stop offset="100%" style={{ stopColor: '#ff3366', stopOpacity: 1 }} />
+          </linearGradient>
+      </defs>
+      <path
+          d="M20.3068 38.4893C20.7304 38.4893 21.0737 38.8274 21.0737 39.2446C21.0737 39.6618 20.7304 40 20.3068 40C19.8832 40 19.5398 39.6618 19.5398 39.2446C19.5398 38.8274 19.8832 38.4893 20.3068 38.4893ZM19.4736 2.40586C19.8484 2.43668 20.1511 2.71949 20.2018 3.08615L21.114 9.68635C21.4204 11.8669 24.0615 12.8117 25.6918 11.3299L34.8317 3.04603C35.0522 2.84621 35.3955 2.86006 35.5986 3.07697C35.785 3.27597 35.7906 3.58065 35.6117 3.78615L27.6416 12.9411C26.1743 14.6235 27.2569 17.2506 29.4936 17.4381L36.5259 18.1132C36.8762 18.1468 37.1324 18.4534 37.0982 18.7979C37.07 19.0821 36.8502 19.3117 36.5635 19.3562L29.1741 20.5052C27.0286 20.7964 26.057 23.3263 27.4525 24.9699L30.0503 28.0195C30.2596 28.2652 30.2268 28.6313 29.977 28.8372C29.7654 29.0117 29.4592 29.0185 29.2398 28.8535L26.0374 26.4452C24.3093 25.1511 21.8183 26.251 21.6357 28.3928L20.93 36.7458C20.9008 37.0908 20.5929 37.3473 20.2422 37.3186C19.9446 37.2943 19.7041 37.0698 19.6637 36.7786L18.5447 28.7099C18.2447 26.5293 15.6037 25.5845 13.9669 27.0664L4.24383 35.8824C4.04257 36.0649 3.72905 36.0523 3.54357 35.8543C3.37339 35.6726 3.36822 35.3945 3.53152 35.2068L12.0171 25.4552C13.4844 23.7728 12.4084 21.1457 10.1716 20.9582L3.13771 20.283C2.78748 20.2494 2.53126 19.9428 2.56543 19.5982C2.59361 19.314 2.81342 19.0845 3.10007 19.0399L10.4846 17.8911C12.6301 17.5999 13.6083 15.07 12.2128 13.4264L10.4444 11.3505C10.1849 11.0458 10.2255 10.5918 10.5352 10.3365C10.7977 10.1201 11.1776 10.1118 11.4496 10.3165L13.6213 11.9511C15.3494 13.2452 17.8404 12.1453 18.023 10.0035L18.6072 3.12677C18.6441 2.69231 19.032 2.36955 19.4736 2.40586ZM0.766962 18.8263C1.19054 18.8263 1.53392 19.1645 1.53392 19.5816C1.53392 19.9988 1.19054 20.337 0.766962 20.337C0.34338 20.337 0 19.9988 0 19.5816C0 19.1645 0.34338 18.8263 0.766962 18.8263ZM39.233 18.0593C39.6566 18.0593 40 18.3975 40 18.8146C40 19.2318 39.6566 19.57 39.233 19.57C38.8095 19.57 38.4661 19.2318 38.4661 18.8146C38.4661 18.3975 38.8095 18.0593 39.233 18.0593ZM19.3628 0C19.7864 0 20.1298 0.338193 20.1298 0.755375C20.1298 1.17256 19.7864 1.51075 19.3628 1.51075C18.9393 1.51075 18.5959 1.17256 18.5959 0.755375C18.5959 0.338193 18.9393 0 19.3628 0Z"
+          fill="url(#solflareGradient)"
+      />
+  </svg>
+)
+
+export default Solflare

app/components/icons/Wallets/Starknet.tsx

@@ -1,13 +1,14 @@
-const Starknet = (props) => {
-    return (
-        <svg {...props} xmlns="http://www.w3.org/2000/svg" width="158" height="158" viewBox="0 0 158 158" fill="none">
-            <path fillRule="evenodd" clipRule="evenodd" d="M-3.68439e-06 78.9988C-3.68439e-06 122.629 35.3685 157.998 78.9988 157.998C122.629 157.998 158 122.629 158 78.9988C158 35.3685 122.629 0 78.9988 0C35.3685 0 -3.68439e-06 35.3685 -3.68439e-06 78.9988Z" fill="#0C0C4F" />
-            <path fillRule="evenodd" clipRule="evenodd" d="M44.1542 60.3876L46.1043 54.3628C46.5007 53.1374 47.4678 52.1839 48.6977 51.8079L54.752 49.9461C55.59 49.6901 55.5968 48.5078 54.7656 48.2383L48.7385 46.2881C47.5154 45.8918 46.5618 44.9246 46.1836 43.6947L44.324 37.6405C44.0681 36.8047 42.8858 36.7956 42.6162 37.6291L40.6661 43.654C40.2697 44.877 39.3026 45.8306 38.0727 46.2089L32.0184 48.0684C31.1804 48.3266 31.1713 49.5067 32.0048 49.7762L38.0319 51.7263C39.255 52.1227 40.2086 53.0921 40.5868 54.322L42.4464 60.374C42.7023 61.212 43.8846 61.2211 44.1542 60.3876Z" fill="#FAFAFA" />
-            <path fillRule="evenodd" clipRule="evenodd" d="M139.848 56.881C137.352 54.09 133.457 52.5186 129.67 51.8742C125.853 51.2553 121.85 51.3127 118.082 51.9822C110.457 53.272 103.53 56.4292 97.4881 60.3241C94.3506 62.2356 91.675 64.4474 88.903 66.7C87.5674 67.8392 86.3497 69.0524 85.0815 70.2482L81.6163 73.696C77.851 77.6317 74.1398 81.2165 70.549 84.1878C66.9437 87.1454 63.573 89.3917 60.2512 90.9604C56.9315 92.5372 53.3794 93.4645 48.7495 93.6129C44.1603 93.7748 38.7307 92.9465 32.9229 91.5794C27.0839 90.2183 20.9523 88.2782 14.1004 86.6088C16.4912 93.2414 20.0914 99.1027 24.7137 104.461C29.3902 109.726 35.2297 114.524 42.7314 117.68C50.1247 120.906 59.4157 122.064 68.1031 120.317C76.8135 118.64 84.4573 114.61 90.6359 109.948C96.8304 105.239 101.842 99.8748 106.067 94.298C107.233 92.7572 107.85 91.8949 108.694 90.6906L111.027 87.2351C112.648 85.0977 114.124 82.6641 115.728 80.5464C118.874 76.1112 121.976 71.6811 125.58 67.5997C127.394 65.5296 129.307 63.5495 131.565 61.6466C132.691 60.7178 133.908 59.8088 135.256 58.99C136.624 58.1068 138.069 57.4155 139.848 56.881Z" fill="#EC796B" />
-            <path fillRule="evenodd" clipRule="evenodd" d="M139.848 56.8808C137.167 50.1148 132.182 44.4194 125.491 40.2167C118.841 36.0601 109.605 33.9389 100.452 35.7471C95.9307 36.6216 91.5501 38.3052 87.7059 40.5472C83.8791 42.7803 80.4499 45.4685 77.4812 48.3524C75.9992 49.7992 74.654 51.3084 73.3176 52.8262L69.8538 57.2423L64.5039 64.3512C57.6836 73.4976 50.3391 84.2166 38.2863 87.3927C26.454 90.5108 21.3221 87.7493 14.1004 86.6085C15.4209 90.0176 17.0565 93.3284 19.2739 96.2409C21.45 99.2124 24.0204 102.003 27.216 104.396C28.8309 105.545 30.5359 106.679 32.4295 107.641C34.3146 108.57 36.3474 109.388 38.5172 110.003C42.8332 111.186 47.6923 111.601 52.397 110.964C57.1039 110.336 61.6029 108.845 65.5355 106.864C69.4971 104.901 72.9481 102.511 76.0296 99.9891C82.1551 94.9021 86.9197 89.2815 90.9444 83.6C92.9688 80.7594 94.8064 77.8652 96.5059 74.9702L98.5062 71.5236C99.1177 70.5161 99.7362 69.5024 100.364 68.5584C102.899 64.7654 105.378 61.7241 108.389 59.4413C111.358 57.0995 115.493 55.3693 121.018 54.9674C126.52 54.5606 132.872 55.312 139.848 56.8808Z" fill="#FAFAFA" />
-            <path fillRule="evenodd" clipRule="evenodd" d="M110.081 113.097C110.081 118.067 114.112 122.097 119.081 122.097C124.051 122.097 128.076 118.067 128.076 113.097C128.076 108.128 124.051 104.097 119.081 104.097C114.112 104.097 110.081 108.128 110.081 113.097Z" fill="#EC796B" />
-        </svg>
-    )
-}
+import { LucideProps } from 'lucide-react';
+
+const Starknet = (props: LucideProps) => (
+
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" width="158" height="158" viewBox="0 0 158 158" fill="none">
+      <path fillRule="evenodd" clipRule="evenodd" d="M-3.68439e-06 78.9988C-3.68439e-06 122.629 35.3685 157.998 78.9988 157.998C122.629 157.998 158 122.629 158 78.9988C158 35.3685 122.629 0 78.9988 0C35.3685 0 -3.68439e-06 35.3685 -3.68439e-06 78.9988Z" fill="#0C0C4F" />
+      <path fillRule="evenodd" clipRule="evenodd" d="M44.1542 60.3876L46.1043 54.3628C46.5007 53.1374 47.4678 52.1839 48.6977 51.8079L54.752 49.9461C55.59 49.6901 55.5968 48.5078 54.7656 48.2383L48.7385 46.2881C47.5154 45.8918 46.5618 44.9246 46.1836 43.6947L44.324 37.6405C44.0681 36.8047 42.8858 36.7956 42.6162 37.6291L40.6661 43.654C40.2697 44.877 39.3026 45.8306 38.0727 46.2089L32.0184 48.0684C31.1804 48.3266 31.1713 49.5067 32.0048 49.7762L38.0319 51.7263C39.255 52.1227 40.2086 53.0921 40.5868 54.322L42.4464 60.374C42.7023 61.212 43.8846 61.2211 44.1542 60.3876Z" fill="#FAFAFA" />
+      <path fillRule="evenodd" clipRule="evenodd" d="M139.848 56.881C137.352 54.09 133.457 52.5186 129.67 51.8742C125.853 51.2553 121.85 51.3127 118.082 51.9822C110.457 53.272 103.53 56.4292 97.4881 60.3241C94.3506 62.2356 91.675 64.4474 88.903 66.7C87.5674 67.8392 86.3497 69.0524 85.0815 70.2482L81.6163 73.696C77.851 77.6317 74.1398 81.2165 70.549 84.1878C66.9437 87.1454 63.573 89.3917 60.2512 90.9604C56.9315 92.5372 53.3794 93.4645 48.7495 93.6129C44.1603 93.7748 38.7307 92.9465 32.9229 91.5794C27.0839 90.2183 20.9523 88.2782 14.1004 86.6088C16.4912 93.2414 20.0914 99.1027 24.7137 104.461C29.3902 109.726 35.2297 114.524 42.7314 117.68C50.1247 120.906 59.4157 122.064 68.1031 120.317C76.8135 118.64 84.4573 114.61 90.6359 109.948C96.8304 105.239 101.842 99.8748 106.067 94.298C107.233 92.7572 107.85 91.8949 108.694 90.6906L111.027 87.2351C112.648 85.0977 114.124 82.6641 115.728 80.5464C118.874 76.1112 121.976 71.6811 125.58 67.5997C127.394 65.5296 129.307 63.5495 131.565 61.6466C132.691 60.7178 133.908 59.8088 135.256 58.99C136.624 58.1068 138.069 57.4155 139.848 56.881Z" fill="#EC796B" />
+      <path fillRule="evenodd" clipRule="evenodd" d="M139.848 56.8808C137.167 50.1148 132.182 44.4194 125.491 40.2167C118.841 36.0601 109.605 33.9389 100.452 35.7471C95.9307 36.6216 91.5501 38.3052 87.7059 40.5472C83.8791 42.7803 80.4499 45.4685 77.4812 48.3524C75.9992 49.7992 74.654 51.3084 73.3176 52.8262L69.8538 57.2423L64.5039 64.3512C57.6836 73.4976 50.3391 84.2166 38.2863 87.3927C26.454 90.5108 21.3221 87.7493 14.1004 86.6085C15.4209 90.0176 17.0565 93.3284 19.2739 96.2409C21.45 99.2124 24.0204 102.003 27.216 104.396C28.8309 105.545 30.5359 106.679 32.4295 107.641C34.3146 108.57 36.3474 109.388 38.5172 110.003C42.8332 111.186 47.6923 111.601 52.397 110.964C57.1039 110.336 61.6029 108.845 65.5355 106.864C69.4971 104.901 72.9481 102.511 76.0296 99.9891C82.1551 94.9021 86.9197 89.2815 90.9444 83.6C92.9688 80.7594 94.8064 77.8652 96.5059 74.9702L98.5062 71.5236C99.1177 70.5161 99.7362 69.5024 100.364 68.5584C102.899 64.7654 105.378 61.7241 108.389 59.4413C111.358 57.0995 115.493 55.3693 121.018 54.9674C126.52 54.5606 132.872 55.312 139.848 56.8808Z" fill="#FAFAFA" />
+      <path fillRule="evenodd" clipRule="evenodd" d="M110.081 113.097C110.081 118.067 114.112 122.097 119.081 122.097C124.051 122.097 128.076 118.067 128.076 113.097C128.076 108.128 124.051 104.097 119.081 104.097C114.112 104.097 110.081 108.128 110.081 113.097Z" fill="#EC796B" />
+  </svg>
+)
 
 export default Starknet

app/components/icons/Wallets/TON.tsx

@@ -1,7 +1,10 @@
-const TON = (props) => <svg {...props} xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none">
+import { LucideProps } from 'lucide-react';
+
+const TON = (props: LucideProps) => (
+<svg {...props} xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none">
     <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>
-
+)
 
 export default TON;

app/components/icons/Wallets/TonKeeper.tsx

@@ -1,11 +1,12 @@
-const TonKeeper = (props) => {
-    return (
-        <svg {...props} xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
-            <path d="M16 13L0 7L16 1L32 7L16 13Z" fill="#45AEF5" />
-            <path opacity="0.6" d="M16 13L32 7L16 31V13Z" fill="#45AEF5" />
-            <path opacity="0.8" d="M16 13L0 7L16 31V13Z" fill="#45AEF5" />
-        </svg>
-    )
-}
+import { LucideProps } from 'lucide-react';
 
-export default TonKeeper
+const TonKeeper = (props: LucideProps) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+      <path d="M16 13L0 7L16 1L32 7L16 13Z" fill="#45AEF5" />
+      <path opacity="0.6" d="M16 13L32 7L16 31V13Z" fill="#45AEF5" />
+      <path opacity="0.8" d="M16 13L0 7L16 31V13Z" fill="#45AEF5" />
+  </svg>
+)
+
+
+export default TonKeeper

app/components/icons/Wallets/WalletConnect.tsx

@@ -1,5 +1,8 @@
-const WalletConnectIcon = (props) => <svg {...props} width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect width="28" height="28" fill="#3B99FC" />
-    <path d="M8.38969 10.3739C11.4882 7.27538 16.5118 7.27538 19.6103 10.3739L19.9832 10.7468C20.1382 10.9017 20.1382 11.1529 19.9832 11.3078L18.7076 12.5835C18.6301 12.6609 18.5045 12.6609 18.4271 12.5835L17.9139 12.0703C15.7523 9.9087 12.2477 9.9087 10.0861 12.0703L9.53655 12.6198C9.45909 12.6973 9.3335 12.6973 9.25604 12.6198L7.98039 11.3442C7.82547 11.1893 7.82547 10.9381 7.98039 10.7832L8.38969 10.3739ZM22.2485 13.012L23.3838 14.1474C23.5387 14.3023 23.5387 14.5535 23.3838 14.7084L18.2645 19.8277C18.1096 19.9827 17.8584 19.9827 17.7035 19.8277C17.7035 19.8277 17.7035 19.8277 17.7035 19.8277L14.0702 16.1944C14.0314 16.1557 13.9686 16.1557 13.9299 16.1944C13.9299 16.1944 13.9299 16.1944 13.9299 16.1944L10.2966 19.8277C10.1417 19.9827 9.89053 19.9827 9.73561 19.8278C9.7356 19.8278 9.7356 19.8277 9.7356 19.8277L4.61619 14.7083C4.46127 14.5534 4.46127 14.3022 4.61619 14.1473L5.75152 13.012C5.90645 12.857 6.15763 12.857 6.31255 13.012L9.94595 16.6454C9.98468 16.6841 10.0475 16.6841 10.0862 16.6454C10.0862 16.6454 10.0862 16.6454 10.0862 16.6454L13.7194 13.012C13.8743 12.857 14.1255 12.857 14.2805 13.012C14.2805 13.012 14.2805 13.012 14.2805 13.012L17.9139 16.6454C17.9526 16.6841 18.0154 16.6841 18.0541 16.6454L21.6874 13.012C21.8424 12.8571 22.0936 12.8571 22.2485 13.012Z" fill="white" />
-</svg>
-export default WalletConnectIcon
+import { LucideProps } from 'lucide-react';
+const WalletConnectIcon = (props: LucideProps) => (
+  <svg {...props} width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect width="28" height="28" fill="#3B99FC" />
+      <path d="M8.38969 10.3739C11.4882 7.27538 16.5118 7.27538 19.6103 10.3739L19.9832 10.7468C20.1382 10.9017 20.1382 11.1529 19.9832 11.3078L18.7076 12.5835C18.6301 12.6609 18.5045 12.6609 18.4271 12.5835L17.9139 12.0703C15.7523 9.9087 12.2477 9.9087 10.0861 12.0703L9.53655 12.6198C9.45909 12.6973 9.3335 12.6973 9.25604 12.6198L7.98039 11.3442C7.82547 11.1893 7.82547 10.9381 7.98039 10.7832L8.38969 10.3739ZM22.2485 13.012L23.3838 14.1474C23.5387 14.3023 23.5387 14.5535 23.3838 14.7084L18.2645 19.8277C18.1096 19.9827 17.8584 19.9827 17.7035 19.8277C17.7035 19.8277 17.7035 19.8277 17.7035 19.8277L14.0702 16.1944C14.0314 16.1557 13.9686 16.1557 13.9299 16.1944C13.9299 16.1944 13.9299 16.1944 13.9299 16.1944L10.2966 19.8277C10.1417 19.9827 9.89053 19.9827 9.73561 19.8278C9.7356 19.8278 9.7356 19.8277 9.7356 19.8277L4.61619 14.7083C4.46127 14.5534 4.46127 14.3022 4.61619 14.1473L5.75152 13.012C5.90645 12.857 6.15763 12.857 6.31255 13.012L9.94595 16.6454C9.98468 16.6841 10.0475 16.6841 10.0862 16.6454C10.0862 16.6454 10.0862 16.6454 10.0862 16.6454L13.7194 13.012C13.8743 12.857 14.1255 12.857 14.2805 13.012C14.2805 13.012 14.2805 13.012 14.2805 13.012L17.9139 16.6454C17.9526 16.6841 18.0154 16.6841 18.0541 16.6454L21.6874 13.012C21.8424 12.8571 22.0936 12.8571 22.2485 13.012Z" fill="white" />
+  </svg>
+)
+export default WalletConnectIcon

app/components/icons/YoutubeLogo.tsx

@@ -1,4 +1,6 @@
-const YoutubeLogo = (props) => (
+import { LucideProps } from 'lucide-react';
+
+const YoutubeLogo = (props: LucideProps) => (
   <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
     <path
       fillRule="evenodd"

app/components/icons/spinIcon.tsx

@@ -1,10 +1,11 @@
-import * as React from 'react'
-const SpinIcon = (props) => (
+import { LucideProps } from 'lucide-react';
+
+const SpinIcon = (props: LucideProps) => (
   <svg {...props} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={4}>
     <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"></circle>
     <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
   </svg>
 )
 
-export default SpinIcon;
+export default SpinIcon
 

app/components/layout.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from "react"
+import React, { ErrorInfo, useEffect, useState } from "react"
 import Head from "next/head"
 import { useRouter } from "next/router";
 import ThemeWrapper from "./themeWrapper";
-import { ErrorBoundary } from "react-error-boundary";
+import { ErrorBoundary, type FallbackProps } from "react-error-boundary";
 import MaintananceContent from "./maintanance/maintanance";
 import { AuthProvider } from "../context/authContext";
 import { SettingsProvider } from "../context/settings";
@@ -32,7 +32,7 @@ export default function Layout({ children, settings, themeData }: Props) {
   const router = useRouter();
 
   useEffect(() => {
-    function prepareUrl(params) {
+    function prepareUrl(params: string[]) {
       const url = new URL(location.href)
       const queryParams = new URLSearchParams(location.search)
       let customUrl = url.protocol + "//" + url.hostname + url.pathname.replace(/\/$/, '')
@@ -90,18 +90,22 @@ export default function Layout({ children, settings, themeData }: Props) {
     ...(router.query.lockAsset === 'false' ? { lockAsset: false } : {}),
   };
 
-  function logErrorToService(error, info) {
+  function logErrorToService(error: Error, info: ErrorInfo) {
+    /*
+
     const transaction = Sentry.startTransaction({
       name: "error_boundary_handler",
     });
     Sentry.configureScope((scope) => {
       scope.setSpan(transaction);
     });
-    if (process.env.NEXT_PUBLIC_VERCEL_ENV && !error.stack.includes("chrome-extension")) {
+    if (process.env.NEXT_PUBLIC_VERCEL_ENV && !(error.stack && error.stack.includes("chrome-extension"))) {
       SendErrorMessage("UI error", `env: ${process.env.NEXT_PUBLIC_VERCEL_ENV} %0A url: ${process.env.NEXT_PUBLIC_VERCEL_URL} %0A message: ${error?.message} %0A errorInfo: ${info?.componentStack} %0A stack: ${error?.stack ?? error.stack} %0A`)
     }
-    Sentry.captureException(error, info);
+      // @ts-ignore
+    Sentry.captureException(error, info.componentStack);
     transaction.finish();
+    */
   }
 
   themeData = themeData || THEME_COLORS.default

app/components/maintanance/maintanance.tsx

@@ -6,7 +6,7 @@ import CardContainer from "../cardContainer";
 import BridgeLogo from "../icons/BridgeLogo";
 import TwitterLogo from "../icons/TwitterLogo";
 
-function MaintananceContent(props) {
+function MaintananceContent(props: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) {
     const { email, userId } = useAuthState()
     const { boot, show, update } = useIntercom()
     const updateWithProps = () => update({ email: email, userId: userId })

app/components/modal/leaflet.tsx

@@ -1,5 +1,5 @@
 import { Dispatch, PropsWithChildren, SetStateAction, useCallback, useEffect, useRef } from 'react'
-import { motion, useAnimation } from "framer-motion";
+import { PanInfo, motion, useAnimation } from "framer-motion";
 import { forwardRef } from 'react';
 import IconButton from '../buttons/iconButton';
 import { X } from 'lucide-react';
@@ -24,7 +24,7 @@ export const Leaflet = forwardRef<HTMLDivElement, PropsWithChildren<LeafletProps
     const controls = useAnimation();
     const transitionProps = { type: "spring", stiffness: 500, damping: 40 };
 
-    async function handleDragEnd(_, info) {
+    async function handleDragEnd(_: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) {
         const offset = info.offset.y;
         const velocity = info.velocity.y;
         const height = mobileModalRef.current?.getBoundingClientRect().height || 0;

app/components/modal/modal.tsx

@@ -12,7 +12,7 @@ export interface ModalProps {
     className?: string;
     height?: LeafletHeight;
     show: boolean;
-    setShow: Dispatch<SetStateAction<boolean>>;
+    setShow: Dispatch<SetStateAction<boolean>>
 }
 
 const Modal: FC<ModalProps> = (({ header, height, className, children, subHeader, show, setShow }) => {