Waiting for the mixnet client...
;
+
+ if (!selfAddress) return Connecting...
;
- if (!nym) return waiting for the mixnet client...
;
-
- if (!selfAddress) return connecting...
;
-
+
return (
-
Send messages through the Mixnet
+
Send messages through the Nym mixnet
My self address is: {selfAddress ? selfAddress : "loading"}
- Recipient Address
+ Recipient Address:
setRecipient(e.target.value)}
@@ -130,7 +134,7 @@ export function MixnetClient() {
);
};
-
+
export default function App () {
return (
<>
@@ -138,6 +142,7 @@ export default function App () {
>
)
}
+
```
From 8961d19fb8fd2a32a249aae4fa5635a4db132da8 Mon Sep 17 00:00:00 2001
From: Lorexia
Date: Thu, 5 Oct 2023 13:26:42 +0200
Subject: [PATCH 065/347] Correct typo
---
sdk/typescript/docs/pages/examples/mix-fetch.mdx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/sdk/typescript/docs/pages/examples/mix-fetch.mdx b/sdk/typescript/docs/pages/examples/mix-fetch.mdx
index 7e08663aff..074bdb628a 100644
--- a/sdk/typescript/docs/pages/examples/mix-fetch.mdx
+++ b/sdk/typescript/docs/pages/examples/mix-fetch.mdx
@@ -24,7 +24,7 @@ Read [this article](https://blog.nymtech.net/mixfetch-like-the-fetch-api-but-via
We are currently working on a feature that adds a Secure Websocket (WSS) listener with HTTPS (automatically generated with LetsEncrypt) to Nym's
gateways.
- While we are adding this feature, you can use a gateway that has Caddy providing HTTPS/WSS by adding this to the options when settings up `mixFetch`:
+ While we are adding this feature, you can use a gateway that has Caddy providing HTTPS/WSS by adding this to the options when setting up `mixFetch`:
```ts
From 988fb174fce7a61fda6eed85e1039e19298797f1 Mon Sep 17 00:00:00 2001
From: Lorexia
Date: Thu, 5 Oct 2023 15:25:40 +0200
Subject: [PATCH 066/347] Add details to mixfetch
---
sdk/typescript/docs/pages/examples/mix-fetch.mdx | 9 +++++++--
sdk/typescript/docs/pages/examples/mixnet.mdx | 8 ++++----
.../docs/pages/examples/nym-smart-contracts.mdx | 8 ++++----
3 files changed, 15 insertions(+), 10 deletions(-)
diff --git a/sdk/typescript/docs/pages/examples/mix-fetch.mdx b/sdk/typescript/docs/pages/examples/mix-fetch.mdx
index 074bdb628a..5a0b05b5c9 100644
--- a/sdk/typescript/docs/pages/examples/mix-fetch.mdx
+++ b/sdk/typescript/docs/pages/examples/mix-fetch.mdx
@@ -86,10 +86,13 @@ import { mixFetch } from "@nymproject/mix-fetch-full-fat";
##### Example: using the `mixFetch` client:
- Again, for this example, we will be using the `full-fat` version of the ESM SDK.
+ Again, for this example, we will be using the `full-fat` version of the ESM SDK.
+`Get` and `Post` outputs will be observable from your console.
+
```ts
+import "./App.css";
import { mixFetch, SetupMixFetchOps } from '@nymproject/mix-fetch-full-fat';
import React from 'react';
@@ -120,7 +123,8 @@ const mixFetchOptions: SetupMixFetchOps = {
export function HttpGET() {
const [html, setHtml] = React.useState('')
async function get () {
- const response = await mixFetch('https://nymtech.net', { mode: 'unsafe-ignore-cors' }, mixFetchOptions)
+ //Make sure the URL is whitelisted (see 'standard allowed list') otherwise you will get a network requester filter check error
+ const response = await mixFetch('https://nymtech.net/favicon.svg', { mode: 'unsafe-ignore-cors' }, mixFetchOptions)
const text = await response.text()
console.log('response was', text)
setHtml(html)
@@ -135,6 +139,7 @@ export function HttpGET() {
export function HttpPOST() {
async function post () {
+ //Make sure the URL is whitelisted (see 'standard allowed list') otherwise you will get a network requester filter check error
const apiResponse = await mixFetch('https://postman-echo.com/post', {
method: 'POST',
body: JSON.stringify({ foo: 'bar' }),
diff --git a/sdk/typescript/docs/pages/examples/mixnet.mdx b/sdk/typescript/docs/pages/examples/mixnet.mdx
index 8c173bb412..4c307de480 100644
--- a/sdk/typescript/docs/pages/examples/mixnet.mdx
+++ b/sdk/typescript/docs/pages/examples/mixnet.mdx
@@ -67,24 +67,24 @@ export function MixnetClient() {
const client = await createNymMixnetClient();
setNym(client);
- // start the client and connect to a gateway
+ // Start the client and connect to a gateway
await client?.client.start({
clientId: crypto.randomUUID(),
nymApiUrl,
});
- // check when is connected and set the self address
+ // Check when is connected and set the self address
client?.events.subscribeToConnected((e) => {
const { address } = e.args;
setSelfAddress(address);
});
- // show whether the client is ready or not
+ // Show whether the client is ready or not
client?.events.subscribeToLoaded((e) => {
console.log("Client ready: ", e.args);
});
- // show message payload content when received
+ // Show message payload content when received
client?.events.subscribeToTextMessageReceivedEvent((e) => {
console.log(e.args.payload);
setReceivedMessage(e.args.payload);
diff --git a/sdk/typescript/docs/pages/examples/nym-smart-contracts.mdx b/sdk/typescript/docs/pages/examples/nym-smart-contracts.mdx
index 947ae28bd5..6d3c9e8c21 100644
--- a/sdk/typescript/docs/pages/examples/nym-smart-contracts.mdx
+++ b/sdk/typescript/docs/pages/examples/nym-smart-contracts.mdx
@@ -160,7 +160,7 @@ export default function Exec() {
let delegations: any;
async function ExecuteOnNyx() {
- // cosmos client
+ // Cosmos client
signer = await DirectSecp256k1HdWallet.fromMnemonic(settings.mnemonic, {
prefix: "n",
});
@@ -171,16 +171,16 @@ export default function Exec() {
gasPrice: GasPrice.fromString("0.025unym"),
}
);
- // save globally
+ // Save globally
cosmWasmSigningClient = cosmWasmClient;
- // nym client
+ // Nym client
const mixnetClient = new contracts.Mixnet.MixnetClient(
cosmWasmSigningClient,
settings.address, // sender (that account of the signer)
settings.mixnetContractAddress // contract address (different on mainnet, QA, etc)
);
- // save globally
+ // Save globally
signerMixnetClient = mixnetClient;
}
From 88fa090e23eb68962cb6ad8e9be47dc1948605d1 Mon Sep 17 00:00:00 2001
From: Lorexia
Date: Fri, 6 Oct 2023 11:57:10 +0200
Subject: [PATCH 067/347] Update notes
---
sdk/typescript/docs/pages/examples/nym-smart-contracts.mdx | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/sdk/typescript/docs/pages/examples/nym-smart-contracts.mdx b/sdk/typescript/docs/pages/examples/nym-smart-contracts.mdx
index 6d3c9e8c21..0c9ffb73c1 100644
--- a/sdk/typescript/docs/pages/examples/nym-smart-contracts.mdx
+++ b/sdk/typescript/docs/pages/examples/nym-smart-contracts.mdx
@@ -73,7 +73,7 @@ export default function Mixnodes() {
const cosmWasmClient = await SigningCosmWasmClient.connect("wss://rpc.nymtech.net:443");
const client = new contracts.Mixnet.MixnetQueryClient(
cosmWasmClient,
- "n17srjznxl9dvzdkpwpw24gg668wc73val88a6m5ajg6ankwvz9wtst0cznr" // the mainnet mixnet contract address (which will be different on mainnet, QA, etc)
+ "n17srjznxl9dvzdkpwpw24gg668wc73val88a6m5ajg6ankwvz9wtst0cznr" // The mainnet mixnet contract address (which will be different on mainnet, QA, etc)
);
const result = await client.getMixNodesDetailed({});
setMixnodes(result.nodes)
@@ -177,8 +177,8 @@ export default function Exec() {
// Nym client
const mixnetClient = new contracts.Mixnet.MixnetClient(
cosmWasmSigningClient,
- settings.address, // sender (that account of the signer)
- settings.mixnetContractAddress // contract address (different on mainnet, QA, etc)
+ settings.address, // Sender (that account of the signer)
+ settings.mixnetContractAddress // Contract address (different on mainnet, QA, etc)
);
// Save globally
signerMixnetClient = mixnetClient;
From aec136edc8c9e194993e9239db2ffd610c163e34 Mon Sep 17 00:00:00 2001
From: Lorexia
Date: Fri, 6 Oct 2023 12:33:31 +0200
Subject: [PATCH 068/347] Update CosmosKit tutorial
---
sdk/typescript/docs/pages/examples/cosmos-kit.mdx | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/sdk/typescript/docs/pages/examples/cosmos-kit.mdx b/sdk/typescript/docs/pages/examples/cosmos-kit.mdx
index 9db187dd89..b3e17f0c65 100644
--- a/sdk/typescript/docs/pages/examples/cosmos-kit.mdx
+++ b/sdk/typescript/docs/pages/examples/cosmos-kit.mdx
@@ -27,7 +27,7 @@ Install the required package:
npm install @cosmos-kit/react @cosmos-kit/keplr @cosmos-kit/ledger chain-registry
```
-You need to polyfill some nodejs modules in order to use keplr and ledger wallets by modifying your vite.config.js:
+You need to polyfill some nodejs modules in order to use keplr and ledger wallets by modifying your `vite.config.js` file:
```bash
npm install @esbuild-plugins/node-globals-polyfill
```
@@ -57,7 +57,10 @@ export default defineConfig({
Your components have to be wrapped into a [ChainProvider](https://docs.cosmoskit.com/chain-provider),
in order to use the `useChain('nyx')` hook. The nyx chain is provided in the 'chain-registry' NPM package by default.
+Now, go to the `src` folder and open your `App.tsx` file to replace all the code with the following:
+
```ts
+import "./App.css";
import React from 'react';
import { ChainProvider, useChain } from '@cosmos-kit/react';
import { assets, chains } from 'chain-registry';
From 618d0bdd3490e9bb7e5991a62f6c8062e4930f00 Mon Sep 17 00:00:00 2001
From: Lorexia
Date: Fri, 6 Oct 2023 13:12:32 +0200
Subject: [PATCH 069/347] Add disconnect to cosmoskit example
---
.../docs/pages/examples/cosmos-kit.mdx | 36 +++++++++++--------
1 file changed, 22 insertions(+), 14 deletions(-)
diff --git a/sdk/typescript/docs/pages/examples/cosmos-kit.mdx b/sdk/typescript/docs/pages/examples/cosmos-kit.mdx
index b3e17f0c65..63f34df7a4 100644
--- a/sdk/typescript/docs/pages/examples/cosmos-kit.mdx
+++ b/sdk/typescript/docs/pages/examples/cosmos-kit.mdx
@@ -68,7 +68,7 @@ import { wallets as ledger } from '@cosmos-kit/ledger';
import { wallets as keplr } from '@cosmos-kit/keplr';
import { AminoMsg, makeSignDoc } from '@cosmjs/amino';
import { MsgSend } from 'cosmjs-types/cosmos/bank/v1beta1/tx';
-
+
export const getDoc = (address: string) => {
const chainId = 'nyx';
const msg: AminoMsg = {
@@ -89,35 +89,43 @@ export const getDoc = (address: string) => {
const doc = makeSignDoc([msg], fee, chainId, memo, accountNumber, sequence);
return doc
};
-
+
function MyComponent() {
- const {wallet, address, connect, getOfflineSignerAmino } =
+ const {wallet, address, connect, disconnect, getOfflineSignerAmino } =
useChain('nyx');
-
+
React.useEffect(() => {
connect();
+ disconnect();
}, []);
-
+
const sign = async () => {
if (!address) return
const doc = getDoc(address);
return getOfflineSignerAmino().signAmino(address, doc);
};
-
+
return (
Connected to {wallet?.prettyName}
- { wallet &&
Address: {address}
}
+ {wallet &&
Address: {address}
}
-
{connect()}}>Connect wallet
+ {wallet ? (
+
+ disconnect()}>Disconnect wallet
+
+ ) : (
+
+ connect()}>Connect wallet
+
+ )}
-
);
}
-
+
export default function App() {
const assetsFixedUp = React.useMemo(() => {
const nyx = assets.find((a) => a.chain_name === 'nyx');
@@ -130,7 +138,7 @@ export default function App() {
}
return assets;
}, [assets]);
-
+
return (
c.chain_id === 'nyx')!]}
@@ -140,11 +148,11 @@ export default function App() {
preferredSignType: () => 'amino',
}}
>
-
+
-
+
)
}
-
+
```
From 422b9a3a86fcb32c9c9d0e20bec6e9cfaee37c16 Mon Sep 17 00:00:00 2001
From: Lorexia
Date: Fri, 6 Oct 2023 17:09:40 +0200
Subject: [PATCH 070/347] Add esbuild callout
---
sdk/typescript/docs/pages/bundling/esbuild.mdx | 9 ++++++++-
sdk/typescript/docs/pages/examples/cosmos-kit.mdx | 3 +--
sdk/typescript/docs/pages/playground/cosmos-kit.mdx | 4 ++--
3 files changed, 11 insertions(+), 5 deletions(-)
diff --git a/sdk/typescript/docs/pages/bundling/esbuild.mdx b/sdk/typescript/docs/pages/bundling/esbuild.mdx
index 2732aea63f..c794cf7ce6 100644
--- a/sdk/typescript/docs/pages/bundling/esbuild.mdx
+++ b/sdk/typescript/docs/pages/bundling/esbuild.mdx
@@ -1,3 +1,5 @@
+import { Callout } from 'nextra/components';
+
# Troubleshooting bundling with ESbuild
If you've been following the steps outlined in the Examples section, your development environment should be configured as follows:
@@ -22,4 +24,9 @@ Install the required package:
npm install @nymproject/< PACKAGE_NAME >
```
-By implementing the provided code for the various components in the step-by-step examples section, you should be able to set-up and run your application without encountering any bundling challenges!
\ No newline at end of file
+
+ Remember that the CosmosKit example will require you to make use of polyfills.
+
+
+By implementing the provided code for the various components in the step-by-step examples section, you should be able to set-up and run your application without encountering any bundling challenges!
+
diff --git a/sdk/typescript/docs/pages/examples/cosmos-kit.mdx b/sdk/typescript/docs/pages/examples/cosmos-kit.mdx
index 63f34df7a4..a143a148cf 100644
--- a/sdk/typescript/docs/pages/examples/cosmos-kit.mdx
+++ b/sdk/typescript/docs/pages/examples/cosmos-kit.mdx
@@ -57,7 +57,7 @@ export default defineConfig({
Your components have to be wrapped into a [ChainProvider](https://docs.cosmoskit.com/chain-provider),
in order to use the `useChain('nyx')` hook. The nyx chain is provided in the 'chain-registry' NPM package by default.
-Now, go to the `src` folder and open your `App.tsx` file to replace all the code with the following:
+Now, go to the `src` folder and open your `App.tsx` file to replace all the code with the following, which will allow you to connect and disconnect a Ledger or Keplr wallet to Nyx:
```ts
import "./App.css";
@@ -154,5 +154,4 @@ export default function App() {
)
}
-
```
diff --git a/sdk/typescript/docs/pages/playground/cosmos-kit.mdx b/sdk/typescript/docs/pages/playground/cosmos-kit.mdx
index 9d0044d321..ca200c6f65 100644
--- a/sdk/typescript/docs/pages/playground/cosmos-kit.mdx
+++ b/sdk/typescript/docs/pages/playground/cosmos-kit.mdx
@@ -5,12 +5,12 @@ import FormattedCosmoskitExampleCode from '../../code-examples/cosmoskit-example
# Cosmos Kit
-Below is an example that uses [CosmosKit](https://cosmoskit.com/) to connect your [Keplr wallet](https://www.keplr.app/) or
+Below is an example that uses [CosmosKit](https://cosmoskit.com/) to connect and sign a fake transaction with your [Keplr wallet](https://www.keplr.app/) or
[Ledger hardware wallet](https://www.ledger.com/) to this page:
-Once you connect either Keplr or your hardware Ledger, you can request a fake transaction to be signed. The hash
+Once you connect either Keplr or your hardware Ledger, you can request the fake transaction to be signed. The hash
of the message will be displayed.
From 6619aed3b70876bdc524f6308c475cdb6103b2a3 Mon Sep 17 00:00:00 2001
From: Lorexia
Date: Fri, 6 Oct 2023 17:45:30 +0200
Subject: [PATCH 071/347] Update mixfetch for webpack
---
sdk/typescript/docs/pages/examples/mixnet.mdx | 10 +++++++---
1 file changed, 7 insertions(+), 3 deletions(-)
diff --git a/sdk/typescript/docs/pages/examples/mixnet.mdx b/sdk/typescript/docs/pages/examples/mixnet.mdx
index 4c307de480..d0717a9b84 100644
--- a/sdk/typescript/docs/pages/examples/mixnet.mdx
+++ b/sdk/typescript/docs/pages/examples/mixnet.mdx
@@ -96,7 +96,10 @@ export function MixnetClient() {
await nym?.client.stop();
};
- const send = () => nym.client.send({ payload, recipient });
+ const send = () => {
+ if (!nym || !payload || !recipient) return
+ nym.client.send({ payload, recipient });
+ }
useEffect(() => {
init();
@@ -142,7 +145,8 @@ export default function App () {
>
)
}
-
```
-
+
+ If you experience a Gateway client error and a hard refresh isn't enough, you may need to open your console, go to `Application` and delete the databases under "IndexedDB".
+
From f3dfbeb2b720a461d7d947d17e100329f06a5c07 Mon Sep 17 00:00:00 2001
From: Lorexia
Date: Fri, 6 Oct 2023 20:07:59 +0200
Subject: [PATCH 072/347] Update examples
---
.../docs/pages/bundling/webpack.mdx | 19 +++++++++++++++----
.../docs/pages/examples/cosmos-kit.mdx | 11 ++++++-----
2 files changed, 21 insertions(+), 9 deletions(-)
diff --git a/sdk/typescript/docs/pages/bundling/webpack.mdx b/sdk/typescript/docs/pages/bundling/webpack.mdx
index d52815f95f..12878675e9 100644
--- a/sdk/typescript/docs/pages/bundling/webpack.mdx
+++ b/sdk/typescript/docs/pages/bundling/webpack.mdx
@@ -1,9 +1,10 @@
+import { Callout } from 'nextra/components';
# Troubleshooting bundling with Webpack
## Webpack > 5 ESM
-You´ll need the following rule in your `webpack.config.js` above version 5:
+For any project using Webpack, you´ll need the following rule in your `webpack.config.js` above version 5:
```json
{
test: /\.(m?js)$/,
@@ -15,20 +16,30 @@ You´ll need the following rule in your `webpack.config.js` above version 5:
### Create-react-app
-Create-react-app doesn´t allow you access to the Webpack config without ejecting, which you override as follows:
+#### General cases
+
+If you wish to use Webpack for your app with the code provided in the step-by-step examples section, you'll need to:
```bash
npx create-react-app nymapp --template typescript
cd nymapp
```
+You'll then need to install the needed dependencies, head to your app's `App.tsx` file and paste the code provided in the step-by-step section.
-#### Install contract-clients dependencies
+#### Contract client
+
+ Using webpack, the `Contract client` for querying or executing might need polyfills. As create-react-app doesn´t allow you access to the Webpack config without ejecting, you'll overwrite it as follow:
+
+
+##### Install contract-clients dependencies
```bash
npm install @nymproject/contract-clients @cosmjs/cosmwasm-stargate @cosmjs/proto-signing
```
-#### Polyfilling
+Head to you app's `App.tsx` file and replace the code by the one provided in the step-by-step examples section.
+
+##### Polyfilling
Copy the following to your terminal and run:
diff --git a/sdk/typescript/docs/pages/examples/cosmos-kit.mdx b/sdk/typescript/docs/pages/examples/cosmos-kit.mdx
index a143a148cf..c25403aa7f 100644
--- a/sdk/typescript/docs/pages/examples/cosmos-kit.mdx
+++ b/sdk/typescript/docs/pages/examples/cosmos-kit.mdx
@@ -106,12 +106,13 @@ function MyComponent() {
};
return (
-
+
- Connected to {wallet?.prettyName}
-
-
- {wallet &&
Address: {address}
}
+ {wallet &&
+
+
Connected to {wallet?.prettyName}
+
Address: {address}
+
}
{wallet ? (
From 4adf922b3fd0480e13cebcd445a253d00a66a936 Mon Sep 17 00:00:00 2001
From: Gala
Date: Thu, 5 Oct 2023 19:11:10 +0200
Subject: [PATCH 073/347] adding a react context... imposible to avoid it at
the end : (
---
.../docs/components/context/wallet.tsx | 171 +++++++++++
sdk/typescript/docs/components/wallet.tsx | 286 ++----------------
.../docs/components/wallet/connect.tsx | 127 ++++----
.../docs/components/wallet/delegations.tsx | 266 ++++++++++------
.../docs/components/wallet/sendTokens.tsx | 101 +++++--
5 files changed, 501 insertions(+), 450 deletions(-)
create mode 100644 sdk/typescript/docs/components/context/wallet.tsx
diff --git a/sdk/typescript/docs/components/context/wallet.tsx b/sdk/typescript/docs/components/context/wallet.tsx
new file mode 100644
index 0000000000..0e63f70905
--- /dev/null
+++ b/sdk/typescript/docs/components/context/wallet.tsx
@@ -0,0 +1,171 @@
+import * as React from 'react';
+import { contracts } from '@nymproject/contract-clients';
+import { SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate';
+import { DirectSecp256k1HdWallet } from '@cosmjs/proto-signing';
+import { Coin, GasPrice } from '@cosmjs/stargate';
+import { settings } from '../client';
+
+const signerAccount = async (mnemonic: string) => {
+ // create a wallet to sign transactions with the mnemonic
+ const signer = await DirectSecp256k1HdWallet.fromMnemonic(mnemonic, {
+ prefix: 'n',
+ });
+
+ return signer;
+};
+
+const fetchSignerCosmosWasmClient = async (mnemonic: string) => {
+ const signer = await signerAccount(mnemonic);
+
+ // create a signing client we don't need to set the gas price conversion for queries
+ const cosmWasmClient = await SigningCosmWasmClient.connectWithSigner(settings.url, signer, {
+ gasPrice: GasPrice.fromString('0.025unym'),
+ });
+
+ return cosmWasmClient;
+};
+
+const fetchSignerClient = async (mnemonic) => {
+ const signer = await signerAccount(mnemonic);
+
+ // create a signing client we don't need to set the gas price conversion for queries
+ // if you want to connect without signer you'd write ".connect" and "url" as param
+ const cosmWasmClient = await SigningCosmWasmClient.connectWithSigner(settings.url, signer, {
+ gasPrice: GasPrice.fromString('0.025unym'),
+ });
+
+ /** create a mixnet contract client
+ * @param cosmWasmClient the client to use for signing and querying
+ * @param settings.address the bech32 address prefix (human readable part)
+ * @param settings.mixnetContractAddress the bech32 address prefix (human readable part)
+ * @returns the client in MixnetClient form
+ */
+
+ const mixnetClient = new contracts.Mixnet.MixnetClient(
+ cosmWasmClient,
+ settings.address, // sender (that account of the signer)
+ settings.mixnetContractAddress, // contract address (different on mainnet, QA, etc)
+ );
+
+ return mixnetClient;
+};
+
+interface ApiState {
+ isLoading: boolean;
+ data?: RESPONSE;
+ error?: Error;
+}
+
+/**
+ * This context provides the state for wallet.
+ */
+
+interface WalletState {
+ cosmWasmSigner?: { getAccounts: () => void };
+ cosmWasmSignerClient?: { getBalance: (account: string, denom: string) => Coin };
+ nymWasmSignerClient?: ApiState;
+ accountLoading: boolean;
+ account: string;
+ clientsAreLoading: boolean;
+ setConnectWithMnemonic?: (value: string) => void;
+ balance?: Coin;
+ balanceLoading: boolean;
+}
+
+export const WalletContext = React.createContext({
+ accountLoading: false,
+ account: '',
+ clientsAreLoading: false,
+ balanceLoading: false,
+});
+
+export const useWalletContext = (): React.ContextType =>
+ React.useContext(WalletContext);
+
+export const WalletContextProvider = ({ children }: { children: JSX.Element }) => {
+ // wallet mnemonic
+ const [connectWithMnemonic, setConnectWithMnemonic] = React.useState();
+ const [accountLoading, setAccountLoading] = React.useState(false);
+ const [account, setAccount] = React.useState();
+ const [clientsAreLoading, setClientsAreLoading] = React.useState(false);
+ const [cosmWasmSignerClient, setCosmWasmSignerClient] = React.useState();
+ const [nymWasmSignerClient, setNymWasmSignerClient] = React.useState();
+ const [balance, setBalance] = React.useState();
+ const [balanceLoading, setBalanceLoading] = React.useState(false);
+
+ const getSignerAccount = async () => {
+ console.log('getSignerAccount');
+ setAccountLoading(true);
+ try {
+ const signer = await signerAccount(connectWithMnemonic);
+ const accounts = await signer.getAccounts();
+ if (accounts[0]) {
+ setAccount(accounts[0].address);
+ }
+ } catch (error) {
+ console.error(error);
+ }
+ setAccountLoading(false);
+ };
+ const getClients = async () => {
+ setClientsAreLoading(true);
+ try {
+ setCosmWasmSignerClient(await fetchSignerCosmosWasmClient(connectWithMnemonic));
+ setNymWasmSignerClient(await fetchSignerClient(connectWithMnemonic));
+ } catch (error) {
+ console.error(error);
+ }
+ setClientsAreLoading(false);
+ };
+
+ const getBalance = React.useCallback(async () => {
+ setBalanceLoading(true);
+ try {
+ const newBalance = await cosmWasmSignerClient?.getBalance(account, 'unym');
+ setBalance(newBalance);
+ } catch (error) {
+ console.error(error);
+ }
+ setBalanceLoading(false);
+ }, [account, cosmWasmSignerClient]);
+
+ React.useEffect(() => {
+ if (connectWithMnemonic) {
+ // when the mnemonic changes, remove all previous data
+ Promise.all([getSignerAccount(), getClients()]);
+ }
+ }, [connectWithMnemonic]);
+
+ React.useEffect(() => {
+ if (account && cosmWasmSignerClient) {
+ if (!balance) {
+ getBalance();
+ }
+ }
+ }, [account, cosmWasmSignerClient, balance, getBalance]);
+
+ const state = React.useMemo(
+ () => ({
+ accountLoading,
+ account,
+ clientsAreLoading,
+ cosmWasmSignerClient,
+ nymWasmSignerClient,
+ setConnectWithMnemonic,
+ balance,
+ balanceLoading,
+ }),
+ [
+ accountLoading,
+ account,
+ clientsAreLoading,
+ cosmWasmSignerClient,
+ nymWasmSignerClient,
+ setConnectWithMnemonic,
+ balance,
+ balanceLoading,
+ ],
+ );
+
+ return {children} ;
+};
diff --git a/sdk/typescript/docs/components/wallet.tsx b/sdk/typescript/docs/components/wallet.tsx
index 3b8be9b787..4ec2d7cb09 100644
--- a/sdk/typescript/docs/components/wallet.tsx
+++ b/sdk/typescript/docs/components/wallet.tsx
@@ -1,283 +1,45 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { contracts } from '@nymproject/contract-clients';
-import { SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate';
-import { DirectSecp256k1HdWallet } from '@cosmjs/proto-signing';
-import { Coin, GasPrice } from '@cosmjs/stargate';
+import React, { useCallback, useEffect, useState, createContext } from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { settings } from './client';
import { ConnectWallet } from './wallet/connect';
import { SendTokes } from './wallet/sendTokens';
import { Delegations } from './wallet/delegations';
+import { WalletContextProvider } from './context/wallet';
-const signerAccount = async (mnemonic) => {
- // create a wallet to sign transactions with the mnemonic
- const signer = await DirectSecp256k1HdWallet.fromMnemonic(mnemonic, {
- prefix: 'n',
- });
-
- return signer;
-};
-
-const fetchSignerCosmosWasmClient = async (mnemonic: string) => {
- const signer = await signerAccount(mnemonic);
-
- // create a signing client we don't need to set the gas price conversion for queries
- const cosmWasmClient = await SigningCosmWasmClient.connectWithSigner(settings.url, signer, {
- gasPrice: GasPrice.fromString('0.025unym'),
- });
-
- return cosmWasmClient;
-};
-
-const fetchSignerClient = async (mnemonic) => {
- const signer = await signerAccount(mnemonic);
-
- // create a signing client we don't need to set the gas price conversion for queries
- // if you want to connect without signer you'd write ".connect" and "url" as param
- const cosmWasmClient = await SigningCosmWasmClient.connectWithSigner(settings.url, signer, {
- gasPrice: GasPrice.fromString('0.025unym'),
- });
-
- /** create a mixnet contract client
- * @param cosmWasmClient the client to use for signing and querying
- * @param settings.address the bech32 address prefix (human readable part)
- * @param settings.mixnetContractAddress the bech32 address prefix (human readable part)
- * @returns the client in MixnetClient form
- */
-
- const mixnetClient = new contracts.Mixnet.MixnetClient(
- cosmWasmClient,
- settings.address, // sender (that account of the signer)
- settings.mixnetContractAddress, // contract address (different on mainnet, QA, etc)
- );
-
- return mixnetClient;
-};
export const Wallet = ({ type }: { type: 'connect' | 'sendTokens' | 'delegations' }) => {
- const [mnemonic, setMnemonic] = useState();
const [signerCosmosWasmClient, setSignerCosmosWasmClient] = useState();
const [signerClient, setSignerClient] = useState();
const [account, setAccount] = useState();
- const [accountLoading, setAccountLoading] = useState(false);
- const [clientLoading, setClientLoading] = useState(false);
- const [balance, setBalance] = useState();
- const [balanceLoading, setBalanceLoading] = useState(false);
- const [log, setLog] = useState([]);
- const [sendingTokensLoader, setSendingTokensLoader] = useState(false);
- const [delegations, setDelegations] = useState();
- const [recipientAddress, setRecipientAddress] = useState