refactor to use layerswap/ui-kit package

apps/app/Models/Balance.ts

@@ -1,5 +1,5 @@
 import { ExtendedNetwork, ExtendedToken } from "./Network"
-import { Wallet } from "./WalletProvider"
+import { Wallet } from "@layerswap/utils"
 import { NodeErrorCategory } from "@/lib/balances/nodeErrorClassifier"
 
 export type GasProps = {

apps/app/app/layout.tsx

@@ -4,6 +4,7 @@ import "../styles/vaul.css";
 import type { Metadata, Viewport } from "next";
 import { getSettings } from "@/lib/getSettings";
 import { Providers } from "./providers";
+import "@layerswap/ui-kit/styles.css";
 
 const title = "TRAIN I The First Scalable Cross-Chain Bridge";
 const description = "The trustless and permissionless way of cross-chain asset bridging & swapping. Move assets across blockchains without third parties, secured by a battle-tested system.";

apps/app/app/providers.tsx

@@ -18,6 +18,7 @@ import { registerStarknetSdk } from "@train-protocol/starknet"
 import { registerSolanaSdk } from "@train-protocol/solana"
 import { registerAztecSdk } from "@train-protocol/aztec"
 import { registerFuelSdk } from "@train-protocol/fuel"
+import { setErrorLogger } from "@layerswap/utils"
 import ThemeWrapper from "@/components/themeWrapper"
 import MaintananceContent from "@/components/Maintanance"
 import ErrorFallback from "@/components/ErrorFallback"
@@ -51,14 +52,23 @@ const posthogKey = process.env.NEXT_PUBLIC_POSTHOG_KEY
 const posthogHost = process.env.NEXT_PUBLIC_POSTHOG_HOST || "https://us.i.posthog.com"
 
 
-if (typeof window !== "undefined" && posthogKey) {
-    posthog.init(posthogKey, {
-        api_host: posthogHost,
-        person_profiles: "identified_only",
-        loaded: (ph) => {
-            if (process.env.NODE_ENV === "development") ph.debug()
-        },
-    })
+if (typeof window !== "undefined") {
+    if (posthogKey) {
+        posthog.init(posthogKey, {
+            api_host: posthogHost,
+            person_profiles: "identified_only",
+            loaded: (ph) => {
+                if (process.env.NODE_ENV === "development") ph.debug()
+            },
+        })
+        setErrorLogger(event => {
+            console.error('[layerswap]', event)
+            const error = new Error(event.message ?? event.type)
+            error.name = event.name ?? event.type
+            if (event.stack) error.stack = event.stack
+            posthog.captureException(error)
+        })
+    }
 }
 
 function logErrorToService(error: Error, info: { componentStack?: string | null }) {

apps/app/components/Faucet/FaucetNetworkSelector.tsx

@@ -1,7 +1,7 @@
 import { FC } from "react"
 import { ExtendedNetwork } from "@/Models/Network"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/shadcn/select"
-import { ImageWithFallback } from "@/components/Common/ImageWithFallback"
+import { ImageWithFallback } from "@layerswap/ui-kit/components"
 
 type Props = {
     networks: ExtendedNetwork[]

apps/app/components/Faucet/FaucetWalletPicker.tsx

@@ -2,11 +2,12 @@ import { FC, useRef, useState } from "react"
 import { Check } from "lucide-react"
 import clsx from "clsx"
 import { ExtendedNetwork } from "@/Models/Network"
-import { Wallet } from "@/Models/WalletProvider"
+import { Wallet } from "@layerswap/utils";
 import { Address } from "@/lib/address"
 import { Popover, PopoverAnchor, PopoverContent } from "@/components/shadcn/popover"
 import MobileTooltip from "@/components/Modal/mobileTooltip"
 import { AddressInputField } from "@/components/Input/Address/AddressPicker/ManualAddressInput"
+import WalletIconView from "@/components/Wallet/WalletIconView"
 
 type Props = {
     network: ExtendedNetwork | null
@@ -83,7 +84,7 @@ const FaucetWalletPicker: FC<Props> = ({ network, wallets, value, onChange, disa
                                         isSelected ? "bg-secondary-300" : "bg-secondary-500 hover:bg-secondary-300",
                                     )}
                                 >
-                                    <wallet.icon className="w-9 h-9 rounded-md bg-secondary-800 p-0.5 shrink-0" />
+                                    <WalletIconView wallet={wallet} className="w-9 h-9 rounded-md bg-secondary-800 p-0.5 shrink-0" />
                                     <div className="flex flex-col items-start min-w-0 grow text-left">
                                         <MobileTooltip
                                             trigger={

apps/app/components/FeeDetails/SwapQuote/SummaryRow.tsx

@@ -2,15 +2,16 @@ import { FC, useMemo } from 'react'
 import { ChevronDown } from 'lucide-react'
 import AddressIcon from '../../AddressIcon'
 import { Address } from "@/lib/address";
-import { Wallet } from '@/Models/WalletProvider'
+import { Wallet } from "@layerswap/utils";
 import { SwapFormValues } from '@/components/DTOs/SwapFormValues'
 import { ExtendedAddress } from '@/components/Input/Address/AddressPicker/AddressWithIcon'
 import { DetailsButton } from '..'
 import type { SwapQuote } from '@train-protocol/react'
 import clsx from 'clsx'
 import { Partner } from '@/Models/Partner'
 import { useQueryState } from '@/context/query'
-import { ImageWithFallback } from '@/components/Common/ImageWithFallback'
+import { ImageWithFallback } from '@layerswap/ui-kit/components'
+import WalletIconView from '@/components/Wallet/WalletIconView'
 
 export const SummaryRow: FC<{
     isQuoteLoading?: boolean
@@ -38,7 +39,7 @@ export const SummaryRow: FC<{
                     <div className="text-right text-primary-text">
                         <span className="cursor-pointer hover:underline flex items-center gap-2">
                             {wallet?.icon ? (
-                                <wallet.icon className="w-4 h-4 bg-secondary-700 rounded-sm" />
+                                <WalletIconView wallet={wallet} className="w-4 h-4 bg-secondary-700 rounded-sm" />
                             ) : addressProviderIcon ? (
                                 <ImageWithFallback
                                     alt="Partner logo"