moved hooks pkg to peer dep in checkout package

packages/checkout/package.json

@@ -31,7 +31,6 @@
   },
   "dependencies": {
     "@0xsequence/design-system": "2.1.11",
-    "@0xsequence/hooks": "workspace:*",
     "@0xsequence/marketplace": "^2.3.10",
     "motion": "^12.9.2",
     "pako": "^2.1.0",

packages/checkout/src/hooks/useCheckoutUI/index.tsx

@@ -1,4 +1,4 @@
-import { useGetTokenMetadata, useGetContractInfo } from '@0xsequence/hooks'
+import { useGetTokenMetadata, useGetContractInfo } from '@0xsequence/connect'
 import { findSupportedNetwork } from '@0xsequence/network'
 import { Hex } from 'viem'
 

packages/checkout/src/hooks/useCheckoutUI/useCreditCardPayment.tsx

@@ -1,6 +1,5 @@
-import { useProjectAccessKey } from '@0xsequence/connect'
+import { useProjectAccessKey, useConfig } from '@0xsequence/connect'
 import { compareAddress } from '@0xsequence/connect'
-import { useConfig } from '@0xsequence/hooks'
 import { ContractInfo, TokenMetadata } from '@0xsequence/metadata'
 import { findSupportedNetwork } from '@0xsequence/network'
 import pako from 'pako'

packages/checkout/src/hooks/useCheckoutUI/useCryptoPayment.tsx

@@ -1,5 +1,13 @@
-import { compareAddress, ContractVerificationStatus, formatDisplay, sendTransactions } from '@0xsequence/connect'
-import { useIndexerClient, useGetTokenBalancesSummary, useGetSwapQuote, useGetSwapRoutes } from '@0xsequence/hooks'
+import {
+  compareAddress,
+  ContractVerificationStatus,
+  formatDisplay,
+  sendTransactions,
+  useIndexerClient,
+  useGetTokenBalancesSummary,
+  useGetSwapQuote,
+  useGetSwapRoutes
+} from '@0xsequence/connect'
 import { ContractInfo, TokenMetadata } from '@0xsequence/metadata'
 import { findSupportedNetwork } from '@0xsequence/network'
 import { useState } from 'react'

packages/checkout/src/hooks/useCheckoutUI/useOrderSummary.tsx

@@ -1,6 +1,5 @@
-import { compareAddress, formatDisplay, NetworkBadge } from '@0xsequence/connect'
+import { compareAddress, formatDisplay, NetworkBadge, useGetCoinPrices } from '@0xsequence/connect'
 import { networkImageUrl } from '@0xsequence/design-system'
-import { useGetCoinPrices } from '@0xsequence/hooks'
 import { ContractInfo, TokenMetadata } from '@0xsequence/metadata'
 import { findSupportedNetwork } from '@0xsequence/network'
 import { ReactNode } from 'react'

packages/checkout/src/hooks/useCheckoutWhitelistStatus.ts

@@ -1,5 +1,4 @@
-import { useProjectAccessKey } from '@0xsequence/connect'
-import { useConfig } from '@0xsequence/hooks'
+import { useProjectAccessKey, useConfig } from '@0xsequence/connect'
 import { useQuery } from '@tanstack/react-query'
 
 import { checkSardineWhitelistStatus, CheckSardineWhitelistStatusArgs } from '../utils'

packages/checkout/src/views/AddFunds.tsx

@@ -1,5 +1,5 @@
+import { useAPIClient } from '@0xsequence/connect'
 import { Spinner, Text } from '@0xsequence/design-system'
-import { useAPIClient } from '@0xsequence/hooks'
 import React, { useEffect, useRef } from 'react'
 
 import { HEADER_HEIGHT } from '../constants'

packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx

@@ -1,6 +1,5 @@
-import { formatDisplay } from '@0xsequence/connect'
+import { formatDisplay, useGetTokenMetadata, useGetContractInfo } from '@0xsequence/connect'
 import { Card, Image, Text, Skeleton, TokenImage, NetworkImage } from '@0xsequence/design-system'
-import { useGetTokenMetadata, useGetContractInfo } from '@0xsequence/hooks'
 import { formatUnits } from 'viem'
 
 interface OrderSummaryItem {

packages/checkout/src/views/CheckoutSelection/index.tsx

@@ -1,4 +1,11 @@
-import { ContractVerificationStatus, getNativeTokenInfoByChainId, compareAddress, formatDisplay } from '@0xsequence/connect'
+import {
+  ContractVerificationStatus,
+  getNativeTokenInfoByChainId,
+  compareAddress,
+  formatDisplay,
+  useGetTokenBalancesSummary,
+  useGetContractInfo
+} from '@0xsequence/connect'
 import {
   Button,
   ChevronRightIcon,
@@ -10,7 +17,6 @@ import {
   Skeleton,
   TokenImage
 } from '@0xsequence/design-system'
-import { useGetTokenBalancesSummary, useGetContractInfo } from '@0xsequence/hooks'
 import { useEffect } from 'react'
 import { zeroAddress, formatUnits } from 'viem'
 import { useAccount, useConfig } from 'wagmi'

packages/checkout/src/views/PaymentSelection/OrderSummary/Price.tsx

@@ -1,5 +1,5 @@
+import { useGetCoinPrices, useGetContractInfo } from '@0xsequence/connect'
 import { Spinner, Text, TokenImage } from '@0xsequence/design-system'
-import { useGetCoinPrices, useGetContractInfo } from '@0xsequence/hooks'
 import { findSupportedNetwork } from '@0xsequence/network'
 import { formatUnits } from 'viem'
 

packages/checkout/src/views/PaymentSelection/OrderSummary/index.tsx

@@ -1,6 +1,12 @@
-import { formatDisplay, NetworkBadge, CollectibleTileImage } from '@0xsequence/connect'
+import {
+  formatDisplay,
+  NetworkBadge,
+  CollectibleTileImage,
+  useGetTokenMetadata,
+  useGetContractInfo,
+  useGetCoinPrices
+} from '@0xsequence/connect'
 import { Spinner, NetworkImage, Text } from '@0xsequence/design-system'
-import { useGetTokenMetadata, useGetContractInfo, useGetCoinPrices } from '@0xsequence/hooks'
 import { findSupportedNetwork } from '@0xsequence/network'
 import { formatUnits } from 'viem'
 

packages/checkout/src/views/PaymentSelection/PayWithCreditCard/index.tsx

@@ -1,5 +1,5 @@
+import { useClearCachedBalances, useGetContractInfo } from '@0xsequence/connect'
 import { ArrowRightIcon, Card, PaymentsIcon, Spinner, Text } from '@0xsequence/design-system'
-import { useClearCachedBalances, useGetContractInfo } from '@0xsequence/hooks'
 import { findSupportedNetwork } from '@0xsequence/network'
 import { useEffect, useState } from 'react'
 import { useAccount } from 'wagmi'

packages/checkout/src/views/PaymentSelection/PayWithCrypto/index.tsx

@@ -1,6 +1,14 @@
-import { CryptoOption, compareAddress, ContractVerificationStatus, formatDisplay } from '@0xsequence/connect'
+import {
+  CryptoOption,
+  compareAddress,
+  ContractVerificationStatus,
+  formatDisplay,
+  useClearCachedBalances,
+  useGetContractInfo,
+  useGetSwapRoutes,
+  useGetTokenBalancesSummary
+} from '@0xsequence/connect'
 import { AddIcon, Button, SubtractIcon, Text, Spinner } from '@0xsequence/design-system'
-import { useClearCachedBalances, useGetTokenBalancesSummary, useGetContractInfo, useGetSwapRoutes } from '@0xsequence/hooks'
 import { findSupportedNetwork } from '@0xsequence/network'
 import { motion } from 'motion/react'
 import { useState, useEffect, Fragment, SetStateAction, useMemo } from 'react'

packages/checkout/src/views/PaymentSelection/index.tsx

@@ -1,13 +1,16 @@
 import { LifiToken } from '@0xsequence/api'
-import { useAnalyticsContext, compareAddress, TRANSACTION_CONFIRMATIONS_DEFAULT, sendTransactions } from '@0xsequence/connect'
-import { Button, Divider, Text, Spinner } from '@0xsequence/design-system'
 import {
-  useClearCachedBalances,
+  useAnalyticsContext,
+  compareAddress,
+  TRANSACTION_CONFIRMATIONS_DEFAULT,
+  sendTransactions,
+  useIndexerClient,
   useGetContractInfo,
   useGetSwapQuote,
-  useIndexerClient,
-  useGetSwapRoutes
-} from '@0xsequence/hooks'
+  useGetSwapRoutes,
+  useClearCachedBalances
+} from '@0xsequence/connect'
+import { Button, Divider, Text, Spinner } from '@0xsequence/design-system'
 import { findSupportedNetwork } from '@0xsequence/network'
 import { useState, useEffect } from 'react'
 import { encodeFunctionData, Hex, zeroAddress } from 'viem'

packages/checkout/src/views/PendingCreditCardTransaction.tsx

@@ -1,6 +1,5 @@
-import { useAnalyticsContext, useProjectAccessKey } from '@0xsequence/connect'
+import { useAnalyticsContext, useProjectAccessKey, useConfig, useGetTokenMetadata, useGetContractInfo } from '@0xsequence/connect'
 import { Spinner, Text } from '@0xsequence/design-system'
-import { useConfig, useGetTokenMetadata, useGetContractInfo } from '@0xsequence/hooks'
 import { findSupportedNetwork } from '@0xsequence/network'
 import pako from 'pako'
 import { useEffect, useRef } from 'react'

packages/checkout/src/views/Swap/index.tsx

@@ -1,12 +1,15 @@
-import { CryptoOption, compareAddress, formatDisplay, sendTransactions } from '@0xsequence/connect'
-import { Button, Spinner, Text } from '@0xsequence/design-system'
 import {
+  CryptoOption,
+  compareAddress,
+  formatDisplay,
+  sendTransactions,
   useGetContractInfo,
   useGetSwapRoutes,
   useGetSwapQuote,
   useGetTokenBalancesSummary,
   useIndexerClient
-} from '@0xsequence/hooks'
+} from '@0xsequence/connect'
+import { Button, Spinner, Text } from '@0xsequence/design-system'
 import { findSupportedNetwork } from '@0xsequence/network'
 import { useState, useEffect, useMemo } from 'react'
 import { zeroAddress, formatUnits, Hex } from 'viem'

packages/checkout/src/views/TransactionStatus/index.tsx

@@ -2,7 +2,10 @@ import {
   CollectibleTileImage,
   formatDisplay,
   TRANSACTION_CONFIRMATIONS_DEFAULT,
-  waitForTransactionReceipt
+  waitForTransactionReceipt,
+  useGetTokenMetadata,
+  useGetContractInfo,
+  useIndexerClient
 } from '@0xsequence/connect'
 import {
   ArrowDownIcon,
@@ -15,7 +18,6 @@ import {
   CloseIcon,
   truncateAddress
 } from '@0xsequence/design-system'
-import { useGetTokenMetadata, useGetContractInfo, useIndexerClient } from '@0xsequence/hooks'
 import { TransactionStatus as TransactionStatusSequence } from '@0xsequence/indexer'
 import { findSupportedNetwork } from '@0xsequence/network'
 import { useState, useEffect } from 'react'

packages/connect/src/index.ts

@@ -108,3 +108,7 @@ export { ShadowRoot } from './components/ShadowRoot'
 
 // Indexer
 export { ContractVerificationStatus } from '@0xsequence/indexer'
+
+// Hooks
+// We are exporting the hooks from this package to avoid react context issues
+export * from '@0xsequence/hooks'

packages/connect/src/styles.ts

@@ -304,6 +304,9 @@ export const styles = String.raw`
   .my-4 {
     margin-block: calc(var(--spacing) * 4);
   }
+  .mt-0 {
+    margin-top: calc(var(--spacing) * 0);
+  }
   .mt-0\.5 {
     margin-top: calc(var(--spacing) * 0.5);
   }
@@ -379,6 +382,9 @@ export const styles = String.raw`
   .inline-flex {
     display: inline-flex;
   }
+  .table {
+    display: table;
+  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -472,6 +478,9 @@ export const styles = String.raw`
   .min-h-full {
     min-height: 100%;
   }
+  .w-1 {
+    width: calc(var(--spacing) * 1);
+  }
   .w-1\/2 {
     width: calc(1/2 * 100%);
   }
@@ -568,12 +577,21 @@ export const styles = String.raw`
   .min-w-full {
     min-width: 100%;
   }
+  .flex-shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
+  .flex-grow {
+    flex-grow: 1;
+  }
   .grow {
     flex-grow: 1;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .origin-top {
     transform-origin: top;
   }
@@ -951,6 +969,9 @@ export const styles = String.raw`
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
+  .pt-1 {
+    padding-top: calc(var(--spacing) * 1);
+  }
   .pt-1\.5 {
     padding-top: calc(var(--spacing) * 1.5);
   }
@@ -1243,6 +1264,9 @@ export const styles = String.raw`
   .ring-border-normal {
     --tw-ring-color: var(--seq-color-border-normal);
   }
+  .ring-white {
+    --tw-ring-color: var(--color-white);
+  }
   .ring-white\/10 {
     --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1281,6 +1305,10 @@ export const styles = String.raw`
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
+  .backdrop-filter {
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));