From 57f66933c8f76e458de04e8deec3ae4e3897813b Mon Sep 17 00:00:00 2001
From: Corban Riley <corbanbrook@gmail.com>
Date: Mon, 13 May 2024 17:15:23 -0400
Subject: [PATCH] Exporting kit components, hooks, contexts as separate modules

---
 examples/next/src/app/Providers.tsx           |  4 +-
 .../next/src/app/components/Connected.tsx     |  3 +-
 examples/next/src/app/layout.tsx              | 15 ++---
 examples/next/src/app/page.tsx                | 58 ++++++++-----------
 examples/next/src/config.ts                   |  9 +--
 .../shared/components/KitCheckoutProvider.tsx |  3 +-
 .../component/OrderSummaryItem.tsx            |  2 +-
 .../src/views/CheckoutSelection/index.tsx     |  3 +-
 .../checkout/src/views/PendingTransaction.tsx |  2 +-
 packages/kit/components/package.json          |  4 ++
 packages/kit/contexts/package.json            |  4 ++
 packages/kit/hooks/package.json               |  4 ++
 packages/kit/package.json                     | 15 ++++-
 .../kit/src/components/KitProvider/index.tsx  |  2 +
 .../kit/src/components/TxnDetails/index.tsx   |  2 +-
 packages/kit/src/components/index.ts          |  2 +
 packages/kit/src/contexts/Analytics.ts        |  2 +
 packages/kit/src/index.ts                     |  6 +-
 packages/wallet/src/hooks/data.ts             |  4 +-
 .../src/shared/KitWalletProvider/index.tsx    |  3 +-
 .../TransactionHistoryItem.tsx                |  3 +-
 .../components/WalletDropdownContent.tsx      |  2 +-
 .../wallet/src/views/CoinDetails/index.tsx    |  9 +--
 .../src/views/CollectibleDetails/index.tsx    |  2 +-
 .../src/views/CollectionDetails/index.tsx     |  2 +-
 .../AssetSummary/CoinTile/index.tsx           |  4 +-
 .../AssetSummary/CollectibleTile/index.tsx    |  3 +-
 .../Home/components/AssetSummary/index.tsx    |  3 +-
 .../wallet/src/views/Search/SearchWallet.tsx  |  3 +-
 .../src/views/Search/SearchWalletViewAll.tsx  |  3 +-
 packages/wallet/src/views/SendCoin.tsx        | 11 +---
 packages/wallet/src/views/SendCollectible.tsx |  4 +-
 .../src/views/TransactionDetails/index.tsx    |  3 +-
 33 files changed, 110 insertions(+), 89 deletions(-)
 create mode 100644 packages/kit/components/package.json
 create mode 100644 packages/kit/contexts/package.json
 create mode 100644 packages/kit/hooks/package.json

