Encode Club

2. dApp <-> wallet integration
By the end of this session you will know how to:
Connect your dApp with a wallet
Call your contract on chain
Invoke txs from your dApp to your contract
Watch assets e.g. add new tokens to user wallet
Sign messages to be used in your contracts
Goals

3. Smart Contracts
E2E hands-on walkthrough
session for everything
wallet <-> smart contracts

4. get-starknet
StarkNet wallet <-> dApp bridge
https://www.npmjs.com/package/get-starknet
https://github.com/starknet-community-libs/get-starknet
Connect

5. Motivation
dApps <-> wallets available integration before get-starknet
access/lookup window.starknet directly (1/2)
⛔ no guarantees for the key to be used on future wallet versions
⛔ wallet APIs change over time. No way for a dApp to know
about deprecated or newly-added APIs
⛔ there could be no wallet installed.
dApp is forced to implement (and maintain) its own wallet-discovery UI
or just keep losing users

6. Motivation
dApps <-> wallets available integration before get-starknet
access/lookup window.starknet directly (2/2)
⛔ no built-in way for dApps to know which wallet they are connected to
(i.e. missing fields like name or icon to use by the dApp)
⛔ assumes there is only one wallet available.
other installed wallets aren't discoverable by the using dApp.

7. 🔓 Allow dApps to seamlessly connect to any wallet on StarkNet
(devs should be spending the time building their new products.)
Ideation
Could we build something better?
🫂 Allow wallets to seamlessly connect to any dApp,
and get discovered by users which need a new wallet.
👥 An open source wallet/dApp API controlled by the community
- no legacies, StarkNet is still in its early days
- clear roadmap for new and deprecated APIs, community standardizations
🛡 An open source StarkNet wallet discovery list, moderated by the community

8. Solution
get-starknet, StarkNet wallet <-> dApp bridge
💃 integratable with zero burden for all existing dApps
Same window.starknet object APIs,
same connector APIs,
for all retrievable & discoverable wallets

9. Solution
get-starknet, StarkNet wallet <-> dApp bridge
Features:
- discovers all StarkNet wallets injected to the window object
- allows dApps to control which wallets to list, exclude or promote
- offers various wallet-connect modes (silent, visible or smart-defaults)
- allows dApps to switch wallets on runtime
- multi chain support
- 🧙 "one API to align them all" - for both dApp devs and wallet providers
- v2 (soon!), separating core/UI, even more power to devs 💪

10. Community
Used by all the major StarkNet dApps
(StarkGate, mySwap, briq, Aspect, MintSquare, ...)
Tools & Infrastructures
(Braavos, Starkscan, voyager, starknet-
react, ...)
Backed by
& hosted by StarkWare Libs
PRs are welcome!
Please join the discussion, and help us shape the future of StarkNet
https://github.com/starknet-community-libs/get-starknet

11. Call
Call entry-points on your contract
const readTokenBalance = async (
token_address: string = "0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7"
): Promise<string | undefined> => {
const wallet = getWallet();
if (!wallet.isConnected) return undefined;
const address = wallet.account.address;
try {
const result = await wallet.provider.callContract(
{
contractAddress: token_address,
entrypoint: "balanceOf",
calldata: [BigInt(address).toString()],
},
{ blockIdentifier: "pending" }
);
const balance = composeUInt256(result.result[0], result.result[1]);
return balance;
} catch {
return undefined;
}
};

12. Invoke
mint tokens
const mint = async () => {
const wallet = getWallet();
if (wallet.isConnected) {
const erc20Contract = new Contract(
Erc20Abi as Abi,
"0x06e931246fbae79e0453f780ed58a4cb2ff91f7f1c702705c3c1de41a55d9e72",
wallet.account
);
return erc20Contract.mint(
wallet.account.address,
parseInputAmountToUint256("100")
);
}
};

13. Watch Assets
Add new tokens to the wallet
const watchAsset = async (): Promise<undefined | boolean> => {
const wallet = getWallet();
return !wallet.isConnected
? undefined
: wallet.request({
type: "wallet_watchAsset",
params: {
type: "ERC20", // The asset's interface, i.e. 'ERC20'
options: {
// The hexadecimal Ethereum address of the token contract
address: "0x03e85bfbb8e2a42b7bead9e88e9a1b19dbccf661471061807292120462396ec9",
// A ticker symbol or shorthand, up to 5 alphanumerical characters
symbol: "DAI",
// The number of asset decimals
decimals: 18,
// A string url of the token logo (optional)
image: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIi...",
},
},
});
};

14. Sign Messages
Sign Messages to be used by your contract (i.e. NFT listing for sell)
const sign = async (message: string): Promise<Signature | undefined> => {
const wallet = getWallet();
return !wallet.isConnected
? undefined
: wallet.account.signMessage({
domain: {
name: "StarkNet DApp",
chainId:"SN_GOERLI",
version: "0.0.1",
},
types: {
StarkNetDomain: [
{ name: "name", type: "felt" },
{ name: "chainId", type: "felt" },
{ name: "version", type: "felt" },
],
Message: [{ name: "message", type: "felt" }],
},
primaryType: "Message",
message: { message: "Braavos - first StarkNet mobile wallet" },
});
};

15. 💪 devnet network
⛽ mint Goerli ETH inside
the wallet
🕶 Headless mode!
support on discord
Braavos ❤ devs

16. dApps on mobile ->
web3 mobile gaming!

17. Transactions ->
Explainer

18. THANK YOU