External - Wormhole Connect + Typescript SDK.pdf
Neven6
65 views
47 slides
Jun 27, 2024
Slide 1 of 47
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
About This Presentation
Wormhole Connect + Typescript SDK
Slide Content
Wormhole
Connect +
Typescript SDK
Kevin Neilson
Developer Relations Engineer,
Papermoon
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.
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
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).
●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).
●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.
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/>
import WormholeConnect from
'@wormhole-foundation/wormhole-connect';
<WormholeConnect/>
Add Wormhole Connect
import WormholeConnect from
'@wormhole-foundation/wormhole-connect';
<WormholeConnect/>
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
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
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
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:
<!-- 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
●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?
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?
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?
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
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");
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 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 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();
●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
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
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
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
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
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);
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
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
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
●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.
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
);
●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.
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
●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)
no more action is required.
Recovering Txns (Manual Redeem)
Wormhole Typescript SDK
Demo Time
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 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)
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!
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?
●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
Categories
TechnologyDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 65
- Slides 47
- Age 525 days
Related Slideshows
11
8-top-ai-courses-for-customer-support-representatives-in-2025.pptx
JeroenErne2
48 views
10
7-essential-ai-courses-for-call-center-supervisors-in-2025.pptx
JeroenErne2
47 views
13
25-essential-ai-courses-for-user-support-specialists-in-2025.pptx
JeroenErne2
37 views
11
8-essential-ai-courses-for-insurance-customer-service-representatives-in-2025.pptx
JeroenErne2
35 views
21
Know for Certain
DaveSinNM
23 views
17
PPT OPD LES 3ertt4t4tqqqe23e3e3rq2qq232.pptx
novasedanayoga46
26 views