## Vara Network 开发案例
<img src="https://hackmd.io/_uploads/SJ3hDR2zA.png" width="640" alt="GEAR">
### 在 dApp 中集成 WalletConnect 协议
https://docs.walletconnect.com/
---
<img src="https://hackmd.io/_uploads/r1kWq0hMC.png" width="1200" alt="GEAR">
---
<img src="https://hackmd.io/_uploads/H1dtYC2fR.png" width="1200" alt="GEAR">
- https://paritytech.github.io/polkadot-onboard/
- https://github.com/paritytech/polkadot-onboard
---
```
// npm
npm install \
@polkadot-onboard/core\
@polkadot-onboard/injected-wallets\
@polkadot-onboard/wallet-connect\
@polkadot-onboard/react
// yarn
yarn add \
@polkadot-onboard/core\
@polkadot-onboard/injected-wallets\
@polkadot-onboard/wallet-connect\
@polkadot-onboard/react
```
---
```
import { WalletAggregator } from '@polkadot-onboard/core';
import { InjectedWalletProvider } from '@polkadot-onboard/injected-wallets';
import { WalletConnectProvider } from '@polkadot-onboard/wallet-connect';
import { PolkadotWalletsContextProvider, useWallets } from '@polkadot-onboard/react';
const APP_NAME = 'Polkadot wallets example';
const ConnectContainer = () => {
let walletConnectParams = {
projectId: '4fae...',
relayUrl: 'wss://relay.walletconnect.com',
metadata: {
name: 'Polkadot Demo',
description: 'Polkadot Demo',
url: '#',
icons: ['https://walletconnect.com/walletconnect-logo.png'],
},
};
let walletAggregator = new WalletAggregator([
new InjectedWalletProvider({}, APP_NAME),
new WalletConnectProvider(walletConnectParams, APP_NAME)
]);
return (
<PolkadotWalletsContextProvider walletAggregator={walletAggregator}>
/*
all wallets are available inside this context to all children.
const { wallets } = useWallets();
each wallet provides a universal interface including a signer that can be used to sign messages and transactions:
interface BaseWallet {
...
signer: Signer | undefined; // signer is available after connect() is called.
connect: () => Promise<void>;
disconnect: () => Promise<void>;
isConnected: () => boolean;
getAccounts: () => Promise<Account[]>;
...
}
*/
</PolkadotWalletsContextProvider>
);
```
---
替换 chainID 为 Vara Network
```
const ConnectContainer = () => {
let injectedWalletProvider = new InjectedWalletProvider(extensionConfig, APP_NAME);
let walletConnectParams: WalletConnectConfiguration = {
projectId: '4fae85e642724ee66587fa9f37b997e2',
relayUrl: 'wss://relay.walletconnect.com',
metadata: {
name: 'Vara Demo',
description: 'Vara Demo',
url: '#',
icons: ['/images/wallet-connect.svg'],
},
chainIds: [
'polkadot:fe1b4c55fd4d668101126434206571a7', // vara mainnet
],
...
```
https://github.com/ChainAgnostic/namespaces/blob/main/polkadot/caip2.md
---
<img src="https://hackmd.io/_uploads/ryxHnR2GR.png" width="1200" alt="GEAR">
https://gear.sh/#/settings/metadata
---
参考仓库:
- https://github.com/WalletConnect/web-examples
- https://github.com/paritytech/polkadot-onboard
- https://github.com/btwiuse/vara-onboard
---
# Questions
<img src="https://hackmd.io/_uploads/SyK8P72d2.jpg" width="240" alt="GEAR">
<img src="https://hackmd.io/_uploads/By_kgE3_2.png" width="240" alt="VARA">
课后答疑频道: https://t.me/Gear_CN
{"title":"WalletConnect","description":"Integrate WalletConnect into your dApp","image":"https://hackmd.io/_uploads/H1W6IC2M0.png","slideOptions":"{\"theme\":\"dark\",\"spotlight\":{\"enabled\":false},\"width\":1600,\"height\":900}","contributors":"[{\"id\":\"94262fbf-81ae-4ed7-933c-561a41bd977a\",\"add\":6829,\"del\":3223}]"}