Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: update network #137

Merged
merged 2 commits into from
Jul 3, 2023
Merged

chore: update network #137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3e8018a
chore: update network
DanielZhangReal Jun 28, 2023
2f680ac
fix: update extension demo
DanielZhangReal Jun 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 70 additions & 22 deletions manta-js/examples/extension-example/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,32 @@ import { ApiPromise, HttpProvider, WsProvider } from '@polkadot/api';
import BigNumber from 'bignumber.js';
import { useCallback, useEffect, useMemo, useState } from 'react';

import { Injected, InjectedWeb3, PrivateWalletStateInfo } from './interfaces';
import {
Injected,
InjectedWeb3,
PrivateWalletStateInfo,
Network,
} from './interfaces';

const networkConfigs: Record<
string,
{ rpc: string | string[]; assetName: string; decimals: number }
> = {
Manta: {
rpc: ['https://c1.manta.seabird.systems/rpc'],
rpc: ['https://ws.manta.systems'],
assetName: 'MANTA',
decimals: 18
},
Dolphin: {
rpc: ['https://calamari.seabird.systems/rpc'],
assetName: 'DOL',
decimals: 12,
decimals: 18,
},
Calamari: {
rpc: ['https://calamari.systems/rpc'],
rpc: ['https://ws.calamari.systems'],
assetName: 'KMA',
decimals: 12,
},
Dolphin: {
rpc: ['https://ws.calamari.seabird.systems'],
assetName: 'DOL',
decimals: 12,
},
};

const assetId = '1';
Expand All @@ -36,8 +41,9 @@ let isConnecting = false;

export default function App() {
const [isInjected] = useState(!!injectedWeb3);
const [isExtensionActive, setIsExtensionActive] = useState(false);
const [injected, setInjected] = useState<Injected | null>(null);
const [network, setNetwork] = useState<string>('');
const [network, setNetwork] = useState<Network | undefined>(undefined);
const [api, setApi] = useState<ApiPromise | null>(null);
const [publicAddress, setPublicAddress] = useState<string | null>(null);
const [zkAddress, setZkAddress] = useState<string | null>(null);
Expand All @@ -63,10 +69,20 @@ export default function App() {
if (!injected) {
return;
}
setIsExtensionActive(true);
setInjected(injected);
injected.on('connect', () => {
setIsExtensionActive(true);
});
injected.on('disconnect', () => {
setIsExtensionActive(false);
});
}, [setInjected]);

const currentNetwork = useMemo(() => {
if (!network) {
return null;
}
return networkConfigs[network];
}, [network]);

Expand All @@ -75,7 +91,7 @@ export default function App() {
}, [injected]);

