External - Wormhole Connect + Typescript SDK.pdf

Neven6 65 views 47 slides Jun 27, 2024
Slide 1
Slide 1 of 47
Slide 1
1
Slide 2
2
Slide 3
3
Slide 4
4
Slide 5
5
Slide 6
6
Slide 7
7
Slide 8
8
Slide 9
9
Slide 10
10
Slide 11
11
Slide 12
12
Slide 13
13
Slide 14
14
Slide 15
15
Slide 16
16
Slide 17
17
Slide 18
18
Slide 19
19
Slide 20
20
Slide 21
21
Slide 22
22
Slide 23
23
Slide 24
24
Slide 25
25
Slide 26
26
Slide 27
27
Slide 28
28
Slide 29
29
Slide 30
30
Slide 31
31
Slide 32
32
Slide 33
33
Slide 34
34
Slide 35
35
Slide 36
36
Slide 37
37
Slide 38
38
Slide 39
39
Slide 40
40
Slide 41
41
Slide 42
42
Slide 43
43
Slide 44
44
Slide 45
45
Slide 46
46
Slide 47
47

About This Presentation

Wormhole Connect + Typescript SDK


Slide Content

Wormhole
Connect +
Typescript SDK
Kevin Neilson
Developer Relations Engineer,
Papermoon

What is
Wormhole?
Wormhole is the leading
interoperability platform
powering multichain bridges
and applications at scale.

Portal Bridge uses Wormhole

Wormhole Connect
Integrate Wormhole in
2 Lines of Code

What is Wormhole Connect?
●A React Widget that offers an easy and
customizable way to access Wormhole.
●By default, Wormhole Connect includes gas drop
off on dest. chain and gasless txns (Connect
Relayers pay gas on behalf of users).

What is Wormhole Connect?
●A React Widget that offers an easy and customizable way to
access Wormhole.
●By default, Wormhole Connect includes gas drop off on dest.
chain and gasless txns (Connect Relayers pay gas on behalf
of users).

Set Up Wormhole Connect Quickly
git clone https://github.com/scaffold-eth/scaffold-eth-2.git
cd scaffold-eth-2
yarn install
yarn add @wormhole-foundation/wormhole-connect
yarn start
●Scaffold Eth is a framework for quickly launching a dApp.
●Let’s clone the repo, install dependencies, and add the
Wormhole Connect package.

Add Wormhole Connect

import WormholeConnect from
'@wormhole-foundation/wormhole-connect';

<WormholeConnect/>

Add Wormhole Connect

import WormholeConnect from
'@wormhole-foundation/wormhole-connect';

<WormholeConnect/>

Customize Theme







const theme: WormholeConnectPartialTheme = {
background: {
default: '#FD8058'
}
};

<WormholeConnect theme={theme} />







https://docs.wormhole.com/wormhole/wormhole-connect/
configuration

Customize Supported Networks



const config: WormholeConnectConfig = {
networks: ['ethereum', 'solana', 'avalanche']
};


<WormholeConnect config={config} />




https://docs.wormhole.com/wormhole/wormhole-connect
/configuration

Customize RPCs


const config: WormholeConnectConfig = {
networks: ['ethereum', 'solana'],
rpcs: {
ethereum: "https://rpc.ankr.com/eth",
solana: "https://rpc.ankr.com/solana",
}
};

<WormholeConnect config={config} />




https://docs.wormhole.com/wormhole/wormhole-connect
/configuration

Not using React? Use Hosted Version



<!-- Mounting point. Include in <body> -->
<div id="wormhole-connect"></div>

<!-- Dependencies -->
<script type="module"
src="https://www.unpkg.com/@wormhole-foundation/[email protected]
-beta.9-development/dist/main.js" defer></script>
<link
rel="https://www.unpkg.com/@wormhole-foundation/[email protected]
-beta.9-development/dist/main.css" />




Simply copy and paste the following code into your HTML body:

Wormhole Typescript SDK

●Overview of the SDK
●SDK Utilities & Features
●Wormhole Concepts
●3 Types of Transfers
●Tracking and Redeeming
●Install the SDK
●Hands-on Demo -> Use the SDK to Bridge from
Avalanche to Solana


The Plan

●A modern Typescript SDK to help you make your
dApp Multichain!


What is the Wormhole Typescript SDK?

●A modern Typescript SDK to help you make your
dApp Multichain!
●Features:
○Universal API across all chains
○Flexible signer Interface (allowing custom
gas or fee strategies)
○Supports all types of transfers



What is the Wormhole Typescript SDK?

●A modern Typescript SDK to help you make your
dApp Multichain!
●Features:
○Universal API across all chains
○Flexible signer Interface (allowing custom
gas or fee strategies)
○Supports all types of transfers
●Generally speaking, Wormhole Connect is for
Plug and Play Integrations, while the
Typescript SDK is for integrating Wormhole into
your existing app.


What is the Wormhole Typescript SDK?

●Chain contexts provide access to chain specific
methods and utilities.
●Platform methods (EVM, Solana, Cosmos) provide
most of the functionality but a specific chain
may override this.


Chain Contexts

●Chain context also include a cached RPC client, can be
accessed with getRpc().


Chain Contexts


