From 90b48f8efa5143582a6a61664dcb3334119477d3 Mon Sep 17 00:00:00 2001
From: Corban Riley <corbanbrook@gmail.com>
Date: Mon, 13 May 2024 11:23:32 -0400
Subject: [PATCH] Linting examples

---
 examples/next/src/app/WalletOptions.tsx       |  2 +-
 examples/next/src/app/Web3Provider.tsx        |  6 +-
 .../next/src/app/components/Connected.tsx     | 52 +++++++-------
 examples/next/src/app/components/Header.tsx   |  3 +-
 examples/next/src/app/config.ts               |  4 +-
 examples/next/src/app/layout.tsx              |  3 +-
 examples/next/src/app/page.tsx                |  6 +-
 examples/react-waas/src/App.tsx               | 15 +++--
 examples/react-waas/src/index.tsx             | 14 ++--
 examples/react/src/App.tsx                    |  7 +-
 examples/react/src/components/Footer.tsx      |  2 +-
 examples/react/src/components/Homepage.tsx    | 67 +++++++++----------
 examples/react/src/config.ts                  |  4 +-
 examples/react/src/constants/demo-abi.ts      |  4 +-
 examples/react/src/index.tsx                  |  1 +
 examples/react/src/utils/helpers.ts           |  4 +-
 .../wagmiConnectors/sequenceConnector.ts      | 38 +++++------
 17 files changed, 112 insertions(+), 120 deletions(-)

