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")
- Web3 instance. For example, Metamask (
-
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.