wip: use wagmi injected provider

apps/faucet/src/App.tsx

@@ -4,7 +4,7 @@ import { useUsdtBalance } from './hooks/use-usdt-balance';
 import { TestnetUSDCred, TestnetMBOTSPL } from 'smartsale-contracts';
 import { AddTokenToWallet } from './components/add-token-to-metamask';
 import { Button } from './components/ui/button';
-import { ConnectWalletButton } from './components/connect-button';
+import { ConnectWalletButton } from './components/connect-metamask';
 
 export default function Component() {
   const balance = useUsdtBalance()

apps/faucet/src/components/connect-metamask.tsx

@@ -0,0 +1,26 @@
+'use client'
+import { useConnect, useConnectors } from 'wagmi'
+import { Button } from './ui/button'
+
+export function ConnectWalletButton() {
+  const connectors = useConnectors()
+  const { connect } = useConnect()
+
+  const handleConnect = async () => {
+    // Find the WalletConnect connector
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const injectedConnector = connectors.find(connector => connector.id === 'injected')
+    if (injectedConnector) {
+      await connect({ connector: injectedConnector })
+    }
+  }
+
+  return (
+    <div>
+      <Button onClick={handleConnect} disabled={false}>
+        Connect Wallet
+      </Button>
+      {/* {error && <p style={{ color: 'red' }}>{error.message}</p>} */}
+    </div>
+  )
+}

apps/faucet/src/components/connect-button.tsx → apps/faucet/src/components/connect-walletconnect.tsx

@@ -4,7 +4,7 @@ import { Button } from './ui/button'
 
 export function ConnectWalletButton() {
   const connectors = useConnectors()
-  const { connect} = useConnect()
+  const { connect } = useConnect()
 
   const handleConnect = async () => {
     // Find the WalletConnect connector

apps/faucet/src/components/providers.tsx

@@ -2,22 +2,27 @@ import { ReactNode } from 'react';
 
 import { createConfig, WagmiProvider } from 'wagmi';
 import { eosEvmTestnet } from 'smartsale-chains'
-import { walletConnect } from 'wagmi/connectors'
+import { injected, safe, walletConnect } from 'wagmi/connectors'
 import { http } from 'viem';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { getSiteUrl } from '@/lib/utils';
 
 const queryClient = new QueryClient()
 
 const wagmiConfig = createConfig({
   chains: [eosEvmTestnet],
   connectors: [
     walletConnect({ 
-      projectId: "25a868c834c1003aa0f0b69aba0ae056",   
-      // metadata: { 
-      //   name: 'SmartSale Faucet', 
-      //   description: 'SmartSale Faucet'
-      // }
+      projectId: "25a868c834c1003aa0f0b69aba0ae056",
+      metadata:{
+      name: 'Bitcash Launchpad Faucet',
+      description: 'Bitcash Launchpad Faucet',
+      url: getSiteUrl(), // origin must match your domain & subdomain
+      icons: ['https://avatars.githubusercontent.com/u/37784886']
+    }
     }),
+    injected(),
+    safe(),
   ],
    transports: {
     [eosEvmTestnet.id]: http(),

apps/faucet/src/lib/utils.ts

@@ -4,3 +4,8 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export function getSiteUrl() {
+  const { protocol, hostname } = window.location;  
+  return `${protocol}//${hostname}`;
+}

apps/indexer/src/indexer.ts

@@ -3,7 +3,7 @@ import { client } from './evm-client'
 import { TestnetEasyAuction } from 'smartsale-contracts'
 import { bigintToPostgresTimestamp, getEvents, getTokenDetails, runPromisesInSeries } from './lib'
 import { PrismaClient, Prisma } from '@prisma/client'
-import { NewAuctionEvent } from './types'
+import { NewAuctionEvent, NewSellOrderEvent } from './types'
 import { eosEvmTestnet } from 'smartsale-chains'
 import BN from 'bn.js'
 
@@ -149,8 +149,8 @@ async function handleNewAuction(log: NewAuctionEvent) {
   }
 }
 
-function handleNewSellOrder(log: any) {
-  // console.log('handleNewSellOrder', log)
+function handleNewSellOrder(log: NewSellOrderEvent) {
+  console.log('handleNewSellOrder', log)
 }
 
 function handleNewUser(log: any) {

apps/indexer/src/types.ts

@@ -1,15 +1,5 @@
 import { Address, Log } from 'viem'
 
-declare global {
-  interface BigInt {
-    toJSON(): string
-  }
-}
-
-BigInt.prototype.toJSON = function (): string {
-  return String(this)
-}
-
 export interface AuctionClearedEvent extends Log {
   eventName: 'AuctionCleared'
   args: {

apps/webapp/app/[project]/auction/page.tsx

@@ -45,9 +45,9 @@ export default function AuctionPage({
               <Countdown auctionId={project.auctionId} />
             </div>
             <div className="w-full md:w-1/3">
-               <React.Suspense fallback={<div>Loading ...</div>}>
+              <React.Suspense fallback={<div>Loading ...</div>}>
                 <AuctionBids project={project} />
-              </React.Suspense> 
+              </React.Suspense>
             </div>
           </div>
         </div>

apps/webapp/components/connect-metamask.tsx

@@ -0,0 +1,37 @@
+'use client'
+import { useAccount, useConnect, useConnectors } from 'wagmi'
+import { Button } from './ui/button'
+import { formatAddress } from '@/lib/utils'
+import { useEffect, useState } from 'react'
+
+export function ConnectWalletButton() {
+  const connectors = useConnectors()
+  const { connect } = useConnect()
+  const { address } = useAccount()
+
+  const [formattedAddress, setFormattedAddress] = useState('')
+
+  const handleConnect = async () => {
+    // Find the WalletConnect connector
+    const injectedConnector = connectors.find(
+      connector => connector.id === 'injected'
+    )
+    if (injectedConnector) {
+      await connect({ connector: injectedConnector })
+    }
+  }
+
+  // https://nextjs.org/docs/messages/react-hydration-error
+  useEffect(() => {
+    setFormattedAddress(address ? formatAddress(address) : 'Connect Wallet')
+  }, [address])
+
+  return (
+    <div>
+      <Button onClick={handleConnect} disabled={false}>
+        {formattedAddress}
+      </Button>
+      {/* {error && <p style={{ color: 'red' }}>{error.message}</p>} */}
+    </div>
+  )
+}

apps/webapp/components/header.tsx

@@ -3,9 +3,18 @@ import Link from 'next/link'
 
 import { Button } from '@/components/ui/button'
 import { IconSeparator } from './ui/icons'
-import { ConnectWalletButton } from './connect-button'
+import dynamic from 'next/dynamic'
+import { ConnectWalletButton } from './connect-metamask'
 // import { ThemeToggle } from './theme-toggle'
 
+// const DynamicConnectButton = dynamic(
+//   () => import('./connect-metamask').then(mod => mod.ConnectWalletButton),
+//   {
+//     suspense: true,
+//     ssr: false // Disable server-side rendering for this component
+//   }
+// )
+
 export async function Header() {
   return (
     <header className="sticky top-0 z-50 w-full h-16 border-b shrink-0 bg-gradient-to-b from-background/10 via-background/50 to-background/80 backdrop-blur-xl">

apps/webapp/components/providers.tsx

@@ -6,22 +6,25 @@ import { ThemeProviderProps } from 'next-themes/dist/types'
 import { TooltipProvider } from '@/components/ui/tooltip'
 import { createConfig, WagmiProvider } from 'wagmi'
 import { eosEvmTestnet } from 'smartsale-chains'
-import { walletConnect } from 'wagmi/connectors'
+import { injected, safe, walletConnect } from 'wagmi/connectors'
 import { http } from 'viem'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-
 const queryClient = new QueryClient()
 
 export const wagmiConfig = createConfig({
   chains: [eosEvmTestnet],
   connectors: [
     walletConnect({
-      projectId: '25a868c834c1003aa0f0b69aba0ae056'
-      // metadata: {
-      //   name: 'SmartSale Faucet',
-      //   description: 'SmartSale Faucet'
-      // }
-    })
+      projectId: '25a868c834c1003aa0f0b69aba0ae056',
+      metadata: {
+        name: 'Bitcash Launchpad Faucet',
+        description: 'Bitcash Launchpad Faucet',
+        url: ``, // origin must match your domain & subdomain
+        icons: ['https://avatars.githubusercontent.com/u/37784886']
+      }
+    }),
+    injected(),
+    safe()
   ],
   transports: {
     [eosEvmTestnet.id]: http()

apps/webapp/lib/utils.ts

@@ -1,6 +1,7 @@
 import { clsx, type ClassValue } from 'clsx'
 import { customAlphabet } from 'nanoid'
 import { twMerge } from 'tailwind-merge'
+import { Address } from 'viem'
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
@@ -67,3 +68,13 @@ export function extractBetweenMarkers(
 
   return str.substring(startIndex, endIndex).trim()
 }
+
+export function formatAddress(address: Address) {
+  // Ensure the address is a string and has a length of at least 8 characters
+  if (typeof address === 'string' && address.length >= 8) {
+    return `${address.slice(0, 4)}...${address.slice(-4)}`
+  } else {
+    // Return the original address if it's too short or not a string
+    return address
+  }
+}