Fixing lint errors across the project

.eslintrc.js

@@ -14,7 +14,7 @@ module.exports = {
   ],
 
   rules: {
-    '@typescript-eslint/no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/no-non-null-assertion': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
@@ -28,17 +28,24 @@ module.exports = {
     'import/no-unresolved': 'off',
     'import/no-default-export': 1,
     'import/no-named-as-default-member': 'off',
-    'import/export': 'off'
+    'import/export': 'off',
 
-    // 'import/order': [
-    //   'warn',
-    //   {
-    //     'groups': ['builtin', 'external', 'parent', 'sibling', 'index'],
-    //     'alphabetize': {
-    //       'order': 'asc', /* sort in ascending order. Options: ['ignore', 'asc', 'desc'] */
-    //       'caseInsensitive': true /* ignore case. Options: [true, false] */
-    //     }
-    //   },
-    // ]
+    'import/order': [
+      'warn',
+      {
+        alphabetize: {
+          order: 'asc',
+          caseInsensitive: true
+        },
+        pathGroups: [
+          {
+            pattern: '~/**',
+            group: 'external',
+            position: 'after'
+          }
+        ],
+        'newlines-between': 'always'
+      }
+    ]
   }
 }

packages/checkout/src/api/data.ts

@@ -1,81 +1,85 @@
-import { getNetwork } from '@0xsequence/kit'
-import { SequenceAPIClient, Token, TokenPrice, GetCoinPricesReturn } from '@0xsequence/api'
 import { TokenMetadata } from '@0xsequence/metadata'
 import { ChainId, networks } from '@0xsequence/network'
 
-import { getPaperNetworkName } from '../utils'
 import { SardineCheckout } from '..'
 
 export interface FetchSardineClientTokenReturn {
-  token: string,
-  orderId: string,
+  token: string
+  orderId: string
 }
 
 export interface MethodArguments {
   [key: string]: any
 }
 
-export const fetchSardineClientToken = async (order: SardineCheckout, isDev: boolean, projectAccessKey: string, tokenMetadata?: TokenMetadata): Promise<FetchSardineClientTokenReturn> => {
+export const fetchSardineClientToken = async (
+  order: SardineCheckout,
+  isDev: boolean,
+  projectAccessKey: string,
+  tokenMetadata?: TokenMetadata
+): Promise<FetchSardineClientTokenReturn> => {
   const randomNumber = Math.floor(Math.random() * 1000000)
   const timestamp = new Date().getTime()
   const referenceId = `sequence-kit-${randomNumber}-${timestamp}-${order.recipientAddress}-${networks[order.chainId as ChainId].name}-${order.contractAddress}-${order.contractAddress}-${order.recipientAddress}`
 
-
   // Test credentials: https://docs.sardine.ai/docs/integrate-payments/nft-checkout-testing-credentials
   const accessKey = isDev ? '17xhjK4yjRf1fr0am8kgKfICAAAAAAAAA' : projectAccessKey
-  const url = isDev ? 'https://dev-api.sequence.app/rpc/API/GetSardineNFTCheckoutToken' : 'https://api.sequence.app/rpc/API/GetSardineNFTCheckoutToken'
+  const url = isDev
+    ? 'https://dev-api.sequence.app/rpc/API/GetSardineNFTCheckoutToken'
+    : 'https://api.sequence.app/rpc/API/GetSardineNFTCheckoutToken'
 
   const res = await fetch(url, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
       'X-Access-Key': `${accessKey || ''}`
     },
-    body: JSON.stringify(
-      { 
-        params: {
-          referenceId,
-          expiresIn: 3600,
-          paymentMethodTypeConfig: {
-            enabled: ['us_debit', 'us_credit', 'international_debit', 'international_credit', 'ach'],
-            default: order.defaultPaymentMethodType
-          },
-          name: tokenMetadata?.name || 'Unknown',
-          imageUrl: tokenMetadata?.image || 'https://www.sequence.market/images/placeholder.png',
-          network: networks[order.chainId as ChainId].name,
-          recipientAddress: order.recipientAddress,
-          platform: 'horizon',
-          blockchainNftId: order.blockchainNftId,
-          contractAddress: order.contractAddress,
-          executionType: 'smart_contract',
-          quantity: Number(order.quantity),
-          decimals: Number(order.decimals),
-        }
+    body: JSON.stringify({
+      params: {
+        referenceId,
+        expiresIn: 3600,
+        paymentMethodTypeConfig: {
+          enabled: ['us_debit', 'us_credit', 'international_debit', 'international_credit', 'ach'],
+          default: order.defaultPaymentMethodType
+        },
+        name: tokenMetadata?.name || 'Unknown',
+        imageUrl: tokenMetadata?.image || 'https://www.sequence.market/images/placeholder.png',
+        network: networks[order.chainId as ChainId].name,
+        recipientAddress: order.recipientAddress,
+        platform: 'horizon',
+        blockchainNftId: order.blockchainNftId,
+        contractAddress: order.contractAddress,
+        executionType: 'smart_contract',
+        quantity: Number(order.quantity),
+        decimals: Number(order.decimals)
       }
-    )
+    })
   })
 
-  const { resp: { orderId, token } } = await res.json()
+  const {
+    resp: { orderId, token }
+  } = await res.json()
 
-  return ({
+  return {
     token,
-    orderId,
-  })
+    orderId
+  }
 }
 