const sendChain = wh.getChain("Avalanche");
const rcvChain = wh.getChain("Solana");

●Get Token Bridge address
●Get the Chain ID & lots more
helpful info easily




Fetching Token Bridge

●Get Token Bridge address
●Get the Chain ID & lots more
helpful info easily




Fetching Token Bridge


const tb = await
sendChain.getTokenBridge();

●Get Token Bridge address
●Get the Chain ID & lots more
helpful info easily




Fetching Token Bridge


const tb = await
sendChain.getTokenBridge();

●Addresses are normalized to 32 bytes in
Wormhole and referred to as UniversalAddresses.



Addresses

●Addresses are normalized to 32 bytes in
Wormhole and referred to as UniversalAddresses.
●Why? Wormhole works across a variety of
ecosystems, well beyond EVM + Solana and more
that use a variety of address types.



Addresses

●Addresses are normalized to 32 bytes in
Wormhole and referred to as UniversalAddresses.
●Why? Wormhole works across a variety of
ecosystems, well beyond EVM + Solana and more
that use a variety of address types.
●This abstraction allows the SDK to work with
addresses in a consistent way regardless of the
underlying chain.



Addresses

Converting Addresses





const ethAddr: NativeAddress<"Evm"> = toNative("Ethereum",
"0x3B939FeaD1557C741Ff06492FD0127bd287A421e");
const universalAddr = ethAddr.toUniversalAddress().toString();
Universal Address (EVM Example):
0x0000000000000000000000003b939fead1557c741ff06492fd0127bd287a421e

Converting Addresses





const ethAddr: NativeAddress<"Evm"> = toNative("Ethereum",
"0x3B939FeaD1557C741Ff06492FD0127bd287A421e");
const universalAddr = ethAddr.toUniversalAddress().toString();
Universal Address (EVM Example):
0x0000000000000000000000003b939fead1557c741ff06492fd0127bd287a421e

const solAddr: NativeAddress<"Solana"> = toNative("Solana",
"39725224Bo5ZVxC7bRYr4F3sUrKyxCxAnJUix3xpnkYZ");
const universalAddr = solAddr.toUniversalAddress().toString();
Universal Address (Solana Example):
0x1fcad34ce734fe0c1e95813a2b1c063e0bbf304593df483ae8c980e88a6d318a

Utils - Two ways to get Token Decimals
Network Decimals
Avalanche 18
Solana 9

const decimals = sendChain.config.nativeTokenDecimals;

const decimals = await wh.getDecimals(token.chain, token.address);

●Manual Bridging - user will complete txn on the destination
chain.
●Automatic - Relayer will detect transfer, complete for user.




Manual vs. Automatic

●Bridging to a chain where you don’t have any native token for
gas? Wormhole has you covered!




Native Gas Feature

●Token Transfer (standard Wormhole)
●Circle Transfer (via Circle CCTP)
●Gateway Transfer (to / from Cosmos)
3 Types of Transfers

const xfer = await wh.tokenTransfer(
route.token,
route.amount,
route.source.address,
route.destination.address,
route.delivery?.automatic ?? false,
route.payload,
route.delivery?.nativeGas,
);




Token Transfer
●The most common Wormhole bridge method.

Circle Transfer (Native USDC)
●Native USDC refers to the canonical version of Circle’s USDC.
●Allows for minting / burning USDC directly on chains.




const xfer = await wh.circleTransfer(
req.amount,
src.address,
dst.address,
req.automatic, // automatic delivery boolean
undefined, // payload to be sent with the transfer
req.nativeGas // If automatic, native gas can be
requested to be sent to the receiver
);

const xfer = await GatewayTransfer.from(wh, {
token: token,
amount: amount,
from: src.address,
to: dst.address,
} as GatewayTransferDetails);
Gateway Transfer
●Wormhole Gateway is a Cosmos-SDK chain.
●Bridge non-native assets into the Cosmos ecosystem.
●Source for unified liquidity across Cosmos chains.

●WormholeScan.io -> explorer for Wormhole transactions.
●Make sure you’re on correct network! (Testnet vs. Mainnet).



Tracking Transfers

●We recover the transaction in the token bridge example -
no more action is required.



Recovering Txns (Manual Redeem)

Wormhole Typescript SDK
Demo Time

git clone https://github.com/wormhole-foundation/wormhole-sdk-ts
cd wormhole-sdk-ts
npm i @wormhole-foundation/sdk
npm i axios@latest
npm i [email protected]
npm i
npm run build









Install the SDK, set up Example Repo

cd examples

npm run tb









Configure .env file with private keys
●In the examples folder, see .env.example.
●Add your Eth and Solana Private Keys (Test accounts only)

●Avax Faucet:
https://core.app/tools/testnet-faucet/
●Solana Devnet Faucet:
https://faucet.solana.com /



Don’t forget to fund testnet accounts!

THE INTEROPERABILITY STACK

●https://docs.wormhole.com/wormhole
●https://docs.wormhole.com/wormhole/reference/sdk-
docs
●https://github.com/wormhole-foundation
●https://wormholescan.io/
●https://discord.com/invite/wormholecrypto


Where to Go Next?

THANK YOU!
Tags