Linting examples

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()

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()
 

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

@@ -1,37 +1,36 @@
+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,
   useSwitchChain,
   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'

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()
 

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'
 

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'] })
 

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)

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>
 

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()
 

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()

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'
 

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)