const fetchBalance = useCallback(async () => {
if (!stateInfo?.isWalletReady) {
if (!stateInfo?.isWalletReady || !network || !currentNetwork) {
return null;
}
const balance = await injected?.privateWallet.getZkBalance({
Expand All @@ -88,10 +104,10 @@ export default function App() {
return new BigNumber(balance)
.div(new BigNumber(10).pow(currentNetwork.decimals))
.toFixed();
}, [injected, network]);
}, [injected, network, stateInfo?.isWalletReady]);

const fetchPublicBalance = useCallback(async () => {
if (!api) {
if (!api || !currentNetwork) {
return;
}
const accountInfo = await api.query.system.account(publicAddress);
Expand Down Expand Up @@ -145,6 +161,9 @@ export default function App() {
setResult('publicAddress is empty');
return;
}
if (!network) {
return;
}
try {
setOperating(true);
setResult('Signing');
Expand Down Expand Up @@ -200,6 +219,9 @@ export default function App() {
);

const toPrivateTransaction = useCallback(async () => {
if (!currentNetwork || !network) {
return;
}
sendTransaction(async () => {
const response = await injected?.privateWallet.toPrivateBuild({
assetId,
Expand All @@ -222,6 +244,9 @@ export default function App() {
]);

const privateTransferTransaction = useCallback(async () => {
if (!currentNetwork || !network) {
return;
}
sendTransaction(async () => {
const response = await injected?.privateWallet.privateTransferBuild({
assetId,
Expand All @@ -246,6 +271,9 @@ export default function App() {
]);

const toPublicTransaction = useCallback(async () => {
if (!currentNetwork || !network) {
return;
}
sendTransaction(async () => {
const response = await injected?.privateWallet.toPublicBuild({
assetId,
Expand All @@ -268,6 +296,9 @@ export default function App() {
]);

const multiSbtPostBuildTransition = useCallback(async () => {
if (!network) {
return;
}
sendTransaction(async () => {
return injected?.privateWallet.multiSbtPostBuild({
sbtInfoList: [
Expand All @@ -280,6 +311,9 @@ export default function App() {
}, [startAssetId, injected, sendTransaction, network]);

const getSbtIdentityProof = useCallback(async () => {
if (!network) {
return;
}
await sendTransaction(async () => {
return injected?.privateWallet.getSbtIdentityProof({
virtualAsset,
Expand Down Expand Up @@ -338,7 +372,12 @@ export default function App() {
: currentNetwork.rpc;
const provider = new HttpProvider(rpcUrl);
// const provider = new WsProvider(rpcUrl);
setApi(null);
setApi((api) => {
if (api) {
api.disconnect();
}
return null;
});
const api = await ApiPromise.create({ provider });
console.log(`[connected rpcUrl]: ${rpcUrl}`);
api.setSigner(injected.signer);
Expand All @@ -353,7 +392,7 @@ export default function App() {
return;
}
updateBalance();
}, [updateBalance, api]);
}, [updateBalance, api, stateInfo?.isWalletReady]);

// auto connect wallet
useEffect(() => {
Expand Down Expand Up @@ -385,11 +424,17 @@ export default function App() {
Address)
</p>
<p>
<strong className="address">{zkAddress}</strong>(zKAddress)
<strong className="address">{zkAddress}</strong>(zkAddress)
</p>
</fieldset>
<fieldset>
<legend>Extension State</legend>
<p>
isActive: <strong>{String(isExtensionActive)}</strong>
</p>
</fieldset>
<fieldset>
<legend>Wallet State</legend>
<legend>Private Wallet State</legend>
{stateInfo &&
Object.keys(stateInfo).map((key: string) => (
<p key={key}>
Expand All @@ -400,11 +445,14 @@ export default function App() {
</fieldset>
<fieldset>
<legend>Balance</legend>
<p style={{ marginBottom: 14 }}>
Network: <strong>{network}</strong>
</p>
<p>
{currentNetwork.assetName}: <strong>{publicBalance}</strong>
{currentNetwork?.assetName}: <strong>{publicBalance}</strong>
</p>
<p>
zk{currentNetwork.assetName}: <strong>{balance}</strong>
zk{currentNetwork?.assetName}: <strong>{balance}</strong>
</p>
</fieldset>
<fieldset>
Expand All @@ -417,7 +465,7 @@ export default function App() {
setToPrivateAmount(e.target.value);
}}
/>
<i>{currentNetwork.assetName}</i>
<i>{currentNetwork?.assetName}</i>
</span>
<button
type="button"
Expand All @@ -435,7 +483,7 @@ export default function App() {
setPrivateTransferAmount(e.target.value);
}}
/>
<i>zk{currentNetwork.assetName}</i>
<i>zk{currentNetwork?.assetName}</i>
</span>
<button
type="button"
Expand All @@ -462,7 +510,7 @@ export default function App() {
setToPublicAmount(e.target.value);
}}
/>
<i>zk{currentNetwork.assetName}</i>
<i>zk{currentNetwork?.assetName}</i>
</span>
<button
type="button"
Expand Down
1 change: 1 addition & 0 deletions manta-js/examples/extension-example/src/interfaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ declare global {

export interface Injected extends PolkadotInjected {
privateWallet: InjectedPrivateWallet;
on(eventName: string | symbol, listener: (...args: any[]) => void): this;
}

export type InjectedWeb3 = {
Expand Down