logo

Captain America Themed Wallet Connector

InfoGenerateCreated ByPackages

This code is a React component that integrates wallet connection functionality into a web application using the Thirdweb SDK. It imports necessary modules and functions from the "thirdweb" library, including ConnectButton, createWallet, and lightTheme. The code defines a list of wallets (MetaMask, Coinbase Wallet, and Phantom) that users can connect to. It also customizes the appearance of the wallet connection interface by creating a custom theme with specific colors and fonts. The code then exports a default App component that renders the ThirdwebProvider and the ConnectButton, applying the custom theme and the list of wallets to be used in the connection interface.

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

const wallets = [
  createWallet("io.metamask"),
  createWallet("com.coinbase.wallet"),
  createWallet("app.phantom"),
];

const customTheme = lightTheme({
  colors: {
    modalBg: "#0A74DA", // Blue background representing Captain America's shield
    primaryButtonBg: "#D52B1E", // Red for primary action buttons
    primaryButtonText: "white", // White text on primary action buttons
    accentButtonBg: "#D52B1E", // Red for accent buttons
    accentButtonText: "white", // White text on accent buttons
    borderColor: "#0A74DA", // Blue border
    connectedButtonBg: "#0A74DA", // Blue background for connected button
    connectedButtonBgHover: "#D52B1E", // Red background for hover state
    primaryText: "#0A74DA", // Blue primary text
    secondaryButtonBg: "white", // White background for secondary buttons
    secondaryButtonText: "#0A74DA", // Blue text on secondary buttons
    secondaryIconColor: "#0A74DA", // Blue icon color
    secondaryIconHoverBg: "#D52B1E", // Red background for secondary icon hover state
  },
  fontFamily: "'Avenir', sans-serif",
});

export default function App() {
  return (
    <ThirdwebProvider>
      <ConnectButton wallets={wallets} theme={customTheme} />
    </ThirdwebProvider>
  );
}