Skip to content
This repository has been archived by the owner on Apr 18, 2024. It is now read-only.

Getting Started: Frontend Concepts

Jump to bottom
Bleaker edited this page Feb 22, 2022 · 1 revision

Basic frontend usage

The Synapse Protocol SDK uses the Ethers package as its primary form of interaction with Smart Contracts and various blockchain RPCs. Given that, certain functions provided by the SDK may in some cases take a Signer or Provider instance as a parameter.

This page won't go into documentation-level detail of those interfaces (both Signer and Provider have excellent documentation), it will provide basic introductions to both, as well as explanations for using libraries like web3-react which integrate Ethers.

Provider

Provider is a high-level interface around various implementor classes such as JsonRpcProvider, Web3Provider, and others.

  • JsonRpcProvider is a Provider which allows direct connection to and interaction with JSON-RPC API nodes of blockchains.
  • Web3Provider is a Provider which can conncet to and interact with various Web3 wallets and libraries such as MetaMask, WalletConnect, and others.

When integrating the Synapse Protocol SDK in a NodeJS-based frontend, using a Web3Provider -- such as the Metamask connector provided by the @web3-react/metamask package -- is required if you want to interact with the user's Web3 wallet in any way. While it is entirely possible to use a JsonRpcProvider for read-only functions and a Web3Provider for user-interactivity functions, it is highly preferable and much easier to use a Web3Provider in all cases when working with your frontend.

Signer

Signer is a high level interface which can be used to sign and send transactions using a wallet account returned by a Provider instance.

All classes which fall within the Provider interface have the function getSigner(), which returns a Signer instance for the wallet currently connected to that Provider instance. In the case of a Web3Provider which wraps a Metamask connection (for example), the Signer returned by getSigner() -- assuming the user has connected their wallet to your DApp and has unlocked Metamask -- will be the user's wallet/account currently connected to your DApp via Metamask. Using send functoin provided by said Signer instance, such as sendTransaction() or signTransaction(), would cause the Metamask window in the users browser to open and ask them for confirmation of the transaction send or sign.

SDK Usage

All functions publicly exported by the @synapseprotocol/sdk package which take a Provider or Signer as a parameter, whether optional or required, can have any implementation of both interfaces passed to them. This allows the SDK to be used as a library on a backend server, or as a method of interacting with Web3 wallets on frontends, or anything else.

Clone this wiki locally