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

2. Install the SDK

npm install @rapidfire/id

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.

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 button component that uses the configured provider.

CreateWalletButton.tsx

import React, { useCallback } from 'react';
import { WalletLogo } from './WalletLogo';
import { provider } from './provider';
 
const buttonStyles = {
  background: 'linear-gradient(135deg, #2D3436 0%, #000000 100%)',
  border: '1px solid rgba(255, 255, 255, 0.1)',
  boxSizing: 'border-box' as const,
  display: 'flex',
  alignItems: 'center',
  gap: '12px',
  width: 'auto',
  minWidth: '200px',
  fontFamily: 'Inter, system-ui, sans-serif',
  fontWeight: '600',
  fontSize: '16px',
  color: '#FFFFFF',
  padding: '12px 20px',
  borderRadius: '12px',
  cursor: 'pointer',
  transition: 'all 0.2s ease-in-out',
  boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
  ':hover': {
    transform: 'translateY(-1px)',
    boxShadow: '0 6px 8px -1px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.06)',
  },
};
 
export function CreateWalletButton({ handleSuccess, handleError }) {
  const createWallet = useCallback(async () => {
    try {
      const [address] = await provider.request({
        method: 'eth_requestAccounts',
      });
      handleSuccess(address);
    } catch (error) {
      handleError(error);
    }
  }, [handleSuccess, handleError]);
 
  return (
    <button style={buttonStyles} onClick={createWallet}>
      <WalletLogo />
      Create Wallet
    </button>
  );
}

5. Start you app

npm start