Getting Started

Overview

The Porto SDK is a TypeScript library designed for Applications and Wallets to create, manage, and interact with universal next-gen accounts on Ethereum.

Try sign into your account:

Install

Porto is available as an NPM package under porto

npm

npm i porto

Usage

You can get started with Porto by creating a new instance with Porto.create()

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

This will internally inject a Porto instance into your Application via EIP-6963. Modern Wallet Connection libraries will automatically detect the injected instance.

Supported Wallet Connection libraries include:

If you wish to use Porto directly, without relying on Wallet Connection libraries, you can use Porto's EIP-1193 provider instance.

import { Porto } from 'porto'
 
const porto = Porto.create()
 
const { accounts } = await porto.provider.request({ 
  method: 'wallet_connect'
})

Usage with Wagmi

Porto can be used in conjunction with Wagmi to provide a seamless experience for developers and end-users.

1. Set up Wagmi

Get started with Wagmi by following the official guide.

2. Set up Porto

After you have set up Wagmi, you can set up Porto by calling Porto.create(). This will automatically inject a Porto-configured EIP-1193 Provider into your Wagmi instance via EIP-6963: Multi Injected Provider Discovery.

import { Porto } from 'porto'
import { http, createConfig, createStorage } from 'wagmi'
import { odysseyTestnet } from 'wagmi/chains'
 
Porto.create() 
 
export const wagmiConfig = createConfig({
  chains: [odysseyTestnet],
  storage: createStorage({ storage: localStorage }),
  transports: {
    [odysseyTestnet.id]: http(),
  },
})

3. Use Porto

This means you can now use Wagmi-compatible Hooks like useConnect. For more info, check out the Wagmi Reference.

import { Hooks } from 'porto/wagmi'
import { useConnectors } from 'wagmi'
 
function Connect() {
  const connect = Hooks.useConnect()
  const connectors = useConnectors()
 
  return connectors?.map((connector) => (
    <button
      key={connector.uid}
      onClick={() => connect.mutate({ connector })}
    >
      Connect
    </button>
  ))
}