Web3 Modal

Connecting to ORE ID via the Web3 Modal Library

The Web3 Modal is an open-source library that allows a decentralized application to connect with a number of different blockchains using the same interface. This guide will explain how to add ORE ID as one of the connection options for any Web3 Modal connected application.

Javascript

1. Install the connector dependency from ORE ID.

npm install web3modal-connector-oreid

"dependencies": {
   "web3modal-connector-oreid": "^1.0.0"
}

2. Within your app's index.ts (or entry point) where wallet connect is configured, define the OreIdOptions for your application.

const oreidOptions: OreIdOptions = {
  appId: "t_39d26cb02b1c414096be03c0c286ea17",
  plugins: { popup: WebPopup() },
}

The application identifier (appId) can be obtained from the developer portal by accessing the Dashboard and navigating to the Test Key section, where the appId can be found.

3. Create a new instance of the OreIdConnector.

const oreidConnector = new OreIdConnector({
  chains: [mainnet],
  options: oreidOptions,
  // authProvider: AuthProvider.Google, // optional
})

4. Finally, update your Wagmi configuration to include the new connector and your registered projectId.

Every project using the WalletConnect SDKs needs to obtain a projectId from cloud.walletconnect.com. This is absolutely free and only takes a few minutes. Check out the WalletConnect Documentation for details.

// Instantiate your ProjectId
const projectId = "your_registered_projectId";

const wagmiConfig = createConfig({
  autoConnect: true,
  connectors: [
    ...w3mConnectors({ projectId, version: 1, chains }),
    oreidConnector,
  ],
  publicClient,
  storage: createStorage({ storage: window.localStorage }),
})

And that's it! Your users will now have access to authentication via ORE ID.

You can now use Wagmi hooks like you would normally in your application. These hooks should use the OREID connector/provider.