Onboard & Discover Accounts

The ability for a user to onboard & connect their account is a core function for any Application. It allows users to perform tasks such as: making payments, authorizing subscriptions, and authenticating with offchain services.

Porto, in combination with Wagmi, provides a seamless way to onboard & establish a connection of a Porto Account to your Application.

To get started, you can either use Wagmi directly, or a third-party library.

Demo

pnpx gitpick ithacaxyz/porto/tree/main/examples/vite-react

Source

Wagmi

Wagmi provides you with the Hooks to get started building your own Onboard & Discover Account modules.

Set up Wagmi

Ensure that you have set up your project with Wagmi by following the official guide.

Configure Porto

Before we get started with building the functionality of the Discover Account module, we will need to set up the Wagmi configuration.

In the config.ts file created in the Wagmi setup, we will need to add the porto connector.

Make sure to use a supported chain for your application. In the below example, we will use Base Sepolia (baseSepolia).

config.ts

import { porto } from 'porto/wagmi'
import { createConfig, http } from 'wagmi'
import { baseSepolia } from 'wagmi/chains'
 
export const config = createConfig({
  chains: [baseSepolia],
  connectors: [porto()], 
  transports: {
    [baseSepolia.id]: http(),
  },
})

Display Sign In Button

After that, we will set up a "sign in" button so that the user can connect their account to the application.

Example.tsx

import { useConnect } from 'wagmi'
 
export function Example() {
  const { connectors, connect } = useConnect()
 
  const connector = connectors.find(
    (connector) => connector.id === 'xyz.ithaca.porto',
  )!
 
  return (
    <button onClick={() => connect({ connector })}>
      Sign in
    </button>
  )
}

Display Account & Sign Out

After the user has signed in, you may want to display their account address and a "sign out" button.

Example.tsx

import { useAccount, useConnect, useDisconnect } from 'wagmi'
 
export function Example() {
  const account = useAccount() 
  const { disconnect } = useDisconnect() 
  
  const { connectors, connect } = useConnect()
  const connector = connectors.find(
    (connector) => connector.id === 'xyz.ithaca.porto',
  )!
 
  if (account.address) 
    return ( 
      <div> 
        <div>{account.address.slice(0, 6)}...{account.address.slice(-4)}</div> 
        <button onClick={() => disconnect()}>Sign out</button> 
      </div> 
    ) 
 
  return (
    <button onClick={() => connect({ connector })}>
      Sign in
    </button>
  )
}

Done

You have now successfully set up functionality to sign in and sign out of Porto Accounts.

Check out the following examples:

Third-Party Libraries

You can also use a third-party Account Connection library to handle the onboarding & connection of Porto Accounts.

Such libraries include: Privy, ConnectKit, AppKit, Dynamic, and RainbowKit.

The above libraries are all built on top of Wagmi, handle all the edge cases around account connection, and provide a seamless Account Connection UX that you can use in your Application.

Once you have set up the library, make sure to inject Porto by invoking Porto.create(). This will perform a side-effect to inject Porto into the Account Connection library via EIP-6963.

config.ts

import { Porto } from 'porto'
Porto.create()