Turbo repo (#58)

* Removing preconstruct and babel * Adding turbo config * examples/next: Allow initialState to be passed to WagmiProvider * examples/next: Use cookieStorage and pass initialState to WagmiProvider for SSR of logged in state. * set 'use client' on all Providers and Contexts * examples/next: disable animation on image loading to prevent SSR issues * emit declarationMap when generating types * Fixing lint errors in packages * Fixing lint errors in examples * Using ChainId enum when referencing chain ids * Fix transferProps in TxnDetails * Updating tsconfig * Disable typecheck ci * Removing window.etherum declaration from injected * Removing window.ethereum declaration from KitProvider * Renaming start:react and start:next to dev:react and dev:next to be more inline with nextjs convension
0xsequence · May 27, 2024 · 9dddf83 · 9dddf83
1 parent b38e642
commit 9dddf83
Show file tree

Hide file tree

Showing 50 changed files with 371 additions and 843 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -13,8 +13,8 @@ jobs:
       - name: Install dependencies
         uses: ./.github/actions/install-dependencies
 
-      - name: Typecheck
-        run: pnpm typecheck
+      # - name: Typecheck
+      #   run: pnpm typecheck
 
       - name: Build
         run: pnpm build && pnpm build:react

diff --git a/.gitignore b/.gitignore
@@ -4,11 +4,13 @@ node_modules/
 cache/
 build/
 dist/
+/packages/*/dist/**
 
-test_chain/
+.next/
+
+.turbo
 
 *.js.map
-PROD.env
 
 .DS_Store
 .vscode
@@ -17,8 +19,3 @@ PROD.env
 .cache
 package-lock.json
 coverage
-.rts2_cache*
-
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
diff --git a/babel.config.js b/babel.config.js
diff --git a/examples/next/src/app/Providers.tsx b/examples/next/src/app/Providers.tsx
@@ -4,21 +4,22 @@ import { KitProvider } from '@0xsequence/kit'
 import { KitCheckoutProvider } from '@0xsequence/kit-checkout'
 import { KitWalletProvider } from '@0xsequence/kit-wallet'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { WagmiProvider } from 'wagmi'
+import { State, WagmiProvider } from 'wagmi'
 
 import { wagmiConfig, kitConfig } from '../config'
 
 const queryClient = new QueryClient()
 
 export interface ProvidersProps {
   children: React.ReactNode
+  initialState?: State | undefined
 }
 
 export const Providers = (props: ProvidersProps) => {
-  const { children } = props
+  const { children, initialState } = props
 
   return (
-    <WagmiProvider config={wagmiConfig}>
+    <WagmiProvider config={wagmiConfig} initialState={initialState}>
       <QueryClientProvider client={queryClient}>
         <KitProvider config={kitConfig}>
           <KitWalletProvider>

diff --git a/examples/next/src/app/components/Connected.tsx b/examples/next/src/app/components/Connected.tsx
@@ -2,7 +2,7 @@ import { Box, Text, Card, Button, Select, SignoutIcon } from '@0xsequence/design
 import { signEthAuthProof, useIndexerClient, useStorage, useWaasFeeOptions, validateEthProof } from '@0xsequence/kit'
 import { CheckoutSettings } from '@0xsequence/kit-checkout'
 import { useOpenWalletModal } from '@0xsequence/kit-wallet'
-import { allNetworks } from '@0xsequence/network'
+import { ChainId, allNetworks } from '@0xsequence/network'
 import { ComponentProps, useEffect, useState } from 'react'
 import { formatUnits, parseUnits } from 'viem'
 import {
@@ -206,10 +206,10 @@ export const Connected = () => {
   // }
 
   const onSwitchNetwork = () => {
-    if (chainId === 421614) {
-      switchChain({ chainId: 42170 })
+    if (chainId === ChainId.ARBITRUM_SEPOLIA) {
+      switchChain({ chainId: ChainId.ARBITRUM_NOVA })
     } else {
-      switchChain({ chainId: 421614 })
+      switchChain({ chainId: ChainId.ARBITRUM_SEPOLIA })
     }
 
     setLastTxnDataHash(undefined)
@@ -486,7 +486,7 @@ export const Alert = ({ title, description, secondaryDescription, variant, butto
 export const getCheckoutSettings = (_address?: string) => {
   const checkoutSettings: CheckoutSettings = {
     cryptoCheckout: {
-      chainId: 137,
+      chainId: ChainId.POLYGON,
       triggerTransaction: async () => {
         console.log('triggered transaction')
       },
@@ -497,13 +497,13 @@ export const getCheckoutSettings = (_address?: string) => {
     },
     orderSummaryItems: [
       {
-        chainId: 137,
+        chainId: ChainId.POLYGON,
         contractAddress: '0x631998e91476da5b870d741192fc5cbc55f5a52e',
         tokenId: '66597',
         quantityRaw: '100'
       },
       {
-        chainId: 137,
+        chainId: ChainId.POLYGON,
         contractAddress: '0x624e4fa6980afcf8ea27bfe08e2fb5979b64df1c',
         tokenId: '1741',
         quantityRaw: '100'

diff --git a/examples/next/src/app/components/Footer.tsx b/examples/next/src/app/components/Footer.tsx
@@ -1,5 +1,5 @@
-import React from 'react'
 import { Box, Button, Image, Text, useMediaQuery, useTheme } from '@0xsequence/design-system'
+import React from 'react'
 
 interface BottomPageLink {
   label: string

diff --git a/examples/next/src/app/components/Header.tsx b/examples/next/src/app/components/Header.tsx
@@ -9,14 +9,15 @@ export const Header = () => {
   return (
     <Box position="fixed" width="full" padding="5" justifyContent="space-between">
       <Box flexDirection="row" alignItems="center" justifyContent="center" gap="3">
-        <Image style={{ width: '36px' }} src="kit-logo.svg" alt="Sequence kit" />
+        <Image style={{ width: '36px' }} src="kit-logo.svg" alt="Sequence kit" disableAnimation />
         <Image
           style={{
             width: '24px'
             // filter: theme === 'dark' ? 'invert(0)' : 'invert(1)'
           }}
           src="kit-logo-text.svg"
           alt="Sequence Kit Text Logo"
+          disableAnimation
         />
       </Box>
       <Box>

diff --git a/examples/next/src/app/layout.tsx b/examples/next/src/app/layout.tsx
@@ -1,10 +1,14 @@
 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 } from '../config'
+
 import { Providers } from './Providers'
 
 const inter = Inter({ subsets: ['latin'] })
@@ -19,11 +23,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>{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
@@ -16,17 +16,18 @@ export default function Home() {
       {!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" />
+            <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" />
+            <Image alt="Sequence Kit Logo" style={{ width: '48px' }} src="kit-logo.svg" disableAnimation />
             <Image
               alt="Sequence Kit Text Logo"
               style={{
                 width: '32px'
                 // filter: theme === 'dark' ? 'invert(0)' : 'invert(1)'
               }}
               src="kit-logo-text.svg"
+              disableAnimation
             />
           </Box>
           <Box gap="2" flexDirection="row" alignItems="center">

diff --git 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 { cookieStorage, createConfig, createStorage, http } 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/examples/next/turbo.json b/examples/next/turbo.json
@@ -0,0 +1,8 @@
+{
+  "extends": ["//"],
+  "pipeline": {
+    "build": {
+      "outputs": [".next/**", "!.next/cache/**"]
+    }
+  }
+}
diff --git a/examples/react/package.json b/examples/react/package.json
@@ -5,8 +5,7 @@
   "homepage": "kit",
   "type": "module",
   "scripts": {
-    "dev": "pnpm start",
-    "start": "vite",
+    "dev": "vite",
     "build": "vite build && touch ./dist/.nojekyll",
     "serve": "vite preview",
     "typecheck": "tsc --noEmit"

diff --git a/examples/react/src/components/Homepage.tsx b/examples/react/src/components/Homepage.tsx
@@ -29,10 +29,11 @@ import {
 } from '@0xsequence/kit'
 import { useCheckoutModal } from '@0xsequence/kit-checkout'
 import { useOpenWalletModal } from '@0xsequence/kit-wallet'
-import { allNetworks } from '@0xsequence/network'
+import { ChainId, allNetworks } from '@0xsequence/network'
 import { ethers } from 'ethers'
 import { AnimatePresence } from 'framer-motion'
 import React, { useEffect } from 'react'
+import { formatUnits, parseUnits } from 'viem'
 import {
   useDisconnect,
   useAccount,
@@ -44,7 +45,6 @@ import {
   useWriteContract,
   useConnections
 } from 'wagmi'
-import { formatUnits, parseUnits } from 'viem'
 
 import { ConnectionMode } from '../config'
 import { messageToSign } from '../constants'
@@ -97,7 +97,7 @@ export const Homepage = () => {
     localStorage.getItem('confirmationEnabled') === 'true'
   )
 
-  const [pendingFeeOptionConfirmation, confirmPendingFeeOption, rejectPendingFeeOption] = useWaasFeeOptions()
+  const [pendingFeeOptionConfirmation, confirmPendingFeeOption] = useWaasFeeOptions()
 
   const [selectedFeeOptionTokenName, setSelectedFeeOptionTokenName] = React.useState<string | undefined>()
 
@@ -369,7 +369,7 @@ export const Homepage = () => {
         address || '',
         checkoutTokenContractAddress,
         checkoutTokenId,
-        137,
+        ChainId.POLYGON,
         1,
         true
       )
@@ -382,10 +382,10 @@ export const Homepage = () => {
   }
 
   const onSwitchNetwork = () => {
-    if (chainId === 421614) {
-      switchChain({ chainId: 42170 })
+    if (chainId === ChainId.ARBITRUM_SEPOLIA) {
+      switchChain({ chainId: ChainId.ARBITRUM_NOVA })
     } else {
-      switchChain({ chainId: 421614 })
+      switchChain({ chainId: ChainId.ARBITRUM_SEPOLIA })
     }
 
     setLastTxnDataHash(undefined)

diff --git a/examples/react/src/utils/helpers.ts b/examples/react/src/utils/helpers.ts
@@ -1,8 +1,6 @@
 import { CheckoutSettings } from '@0xsequence/kit-checkout'
 import { Address } from 'viem'
 
-import { ConnectionMode } from '../config'
-
 export const truncateAtMiddle = (text: string, truncateAt: number) => {
   let finalText = text
 

diff --git a/package.json b/package.json
@@ -4,40 +4,31 @@
   "license": "Apache-2.0",
   "sideEffects": false,
   "scripts": {
-    "build": "pnpm dev && pnpm typecheck && preconstruct build",
-    "watch": "preconstruct watch",
-    "clean": "rimraf -g ./**/node_modules",
-    "changeset": "changeset",
-    "version-packages": "changeset version",
-    "release": "pnpm build && changeset publish",
-    "deps": "pnpx taze -r",
-    "test": "pnpm -r test",
+    "build": "turbo run build --filter={packages/*}",
+    "build:clean": "turbo run build:clean",
+    "reinstall": "rimraf -g ./**/node_modules && pnpm install",
+    "test": "turbo run test",
     "lint": "eslint -c .eslintrc.js 'packages/**/src/**/*.{ts,tsx}'",
     "lint:fix": "eslint -c .eslintrc.js --fix 'packages/**/src/**/*.{ts,tsx}'",
     "format": "prettier --list-different --write './{packages,examples}/*/src/**/*.{ts,tsx}'",
     "audit:fix": "pnpm audit --fix",
     "typecheck": "tsc --noEmit",
-    "dev": "preconstruct dev",
-    "postinstall": "preconstruct dev",
-    "start:react": "pnpm --filter @0xsequence/kit-example-react start",
+    "deps": "pnpx taze -r",
+    "changeset": "changeset",
+    "changeset:version": "changeset version",
+    "changeset:publish": "pnpm build && changeset publish",
+    "dev:react": "pnpm --filter @0xsequence/kit-example-react dev",
     "serve:react": "pnpm --filter @0xsequence/kit-example-react serve",
     "build:react": "pnpm --filter @0xsequence/kit-example-react build",
-    "start:next": "pnpm --filter @0xsequence/kit-example-next dev",
+    "dev:next": "pnpm --filter @0xsequence/kit-example-next dev",
     "serve:next": "pnpm --filter @0xsequence/kit-example-next start",
     "build:next": "pnpm --filter @0xsequence/kit-example-next build"
   },
   "devDependencies": {
     "@0xsequence/kit": "workspace:*",
     "@0xsequence/kit-connectors": "workspace:*",
-    "@babel/core": "^7.24.5",
-    "@babel/plugin-transform-class-properties": "^7.24.1",
-    "@babel/preset-env": "^7.24.5",
-    "@babel/preset-react": "^7.24.1",
-    "@babel/preset-typescript": "^7.24.1",
-    "@babel/runtime": "^7.24.5",
     "@changesets/changelog-github": "^0.5.0",
-    "@changesets/cli": "^2.27.3",
-    "@preconstruct/cli": "^2.8.4",
+    "@changesets/cli": "^2.25.2",
     "@types/node": "^20.12.12",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
@@ -54,17 +45,9 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rimraf": "^5.0.7",
+    "turbo": "1.13.3",
     "typescript": "~5.4.5",
     "wagmi": "^2.9.5"
   },
-  "resolutions": {},
-  "workspaces": [
-    "packages/*",
-    "examples/*"
-  ],
-  "preconstruct": {
-    "packages": [
-      "packages/*"
-    ]
-  }
+  "resolutions": {}
 }
diff --git a/packages/checkout/.babelrc b/packages/checkout/.babelrc