Writing the FE

• Intiialize an empty react project

npm create vite@latest

• Add wagmi to the codebase

npm install wagmi @tanstack/react-query

• Create config.ts

import { http, createConfig } from 'wagmi'
import { sepolia } from 'wagmi/chains'
import { injected } from 'wagmi/connectors'

export const config = createConfig({
  chains: [sepolia],
  connectors: [
    injected(),
  ],
  transports: {
    [sepolia.id]: http(),
  },
})

• Update App.tsx (Wrap everything inside Providers)

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiProvider } from 'wagmi'
import { config } from './config'

const queryClient = new QueryClient()

export default function App() {
   return (
     <WagmiProvider config={config}>
       <QueryClientProvider client={queryClient}>

       </QueryClientProvider>
     </WagmiProvider>
   )
 }

• Add AppBar to show wallet connect buttons

import { Connector, useConnect } from 'wagmi'

export function Appbar() {
  const { connectors, connect } = useConnect()

  return connectors.map((connector) => (
    <button key={connector.uid} onClick={() => connect({ connector })}>
      {connector.name}
    </button>
  ))
}

• Import Appbar and test the wallet connect functionality

<WagmiProvider config={config}>
   <QueryClientProvider client={queryClient}>
    <Appbar />
   </QueryClientProvider>
 </WagmiProvider>

• Prettify the Appbar (Assignment)

  • Clean css files
  • Add tailwind to project https://tailwindcss.com/docs/installation/using-vite or https://tailwindcss.com/docs/installation/play-cdn
  • Prettify the buttons

  import { Connector, useConnect } from 'wagmi'
  
  export function Appbar() {
    const { connectors, connect } = useConnect()
  
    return <div className='flex justify-between p-2 m-2'>
      <div className='text-2xl'>
          Stakify
      </div>
      <div>
          {connectors.map((connector) => (
              <button className='mx-2 border rounded p-2' key={connector.uid} onClick={() => connect({ connector })}>
              {connector.name}
              </button>
          ))}
      </div>
    </div>
  }

  • Render connect or disconnect button based on if the user is signed in

  import { useAccount, useConnect, useDisconnect } from 'wagmi'
  
  export function Appbar() {
    const { address } = useAccount()
  
    return <div className='flex justify-between p-2 m-2'>
      <div className='text-2xl'>
          Stakify
      </div>
      <div>
          {!address ? <Connectors /> : <Disconnect />}
      </div>
    </div>
  }
  
  function Connectors() {
      const { connectors, connect } = useConnect()
      return connectors.map((connector) => (
          <button className='mx-2 border rounded p-2' key={connector.uid} onClick={() => connect({ connector })}>
          {connector.name}
          </button>
      ))
  }
  
  function Disconnect() {
      const {disconnect} = useDisconnect();
  
      return <div>
          <button className='mx-2 border rounded p-2' onClick={() => disconnect()}>
              Disconnect wallet
          </button>
      </div>
  
  }