Example

An implemented example of the Bridge SDK

Example 1:

A basic implementation
import { JsonRpcProvider } from '@ethersproject/providers'
import { Provider } from '@ethersproject/abstract-provider'
import { SynapseSDK } from '@synapsecns/sdk-router'
import { BigNumber } from '@ethersproject/bignumber'
//Set up providers (RPCs) for each chain desired**
const arbitrumProvider: Provider = new JsonRpcProvider('https://arb1.arbitrum.io/rpc')
const avalancheProvider: Provider = new JsonRpcProvider('https://api.avax.network/ext/bc/C/rpc')
//Structure arguments properly
const chainIds = [42161, 43114]
const providers = [arbitrumProvider, avalancheProvider]
//Set up a SynapseSDK instance
const Synapse = new SynapseSDK(chainIds, providers)
// quote
const quote = await Synapse.bridgeQuote(
42161, // From Chain
43114, // To Chain
'0xff970a61a04b1ca14834a43f5de4533ebddb5cc8', // From Token
'0xa7d7079b0fead91f3e65f86e8915cb59c1a4c664', // To Token
BigNumber.from('20000000') // Amount
)
// bridge
await Synapse.bridge(
'0x0AF91FA049A7e1894F480bFE5bBa20142C6c29a9', // To Address
42161, // Origin Chain
43114, // Destination Chain
'0xff970a61a04b1ca14834a43f5de4533ebddb5cc8', // Origin Token Address
BigNumber.from('20000000'), // Amount
quote.originQuery, // Origin query from bridgeQuote()
quote.destQuery // Destination query from bridgeQuote()
)

Example 2

A More advanced example, using next.js, wagmi, and rainbowkit
//_ app.tsx
import '@styles/global.css'
import '@rainbow-me/rainbowkit/styles.css'
import { SynapseProvider } from '@/utils/SynapseProvider'
import type { AppProps } from 'next/app'
import { Provider as EthersProvider } from '@ethersproject/abstract-provider'
import { JsonRpcProvider } from '@ethersproject/providers'
import { configureChains, createClient, WagmiConfig } from 'wagmi'
import {
mainnet,
arbitrum,
aurora,
avalanche,
bsc,
canto,
fantom,
harmonyOne,
metis,
moonbeam,
moonriver,
optimism,
polygon,
} from 'wagmi/chains'
import {
getDefaultWallets,
RainbowKitProvider,
darkTheme,
} from '@rainbow-me/rainbowkit'
import { alchemyProvider } from 'wagmi/providers/alchemy'
import { publicProvider } from 'wagmi/providers/public'
export default function App({ Component, pageProps }: AppProps) {
const { chains, provider } = configureChains([mainnet,
arbitrum,
aurora,
avalanche,
bsc,
canto,
fantom,
harmonyOne,
metis,
moonbeam,
moonriver,
optimism,
polygon], [
alchemyProvider({ apiKey: 'API_KEY' }),
publicProvider(),
])
const { connectors } = getDefaultWallets({
appName: 'ExampleApp',
chains,
})
const wagmiClient = createClient({
autoConnect: true,
connectors,
provider,
})
// Synapse client params setup example
let synapseProviders: EthersProvider[] = []
chains.map((chain) => {
let rpc: EthersProvider = new JsonRpcProvider(chain.rpcUrls.default.http[0])
synapseProviders.push(rpc)
})
return (
<WagmiConfig client={wagmiClient}>
<RainbowKitProvider chains={chains} theme={darkTheme()}>
<SynapseProvider
chainIds={chains.map((chain) => chain.id)}
providers={synapseProviders}
>
<Component {...pageProps} />
</SynapseProvider>
</RainbowKitProvider>
</WagmiConfig>
)
}
//@/utils/SynapseProvider.tsx
import { createContext, useContext } from 'react'
import { SynapseSDK } from '@synapsecns/sdk-router'
import { Provider } from '@ethersproject/abstract-provider'
export const SynapseContext = createContext<SynapseSDK>(null)
export const SynapseProvider = ({
children,
chainIds,
providers,
}: {
children: React.ReactNode
chainIds: number[]
providers: Provider[]
}) => {
const sdk = new SynapseSDK(chainIds, providers)
return (
<SynapseContext.Provider value={sdk}>{children}</SynapseContext.Provider>
)
}
export const useSynapseContext = () => useContext(SynapseContext)
//homepage/index.tsx
import { useSynapseContext } from '@/utils/SynapseProvider'
import { Zero } from '@ethersproject/constants'
import { useState, useEffect } from 'react'
import { getNetwork } from '@wagmi/core'
import {
DEFAULT_FROM_CHAIN,
DEFAULT_TO_CHAIN,
DEFAULT_FROM_TOKEN,
DEFAULT_TO_TOKEN,
} from '@/constants/bridge'
export default function HomePage({ address }: { address: `0x${string}` }) {
// Get the synapse sdk
const SynapseSDK = useSynapseContext()
// Example state hooks
const [fromToken, setFromToken] = useState(DEFAULT_FROM_TOKEN)
const [toToken, setToToken] = useState(DEFAULT_TO_TOKEN)
const [fromChainId, setFromChainId] = useState(DEFAULT_FROM_CHAIN)
const [toChainId, setToChainId] = useState(DEFAULT_TO_CHAIN)
const [amount, setAmount] = useState(Zero)
const [bridgeQuote, setBridgeQuote] = useState({
outputAmountString: '',
quotes: { originQuery: null, destQuery: null },
})
// Set connected network when component is mounted
useEffect(() => {
const { chain: fromChainIdRaw } = getNetwork()
setFromChainId(fromChainIdRaw ? fromChainIdRaw?.id : DEFAULT_FROM_CHAIN)
}, [])
// Get Quote function
// Suggestion: this function should be triggered from an useEffect when amount or to/from token/chain is altered
const getQuote = async () = {
SynapseSDK.bridgeQuote(
fromChainId,
toChainId,
fromToken,
toToken,
amount
)
.then(
({ feeAmount, bridgeFee, maxAmountOut, originQuery, destQuery }) => {
let toValueBigNum = maxAmountOut ?? Zero
let toValueBase = toValueBigNum.div(toDecimals).toString()
let toValueMantissa = toValueBigNum.mod(toDecimals).toString()
setBridgeQuote({
outputAmountString: toValueBase + '.' + toValueMantissa,
quotes: {
originQuery,
destQuery,
},
})
// do something
}
)
.catch((err) => {
alert('error getting quote', err)
// do something
})
}
// Execute bridge function
const executeBridge = async () = {
await Synapse.bridge(
toAddress, // To Address
fromChainId, // Origin Chain
toChainId, // Destination Chain
fromToken, // Origin Token Address
amount, // Amount
bridgeQuote.quotes.originQuery, // Origin query from bridgeQuote()
bridgeQuote.quotes.destQuery // Destination query from bridgeQuote()
).then(({to, data}) => {
// do something
}
)
.catch((err) => {
alert('error bridging', err)
// do something
})
}
// ...
}