Integrating with ecosystem wallet connectors

Integrating apps do not need to use Openfort themselves to integrate ecosystem wallets; instead, they can import a your ecosystem SDK directly to configure with their wallet connector library. Simply follow the instructions below to get set up!

1. Install dependencies#

Install the @ecosystem/wallet SDK and its peer dependencies:

CAREFUL: @ecosystem/wallet doesn't exist

To make these instructions concrete, this will continue with the sample ecosystem wallet called ... Ecosystem Wallet. For the sake of this guide, available in package form as @ecosystem/wallet.

npm i @ecosystem/wallet @rainbow-me/rainbowkit @tanstack/react-query

2. Create the connector#

config.ts

import {EcosystemWallet} from '@ecosystem/wallet';
const CLIENT_ID = 'pk_test_...';
export const identityInstance = new EcosystemWallet({
  clientId: CLIENT_ID,
  redirectUri: '/redirect',
  logoutRedirectUri: '/logout',
  audience: 'platform_api',
  scope: 'openid offline_access email transact',
});

3. Wrap app with providers#

At the highest level of your applications, wrap the component with the wagmi, QueryClient, and RainbowKit providers. Pass the configuration you created in step 2 to the wagmi provider.

All of ecosystem wallets can export a standard EIP-1193 provider object. This allows your app to request signatures and transactions from the wallet, using familiar JSON-RPC requests like personal_sign or eth_sendTransaction.

EIP-1193, also known as the Ethereum JavaScript API, is a standardized interface for how applications can request information, signatures, and transactions from a connected wallet.

To get a wallet's EIP-1193 provider, use the getEthereumProvider method:

_app.tsx

wagmiConfig.ts

import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
import {WagmiProvider} from 'wagmi';
import {useEffect} from 'react';
import {config} from './wagmiConfig';
import {identityInstance} from './config';
const queryClient = new QueryClient();
export default function App() {
  useEffect(() => {
    if (!identityInstance) return;
    identityInstance.getEthereumProvider({
      policyId: 'pol_...',
      rpcUrl: 'https://rpc.ankr.com/polygon_amoy',
    });
  }, []);
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <Component {...pageProps} />
      </QueryClientProvider>
    </WagmiProvider>
  );
}

4. Use the `ConnectButton`#

Import the ConnectButton and use to prompt users to connect to their provider ecosystem wallet.

import {ConnectButton} from '@rainbow-me/rainbowkit';
function Page() {
  return (
    <div>
      <h1> My app </h1>
      ...
      <ConnectButton />
    </div>
  );
}

Thats it! You can now use any wagmi hook in your application to interact with the connected wallet. When users connect and transact with their wallet, Openfort will open a pop-up for users to authorize any actions.