Wallets initialization

To use SDK, you have to create a Wallet — abstraction to communicate with real blockchain wallets. Initialize wallets for used blockchains or use Rarible Wallet Connector (in general for frontend). It is possible to use SDK without wallet (for ex. sdk.balances.getBalance), but in that case you can't send transactions and sign messages:

const raribleSdk = createRaribleSdk(undefined, "prod")

Initialize simple wallets

• Ethereum / Polygon

  You can create EthereumWallet with one of the following providers:

  • Web3 instance. For example, Metamask (window.ethereum) or HDWalletProvider
  • ethers.providers.Web3Provider
  • ethers.Wallet

  import Web3 from "web3"
  import * as HDWalletProvider from "@truffle/hdwallet-provider"
  import { Web3Ethereum } from "@rarible/web3-ethereum"
  import { ethers } from "ethers"
  import { EthersEthereum, EthersWeb3ProviderEthereum } from "@rarible/ethers-ethereum"
  import { EthereumWallet } from "@rarible/sdk-wallet"
  
  // if using another browser provider (not HD Wallet Provider), you will need to make a connection
  await provider.request({ method: "eth_requestAccounts" })
  
  // creating EthereumWallet with Web3
  const web3 = new Web3(provider)
  const web3Ethereum = new Web3Ethereum({ web3 })
  const ethWallet = new EthereumWallet(web3Ethereum)
  
  // or with HDWalletProvider
  const provider = new HDWalletProvider({
    url: "<NODE_URL>",
    privateKeys: ["0x0..."],
    chainId: 1,
  })
  const web3 = new Web3(provider)
  const web3Ethereum = new Web3Ethereum({ web3 })
  const ethWallet = new EthereumWallet(web3Ethereum)
  
  // creating EthereumWallet with ethers.providers.Web3Provider
  const ethersWeb3Provider = new ethers.providers.Web3Provider(provider)
  const ethersProvider = new EthersWeb3ProviderEthereum(ethersWeb3Provider)
  const ethWallet = new EthereumWallet(ethersProvider)
  
  // creating EthereumWallet with ethers.Wallet
  const ethersWeb3Provider = new ethers.providers.Web3Provider(provider)
  const ethersProvider = new EthersEthereum(new ethers.Wallet(wallet.getPrivateKeyString(), ethersWeb3Provider))
  const ethWallet = new EthereumWallet(ethersProvider)
  
  // Second parameter — is environment: "prod" | "staging" | "dev"
  const raribleSdk = createRaribleSdk(ethWallet, "staging")
  

• Flow

  import * as fcl from "@onflow/fcl"
  import { FlowWallet } from "@rarible/sdk-wallet"
  
  const wallet =  new FlowWallet(fcl)
  

  You also need to configure Flow Client Library (FCL), because Flow-sdk use @onflow/fcl-js:

  //example config for testnet
  import { config } from "@onflow/fcl";
  config({
    "accessNode.api": "https://access-testnet.onflow.org", // Mainnet: "https://access-mainnet-beta.onflow.org"
    "discovery.wallet": "https://fcl-discovery.onflow.org/testnet/authn" // Mainnet: "https://fcl-discovery.onflow.org/authn"
  })
  

  See more configuration details on Flow documentation.

• Tezos

  To initialize wallets, you can use:

  • in_memory_provider (also for backend)
  • beacon_provider (@rarible/tezos-sdk/dist/providers/beacon/beacon_provider)

  //in_memory_provider usage example
  import { in_memory_provider } from "@rarible/tezos-sdk/dist/providers/in_memory/in_memory_provider"
  import { TezosWallet } from "@rarible/sdk-wallet"
  
  const provider = in_memory_provider("edsk...", nodeUrl)
  const wallet = new TezosWallet(provider)
  

Wallet Connector

It is better to use Wallet Connector because there is a lot of the logic described above already implemented and the connect function for each blockchain is unified.

Install

Yarn

    yarn add @rarible/connector
    # optional: add additional connectors
    yarn add @rarible/connector-walletconnect
    yarn add @rarible/connector-fortmatic
    # check other @rarible/connector-* packages to see what's supported 

NPM

    npm i @rarible/connector
    # optional: add additional connectors
    npm i @rarible/connector-walletconnect
    npm i @rarible/connector-fortmatic
    # check other @rarible/connector-* packages to see what's supported 

Usage

Create Connector, add all needed ConnectionProvider's

import { Connector, InjectedWeb3ConnectionProvider, DappType } from "@rarible/connector"
import { WalletConnectConnectionProvider } from "@rarible/connector-walletconnect"

// create providers with the required options
const injected = new InjectedWeb3ConnectionProvider()
const walletConnect = new WalletConnectConnectionProvider()

// create connector and push providers to it 
const connector = Connector
    .create([injected, walletConnect])

// subscribe to connection status
connector.connection.subscribe((con) =>
    console.log("connection: " + JSON.stringify(con))
)

const options = await connector.getOptions(); // get list of available option
await connector.connect(options[0]); // connect to selected provider

Usage with Rarible SDK

