Quickstart with `Sign in` button

This quick-start shows the minimum code required to add Sign in with {yourbrand} to any React app using the Ecosystem SDK.

1. Create a new React app

If you’re starting fresh, create a new React app:

npx create-react-app . --template typescript

2. Install the SDK

npm install @rapidfire/id

Check the recommended project structure for this example project

my-app/
  .env.local
  package.json
  tsconfig.json
  src/
    App.tsx
    index.tsx
    components/
      wallet/
        CreateWalletButton.tsx
        WalletLogo.tsx
    lib/
      provider.ts
      sdk.ts

If starting with create-react-app, create the folders:

mkdir -p src/lib/
mkdir -p src/components/wallet/

3. Initialize the SDK, Provider, and Components

You'll handle all wallet interactions through the standard EIP-1193 provider interface, giving you complete flexibility in implementing wallet creation, connection flows, and transaction handling. While this approach requires more custom development work, it's ideal for applications that need specialized wallet interactions or want to minimize dependencies.

src/lib/sdk.ts

import EcosystemWallet from '@rapidfire/id';
 
// Initialize the SDK with required parameters
export const sdk = new EcosystemWallet({
  appChainIds: [80002],
  appLogoUrl: 'https://a.rgbimg.com/users/b/ba/barunpatro/600/mf6B5Gq.jpg',
  appName: 'Example App',
});

4. Implement the `Sign in` button

Create the wallet components that use the configured provider.

src/components/wallet/WalletLogo.tsx

import React from 'react';
 
const defaultContainerStyles = {
  paddingTop: 2,
  display: 'flex',
  alignItems: 'center',
};
 
export function WalletLogo({
  size = 24,
  containerStyles = defaultContainerStyles,
}) {
  return (
    <div style={containerStyles}>
      <svg
        width={size}
        height={size}
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <rect
          x="2"
          y="4"
          width="20"
          height="16"
          rx="3"
          stroke="currentColor"
          strokeWidth="2"
        />
        <path
          d="M16 12C16 10.8954 16.8954 10 18 10H22V14H18C16.8954 14 16 13.1046 16 12Z"
          fill="currentColor"
        />
        <circle cx="12" cy="12" r="2" fill="currentColor" />
      </svg>
    </div>
  );
}

5. Set up the main app

Configure your main App component and environment variables.

src/App.tsx

import React, { useState } from 'react';
import { CreateWalletButton } from './components/wallet/CreateWalletButton';
 
export default function App() {
  const [address, setAddress] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
 
  return (
    <div style={{ display: 'grid', placeItems: 'center', minHeight: '100vh' }}>
      <div style={{ display: 'grid', gap: 16, textAlign: 'center' }}>
        <h1>Sign in with your Global Wallet</h1>
        {address ? (
          <div>
            <p>Signed in as</p>
            <code>{address}</code>
          </div>
        ) : (
          <CreateWalletButton
            handleSuccess={(addr: string) => {
              setError(null);
              setAddress(addr);
            }}
            handleError={(e: unknown) => {
              const message = e instanceof Error ? e.message : String(e);
              setError(message);
            }}
          />
        )}
        {error && <p style={{ color: 'tomato' }}>{error}</p>}
      </div>
    </div>
  );
}

6. Start your app

npm start