logo

Crypto Wallet Connect UI with Thirdweb

InfoGenerateCreated ByPackages

This code represents a simple React application that integrates a crypto wallet connection feature using the Thirdweb library. The notable functionalities are:

1. **Wallet Integration:** The code configures an array of different crypto wallets (MetaMask, Coinbase Wallet, Rainbow, Trust Wallet, and Uniswap) that users can connect to the application.

2. **Custom Theme:** It defines a custom theme for the wallet connection UI with specific colors and a custom font (Comic Sans MS).

3. **Background and Logo Usage:** It utilizes a background image and a custom logo in the app's appearance.

4. **Thirdweb Components:** It uses Thirdweb's `ConnectButton` component to provide users with an interface to connect their crypto wallets and a `ThirdwebProvider` component assumed to wrap the application's context with Thirdweb functionality.

The application renders a full-page layout with a header containing the logo and a main section centered with the wallet connection button.

import { ConnectButton } from "thirdweb/react";
import { createWallet, inAppWallet } from "thirdweb/wallets";
import { lightTheme } from "thirdweb/react";

const wallets = [
  inAppWallet(),
  createWallet("io.metamask"),
  createWallet("com.coinbase.wallet"),
  createWallet("me.rainbow"),
  createWallet("com.trustwallet.app"),
  createWallet("org.uniswap"),
];

const customTheme = lightTheme({
  colors: {
    modalBg: "blue",
    accentButtonBg: "green",
    primaryButtonBg: "purple",
  },
  fontFamily: "Comic Sans MS",
});

import Background from "./background.png"; // Assume you have a cool background image
import logo from "./logo.svg"; // Assume you have a custom logo

export default function App() {
  return (
    <div style={{ backgroundImage: `url(${Background})`, height: "100vh", backgroundSize: "cover" }}>
      <header style={{ display: "flex", justifyContent: "center", padding: "20px" }}>
        <img src={logo} alt="App Logo" style={{ height: "50px" }} />
      </header>
      <main style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "calc(100% - 70px)" }}>
        <ThirdwebProvider>
          <ConnectButton wallets={wallets} theme={customTheme} />
        </ThirdwebProvider>
      </main>
    </div>
  );
}