-
 export const fetchSardineOrderStatus = async (orderId: string, isDev: boolean, projectAccessKey: string) => {
   // Test credentials: https://docs.sardine.ai/docs/integrate-payments/nft-checkout-testing-credentials
-  const accessKey = isDev ? '17xhjK4yjRf1fr0am8kgKfICAAAAAAAAA' :  projectAccessKey
-  const url = isDev ? 'https://dev-api.sequence.app/rpc/API/GetSardineNFTCheckoutOrderStatus' : 'https://api.sequence.app/rpc/API/GetSardineNFTCheckoutOrderStatus'
+  const accessKey = isDev ? '17xhjK4yjRf1fr0am8kgKfICAAAAAAAAA' : projectAccessKey
+  const url = isDev
+    ? 'https://dev-api.sequence.app/rpc/API/GetSardineNFTCheckoutOrderStatus'
+    : 'https://api.sequence.app/rpc/API/GetSardineNFTCheckoutOrderStatus'
   const response = await fetch(url, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
       'X-Access-Key': `${accessKey}`
     },
     body: JSON.stringify({
-      orderId,
+      orderId
     })
   })
 
@@ -85,7 +89,7 @@ export const fetchSardineOrderStatus = async (orderId: string, isDev: boolean, p
 }
 
 export interface Country {
-  code: string,
+  code: string
 }
 
 export const fetchSupportedCountryCodes = async (): Promise<Country[]> => {
@@ -182,8 +186,8 @@ export const fetchSupportedCountryCodes = async (): Promise<Country[]> => {
     'UY',
     'UZ',
     'VU',
-    'VN',
+    'VN'
   ]
 
   return supportedCountries.map(countryCode => ({ code: countryCode }))
-}
+}

