Verbatim module syntax

eslint.config.mjs

@@ -45,6 +45,10 @@ export default tseslint.config(
             order: 'asc',
             caseInsensitive: true
           },
+          named: {
+	    enabled: true,
+            types: "types-last"
+          },
           pathGroups: [
             {
               pattern: '~/**',

examples/components/src/CardButton.tsx

@@ -1,4 +1,4 @@
-import { Card, Text, Spinner } from '@0xsequence/design-system'
+import { Card, Spinner, Text } from '@0xsequence/design-system'
 
 interface CardButtonProps {
   title: string

examples/components/src/Header.tsx

@@ -1,13 +1,13 @@
 import {
-  Image,
-  Text,
-  GradientAvatar,
-  truncateAddress,
-  NetworkImage,
-  Card,
   Button,
+  Card,
   ChevronDownIcon,
-  SignoutIcon
+  GradientAvatar,
+  Image,
+  NetworkImage,
+  SignoutIcon,
+  Text,
+  truncateAddress
 } from '@0xsequence/design-system'
 import * as PopoverPrimitive from '@radix-ui/react-popover'
 import { useState } from 'react'

examples/next/src/app/components/Connected.tsx

@@ -1,19 +1,19 @@
 import type { CheckoutSettings } from '@0xsequence/checkout'
 import {
+  ContractVerificationStatus,
   signEthAuthProof,
-  useWallets,
+  useOpenConnectModal,
   useStorage,
   useWaasFeeOptions,
-  validateEthProof,
-  ContractVerificationStatus,
-  useOpenConnectModal
+  useWallets,
+  validateEthProof
 } from '@0xsequence/connect'
-import { Text, Card, Button, Select, cn } from '@0xsequence/design-system'
+import { Button, Card, cn, Select, Text } from '@0xsequence/design-system'
 import { useIndexerClient } from '@0xsequence/hooks'
-import { ChainId, allNetworks } from '@0xsequence/network'
+import { allNetworks, ChainId } from '@0xsequence/network'
 import { useOpenWalletModal } from '@0xsequence/wallet-widget'
 import { CardButton, Header, WalletListItem } from 'example-shared-components'
-import { type ComponentProps, useEffect, useState } from 'react'
+import { useEffect, useState, type ComponentProps } from 'react'
 import { encodeFunctionData, formatUnits, parseAbi, parseUnits } from 'viem'
 import { useAccount, useChainId, usePublicClient, useSendTransaction, useWalletClient, useWriteContract } from 'wagmi'
 

examples/next/src/app/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import { useWallets, useOpenConnectModal } from '@0xsequence/connect'
-import { Image, Button } from '@0xsequence/design-system'
+import { useOpenConnectModal, useWallets } from '@0xsequence/connect'
+import { Button, Image } from '@0xsequence/design-system'
 import { Footer } from 'example-shared-components'
 
 import { Connected } from './components/Connected'

examples/next/tsconfig.json

@@ -6,8 +6,8 @@
     "strict": true,
     "noEmit": true,
     "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",

examples/react/src/App.tsx

@@ -2,11 +2,11 @@ import { SequenceCheckoutProvider } from '@0xsequence/checkout'
 import { SequenceConnect } from '@0xsequence/connect'
 import { ThemeProvider } from '@0xsequence/design-system'
 import { SequenceWalletProvider } from '@0xsequence/wallet-widget'
-import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import { BrowserRouter, Route, Routes } from 'react-router-dom'
 
 import { Homepage } from './components/Homepage'
 import { ImmutableCallback } from './components/ImmutableCallback'
-import { config, checkoutConfig } from './config'
+import { checkoutConfig, config } from './config'
 
 export const App = () => {
   return (

examples/react/src/components/Connected.tsx

@@ -1,26 +1,26 @@
 import {
-  useCheckoutModal,
+  TransactionOnRampProvider,
   useAddFundsModal,
+  useCheckoutModal,
   useSelectPaymentModal,
-  useSwapModal,
-  TransactionOnRampProvider
+  useSwapModal
 } from '@0xsequence/checkout'
 import type { SwapModalSettings } from '@0xsequence/checkout'
 import {
-  useStorage,
-  useWaasFeeOptions,
-  signEthAuthProof,
-  validateEthProof,
   getModalPositionCss,
+  signEthAuthProof,
   useOpenConnectModal,
-  useWallets
+  useStorage,
+  useWaasFeeOptions,
+  useWallets,
+  validateEthProof
 } from '@0xsequence/connect'
-import { Button, Card, Modal, Scroll, Select, Switch, Text, TextInput, cn } from '@0xsequence/design-system'
+import { Button, Card, cn, Modal, Scroll, Select, Switch, Text, TextInput } from '@0xsequence/design-system'
 import { allNetworks, ChainId } from '@0xsequence/network'
 import { useOpenWalletModal } from '@0xsequence/wallet-widget'
 import { CardButton, Header, WalletListItem } from 'example-shared-components'
 import { AnimatePresence } from 'motion/react'
-import React, { type ComponentProps, useEffect } from 'react'
+import React, { useEffect, type ComponentProps } from 'react'
 import { encodeFunctionData, formatUnits, parseAbi, toHex } from 'viem'
 import { useAccount, useChainId, usePublicClient, useSendTransaction, useWalletClient, useWriteContract } from 'wagmi'
 

examples/react/src/components/CustomCheckout/index.tsx

@@ -1,6 +1,6 @@
-import { useCheckoutUI, CreditCardProviders } from '@0xsequence/checkout'
+import { CreditCardProviders, useCheckoutUI } from '@0xsequence/checkout'
 import { CryptoOption } from '@0xsequence/connect'
-import { Text, Button, Spinner, NetworkImage, Image } from '@0xsequence/design-system'
+import { Button, Image, NetworkImage, Spinner, Text } from '@0xsequence/design-system'
 import { useState } from 'react'
 import { encodeFunctionData, toHex } from 'viem'
 import { useAccount } from 'wagmi'

examples/react/src/components/Homepage.tsx

@@ -1,5 +1,5 @@
-import { useWallets, useOpenConnectModal, WalletType } from '@0xsequence/connect'
-import { Button, Card, Text, Image, CheckmarkIcon } from '@0xsequence/design-system'
+import { useOpenConnectModal, useWallets, WalletType } from '@0xsequence/connect'
+import { Button, Card, CheckmarkIcon, Image, Text } from '@0xsequence/design-system'
 import { clsx } from 'clsx'
 import { Footer } from 'example-shared-components'
 

examples/react/src/utils/helpers.ts

@@ -1,5 +1,5 @@
 import { CheckoutSettings } from '@0xsequence/checkout'
-import { Hex, encodeFunctionData } from 'viem'
+import { encodeFunctionData, Hex } from 'viem'
 
 import { orderbookAbi } from '../constants/orderbook-abi'
 

examples/react/tsconfig.json

@@ -9,7 +9,7 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
+    "module": "ESNext",
     "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,

packages/checkout/package.json

@@ -21,8 +21,8 @@
   ],
   "scripts": {
     "build": "pnpm build:clean && pnpm build:esm && pnpm build:cjs",
-    "build:cjs": "tsc --module commonjs --declaration --declarationMap --outDir dist/cjs && echo '{ \"type\": \"commonjs\" }' > dist/cjs/package.json",
-    "build:esm": "tsc --module es2022 --declaration --declarationMap --outDir dist/esm",
+    "build:cjs": "tsc --module commonjs --verbatimModuleSyntax false --declaration --declarationMap --outDir dist/cjs && echo '{ \"type\": \"commonjs\" }' > dist/cjs/package.json",
+    "build:esm": "tsc --module es2022 --verbatimModuleSyntax false --declaration --declarationMap --outDir dist/esm",
     "build:clean": "rimraf -g ./dist",
     "build:check": "attw --pack .",
     "dev": "tsc --watch --module es2022 --declaration --declarationMap --outDir dist/esm",

packages/checkout/src/api/data.ts

@@ -1,8 +1,8 @@
-import { SequenceAPIClient } from '@0xsequence/api'
-import { TokenMetadata } from '@0xsequence/metadata'
-import { ChainId, networks } from '@0xsequence/network'
+import type { SequenceAPIClient } from '@0xsequence/api'
+import type { TokenMetadata } from '@0xsequence/metadata'
+import { networks, type ChainId } from '@0xsequence/network'
 
-import { CreditCardCheckout } from '../contexts'
+import type { CreditCardCheckout } from '../contexts'
 
 export interface FetchSardineClientTokenReturn {
   token: string

packages/checkout/src/components/CopyButton.tsx

@@ -1,5 +1,5 @@
-import { Button, CopyIcon, CheckmarkIcon } from '@0xsequence/design-system'
-import React, { useEffect, useState, ComponentProps } from 'react'
+import { Button, CheckmarkIcon, CopyIcon } from '@0xsequence/design-system'
+import React, { useEffect, useState, type ComponentProps } from 'react'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
 
 type ButtonProps = ComponentProps<typeof Button>

packages/checkout/src/components/NavigationHeader.tsx

@@ -1,4 +1,4 @@
-import { IconButton, ChevronLeftIcon, Text, ModalPrimitive } from '@0xsequence/design-system'
+import { ChevronLeftIcon, IconButton, ModalPrimitive, Text } from '@0xsequence/design-system'
 import React from 'react'
 
 import { HEADER_HEIGHT } from '../constants'

packages/checkout/src/components/SequenceCheckoutProvider/SequenceCheckoutProvider.tsx

@@ -3,37 +3,37 @@
 import { getModalPositionCss, ShadowRoot, useConnectConfigContext, useTheme } from '@0xsequence/connect'
 import { Modal } from '@0xsequence/design-system'
 import { AnimatePresence } from 'motion/react'
-import React, { useState, useEffect } from 'react'
+import React, { useEffect, useState, type ReactNode } from 'react'
 
 import {
-  History,
-  Navigation,
-  NavigationContextProvider,
-  CheckoutModalContextProvider,
-  CheckoutSettings,
   AddFundsContextProvider,
-  AddFundsSettings,
+  CheckoutModalContextProvider,
+  EnvironmentContextProvider,
+  NavigationContextProvider,
   SelectPaymentContextProvider,
-  SelectPaymentSettings,
-  TransferFundsContextProvider,
-  TransferFundsSettings,
-  TransactionStatusSettings,
-  TransactionStatusModalContextProvider,
-  SwapModalSettings,
   SwapModalContextProvider,
-  EnvironmentContextProvider,
-  EnvironmentOverrides
+  TransactionStatusModalContextProvider,
+  TransferFundsContextProvider,
+  type AddFundsSettings,
+  type CheckoutSettings,
+  type EnvironmentOverrides,
+  type History,
+  type Navigation,
+  type SelectPaymentSettings,
+  type SwapModalSettings,
+  type TransactionStatusSettings,
+  type TransferFundsSettings
 } from '../../contexts'
 import {
-  PendingCreditCardTransaction,
-  TransactionError,
-  TransactionSuccess,
-  CheckoutSelection,
   AddFundsContent,
+  CheckoutSelection,
   PaymentSelection,
-  TransferToWallet,
+  PendingCreditCardTransaction,
+  Swap,
+  TransactionError,
   TransactionStatus,
-  Swap
+  TransactionSuccess,
+  TransferToWallet
 } from '../../views'
 import { NavigationHeader } from '../NavigationHeader'
 
@@ -42,7 +42,7 @@ export interface SequenceCheckoutConfig {
 }
 
 export type SequenceCheckoutProviderProps = {
-  children: React.ReactNode
+  children: ReactNode
   config?: SequenceCheckoutConfig
 }
 

packages/checkout/src/contexts/AddFundsModal.ts

@@ -1,5 +1,5 @@
 import { TransactionOnRampProvider } from '@0xsequence/marketplace'
-import { Hex } from 'viem'
+import type { Hex } from 'viem'
 
 import { createGenericContext } from './genericContext'
 
@@ -28,4 +28,4 @@ type AddFundsModalContext = {
 
 const [useAddFundsModalContext, AddFundsContextProvider] = createGenericContext<AddFundsModalContext>()
 
-export { useAddFundsModalContext, AddFundsContextProvider }
+export { AddFundsContextProvider, useAddFundsModalContext }

packages/checkout/src/contexts/CheckoutModal.ts

@@ -1,9 +1,9 @@
 'use client'
 
-import { Theme } from '@0xsequence/design-system'
+import type { Theme } from '@0xsequence/design-system'
 
 import { createGenericContext } from './genericContext'
-import { SupplementaryAnalyticsInfo } from './SelectPaymentModal'
+import type { SupplementaryAnalyticsInfo } from './SelectPaymentModal'
 
 interface CoinQuantity {
   contractAddress: string
@@ -64,4 +64,4 @@ type CheckoutModalContext = {
 
 const [useCheckoutModalContext, CheckoutModalContextProvider] = createGenericContext<CheckoutModalContext>()
 
-export { useCheckoutModalContext, CheckoutModalContextProvider }
+export { CheckoutModalContextProvider, useCheckoutModalContext }

packages/checkout/src/contexts/Environment.ts

@@ -12,4 +12,4 @@ export interface EnvironmentOverrides {
 
 const [useEnvironmentContext, EnvironmentContextProvider] = createGenericContext<EnvironmentOverrides>()
 
-export { useEnvironmentContext, EnvironmentContextProvider }
+export { EnvironmentContextProvider, useEnvironmentContext }

packages/checkout/src/contexts/Navigation.ts

@@ -1,5 +1,6 @@
 'use client'
-import { CreditCardCheckout } from '../contexts'
+
+import type { CreditCardCheckout } from '../contexts'
 
 import { createGenericContext } from './genericContext'
 
@@ -55,4 +56,4 @@ type NavigationContext = {
 
 const [useNavigationContext, NavigationContextProvider] = createGenericContext<NavigationContext>()
 
-export { useNavigationContext, NavigationContextProvider }
+export { NavigationContextProvider, useNavigationContext }

packages/checkout/src/contexts/SelectPaymentModal.ts

@@ -1,5 +1,5 @@
 import { TransactionOnRampProvider } from '@0xsequence/marketplace'
-import { Hex } from 'viem'
+import type { Hex } from 'viem'
 
 import type { TransakConfig } from '../contexts/CheckoutModal'
 
@@ -59,4 +59,4 @@ type SelectPaymentModalContext = {
 
 const [useSelectPaymentContext, SelectPaymentContextProvider] = createGenericContext<SelectPaymentModalContext>()
 
-export { useSelectPaymentContext, SelectPaymentContextProvider }
+export { SelectPaymentContextProvider, useSelectPaymentContext }

packages/checkout/src/contexts/SwapModal.ts

@@ -1,6 +1,6 @@
 'use client'
 
-import { Hex } from 'viem'
+import type { Hex } from 'viem'
 
 import { createGenericContext } from './genericContext'
 
@@ -33,4 +33,4 @@ type SwapModalContext = {
 
 const [useSwapModalContext, SwapModalContextProvider] = createGenericContext<SwapModalContext>()
 
-export { useSwapModalContext, SwapModalContextProvider }
+export { SwapModalContextProvider, useSwapModalContext }

packages/checkout/src/contexts/TransactionStatusModal.ts

@@ -27,4 +27,4 @@ type TransactionStatusContext = {
 
 const [useTransactionStatusContext, TransactionStatusModalContextProvider] = createGenericContext<TransactionStatusContext>()
 
-export { useTransactionStatusContext, TransactionStatusModalContextProvider }
+export { TransactionStatusModalContextProvider, useTransactionStatusContext }

packages/checkout/src/contexts/TransferFundsModal.ts

@@ -1,4 +1,4 @@
-import { Hex } from 'viem'
+import type { Hex } from 'viem'
 
 import { createGenericContext } from './genericContext'
 
@@ -15,4 +15,4 @@ type TransferFundsModalContext = {
 
 const [useTransferFundsModalContext, TransferFundsContextProvider] = createGenericContext<TransferFundsModalContext>()
 
-export { useTransferFundsModalContext, TransferFundsContextProvider }
+export { TransferFundsContextProvider, useTransferFundsModalContext }

packages/checkout/src/contexts/genericContext.ts

@@ -1,4 +1,4 @@
-import { useContext, createContext } from 'react'
+import { createContext, useContext } from 'react'
 
 // https://medium.com/@rivoltafilippo/typing-react-context-to-avoid-an-undefined-default-value-2c7c5a7d5947
 

packages/checkout/src/hooks/useAddFundsModal.ts

@@ -1,4 +1,4 @@
-import { AddFundsSettings, useAddFundsModalContext } from '../contexts/AddFundsModal'
+import { useAddFundsModalContext, type AddFundsSettings } from '../contexts/AddFundsModal'
 
 /**
  * Return type for the useAddFundsModal hook.

packages/checkout/src/hooks/useCheckoutModal.ts

@@ -1,4 +1,4 @@
-import { CheckoutSettings, useCheckoutModalContext } from '../contexts/CheckoutModal'
+import { useCheckoutModalContext, type CheckoutSettings } from '../contexts/CheckoutModal'
 
 /**
  * Return type for the useCheckoutModal hook.

packages/checkout/src/hooks/useCheckoutOptionsSalesContract.ts

@@ -1,4 +1,4 @@
-import { CheckoutOptionsSalesContractArgs } from '@0xsequence/marketplace'
+import type { CheckoutOptionsSalesContractArgs } from '@0xsequence/marketplace'
 import { useQuery } from '@tanstack/react-query'
 
 import { useMarketplaceClient } from './useMarketplaceClient'