import { NetworkType as TezosNetwork } from "@airgap/beacon-sdk"
import Web3 from "web3"
import { BlockchainWallet, FlowWallet, TezosWallet, EthereumWallet } from "@rarible/sdk-wallet"
import { Web3Ethereum } from "@rarible/web3-ethereum"
import {
    Connector,
    IConnectorStateProvider,
    ConnectionProvider,
    InjectedWeb3ConnectionProvider,
    AbstractConnectionProvider,
    EthereumProviderConnectionResult,
} from "@rarible/connector"
import { FclConnectionProvider, FlowProviderConnectionResult } from "@rarible/connector-fcl"
import { MEWConnectionProvider } from "@rarible/connector-mew"
import { BeaconConnectionProvider, TezosProviderConnectionResult } from "@rarible/connector-beacon"
import { TorusConnectionProvider } from "@rarible/connector-torus"
import { WalletLinkConnectionProvider } from "@rarible/connector-walletlink"
import { WalletConnectConnectionProvider } from "@rarible/connector-walletconnect"
import { FortmaticConnectionProvider } from "@rarible/connector-fortmatic"
import { PortisConnectionProvider } from "@rarible/connector-portis"


const ethereumRpcMap: Record<number, string> = {
    1: "https://node-mainnet.rarible.com",
    3: "https://node-ropsten.rarible.com",
    4: "https://node-rinkeby.rarible.com",
    17: "https://node-e2e.rarible.com",
}

export type WalletAndAddress = {
    wallet: BlockchainWallet
    address: string
}

function mapEthereumWallet<O>(provider: AbstractConnectionProvider<O, EthereumProviderConnectionResult>): ConnectionProvider<O, WalletAndAddress> {
    return provider.map(state => ({
        wallet: new EthereumWallet(new Web3Ethereum({ web3: new Web3(state.provider), from: state.address })),
        address: state.address
    }))
}

function mapFlowWallet<O>(provider: AbstractConnectionProvider<O, FlowProviderConnectionResult>): ConnectionProvider<O, WalletAndAddress> {
    return provider.map(state => ({
        wallet: new FlowWallet(state.fcl),
        address: state.address,
    }))
}

function mapTezosWallet<O>(provider: AbstractConnectionProvider<O, TezosProviderConnectionResult>): ConnectionProvider<O, WalletAndAddress> {
    return provider.map(async state => {
      const {
        beacon_provider: createBeaconProvider
      } = await import("@rarible/tezos-sdk/dist/providers/beacon/beacon_provider")
      const provider = await createBeaconProvider(state.wallet as any, state.toolkit)

      return {
            wallet: new TezosWallet(provider),
            address: state.address,
        }
    })
}

const injected = mapEthereumWallet(new InjectedWeb3ConnectionProvider())

const mew = mapEthereumWallet(new MEWConnectionProvider({
    networkId: 4,
    rpcUrl: ethereumRpcMap[4]
}))

const beacon = mapTezosWallet(new BeaconConnectionProvider({
    appName: "Rarible Test",
    accessNode: "https://tezos-hangzhou-node.rarible.org",
    network: TezosNetwork.HANGZHOUNET
}))

const fcl = mapFlowWallet(new FclConnectionProvider({
    accessNode: "https://access-testnet.onflow.org",
    walletDiscovery: "https://flow-wallet-testnet.blocto.app/authn",
    network: "testnet",
    applicationTitle: "Rari Test",
    applicationIcon: "https://rarible.com/favicon.png?2d8af2455958e7f0c812"
}))

const torus = mapEthereumWallet(new TorusConnectionProvider({
    network: {
        host: "rinkeby"
    }
}))

const walletLink = mapEthereumWallet(new WalletLinkConnectionProvider({
    estimationUrl: ethereumRpcMap[4],
    networkId: 4,
    url: ethereumRpcMap[4]
}, {
    appName: "Rarible",
    appLogoUrl: "https://rarible.com/static/logo-500.static.png",
    darkMode: false
}))

const walletConnect = mapEthereumWallet(new WalletConnectConnectionProvider({
    rpc: {
        4: "https://node-rinkeby.rarible.com"
    },
    chainId: 4
}))

// Providers required secrets
// const fortmatic = mapEthereumWallet(new FortmaticConnectionProvider({ apiKey: "ENTER", ethNetwork: { chainId: 4, rpcUrl: "https://node-rinkeby.rarible.com" } }))
// const portis = mapEthereumWallet(new PortisConnectionProvider({ appId: "ENTER", network: "rinkeby" }))

const state: IConnectorStateProvider = {
    async getValue(): Promise<string | undefined> {
        const value = localStorage.getItem("saved_provider")
        return value ? value : undefined
    },
    async setValue(value: string | undefined): Promise<void> {
        localStorage.setItem("saved_provider", value || "")
    },
}

const connector = Connector
    .create(injected, state) // use ConnectionState for store connector data (last connected provider, etc)
    .add(torus)
    .add(walletLink)
    .add(mew)
    .add(beacon)
    .add(fcl)
    .add(walletConnect)
    // .add(portis)
    // .add(fortmatic)


connector.connection.subscribe((con) => {
    console.log("connection: " + JSON.stringify(con))
    if (con.status === "connected") {
        const sdk = createRaribleSdk(con.connection.wallet, "staging")
        // use sdk here
    }
})

const options = await connector.getOptions()
await connector.connect(options[0])

Available providers

Ethereum providers:

InjectedWeb3ConnectionProvider - metamask, coinbase, etc
FortmaticConnectionProvider
PortisConnectionProvider
TorusConnectionProvider
WalletLinkConnectionProvider
MEWConnectionProvider
IframeConnectionProvider
WalletConnectConnectionProvider

Tezos providers:

BeaconConnectionProvider

Flow providers:

FclConnectionProvider

Read more about installation and using examples of Rarible SDK Wallet Connector.