Refine Package Exports (#51)

* Move TxnDetails into KitProvider dir

* packages/kit: Remove barrel files and place explicit exports in root index

* Fixing imports

* package/connectors: Remove barrel file and explicity export each connector and types

* packages/wallet: Only export KitWalletProvider and openWalletModal hook

* packages/checkout: Exporting KitCheckoutProvider and openCheckoutModal

* Export CheckoutSettings

examples/react-waas/package.json

@@ -8,7 +8,8 @@
     "start": "vite --port 4444",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "0xsequence": "^1.9.26",

packages/checkout/src/api/data.ts

@@ -1,7 +1,7 @@
 import { TokenMetadata } from '@0xsequence/metadata'
 import { ChainId, networks } from '@0xsequence/network'
 
-import { SardineCheckout } from '..'
+import { SardineCheckout } from '../contexts/CheckoutModal'
 
 export interface FetchSardineClientTokenReturn {
   token: string

packages/checkout/src/contexts/CheckoutModal.tsx → packages/checkout/src/contexts/CheckoutModal.ts

@@ -1,4 +1,6 @@
-import { createGenericContext, Theme } from '@0xsequence/kit'
+import { Theme } from '@0xsequence/kit'
+
+import { createGenericContext } from './genericContext'
 
 interface CoinQuantity {
   contractAddress: string

packages/checkout/src/contexts/Navigation.tsx → packages/checkout/src/contexts/Navigation.ts

@@ -1,4 +1,4 @@
-import { createGenericContext } from '@0xsequence/kit'
+import { createGenericContext } from './genericContext'
 
 export interface SelectCheckoutNavigation {
   location: 'select-method-checkout'

packages/checkout/src/index.ts

@@ -0,0 +1,7 @@
+// Provider
+export { KitCheckoutProvider } from './shared/components/KitCheckoutProvider'
+
+// Hooks
+export { useCheckoutModal } from './hooks/useCheckoutModal'
+
+export { type CheckoutSettings } from './contexts/CheckoutModal'

packages/connectors/src/connectors/apple/AppleLogo.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { LogoProps } from '../types'
+import { LogoProps } from '../../types'
 
 interface GetAppleLogo {
   isDarkMode: boolean

packages/connectors/src/connectors/coinbaseWallet/CoinbaseWalletLogo.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { LogoProps } from '../types'
+import { LogoProps } from '../../types'
 
 export const CoinbaseWalletLogo: React.FunctionComponent = (props: LogoProps) => {
   return (

packages/connectors/src/connectors/discord/DiscordLogo.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { LogoProps } from '../types'
+import { LogoProps } from '../../types'
 
 interface GetDiscordLogo {
   isDarkMode: boolean

packages/connectors/src/connectors/email/EmailLogo.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { LogoProps } from '../types'
+import { LogoProps } from '../../types'
 
 interface GetEmailLogo {
   isDarkMode: boolean

packages/connectors/src/connectors/facebook/FacebookLogo.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { LogoProps } from '../types'
+import { LogoProps } from '../../types'
 
 export const FacebookLogo: React.FunctionComponent = (props: LogoProps) => {
   return (

packages/connectors/src/connectors/google/GoogleLogo.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { LogoProps } from '../types'
+import { LogoProps } from '../../types'
 
 export const GoogleLogo: React.FunctionComponent = (props: LogoProps) => {
   return (

packages/connectors/src/connectors/injected/InjectedLogo.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { LogoProps } from '../types'
+import { LogoProps } from '../../types'
 
 export const InjectedLogo: React.FunctionComponent = (props: LogoProps) => {
   return (

packages/connectors/src/connectors/metamask/MetamaskLogo.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { LogoProps } from '../types'
+import { LogoProps } from '../../types'
 
 export const MetamaskLogo: React.FunctionComponent = (props: LogoProps) => {
   return (

packages/connectors/src/connectors/sequence/SequenceLogo.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { LogoProps } from '../types'
+import { LogoProps } from '../../types'
 
 export const SequenceLogo: React.FunctionComponent = (props: LogoProps) => {
   return (

packages/connectors/src/connectors/twitch/TwitchLogo.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { LogoProps } from '../types'
+import { LogoProps } from '../../types'
 
 interface GetTwitchLogo {
   isDarkMode?: boolean

packages/connectors/src/connectors/walletConnect/WalletConnectLogo.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { LogoProps } from '../types'
+import { LogoProps } from '../../types'
 
 export const WalletConnectLogo: React.FunctionComponent = (props: LogoProps) => {
   return (

packages/connectors/src/defaultConnectors.ts

@@ -1,10 +1,18 @@
 import { getKitConnectWallets } from '@0xsequence/kit'
 import { CreateConnectorFn } from 'wagmi'
 
-import { apple, coinbaseWallet, email, facebook, google, metamask, sequence, twitch, walletConnect } from './connectors'
+import { apple } from './connectors/apple'
 import { appleWaas } from './connectors/apple/appleWaas'
 // import { emailWaas } from './connectors/email/emailWaas'
+import { coinbaseWallet } from './connectors/coinbaseWallet'
+import { email } from './connectors/email'
+import { facebook } from './connectors/facebook'
+import { google } from './connectors/google'
 import { googleWaas } from './connectors/google/googleWaas'
+import { metamask } from './connectors/metamask'
+import { sequence } from './connectors/sequence'
+import { twitch } from './connectors/twitch'
+import { walletConnect } from './connectors/walletConnect'
 
 interface GetDefaultConnectors {
   walletConnectProjectId: string

packages/connectors/src/index.ts

@@ -1,2 +1,24 @@
-export * from './connectors'
-export * from './defaultConnectors'
+// Connectors
+export { apple, type AppleOptions } from './connectors/apple'
+export { coinbaseWallet } from './connectors/coinbaseWallet'
+export { discord, type DiscordOptions } from './connectors/discord'
+export { email, type EmailOptions } from './connectors/email'
+export { facebook, type FacebookOptions } from './connectors/facebook'
+export { google, type GoogleOptions } from './connectors/google'
+export { injected } from './connectors/injected'
+export { metamask } from './connectors/metamask'
+export { mock } from './connectors/mock'
+export { sequence, type SequenceOptions } from './connectors/sequence'
+export { twitch, type TwitchOptions } from './connectors/twitch'
+export { walletConnect } from './connectors/walletConnect'
+export {
+  sequenceWallet,
+  sequenceWaasWallet,
+  type BaseSequenceConnectorOptions,
+  type BaseSequenceWaasConnectorOptions
+} from './connectors/wagmiConnectors'
+
+// Default Connectors
+export { getDefaultConnectors, getDefaultWaasConnectors } from './defaultConnectors'
+
+export type { LogoProps } from './types'

packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx

@@ -21,10 +21,10 @@ import { appleAuthHelpers, useScript } from 'react-apple-signin-auth'
 import { useConnect, useAccount } from 'wagmi'
 
 import { LocalStorageKey, defaultSignInOptions } from '../../../constants'
-import { useStorage, useStorageItem } from '../../../hooks'
+import { useStorage, useStorageItem } from '../../../hooks/useStorage'
 import { useEmailAuth } from '../../../hooks/useWaasEmailAuth'
 import { ExtendedConnector, KitConfig } from '../../../types'
-import { isEmailValid } from '../../../utils'
+import { isEmailValid } from '../../../utils/helpers'
 import { KitConnectProviderProps } from '../index'
 
 import { Banner } from './Banner'

packages/kit/src/components/KitProvider/NetworkBadge.tsx

@@ -2,7 +2,7 @@ import { Box, NetworkImage, Text } from '@0xsequence/design-system'
 import { getNetwork, getNetworkColor, getNetworkBackgroundColor } from '@0xsequence/kit'
 import React from 'react'
 
-import { capitalize } from '../../utils/string'
+import { capitalize } from '../../utils/helpers'
 
 interface NetworkBadgeProps {
   chainId: number

packages/kit/src/components/TxnDetails/index.tsx → packages/kit/src/components/KitProvider/TxnDetails/index.tsx

@@ -6,10 +6,11 @@ import { ethers } from 'ethers'
 import React, { useEffect, useState } from 'react'
 import { useConfig } from 'wagmi'
 
-import { useAPIClient } from '../../hooks'
-import { capitalize, compareAddress, getNativeTokenInfoByChainId } from '../../utils'
-import { DecodingType, TransferProps, AwardItemProps, decodeTransactions } from '../../utils/txnDecoding'
-import { CollectibleTileImage } from '../KitProvider/CollectibleTileImage'
+import { useAPIClient } from '../../../hooks/useAPIClient'
+import { compareAddress, capitalize } from '../../../utils/helpers'
+import { getNativeTokenInfoByChainId } from '../../../utils/tokens'
+import { DecodingType, TransferProps, AwardItemProps, decodeTransactions } from '../../../utils/txnDecoding'
+import { CollectibleTileImage } from '../CollectibleTileImage'
 
 interface TxnDetailsProps {
   address: string

packages/kit/src/components/KitProvider/index.tsx

@@ -9,22 +9,20 @@ import { Connector, useAccount, useConfig, useConnections } from 'wagmi'
 import '@0xsequence/design-system/styles.css'
 
 import { DEFAULT_SESSION_EXPIRATION, LocalStorageKey } from '../../constants'
-import {
-  KitConfigContextProvider,
-  ConnectModalContextProvider,
-  ThemeContextProvider,
-  WalletConfigContextProvider,
-  AnalyticsContextProvider
-} from '../../contexts'
-import { useStorage } from '../../hooks'
+import { AnalyticsContextProvider } from '../../contexts/Analytics'
+import { ConnectModalContextProvider } from '../../contexts/ConnectModal'
+import { KitConfigContextProvider } from '../../contexts/KitConfig'
+import { ThemeContextProvider } from '../../contexts/Theme'
+import { WalletConfigContextProvider } from '../../contexts/WalletSettings'
+import { useStorage } from '../../hooks/useStorage'
 import { useWaasConfirmationHandler } from '../../hooks/useWaasConfirmationHandler'
 import { ExtendedConnector, DisplayedAsset, EthAuthSettings, KitConfig, Theme, ModalPosition } from '../../types'
-import { getModalPositionCss } from '../../utils'
-import { TxnDetails } from '../TxnDetails'
+import { getModalPositionCss } from '../../utils/styling'
 
 import { ConnectWalletContent } from './ConnectWalletContent'
 import { NetworkBadge } from './NetworkBadge'
 import { SequenceLogo } from './SequenceLogo'
+import { TxnDetails } from './TxnDetails'
 
 export type KitConnectProviderProps = {
   children: React.ReactNode

packages/kit/src/contexts/Analytics.ts

@@ -1,7 +1,7 @@
 import { sequence } from '0xsequence'
 import React from 'react'
 
-import { createGenericContext } from '../utils'
+import { createGenericContext } from './genericContext'
 
 type AnalyticsContext = {
   setAnalytics: React.Dispatch<React.SetStateAction<sequence.SequenceClient['analytics']>>

packages/kit/src/contexts/ConnectModal.ts

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { createGenericContext } from '../utils'
+import { createGenericContext } from './genericContext'
 
 type ConnectModalContext = {
   setOpenConnectModal: React.Dispatch<React.SetStateAction<boolean>>

packages/kit/src/contexts/KitConfig.ts

@@ -1,4 +1,5 @@
 import { KitConfig } from '../types'
-import { createGenericContext } from '../utils'
+
+import { createGenericContext } from './genericContext'
 
 export const [useKitConfig, KitConfigContextProvider] = createGenericContext<KitConfig>()

packages/kit/src/contexts/Theme.ts

@@ -1,7 +1,8 @@
 import React from 'react'
 
 import { ModalPosition, Theme } from '../index'
-import { createGenericContext } from '../utils'
+
+import { createGenericContext } from './genericContext'
 
 type ThemeContext = {
   setTheme: React.Dispatch<React.SetStateAction<Theme>>

packages/kit/src/contexts/WalletSettings.ts

@@ -1,7 +1,8 @@
 import React from 'react'
 
 import { DisplayedAsset } from '../types'
-import { createGenericContext } from '../utils'
+
+import { createGenericContext } from './genericContext'
 
 type WalletConfigContext = {
   setDisplayedAssets: React.Dispatch<React.SetStateAction<DisplayedAsset[]>>

packages/kit/src/contexts/genericContext.ts

@@ -0,0 +1,19 @@
+import { useContext, createContext } from 'react'
+
+// https://medium.com/@rivoltafilippo/typing-react-context-to-avoid-an-undefined-default-value-2c7c5a7d5947
+
+export const createGenericContext = <T>() => {
+  // Create a context with a generic parameter or undefined
+  const genericContext = createContext<T | undefined>(undefined)
+
+  // Check if the value provided to the context is defined or throw an error
+  const useGenericContext = () => {
+    const contextIsDefined = useContext(genericContext)
+    if (!contextIsDefined) {
+      throw new Error('useGenericContext must be used within a Provider')
+    }
+    return contextIsDefined
+  }
+
+  return [useGenericContext, genericContext.Provider] as const
+}