Rarible SDK Wallet Connector
Install
Yarn
yarn add @rarible/sdk-wallet-connector
NPM
npm i @rarible/sdk-wallet-connector
Usage
Simple get ethereum provider & wallet info
import {Connector, InjectedWeb3ConnectionProvider, DappType, FortmaticConnectionProvider} from "@rarible/sdk-wallet-connector";
// create providers with the required options
const injected: ConnectionProvider<DappType, Wallet> = new InjectedWeb3ConnectionProvider();
const fortmatic: ConnectionProvider<"fortmatic", Wallet> = new FortmaticConnectionProvider({
apiKey: "YOUR_FORTMATIC_APIKEY"
});
// create connector and push providers to it
const connector = Connector
.create(injected)
.add(fortmatic);
// 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 one
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 { Blockchain } from "@rarible/api-client"
import { createRaribleSdk } from "@rarible/sdk"
import {
Connector,
ConnectionProvider,
MEWConnectionProvider,
InjectedWeb3ConnectionProvider,
BeaconConnectionProvider,
FclConnectionProvider,
AbstractConnectionProvider,
EthereumProviderConnectionResult,
FlowProviderConnectionResult,
TezosProviderConnectionResult
} from "@rarible/sdk-wallet-connector";
type ProviderResult = EthereumProviderConnectionResult | FlowProviderConnectionResult | TezosProviderConnectionResult;
function mapToBlockchainWallet<O, C extends ProviderResult>(provider: AbstractConnectionProvider<O, C>): ConnectionProvider<O, BlockchainWallet> {
return provider.map((wallet) => {
switch (wallet.blockchain) {
case Blockchain.ETHEREUM: {
return new EthereumWallet(new Web3Ethereum({ web3: new Web3(wallet.provider), from: wallet.address }))
}
case Blockchain.TEZOS: {
return new TezosWallet(wallet.provider)
}
case Blockchain.FLOW: {
return new FlowWallet(wallet.fcl)
}
default:
throw new Error("Unknown blockchain")
}
})
}
const injected = mapToBlockchainWallet(new InjectedWeb3ConnectionProvider())
const mew = mapToBlockchainWallet(new MEWConnectionProvider({
networkId: 4,
rpcUrl: "https://node-rinkeby.rarible.com"
}));
const beacon = mapToBlockchainWallet(new BeaconConnectionProvider({
appName: "Rarible Test",
accessNode: "https://tezos-hangzhou-node.rarible.org",
network: TezosNetwork.HANGZHOUNET
}));
const fcl = mapToBlockchainWallet(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 state: ConnectorState = {
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(mew)
.add(beacon)
.add(fcl);
connector.connection.subscribe((con) => {
console.log("connection: " + JSON.stringify(con))
if (con.status === "connected") {
const sdk = createRaribleSdk(con.connection, "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