WAGMI

import { configureChains, createConfig, WagmiConfig } from "wagmi";
import { mainnet } from "wagmi/chains";
import { publicProvider } from "wagmi/providers/public";
import { DedicatedWalletConnector } from "@magiclabs/wagmi-connector";
import Dashboard from "./components/Dashboard";

const { chains, publicClient, webSocketPublicClient } = configureChains(
  [mainnet],
  [publicProvider()]
);

const config = createConfig({
  autoConnect: true,
  publicClient,
  webSocketPublicClient,
  connectors: [
    new DedicatedWalletConnector({
      chains,
      options: {
        apiKey: "PUBLISHABLE_API_KEY",
        isDarkMode: true,
        /* If using OAuth, make sure to enable OAuth options from Magic Dashboard */
        oauthOptions: {
          providers: [""],
        },
        magicSdkConfiguration: {
          network: {
            rpcUrl: RPC_URL,
            chainId: CHAIN_ID,
          },
        },
      },
    }),
  ],
});

function App() {
  return (
    <WagmiConfig config={config}>
      <Dashboard />
    </WagmiConfig>
  );
}

export default App;

import { useConnect } from 'wagmi'

const SignIn = () => {
  const { connect, connectors, isLoading, isIdle } = useConnect()

  return (
    <div className="sign-in-container">
      <button
        onClick={() => connect({ connector: connectors[0] })}
      >
        {isLoading ? "Loading..." : isIdle ? "Connect" : "Connecting..."}
      </button>
    </div>
  )
}

export default SignIn

import { useSignMessage } from 'wagmi'

function Component() {
  const { data, isError, isLoading, isSuccess, signMessage } = useSignMessage({
    message: 'Signed from Magic',
  })

  return (
    <div>
      <button disabled={isLoading} onClick={() => signMessage()}>
        Sign message
      </button>
      {isSuccess && <div>Signature: {data}</div>}
      {isError && <div>Error signing message</div>}
    </div>
  )
}

import { useSendTransaction } from 'wagmi'
⁠import { parseEther } from "ethers/lib/utils"

function Component() {
  const { data, isIdle, isError, isLoading, isSuccess, sendTransaction } =
    useSendTransaction({
      to: 'example.eth',
      value: parseEther("1"),
    })

  return (
    <div>
      {isIdle && (
        <button disabled={isLoading} onClick={() => sendTransaction()}>
          Send Transaction
        </button>
      )}
      {isLoading && <div>Check Wallet</div>}
      {isSuccess && <div>Transaction: {JSON.stringify(data)}</div>}
      {isError && <div>Error sending transaction</div>}
    </div>
  )
}

import { useBalance } from 'wagmi'

function Component() {
  const { data, isError, isLoading } = useBalance({
    address: 'example.eth',
  })

  if (isLoading) return <div>Fetching balance…</div>
  if (isError) return <div>Error fetching balance</div>
  return (
    <div>
      Balance: {data?.formatted} {data?.symbol}
    </div>
  )
}