diff --git a/examples/next/src/app/WalletOptions.tsx b/examples/next/src/app/WalletOptions.tsx
index 693db88f..53856e8f 100644
--- a/examples/next/src/app/WalletOptions.tsx
+++ b/examples/next/src/app/WalletOptions.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Connector, useConnect } from 'wagmi'
+import { useConnect } from 'wagmi'
 
 export const WalletOptions = () => {
   const { connectors, connect } = useConnect()
diff --git a/examples/next/src/app/Web3Provider.tsx b/examples/next/src/app/Web3Provider.tsx
index 5729deb4..2734ac09 100644
--- a/examples/next/src/app/Web3Provider.tsx
+++ b/examples/next/src/app/Web3Provider.tsx
@@ -1,12 +1,12 @@
 'use client'
 
+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 { wagmiConfig, kitConfig } from './config'
-import { KitProvider } from '@0xsequence/kit'
-import { KitWalletProvider } from '@0xsequence/kit-wallet'
-import { KitCheckoutProvider } from '@0xsequence/kit-checkout'
 
 const queryClient = new QueryClient()
 
diff --git a/examples/next/src/app/components/Connected.tsx b/examples/next/src/app/components/Connected.tsx
index 8c1a73c0..e82c8067 100644
--- a/examples/next/src/app/components/Connected.tsx
+++ b/examples/next/src/app/components/Connected.tsx
@@ -1,9 +1,13 @@
+import { Box, Text, Card, Button, Select, SignoutIcon } from '@0xsequence/design-system'
+import { signEthAuthProof, useIndexerClient, useWaasFeeOptions, validateEthProof } from '@0xsequence/kit'
+import { CheckoutSettings } from '@0xsequence/kit-checkout'
+import { useOpenWalletModal } from '@0xsequence/kit-wallet'
+import { allNetworks } from '@0xsequence/network'
 import { ComponentProps, useEffect, useState } from 'react'
-import { Box, Text, Card, Button, Select, Switch, SignoutIcon } from '@0xsequence/design-system'
+import { formatUnits, parseUnits } from 'viem'
 import {
   useAccount,
   useChainId,
-  useConnections,
   useDisconnect,
   usePublicClient,
   useSendTransaction,
@@ -11,27 +15,22 @@ import {
   useWalletClient,
   useWriteContract
 } from 'wagmi'
+
+import { isDebugMode } from '../config'
+
 import { Header } from './Header'
-import { delay } from '@/utils'
-import { formatUnits, parseUnits } from 'viem'
-import { signEthAuthProof, useIndexerClient, useOpenConnectModal, useWaasFeeOptions, validateEthProof } from '@0xsequence/kit'
-import { useOpenWalletModal } from '@0xsequence/kit-wallet'
-import { useCheckoutModal, CheckoutSettings } from '@0xsequence/kit-checkout'
-import { ConnectionMode, isDebugMode } from '../config'
-import { allNetworks } from '@0xsequence/network'
+
 import { abi, messageToSign } from '@/constants'
 
 export const Connected = () => {
   const { address } = useAccount()
   const { disconnect } = useDisconnect()
-  const { setOpenConnectModal } = useOpenConnectModal()
   const { setOpenWalletModal } = useOpenWalletModal()
-  const connections = useConnections()
-  const { triggerCheckout } = useCheckoutModal()
+  // const { setOpenConnectModal } = useOpenConnectModal()
+  // const { triggerCheckout } = useCheckoutModal()
   const { data: walletClient } = useWalletClient()
   const { switchChain } = useSwitchChain()
 
-  const isWaasConnection = connections.find(c => c.connector.id.includes('waas')) !== undefined
   const { data: txnData, sendTransaction, isPending: isPendingSendTxn, error } = useSendTransaction()
   const { data: txnData2, isPending: isPendingMintTxn, writeContract } = useWriteContract()
 
@@ -42,7 +41,7 @@ export const Connected = () => {
   const [lastTxnDataHash, setLastTxnDataHash] = useState<string | undefined>()
   const [lastTxnDataHash2, setLastTxnDataHash2] = useState<string | undefined>()
 
-  const [pendingFeeOptionConfirmation, confirmPendingFeeOption, rejectPendingFeeOption] = useWaasFeeOptions()
+  const [pendingFeeOptionConfirmation, confirmPendingFeeOption] = useWaasFeeOptions()
 
   const [selectedFeeOptionTokenName, setSelectedFeeOptionTokenName] = useState<string | undefined>()
 
@@ -70,13 +69,6 @@ export const Connected = () => {
     }
   }, [pendingFeeOptionConfirmation])
 
-  const handleSwitchConnectionMode = (mode: ConnectionMode) => {
-    const searchParams = new URLSearchParams()
-
-    searchParams.set('mode', mode)
-    window.location.search = searchParams.toString()
-  }
-
   const checkTokenBalancesForFeeOptions = async () => {
     if (pendingFeeOptionConfirmation) {
       const [account] = await walletClient!.getAddresses()
@@ -204,13 +196,13 @@ export const Connected = () => {
     })
   }
 
-  const onClickConnect = () => {
-    setOpenConnectModal(true)
-  }
+  // const onClickConnect = () => {
+  //   setOpenConnectModal(true)
+  // }
 
-  const onClickCheckout = () => {
-    triggerCheckout(getCheckoutSettings(address))
-  }
+  // const onClickCheckout = () => {
+  //   triggerCheckout(getCheckoutSettings(address))
+  // }
 
   const onSwitchNetwork = () => {
     if (chainId === 421614) {
@@ -425,7 +417,7 @@ interface CardButtonProps {
 }
 
 const CardButton = (props: CardButtonProps) => {
-  const { title, description, onClick, isPending } = props
+  const { title, description, onClick } = props
 
   return (
     <Card clickable onClick={onClick}>
@@ -490,7 +482,7 @@ export const Alert = ({ title, description, secondaryDescription, variant, butto
   )
 }
 
-export const getCheckoutSettings = (address?: string) => {
+export const getCheckoutSettings = (_address?: string) => {
   const checkoutSettings: CheckoutSettings = {
     cryptoCheckout: {
       chainId: 137,
@@ -504,11 +496,13 @@ export const getCheckoutSettings = (address?: string) => {
     },
     orderSummaryItems: [
       {
+        chainId: 137,
         contractAddress: '0x631998e91476da5b870d741192fc5cbc55f5a52e',
         tokenId: '66597',
         quantityRaw: '100'
       },
       {
+        chainId: 137,
         contractAddress: '0x624e4fa6980afcf8ea27bfe08e2fb5979b64df1c',
         tokenId: '1741',
         quantityRaw: '100'
diff --git a/examples/next/src/app/components/Header.tsx b/examples/next/src/app/components/Header.tsx
index 14d3f343..db644031 100644
--- a/examples/next/src/app/components/Header.tsx
+++ b/examples/next/src/app/components/Header.tsx
@@ -1,7 +1,8 @@
-import { truncateAddress } from '@/utils'
 import { Box, Image, Text, GradientAvatar } from '@0xsequence/design-system'
 import { useAccount } from 'wagmi'
 
+import { truncateAddress } from '@/utils'
+
 export const Header = () => {
   const { address, connector } = useAccount()
 
diff --git a/examples/next/src/app/config.ts b/examples/next/src/app/config.ts
index f689adcb..45c4716f 100644
--- a/examples/next/src/app/config.ts
+++ b/examples/next/src/app/config.ts
@@ -1,9 +1,9 @@
 import { KitConfig, getKitConnectWallets } from '@0xsequence/kit'
 import { getDefaultConnectors, getDefaultWaasConnectors, mock } from '@0xsequence/kit-connectors'
-import { Chain, arbitrumNova, arbitrumSepolia, mainnet, polygon } from 'wagmi/chains'
 import { findNetworkConfig, allNetworks } from '@0xsequence/network'
-import { createConfig, createStorage, http, noopStorage } from 'wagmi'
 import { Transport, zeroAddress } from 'viem'
+import { createConfig, createStorage, http, noopStorage } from 'wagmi'
+import { Chain, arbitrumNova, arbitrumSepolia, mainnet, polygon } from 'wagmi/chains'
 
 export type ConnectionMode = 'waas' | 'universal'
 
diff --git a/examples/next/src/app/layout.tsx b/examples/next/src/app/layout.tsx
index f46e7715..d1ecdb49 100644
--- a/examples/next/src/app/layout.tsx
+++ b/examples/next/src/app/layout.tsx
@@ -1,10 +1,11 @@
+import { ThemeProvider } from '@0xsequence/design-system'
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
+
 import './globals.css'
 import '@0xsequence/design-system/styles.css'
 
 import { Web3Provider } from './Web3Provider'
-import { ThemeProvider } from '@0xsequence/design-system'
 
 const inter = Inter({ subsets: ['latin'] })
 
diff --git a/examples/next/src/app/page.tsx b/examples/next/src/app/page.tsx
index a19f84f4..c5fdc509 100644
--- a/examples/next/src/app/page.tsx
+++ b/examples/next/src/app/page.tsx
@@ -1,12 +1,12 @@
 'use client'
 
-import { Box, Image, Button, Text } from '@0xsequence/design-system'
+import { Box, Image, Button } from '@0xsequence/design-system'
 import { useOpenConnectModal } from '@0xsequence/kit'
-
 import { useEffect, useState } from 'react'
 import { useAccount } from 'wagmi'
-import { Footer } from './components/Footer'
+
 import { Connected } from './components/Connected'
+import { Footer } from './components/Footer'
 
 export default function Home() {
   const [isClient, setIsClient] = useState(false)
diff --git a/examples/react-waas/src/App.tsx b/examples/react-waas/src/App.tsx
index 753398d0..97b06fff 100644
--- a/examples/react-waas/src/App.tsx
+++ b/examples/react-waas/src/App.tsx
@@ -1,5 +1,7 @@
-import './App.css'
+import { sequence } from '0xsequence'
 import { useOpenConnectModal, useWaasFeeOptions } from '@0xsequence/kit'
+import { useEffect, useState } from 'react'
+import { formatUnits } from 'viem'
 import {
   useAccount,
   useChainId,
@@ -9,9 +11,8 @@ import {
   useSwitchChain,
   useWalletClient
 } from 'wagmi'
-import { sequence } from '0xsequence'
-import { formatUnits } from 'viem'
-import { useEffect, useState } from 'react'
+
+import './App.css'
 
 export const App = () => {
   const { setOpenConnectModal } = useOpenConnectModal()
@@ -96,7 +97,7 @@ export const App = () => {
 
     const [account] = await walletClient.getAddresses()
 
-    sendTransaction({ to: account, value: '0', gas: null })
+    sendTransaction({ to: account, value: BigInt('0'), gas: null })
   }
 
   useEffect(() => {
@@ -106,7 +107,7 @@ export const App = () => {
   }, [txnData])
 
   // Fee options are required when txn is not gas sponsored (not needed on testnets)
-  const [pendingFeeOptionConfirmation, confirmPendingFeeOption, rejectPendingFeeOption] = useWaasFeeOptions()
+  const [pendingFeeOptionConfirmation, confirmPendingFeeOption] = useWaasFeeOptions()
 
   const [selectedFeeTokenAddress, setSelectedFeeTokenAddress] = useState<string | null | undefined>() // option is null for native token, string for erc20 token
   useEffect(() => {
@@ -148,7 +149,7 @@ export const App = () => {
 
               {isPending && <p>Transaction is pending...</p>}
 
-              {lastTxnDataHash && (
+              {networkForCurrentChainId?.blockExplorer && lastTxnDataHash && (
                 <div>
                   <p style={{ overflowWrap: 'anywhere' }}>Transaction hash: {lastTxnDataHash}</p>
 
diff --git a/examples/react-waas/src/index.tsx b/examples/react-waas/src/index.tsx
index c586997f..b515a81f 100644
--- a/examples/react-waas/src/index.tsx
+++ b/examples/react-waas/src/index.tsx
@@ -1,14 +1,14 @@
+import { sequence } from '0xsequence'
+import { KitConfig, KitProvider } from '@0xsequence/kit'
+import { getDefaultWaasConnectors } from '@0xsequence/kit-connectors'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import { App } from './App.tsx'
-import './index.css'
-
 import { WagmiProvider, createConfig, http } from 'wagmi'
 import { Chain, arbitrumNova, arbitrumSepolia, mainnet, polygon } from 'wagmi/chains'
-import { sequence } from '0xsequence'
-import { getDefaultWaasConnectors } from '@0xsequence/kit-connectors'
-import { KitConfig, KitProvider } from '@0xsequence/kit'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+import { App } from './App.tsx'
+import './index.css'
 
 const queryClient = new QueryClient()
 
diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx
index 1a0d8d51..58b47e46 100644
--- a/examples/react/src/App.tsx
+++ b/examples/react/src/App.tsx
@@ -1,12 +1,13 @@
+import '@0xsequence/design-system/styles.css'
+
 import { ThemeProvider } from '@0xsequence/design-system'
 import { KitProvider } from '@0xsequence/kit'
-import { KitWalletProvider } from '@0xsequence/kit-wallet'
 import { KitCheckoutProvider } from '@0xsequence/kit-checkout'
-import { Homepage } from './components/Homepage'
+import { KitWalletProvider } from '@0xsequence/kit-wallet'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { WagmiProvider } from 'wagmi'
 
-import '@0xsequence/design-system/styles.css'
+import { Homepage } from './components/Homepage'
 import { kitConfig, wagmiConfig } from './config'
 
 const queryClient = new QueryClient()
diff --git a/examples/react/src/components/Footer.tsx b/examples/react/src/components/Footer.tsx
index b4e8a94c..0ae84ea1 100644
--- a/examples/react/src/components/Footer.tsx
+++ b/examples/react/src/components/Footer.tsx
@@ -1,5 +1,5 @@
-import React from 'react'
 import { Box, Image, Text, useMediaQuery, useTheme } from '@0xsequence/design-system'
+import React from 'react'
 
 import { bottomPageLinks, socialLinks } from '../constants'
 
diff --git a/examples/react/src/components/Homepage.tsx b/examples/react/src/components/Homepage.tsx
index ed8809d7..da76bb74 100644
--- a/examples/react/src/components/Homepage.tsx
+++ b/examples/react/src/components/Homepage.tsx
@@ -1,27 +1,3 @@
-import React, { useEffect } from 'react'
-import {
-  useOpenConnectModal,
-  signEthAuthProof,
-  validateEthProof,
-  useTheme as useKitTheme,
-  useWaasFeeOptions,
-  useIndexerClient,
-  getModalPositionCss
-} from '@0xsequence/kit'
-import { useOpenWalletModal } from '@0xsequence/kit-wallet'
-import { useCheckoutModal } from '@0xsequence/kit-checkout'
-
-import {
-  useDisconnect,
-  useAccount,
-  useWalletClient,
-  usePublicClient,
-  useChainId,
-  useSwitchChain,
-  useSendTransaction,
-  useWriteContract,
-  useConnections
-} from 'wagmi'
 import {
   Box,
   Button,
@@ -35,23 +11,42 @@ import {
   Spinner,
   useMediaQuery,
   Switch,
-  Select,
   IconButton,
   CheckmarkIcon,
   Modal,
   TextInput
 } from '@0xsequence/design-system'
+import {
+  useOpenConnectModal,
+  signEthAuthProof,
+  validateEthProof,
+  useTheme as useKitTheme,
+  getModalPositionCss
+} from '@0xsequence/kit'
+import { useCheckoutModal } from '@0xsequence/kit-checkout'
+import { useOpenWalletModal } from '@0xsequence/kit-wallet'
 import { allNetworks } from '@0xsequence/network'
+import { ethers } from 'ethers'
 import { AnimatePresence } from 'framer-motion'
-import { Footer } from './Footer'
+import React, { useEffect } from 'react'
+import {
+  useDisconnect,
+  useAccount,
+  useWalletClient,
+  usePublicClient,
+  useChainId,
+  useSwitchChain,
+  useSendTransaction,
+  useWriteContract,
+  useConnections
+} from 'wagmi'
+
+import { ConnectionMode } from '../config'
 import { messageToSign } from '../constants'
-import { delay, formatAddress, getCheckoutSettings } from '../utils'
-import { ethers } from 'ethers'
-import demoAbi from '../constants/demo-abi'
 import { abi } from '../constants/nft-abi'
-import { Alert, AlertProps } from './Alert'
-import { ConnectionMode } from '../config'
-import { formatUnits, parseUnits } from 'viem'
+import { delay, formatAddress, getCheckoutSettings } from '../utils'
+
+import { Footer } from './Footer'
 
 // append ?debug to url to enable debug mode
 const searchParams = new URLSearchParams(location.search)
@@ -113,7 +108,7 @@ export const Homepage = () => {
 
   const chainId = useChainId()
 
-  const indexerClient = useIndexerClient(chainId)
+  // const indexerClient = useIndexerClient(chainId)
 
   // const [feeOptionBalances, setFeeOptionBalances] = React.useState<{ tokenName: string; decimals: number; balance: string }[]>([])
 
@@ -355,9 +350,9 @@ export const Homepage = () => {
     setOpenConnectModal(true)
   }
 
-  const onClickCheckout = () => {
-    setIsCheckoutInfoModalOpen(true)
-  }
+  // const onClickCheckout = () => {
+  //   setIsCheckoutInfoModalOpen(true)
+  // }
 
   const onCheckoutInfoConfirm = () => {
     setIsCheckoutInfoModalOpen(false)
diff --git a/examples/react/src/config.ts b/examples/react/src/config.ts
index a003a345..a318c219 100644
--- a/examples/react/src/config.ts
+++ b/examples/react/src/config.ts
@@ -1,9 +1,9 @@
 import { KitConfig, getKitConnectWallets } from '@0xsequence/kit'
 import { getDefaultConnectors, getDefaultWaasConnectors, mock } from '@0xsequence/kit-connectors'
-import { Chain, arbitrumNova, arbitrumSepolia, mainnet, polygon } from 'wagmi/chains'
 import { findNetworkConfig, allNetworks } from '@0xsequence/network'
-import { createConfig, http } from 'wagmi'
 import { Transport, zeroAddress } from 'viem'
+import { createConfig, http } from 'wagmi'
+import { Chain, arbitrumNova, arbitrumSepolia, mainnet, polygon } from 'wagmi/chains'
 
 export type ConnectionMode = 'waas' | 'universal'
 
diff --git a/examples/react/src/constants/demo-abi.ts b/examples/react/src/constants/demo-abi.ts
index 48d2801d..f18038ae 100644
--- a/examples/react/src/constants/demo-abi.ts
+++ b/examples/react/src/constants/demo-abi.ts
@@ -1,4 +1,4 @@
-const abi = [
+export const abi = [
   {
     name: 'demo',
     inputs: [],
@@ -7,5 +7,3 @@ const abi = [
     type: 'function'
   }
 ]
-
-export default abi
diff --git a/examples/react/src/index.tsx b/examples/react/src/index.tsx
index 6beb2082..89933116 100644
--- a/examples/react/src/index.tsx
+++ b/examples/react/src/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+
 import './index.css'
 import { App } from './App'
 
diff --git a/examples/react/src/utils/helpers.ts b/examples/react/src/utils/helpers.ts
index 0d50adf0..8fe98230 100644
--- a/examples/react/src/utils/helpers.ts
+++ b/examples/react/src/utils/helpers.ts
@@ -1,5 +1,5 @@
-import { Address } from 'viem'
 import { CheckoutSettings } from '@0xsequence/kit-checkout'
+import { Address } from 'viem'
 
 export const truncateAtMiddle = (text: string, truncateAt: number) => {
   let finalText = text
@@ -50,4 +50,4 @@ export const getCheckoutSettings = (
   }
 
   return checkoutSettings
-}
\ No newline at end of file
+}
diff --git a/packages/connectors/src/connectors/wagmiConnectors/sequenceConnector.ts b/packages/connectors/src/connectors/wagmiConnectors/sequenceConnector.ts
index f8b7c160..80944252 100644
--- a/packages/connectors/src/connectors/wagmiConnectors/sequenceConnector.ts
+++ b/packages/connectors/src/connectors/wagmiConnectors/sequenceConnector.ts
@@ -14,30 +14,30 @@ sequenceWallet.type = 'sequence' as const
 
 export function sequenceWallet(params: BaseSequenceConnectorOptions) {
   const { defaultNetwork, connect, walletAppURL } = params
-
-  let id = 'sequence'
-  let name = 'Sequence'
-
   const { projectAccessKey } = connect
 
-  const signInOptions = params?.connect?.settings?.signInOptions || []
-  const signInWith = params?.connect?.settings?.signInWith
-  const signInWithEmail = params?.connect?.settings?.signInWithEmail
+  // XXX id and name are not being used anywhere, should they override the connector id and name?
+  // let id = 'sequence'
+  // let name = 'Sequence'
+
+  // const signInOptions = params?.connect?.settings?.signInOptions || []
+  // const signInWith = params?.connect?.settings?.signInWith
+  // const signInWithEmail = params?.connect?.settings?.signInWithEmail
 
   // If there are no sign in options
   // Then it must mean we are connecting with email
-  if (signInWithEmail) {
-    id = 'email'
-    name = 'Email'
-  } else if (signInWith) {
-    id = signInWith
-    name = `${signInWith[0].toUpperCase()}${signInWith.slice(1)}`
-  } else if (signInOptions.length > 0) {
-    const newId = signInOptions[0]
-    const newName = `${id[0].toUpperCase()}${id.slice(1)}`
-    id = newId
-    name = newName
-  }
+  // if (signInWithEmail) {
+  //   id = 'email'
+  //   name = 'Email'
+  // } else if (signInWith) {
+  //   id = signInWith
+  //   name = `${signInWith[0].toUpperCase()}${signInWith.slice(1)}`
+  // } else if (signInOptions.length > 0) {
+  //   const newId = signInOptions[0]
+  //   const newName = `${id[0].toUpperCase()}${id.slice(1)}`
+  //   id = newId
+  //   name = newName
+  // }
 
   type Provider = sequence.provider.SequenceProvider
   type Properties = {