chore: cleanup folders

Author: kamescg

.env.example

@@ -9,5 +9,6 @@ ETHERSCAN_API_KEY=
 ETHERSCAN_API_KEY_OPTIMISM=
 ETHERSCAN_API_KEY_ARBITRUM=
 ETHERSCAN_API_KEY_POLYGON=
+
 # Generate one here: https://generate-secret.vercel.app/32
 NEXTAUTH_SECRET=

components/layout/Header.tsx

@@ -1,12 +1,14 @@
 import React from 'react'
 
 import classNames from 'classnames'
+import Image from 'next/image'
 
 import { SITE_EMOJI, SITE_NAME } from '@/lib/constants'
 import useScroll from '@/lib/hooks/useScroll'
 
 import { LinkComponent } from '../app/LinkComponent'
 import { ThemeSwitcher } from '../app/ThemeSwitcher'
+import { BranchColorMode } from '../branch/BranchColorMode'
 import BranchIsAuthenticated from '../branch/BranchIsAuthenticated'
 import BranchIsWalletConnected from '../branch/BranchIsWalletConnected'
 import ResponsiveMobileAndDesktop from '../responsive/ResponsiveMobileAndDesktop'
@@ -23,7 +25,7 @@ export function Header(props: Props) {
     props.className,
     'Header',
     'fixed top-0 w-full',
-    ' px-10 py-3 mb-8 flex items-center',
+    'px-6 lg:px-10 py-3 mb-8 flex items-center',
     {
       'border-b border-gray-200 bg-white/50 backdrop-blur-xl dark:bg-black/50 dark:border-gray-800': scrolled,
     },
@@ -32,12 +34,18 @@ export function Header(props: Props) {
   return (
     <header className={classes}>
       <ResponsiveMobileAndDesktop>
-        <LinkComponent href="/" className="flex flex-1 items-center">
-          <span className="mr-1 text-3xl">{SITE_EMOJI}</span>
+        <LinkComponent href="/" className="flex flex-1 items-center ">
+          <BranchColorMode>
+            <Image alt="Logo" src="/logo-dark.png" width={32} height={32} />
+            <Image alt="Logo" src="/logo-white.png" width={32} height={32} />
+          </BranchColorMode>
         </LinkComponent>
         <LinkComponent className="flex items-center" href="/">
-          <span className="mr-1">{SITE_EMOJI}</span>
-          <h1 className="text-gradient-sand text-2xl font-bold">{SITE_NAME}</h1>
+          <BranchColorMode>
+            <Image alt="Logo" src="/logo-dark.png" width={32} height={32} />
+            <Image alt="Logo" src="/logo-white.png" width={32} height={32} />
+          </BranchColorMode>
+          <h1 className="text-gradient-sand ml-2 text-2xl font-bold">{SITE_NAME}</h1>
         </LinkComponent>
       </ResponsiveMobileAndDesktop>
       <div className="flex-1" />

components/table/TablePagination.tsx

@@ -80,7 +80,7 @@ export const TablePagination = ({
           onChange={(e) => {
             setPageSize(Number(e.target.value))
           }}>
-          {[10, 20, 30, 40, 50].map((pageSizeParams) => (
+          {[5, 10, 20, 30, 40, 50].map((pageSizeParams) => (
             <option className="text-xl" key={pageSizeParams} value={pageSizeParams}>
               Show {pageSizeParams}
             </option>

lib/api/etherscanAccountTransactionList.ts

@@ -1,25 +1,32 @@
-import { AxiosInstance } from 'axios'
-import querystring from 'query-string'
+import getChainIdApiKey from '../services/etherscan/getChainIdApiKey'
+import getEtherscanClient from '../services/etherscan/getEtherscanClient'
+import handleErrorTypes from '../services/etherscan/handleErrorTypes'
+import handleEtherscanResponse from '../services/etherscan/handleEtherscanResponse'
+import isClientConnected from '../services/etherscan/isClientConnected'
+import isValidAddress from '../services/etherscan/isValidAddress'
 
-import isClientConnected from '../etherscan/isClientConnected'
-import isValidAddress from '../etherscan/isValidAddress'
-import queryEtherscanClient from '../etherscan/queryEtherscanClient'
-
-export function etherscanAccountTransactionList(client: AxiosInstance, address: string, config: BlockPagination) {
+export async function etherscanAccountTransactionList(chainId: number | string, address: string, config: BlockPagination) {
+  const client = getEtherscanClient(Number(chainId), 5000, getChainIdApiKey(chainId))
   if (!isClientConnected(client)) {
     throw new Error('Etherscan Client Not Connected')
   }
   if (!isValidAddress(address)) throw new Error('Address Invalid')
 
-  const query = querystring.stringify({
-    module: 'account',
-    action: 'txlist',
-    address,
-    startblock: config.startblock || 0,
-    endblock: config.endblock || 99999999,
-    sort: config.sort || 'asc',
-    page: config.page || 1,
-    offset: config.offset || 0,
-  })
-  return queryEtherscanClient(client, query)
+  try {
+    const { data } = await client.get('/api?', {
+      params: {
+        module: 'account',
+        action: 'txlist',
+        address,
+        startblock: config.startblock || 0,
+        endblock: config.endblock || 99999999,
+        sort: config.sort || 'asc',
+        page: config.page || 1,
+        offset: config.offset || 0,
+      },
+    })
+    return handleEtherscanResponse(data)
+  } catch (error) {
+    return handleErrorTypes(error)
+  }
 }

lib/hooks/useAccountTransactions.ts

@@ -3,5 +3,5 @@ import { useQuery } from 'wagmi'
 import { accountTransactions } from '../actions/accountTransactions'
 
 export const useAccountTransactions = (params?: BlockPagination) => {
-  return useQuery(['accountTransactions'], () => accountTransactions(params))
+  return useQuery(['accountTransactions', params], () => accountTransactions(params))
 }

lib/etherscan/constants.ts renamed to lib/services/etherscan/constants.ts

@@ -12,7 +12,7 @@ interface ChainIdToApi {
 export const ETHEREUM_MAINNET_API_URL = 'https://api.etherscan.io'
 export const ETHEREUM_ROPSTEN_API_URL = 'https://api-ropsten.etherscan.io'
 export const ETHEREUM_RINKEBY_API_URL = 'https://api-rinkeby.etherscan.io'
-export const ETHEREUM_GOERLI_API_URL = 'https://api-rinkeby.etherscan.io'
+export const ETHEREUM_GOERLI_API_URL = 'https://api-goerli.etherscan.io'
 export const ETHEREUM_KOVAN_API_URL = 'https://api-kovan.etherscan.io'
 export const ETHEREUM_SEPOLIA_API_URL = 'https://api-sepolia.etherscan.io'
 export const ETHEREUM_NETWORK_NAME_API_URL_MAP = {