packages/checkout/src/contexts/CheckoutModal.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-import { MethodArguments } from '../api'
 import { createGenericContext, Theme } from '@0xsequence/kit'
 
 interface CoinQuantity {
@@ -29,7 +27,7 @@ export interface SardineCheckout {
 }
 
 export interface CheckoutSettings {
-  sardineCheckout?: SardineCheckout,
+  sardineCheckout?: SardineCheckout
   cryptoCheckout?: {
     chainId: number
     triggerTransaction: () => void

packages/checkout/src/contexts/Navigation.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { createGenericContext } from '@0xsequence/kit'
 
 export interface SelectCheckoutNavigation {

packages/checkout/src/hooks/useCheckoutModal.ts

@@ -1,4 +1,3 @@
-import { useContext } from 'react'
 import { useCheckoutModalContext } from '../contexts/CheckoutModal'
 
 export const useCheckoutModal = () => {

packages/checkout/src/hooks/useModalTheme.ts

@@ -1,4 +1,3 @@
-import { useContext } from 'react'
 import { useCheckoutModalContext } from '../contexts/CheckoutModal'
 
 export const useModalTheme = () => {

packages/checkout/src/hooks/useNavigation.ts

@@ -1,4 +1,3 @@
-import React, { useContext } from 'react'
 import { useNavigationContext, Navigation, History } from '../contexts/Navigation'
 import { DEFAULT_LOCATION } from '../shared/components/KitCheckoutProvider'
 

packages/checkout/src/shared/components/DefaultIcon.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import { Box, Text } from '@0xsequence/design-system'
+import React from 'react'
 
 interface DefaultIconProps {
   size?: number

packages/checkout/src/shared/components/KitCheckoutProvider.tsx

@@ -1,14 +1,12 @@
-import React, { useState, useEffect } from 'react'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { Box, Modal, ThemeProvider } from '@0xsequence/design-system'
-import { AnimatePresence } from 'framer-motion'
-
 import { getModalPositionCss, useTheme } from '@0xsequence/kit'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { AnimatePresence } from 'framer-motion'
+import React, { useState, useEffect } from 'react'
 
-import { PendingTransaction, TransactionError, TransactionSuccess, CheckoutSelection } from '../../views'
 import { History, Navigation, NavigationContextProvider, CheckoutModalContextProvider, CheckoutSettings } from '../../contexts'
-
 import { NavigationHeader } from '../../shared/components/NavigationHeader'
+import { PendingTransaction, TransactionError, TransactionSuccess, CheckoutSelection } from '../../views'
 
 import '@0xsequence/design-system/styles.css'
 

packages/checkout/src/shared/components/NavigationHeader.tsx

@@ -1,7 +1,8 @@
-import React from 'react'
 import { Box, IconButton, ChevronLeftIcon, Text, vars } from '@0xsequence/design-system'
-import { useNavigation } from '../../hooks/useNavigation'
+import React from 'react'
+
 import { HEADER_HEIGHT } from '../../constants'
+import { useNavigation } from '../../hooks/useNavigation'
 
 interface NavigationHeaderProps {
   primaryText?: string

packages/checkout/src/utils/networks.ts

@@ -1,4 +1,5 @@
 import { NetworkMetadata } from '@0xsequence/network'
+
 import { capitalize } from './helpers'
 
 export const getPaperNetworkName = (network: NetworkMetadata): string => {

packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx

@@ -1,8 +1,7 @@
-import React from 'react'
-import { ethers } from 'ethers'
-import { useConfig } from 'wagmi'
 import { Box, Card, Image, Text, Skeleton, TokenImage, NetworkImage } from '@0xsequence/design-system'
-import { getNativeTokenInfoByChainId, useContractInfo, useTokenMetadata } from '@0xsequence/kit'
+import { useContractInfo, useTokenMetadata } from '@0xsequence/kit'
+import { ethers } from 'ethers'
+import React from 'react'
 
 import { formatDisplay } from '../../../utils'
 
@@ -14,7 +13,6 @@ interface OrderSummaryItem {
 }
 
 export const OrderSummaryItem = ({ contractAddress, tokenId, quantityRaw, chainId }: OrderSummaryItem) => {
-  const { chains } = useConfig()
   const { data: tokenMetadata, isPending: isPendingTokenMetadata } = useTokenMetadata(chainId, contractAddress, [tokenId])
   const { data: contractInfo, isPending: isPendingContractInfo } = useContractInfo(chainId, contractAddress)
   const isPending = isPendingTokenMetadata || isPendingContractInfo
@@ -23,7 +21,6 @@ export const OrderSummaryItem = ({ contractAddress, tokenId, quantityRaw, chainI
     return <OrderSummarySkeleton />
   }
 
-  const nativeTokenInfo = getNativeTokenInfoByChainId(chainId, [...chains])
   const { name = 'unknown', image, decimals = 0 } = tokenMetadata?.[0] ?? {}
 
   const { logoURI: collectionLogoURI, name: collectionName = 'Unknown Collection' } = contractInfo || {}

packages/checkout/src/views/CheckoutSelection/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-import { ethers } from 'ethers'
 import {
   Box,
   Button,
@@ -14,16 +12,17 @@ import {
   TokenImage
 } from '@0xsequence/design-system'
 import { getNativeTokenInfoByChainId, useBalances, useContractInfo, useTokenMetadata, useProjectAccessKey } from '@0xsequence/kit'
-
+import { ethers } from 'ethers'
+import React from 'react'
 import { useAccount, useConfig } from 'wagmi'
 
-import { OrderSummaryItem } from './component/OrderSummaryItem'
-
-import { fetchSardineClientToken, fetchSardineOrderStatus } from '../../api'
+import { fetchSardineClientToken } from '../../api'
 import { HEADER_HEIGHT } from '../../constants'
 import { useNavigation, useCheckoutModal } from '../../hooks'
 import { compareAddress, formatDisplay } from '../../utils'
 
+import { OrderSummaryItem } from './component/OrderSummaryItem'
+
 export const CheckoutSelection = () => {
   const { chains } = useConfig()
   const { setNavigation } = useNavigation()
@@ -67,11 +66,7 @@ export const CheckoutSelection = () => {
 
   const chainId = settings?.cryptoCheckout?.chainId || settings?.sardineCheckout?.chainId || 1
 
-  const { data: tokensMetadata, isLoading: isTokenMetadataLoading } = useTokenMetadata(
-    chainId,
-    orderSummaryItems[0].contractAddress,
-    [orderSummaryItems[0].tokenId]
-  )
+  const { data: tokensMetadata } = useTokenMetadata(chainId, orderSummaryItems[0].contractAddress, [orderSummaryItems[0].tokenId])
   const tokenMetadata = tokensMetadata ? tokensMetadata[0] : undefined
 
   const triggerSardineTransaction = async () => {

packages/checkout/src/views/PendingTransaction.tsx

@@ -1,10 +1,10 @@
-import React, { useEffect } from 'react'
-import { Box, Spinner, Text } from '@0xsequence/design-system'
+import { Box } from '@0xsequence/design-system'
 import { useProjectAccessKey } from '@0xsequence/kit'
+import React, { useEffect } from 'react'
 
-import { useNavigation, useCheckoutModal } from '../hooks'
-import { TransactionPendingNavigation } from '../contexts'
 import { fetchSardineOrderStatus } from '../api'
+import { TransactionPendingNavigation } from '../contexts'
+import { useNavigation, useCheckoutModal } from '../hooks'
 
 const POLLING_TIME = 10 * 1000
 
@@ -22,14 +22,14 @@ export const PendingTransaction = () => {
     ? `https://crypto.sandbox.sardine.ai/?client_token=${authToken}&show_features=true`
     : `https://crypto.sardine.ai/?client_token=${authToken}&show_features=true`
 
-    const pollForOrderStatus = async () => {
-      try {
-        console.log('Polling for transaction status')
-        const isDev = settings?.sardineCheckout?.isDev || false
+  const pollForOrderStatus = async () => {
+    try {
+      console.log('Polling for transaction status')
+      const isDev = settings?.sardineCheckout?.isDev || false
 
-        const pollResponse = await fetchSardineOrderStatus(orderId, isDev, projectAccessKey)
-        const status = pollResponse.resp.status
-        const transactionHash = pollResponse.resp?.transactionHash
+      const pollResponse = await fetchSardineOrderStatus(orderId, isDev, projectAccessKey)
+      const status = pollResponse.resp.status
+      const transactionHash = pollResponse.resp?.transactionHash
 
       console.log('transaction status poll response:', status)
 

packages/checkout/src/views/TransactionError.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect } from 'react'
 import { Box, CloseIcon, Text } from '@0xsequence/design-system'
+import React, { useEffect } from 'react'
 
-import { useCheckoutModal, useNavigation } from '../hooks'
 import { TransactionErrorNavigation } from '../contexts'
+import { useCheckoutModal, useNavigation } from '../hooks'
 
 export const TransactionError = () => {
   const { closeCheckout, settings } = useCheckoutModal()