diff --git a/examples/next/src/app/Providers.tsx b/examples/next/src/app/Providers.tsx
index 9035e8a52..f5ee05b12 100644
--- a/examples/next/src/app/Providers.tsx
+++ b/examples/next/src/app/Providers.tsx
@@ -11,7 +11,7 @@ import { kitConfig, wagmiConfig } from '@/config'
 const queryClient = new QueryClient()
 
 export interface ProvidersProps {
-  initialState: State
+  initialState: State | undefined
   children: React.ReactNode
   // wagmiConfig: Config
   // kitConfig: KitConfig
@@ -20,6 +20,8 @@ export interface ProvidersProps {
 export const Providers = (props: ProvidersProps) => {
   const { initialState, children /* , wagmiConfig, kitConfig */ } = props
 
+  console.log('initialState', initialState)
+
   return (
     <WagmiProvider config={wagmiConfig} initialState={initialState}>
       <QueryClientProvider client={queryClient}>
diff --git a/examples/next/src/app/components/Connected.tsx b/examples/next/src/app/components/Connected.tsx
index cde495672..49dd3fa02 100644
--- a/examples/next/src/app/components/Connected.tsx
+++ b/examples/next/src/app/components/Connected.tsx
@@ -1,5 +1,6 @@
 import { Box, Text, Card, Button, Select, SignoutIcon } from '@0xsequence/design-system'
-import { signEthAuthProof, useIndexerClient, useWaasFeeOptions, validateEthProof } from '@0xsequence/kit'
+import { signEthAuthProof, validateEthProof } from '@0xsequence/kit'
+import { useIndexerClient, useWaasFeeOptions } from '@0xsequence/kit/hooks'
 import { CheckoutSettings } from '@0xsequence/kit-checkout'
 import { useOpenWalletModal } from '@0xsequence/kit-wallet'
 import { allNetworks } from '@0xsequence/network'
diff --git a/examples/next/src/app/layout.tsx b/examples/next/src/app/layout.tsx
index bdb6d1373..ab631e1b5 100644
--- a/examples/next/src/app/layout.tsx
+++ b/examples/next/src/app/layout.tsx
@@ -1,11 +1,12 @@
+import './globals.css'
+import '@0xsequence/design-system/styles.css'
 import { ThemeProvider } from '@0xsequence/design-system'
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
+import { headers } from 'next/headers'
+import { cookieToInitialState } from 'wagmi'
 
-import './globals.css'
-import '@0xsequence/design-system/styles.css'
-
-import { wagmiConfig, kitConfig } from '../config'
+import { wagmiConfig } from '../config'
 
 import { Providers } from './Providers'
 
@@ -21,13 +22,13 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode
 }>) {
+  const initialState = cookieToInitialState(wagmiConfig, headers().get('cookie'))
+
   return (
     <html lang="en">
       <body className={inter.className}>
         <ThemeProvider theme="dark">
-          <Providers wagmiConfig={wagmiConfig} kitConfig={kitConfig}>
-            {children}
-          </Providers>
+          <Providers initialState={initialState}>{children}</Providers>
         </ThemeProvider>
       </body>
     </html>
diff --git a/examples/next/src/app/page.tsx b/examples/next/src/app/page.tsx
index c5fdc5095..d30fba8e5 100644
--- a/examples/next/src/app/page.tsx
+++ b/examples/next/src/app/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { Box, Image, Button } from '@0xsequence/design-system'
-import { useOpenConnectModal } from '@0xsequence/kit'
+import { useOpenConnectModal } from '@0xsequence/kit/hooks'
 import { useEffect, useState } from 'react'
 import { useAccount } from 'wagmi'
 
@@ -9,44 +9,34 @@ import { Connected } from './components/Connected'
 import { Footer } from './components/Footer'
 
 export default function Home() {
-  const [isClient, setIsClient] = useState(false)
   const { isConnected } = useAccount()
   const { setOpenConnectModal } = useOpenConnectModal()
 
-  useEffect(() => {
-    setIsClient(true)
-  }, [])
-
   return (
     <main>
-      {isClient ? (
-        <>
-          {!isConnected ? (
-            <Box flexDirection="column" alignItems="center" justifyContent="center" gap="5" height="vh">
-              <Box background="white" padding="2" borderRadius="sm">
-                <Image alt="Next" src="next.svg" height="3" />
-              </Box>
-              <Box flexDirection="row" alignItems="center" justifyContent="center" gap="3">
-                <Image alt="Sequence Kit Logo" style={{ width: '48px' }} src="kit-logo.svg" />
-                <Image
-                  alt="Sequence Kit Text Logo"
-                  style={{
-                    width: '32px'
-                    // filter: theme === 'dark' ? 'invert(0)' : 'invert(1)'
-                  }}
-                  src="kit-logo-text.svg"
-                />
-              </Box>
-              <Box gap="2" flexDirection="row" alignItems="center">
-                <Button onClick={() => setOpenConnectModal(true)} variant="feature" label="Connect" />
-              </Box>
-            </Box>
-          ) : (
-            <Connected />
-          )}
-        </>
-      ) : null}
-
+      {!isConnected ? (
+        <Box flexDirection="column" alignItems="center" justifyContent="center" gap="5" height="vh">
+          <Box background="white" padding="2" borderRadius="sm">
+            <Image alt="Next" src="next.svg" height="3" disableAnimation />
+          </Box>
+          <Box flexDirection="row" alignItems="center" justifyContent="center" gap="3">
+            <Image alt="Sequence Kit Logo" style={{ width: '48px' }} src="kit-logo.svg" disableAnimation />
+            <Image
+              alt="Sequence Kit Text Logo"
+              style={{
+                width: '32px'
+              }}
+              src="kit-logo-text.svg"
+              disableAnimation
+            />
+          </Box>
+          <Box gap="2" flexDirection="row" alignItems="center">
+            <Button onClick={() => setOpenConnectModal(true)} variant="feature" label="Connect" />
+          </Box>
+        </Box>
+      ) : (
+        <Connected />
+      )}
       <Footer />
     </main>
   )
diff --git a/examples/next/src/config.ts b/examples/next/src/config.ts
index 45c4716fb..df2214eef 100644
--- a/examples/next/src/config.ts
+++ b/examples/next/src/config.ts
@@ -2,7 +2,7 @@ import { KitConfig, getKitConnectWallets } from '@0xsequence/kit'
 import { getDefaultConnectors, getDefaultWaasConnectors, mock } from '@0xsequence/kit-connectors'
 import { findNetworkConfig, allNetworks } from '@0xsequence/network'
 import { Transport, zeroAddress } from 'viem'
-import { createConfig, createStorage, http, noopStorage } from 'wagmi'
+import { createConfig, createStorage, http, noopStorage, cookieStorage } from 'wagmi'
 import { Chain, arbitrumNova, arbitrumSepolia, mainnet, polygon } from 'wagmi/chains'
 
 export type ConnectionMode = 'waas' | 'universal'
@@ -83,9 +83,10 @@ export const wagmiConfig = createConfig({
   transports,
   chains,
   connectors: connectionMode === 'waas' ? getWaasConnectors() : getUniversalConnectors(),
-  storage: createStorage({
-    storage: typeof window !== 'undefined' && window.localStorage ? window.localStorage : noopStorage
-  }),
+  // storage: createStorage({
+  //   storage: typeof window !== 'undefined' && window.localStorage ? window.localStorage : noopStorage
+  // }),
+  storage: createStorage({ storage: cookieStorage }),
   ssr: true
 })
 
diff --git a/packages/checkout/src/shared/components/KitCheckoutProvider.tsx b/packages/checkout/src/shared/components/KitCheckoutProvider.tsx
index 1fdbed0b6..c3cfa2808 100644
--- a/packages/checkout/src/shared/components/KitCheckoutProvider.tsx
+++ b/packages/checkout/src/shared/components/KitCheckoutProvider.tsx
@@ -1,5 +1,6 @@
 import { Box, Modal, ThemeProvider } from '@0xsequence/design-system'
-import { getModalPositionCss, useTheme } from '@0xsequence/kit'
+import { getModalPositionCss } from '@0xsequence/kit'
+import { useTheme } from '@0xsequence/kit/hooks'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { AnimatePresence } from 'framer-motion'
 import React, { useState, useEffect } from 'react'
diff --git a/packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx b/packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx
index c26e6fe1c..ee49c7aef 100644
--- a/packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx
+++ b/packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx
@@ -1,5 +1,5 @@
 import { Box, Card, Image, Text, Skeleton, TokenImage, NetworkImage } from '@0xsequence/design-system'
-import { useContractInfo, useTokenMetadata } from '@0xsequence/kit'
+import { useContractInfo, useTokenMetadata } from '@0xsequence/kit/hooks'
 import { ethers } from 'ethers'
 import React from 'react'
 
diff --git a/packages/checkout/src/views/CheckoutSelection/index.tsx b/packages/checkout/src/views/CheckoutSelection/index.tsx
index ec4681e0b..14f205cf7 100644
--- a/packages/checkout/src/views/CheckoutSelection/index.tsx
+++ b/packages/checkout/src/views/CheckoutSelection/index.tsx
@@ -11,7 +11,8 @@ import {
   Skeleton,
   TokenImage
 } from '@0xsequence/design-system'
-import { getNativeTokenInfoByChainId, useBalances, useContractInfo, useTokenMetadata, useProjectAccessKey } from '@0xsequence/kit'
+import { getNativeTokenInfoByChainId } from '@0xsequence/kit'
+import { useBalances, useContractInfo, useTokenMetadata, useProjectAccessKey } from '@0xsequence/kit/hooks'
 import { ethers } from 'ethers'
 import React from 'react'
 import { useAccount, useConfig } from 'wagmi'
diff --git a/packages/checkout/src/views/PendingTransaction.tsx b/packages/checkout/src/views/PendingTransaction.tsx
index 284949660..6a4e93224 100644
--- a/packages/checkout/src/views/PendingTransaction.tsx
+++ b/packages/checkout/src/views/PendingTransaction.tsx
@@ -1,5 +1,5 @@
 import { Box } from '@0xsequence/design-system'
-import { useProjectAccessKey } from '@0xsequence/kit'
+import { useProjectAccessKey } from '@0xsequence/kit/hooks'
 import React, { useEffect } from 'react'
 
 import { fetchSardineOrderStatus } from '../api'
diff --git a/packages/kit/components/package.json b/packages/kit/components/package.json
new file mode 100644
index 000000000..6f401c436
--- /dev/null
+++ b/packages/kit/components/package.json
@@ -0,0 +1,4 @@
+{
+  "main": "dist/0xsequence-kit-components.cjs.js",
+  "module": "dist/0xsequence-kit-components.esm.js"
+}
diff --git a/packages/kit/contexts/package.json b/packages/kit/contexts/package.json
new file mode 100644
index 000000000..c5b3112ce
--- /dev/null
+++ b/packages/kit/contexts/package.json
@@ -0,0 +1,4 @@
+{
+  "main": "dist/0xsequence-kit-contexts.cjs.js",
+  "module": "dist/0xsequence-kit-contexts.esm.js"
+}
diff --git a/packages/kit/hooks/package.json b/packages/kit/hooks/package.json
new file mode 100644
index 000000000..455e1966b
--- /dev/null
+++ b/packages/kit/hooks/package.json
@@ -0,0 +1,4 @@
+{
+  "main": "dist/0xsequence-kit-hooks.cjs.js",
+  "module": "dist/0xsequence-kit-hooks.esm.js"
+}
diff --git a/packages/kit/package.json b/packages/kit/package.json
index f677192f8..3b33d05a3 100644
--- a/packages/kit/package.json
+++ b/packages/kit/package.json
@@ -52,6 +52,17 @@
   },
   "files": [
     "src",
-    "dist"
-  ]
+    "dist",
+    "components",
+    "hooks",
+    "contexts"
+  ],
+  "preconstruct": {
+    "entrypoints": [
+      "index.ts",
+      "components/index.ts",
+      "hooks/index.ts",
+      "contexts/index.ts"
+    ]
+  }
 }
diff --git a/packages/kit/src/components/KitProvider/index.tsx b/packages/kit/src/components/KitProvider/index.tsx
index 7baf5295c..0d80f3717 100644
--- a/packages/kit/src/components/KitProvider/index.tsx
+++ b/packages/kit/src/components/KitProvider/index.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { sequence } from '0xsequence'
 import { Box, Button, Card, Collapsible, Modal, Text, ThemeProvider } from '@0xsequence/design-system'
 import { GoogleOAuthProvider } from '@react-oauth/google'
diff --git a/packages/kit/src/components/TxnDetails/index.tsx b/packages/kit/src/components/TxnDetails/index.tsx
index ebfe4c52b..94643aaad 100644
--- a/packages/kit/src/components/TxnDetails/index.tsx
+++ b/packages/kit/src/components/TxnDetails/index.tsx
@@ -1,7 +1,7 @@
 import { commons } from '@0xsequence/core'
 import { Box, Card, GradientAvatar, Skeleton, Text, TokenImage } from '@0xsequence/design-system'
 import { ContractType } from '@0xsequence/indexer'
-import { useTokenMetadata, useBalances } from '@0xsequence/kit'
+import { useTokenMetadata, useBalances } from '@0xsequence/kit/hooks'
 import { ethers } from 'ethers'
 import React, { useEffect, useState } from 'react'
 import { useConfig } from 'wagmi'
diff --git a/packages/kit/src/components/index.ts b/packages/kit/src/components/index.ts
index 65e177e34..26c50ee15 100644
--- a/packages/kit/src/components/index.ts
+++ b/packages/kit/src/components/index.ts
@@ -1 +1,3 @@
+'use client'
+
 export * from './KitProvider'
diff --git a/packages/kit/src/contexts/Analytics.ts b/packages/kit/src/contexts/Analytics.ts
index 98f3ec2fb..4f39f55b9 100644
--- a/packages/kit/src/contexts/Analytics.ts
+++ b/packages/kit/src/contexts/Analytics.ts
@@ -1,3 +1,5 @@
+'use client'
+
 import { sequence } from '0xsequence'
 import React from 'react'
 
diff --git a/packages/kit/src/index.ts b/packages/kit/src/index.ts
index 274007b73..b3343965b 100644
--- a/packages/kit/src/index.ts
+++ b/packages/kit/src/index.ts
@@ -1,6 +1,6 @@
-export * from './components'
+// export * from './components'
+// export * from './hooks'
+// export * from './contexts'
 export * from './constants'
-export * from './hooks'
-export * from './contexts'
 export * from './utils'
 export * from './types'
diff --git a/packages/wallet/src/hooks/data.ts b/packages/wallet/src/hooks/data.ts
index f5bda6a28..0fe40be9b 100644
--- a/packages/wallet/src/hooks/data.ts
+++ b/packages/wallet/src/hooks/data.ts
@@ -1,16 +1,16 @@
 import { SequenceAPIClient, TokenPrice } from '@0xsequence/api'
 import { Transaction, TokenBalance, SequenceIndexer } from '@0xsequence/indexer'
+import { DisplayedAsset } from '@0xsequence/kit'
 import {
   getTransactionHistory,
   useAPIClient,
   useIndexerClients,
-  DisplayedAsset,
   getNativeTokenBalance,
   getTokenBalances,
   getCoinPrices,
   getCollectionBalance,
   useMetadataClient
-} from '@0xsequence/kit'
+} from '@0xsequence/kit/hooks'
 import { GetContractInfoBatchReturn, SequenceMetadata } from '@0xsequence/metadata'
 import { useQuery } from '@tanstack/react-query'
 import { ethers } from 'ethers'
diff --git a/packages/wallet/src/shared/KitWalletProvider/index.tsx b/packages/wallet/src/shared/KitWalletProvider/index.tsx
index de9aa9a8d..4cf979b65 100644
--- a/packages/wallet/src/shared/KitWalletProvider/index.tsx
+++ b/packages/wallet/src/shared/KitWalletProvider/index.tsx
@@ -1,5 +1,6 @@
 import { Box, Modal, ThemeProvider, Scroll } from '@0xsequence/design-system'
-import { getModalPositionCss, useTheme } from '@0xsequence/kit'
+import { getModalPositionCss } from '@0xsequence/kit'
+import { useTheme } from '@0xsequence/kit/hooks'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { AnimatePresence } from 'framer-motion'
 import React, { useState, useEffect } from 'react'
diff --git a/packages/wallet/src/shared/TransactionHistoryList/TransactionHistoryItem.tsx b/packages/wallet/src/shared/TransactionHistoryList/TransactionHistoryItem.tsx
index e312a0a92..5c430bdbb 100644
--- a/packages/wallet/src/shared/TransactionHistoryList/TransactionHistoryItem.tsx
+++ b/packages/wallet/src/shared/TransactionHistoryList/TransactionHistoryItem.tsx
@@ -1,7 +1,8 @@
 import { TokenPrice } from '@0xsequence/api'
 import { ArrowRightIcon, Box, Text, Image, TransactionIcon, vars, Skeleton, NetworkImage } from '@0xsequence/design-system'
 import { Transaction, TxnTransfer, TxnTransferType } from '@0xsequence/indexer'
-import { getNativeTokenInfoByChainId, useCoinPrices, useExchangeRate } from '@0xsequence/kit'
+import { getNativeTokenInfoByChainId } from '@0xsequence/kit'
+import { useCoinPrices, useExchangeRate } from '@0xsequence/kit/hooks'
 import dayjs from 'dayjs'
 import { ethers } from 'ethers'
 import React from 'react'
diff --git a/packages/wallet/src/shared/WalletHeader/components/WalletDropdownContent.tsx b/packages/wallet/src/shared/WalletHeader/components/WalletDropdownContent.tsx
index 2cd313946..bd439211b 100644
--- a/packages/wallet/src/shared/WalletHeader/components/WalletDropdownContent.tsx
+++ b/packages/wallet/src/shared/WalletHeader/components/WalletDropdownContent.tsx
@@ -11,7 +11,7 @@ import {
   TransactionIcon,
   vars
 } from '@0xsequence/design-system'
-import { useTheme } from '@0xsequence/kit'
+import { useTheme } from '@0xsequence/kit/hooks'
 import React, { forwardRef } from 'react'
 import { useDisconnect, useAccount } from 'wagmi'
 
diff --git a/packages/wallet/src/views/CoinDetails/index.tsx b/packages/wallet/src/views/CoinDetails/index.tsx
index 6a24d0070..2a0f0d2dc 100644
--- a/packages/wallet/src/views/CoinDetails/index.tsx
+++ b/packages/wallet/src/views/CoinDetails/index.tsx
@@ -1,11 +1,6 @@
 import { Box, Button, Image, SendIcon, Text } from '@0xsequence/design-system'
-import {
-  getNativeTokenInfoByChainId,
-  useExchangeRate,
-  useCoinPrices,
-  useTransactionHistory,
-  useCoinBalance
-} from '@0xsequence/kit'
+import { getNativeTokenInfoByChainId } from '@0xsequence/kit'
+import { useExchangeRate, useCoinPrices, useTransactionHistory, useCoinBalance } from '@0xsequence/kit/hooks'
 import { ethers } from 'ethers'
 import React from 'react'
 import { useAccount, useConfig } from 'wagmi'
diff --git a/packages/wallet/src/views/CollectibleDetails/index.tsx b/packages/wallet/src/views/CollectibleDetails/index.tsx
index cedaa458b..7b0c3bec7 100644
--- a/packages/wallet/src/views/CollectibleDetails/index.tsx
+++ b/packages/wallet/src/views/CollectibleDetails/index.tsx
@@ -1,5 +1,5 @@
 import { Box, Button, Image, NetworkImage, SendIcon, Text } from '@0xsequence/design-system'
-import { useExchangeRate, useTransactionHistory, useCollectiblePrices, useCollectibleBalance } from '@0xsequence/kit'
+import { useExchangeRate, useTransactionHistory, useCollectiblePrices, useCollectibleBalance } from '@0xsequence/kit/hooks'
 import { ethers } from 'ethers'
 import React from 'react'
 import { useAccount } from 'wagmi'
diff --git a/packages/wallet/src/views/CollectionDetails/index.tsx b/packages/wallet/src/views/CollectionDetails/index.tsx
index 27590c6bc..6e20142c5 100644
--- a/packages/wallet/src/views/CollectionDetails/index.tsx
+++ b/packages/wallet/src/views/CollectionDetails/index.tsx
@@ -1,6 +1,6 @@
 import { Box, Image, Text, TokenImage, vars } from '@0xsequence/design-system'
 import { TokenBalance } from '@0xsequence/indexer'
-import { useCollectionBalance } from '@0xsequence/kit'
+import { useCollectionBalance } from '@0xsequence/kit/hooks'
 import { ethers } from 'ethers'
 import React from 'react'
 import { useAccount } from 'wagmi'
diff --git a/packages/wallet/src/views/Home/components/AssetSummary/CoinTile/index.tsx b/packages/wallet/src/views/Home/components/AssetSummary/CoinTile/index.tsx
index 85b4c3c08..dbee41b5d 100644
--- a/packages/wallet/src/views/Home/components/AssetSummary/CoinTile/index.tsx
+++ b/packages/wallet/src/views/Home/components/AssetSummary/CoinTile/index.tsx
@@ -1,11 +1,11 @@
 import { Box } from '@0xsequence/design-system'
 import { TokenBalance } from '@0xsequence/indexer'
-import { getNativeTokenInfoByChainId, useContractInfo, useExchangeRate, useCoinPrices } from '@0xsequence/kit'
+import { getNativeTokenInfoByChainId } from '@0xsequence/kit'
+import { useContractInfo, useExchangeRate, useCoinPrices } from '@0xsequence/kit/hooks'
 import { ethers } from 'ethers'
 import React from 'react'
 import { useConfig } from 'wagmi'
 
-
 import { useSettings } from '../../../../../hooks'
 import { computeBalanceFiat, formatDisplay, getPercentagePriceChange, compareAddress } from '../../../../../utils'
 
diff --git a/packages/wallet/src/views/Home/components/AssetSummary/CollectibleTile/index.tsx b/packages/wallet/src/views/Home/components/AssetSummary/CollectibleTile/index.tsx
index bf92bceec..dc6f3823c 100644
--- a/packages/wallet/src/views/Home/components/AssetSummary/CollectibleTile/index.tsx
+++ b/packages/wallet/src/views/Home/components/AssetSummary/CollectibleTile/index.tsx
@@ -1,10 +1,9 @@
 import { TokenBalance } from '@0xsequence/indexer'
-import { useTokenMetadata } from '@0xsequence/kit'
+import { useTokenMetadata } from '@0xsequence/kit/hooks'
 import React from 'react'
 
 import { CollectibleTileImage } from '../../../../../shared/CollectibleTileImage'
 
-
 interface CollectibleTileProps {
   balance: TokenBalance
 }
diff --git a/packages/wallet/src/views/Home/components/AssetSummary/index.tsx b/packages/wallet/src/views/Home/components/AssetSummary/index.tsx
index f60e6aeb4..36b2e91a7 100644
--- a/packages/wallet/src/views/Home/components/AssetSummary/index.tsx
+++ b/packages/wallet/src/views/Home/components/AssetSummary/index.tsx
@@ -1,6 +1,6 @@
 import { Box, vars } from '@0xsequence/design-system'
 import { TokenBalance } from '@0xsequence/indexer'
-import { useWalletSettings } from '@0xsequence/kit'
+import { useWalletSettings } from '@0xsequence/kit/hooks'
 import React from 'react'
 import { useAccount } from 'wagmi'
 
@@ -11,7 +11,6 @@ import { CoinTile } from './CoinTile'
 import { CollectibleTile } from './CollectibleTile'
 import { SkeletonTiles } from './SkeletonTiles'
 
-
 export const AssetSummary = () => {
   const { address } = useAccount()
   const { setNavigation } = useNavigation()
diff --git a/packages/wallet/src/views/Search/SearchWallet.tsx b/packages/wallet/src/views/Search/SearchWallet.tsx
index e1d3742bb..2c0ba2429 100644
--- a/packages/wallet/src/views/Search/SearchWallet.tsx
+++ b/packages/wallet/src/views/Search/SearchWallet.tsx
@@ -1,5 +1,6 @@
 import { Box, SearchIcon, Skeleton, Text, TextInput } from '@0xsequence/design-system'
-import { getNativeTokenInfoByChainId, useExchangeRate, useCoinPrices, useBalances } from '@0xsequence/kit'
+import { getNativeTokenInfoByChainId } from '@0xsequence/kit'
+import { useExchangeRate, useCoinPrices, useBalances } from '@0xsequence/kit/hooks'
 import { ethers } from 'ethers'
 import Fuse from 'fuse.js'
 import React, { useState } from 'react'
diff --git a/packages/wallet/src/views/Search/SearchWalletViewAll.tsx b/packages/wallet/src/views/Search/SearchWalletViewAll.tsx
index 6d9558ef9..e18868856 100644
--- a/packages/wallet/src/views/Search/SearchWalletViewAll.tsx
+++ b/packages/wallet/src/views/Search/SearchWalletViewAll.tsx
@@ -1,5 +1,6 @@
 import { Box, SearchIcon, Skeleton, TabsContent, TabsHeader, TabsRoot, Text, TextInput } from '@0xsequence/design-system'
-import { getNativeTokenInfoByChainId, useExchangeRate, useCoinPrices, useBalances } from '@0xsequence/kit'
+import { getNativeTokenInfoByChainId } from '@0xsequence/kit'
+import { useExchangeRate, useCoinPrices, useBalances } from '@0xsequence/kit/hooks'
 import { ethers } from 'ethers'
 import Fuse from 'fuse.js'
 import React, { useState, useEffect } from 'react'
diff --git a/packages/wallet/src/views/SendCoin.tsx b/packages/wallet/src/views/SendCoin.tsx
index 8aa6ea2e4..557410430 100644
--- a/packages/wallet/src/views/SendCoin.tsx
+++ b/packages/wallet/src/views/SendCoin.tsx
@@ -13,14 +13,9 @@ import {
   Card
 } from '@0xsequence/design-system'
 import { TokenBalance } from '@0xsequence/indexer'
-import {
-  getNativeTokenInfoByChainId,
-  useAnalyticsContext,
-  ExtendedConnector,
-  useExchangeRate,
-  useCoinPrices,
-  useBalances
-} from '@0xsequence/kit'
+import { getNativeTokenInfoByChainId, ExtendedConnector } from '@0xsequence/kit'
+import { useAnalyticsContext } from '@0xsequence/kit/contexts'
+import { useExchangeRate, useCoinPrices, useBalances } from '@0xsequence/kit/hooks'
 import { ethers } from 'ethers'
 import React, { useState, ChangeEvent, useRef } from 'react'
 import { useAccount, useChainId, useSwitchChain, useConfig, useSendTransaction } from 'wagmi'
diff --git a/packages/wallet/src/views/SendCollectible.tsx b/packages/wallet/src/views/SendCollectible.tsx
index 1cacdf50d..15d983f05 100644
--- a/packages/wallet/src/views/SendCollectible.tsx
+++ b/packages/wallet/src/views/SendCollectible.tsx
@@ -15,7 +15,9 @@ import {
   Card
 } from '@0xsequence/design-system'
 import { TokenBalance } from '@0xsequence/indexer'
-import { getNativeTokenInfoByChainId, useAnalyticsContext, ExtendedConnector, useCollectibleBalance } from '@0xsequence/kit'
+import { getNativeTokenInfoByChainId, ExtendedConnector } from '@0xsequence/kit'
+import { useAnalyticsContext } from '@0xsequence/kit/contexts'
+import { useCollectibleBalance } from '@0xsequence/kit/hooks'
 import { ethers } from 'ethers'
 import React, { useRef, useState, ChangeEvent, useEffect } from 'react'
 import { useAccount, useChainId, useSwitchChain, useConfig, useSendTransaction } from 'wagmi'
diff --git a/packages/wallet/src/views/TransactionDetails/index.tsx b/packages/wallet/src/views/TransactionDetails/index.tsx
index 72b890f87..e98a60ed8 100644
--- a/packages/wallet/src/views/TransactionDetails/index.tsx
+++ b/packages/wallet/src/views/TransactionDetails/index.tsx
@@ -12,7 +12,8 @@ import {
   TokenImage
 } from '@0xsequence/design-system'
 import { Transaction, TxnTransfer } from '@0xsequence/indexer'
-import { getNativeTokenInfoByChainId, useExchangeRate, useCoinPrices, useCollectiblePrices } from '@0xsequence/kit'
+import { getNativeTokenInfoByChainId } from '@0xsequence/kit'
+import { useExchangeRate, useCoinPrices, useCollectiblePrices } from '@0xsequence/kit/hooks'
 import dayjs from 'dayjs'
 import { ethers } from 'ethers'
 import React from 'react'