feat: add and update api examples and demo (#82)

* feat: add and update api examples and demo * add cosmos message example * add regen message example * fix order and example * fix regen example and add both example * add links and fix imports * add msg multple example and link * add msg multple example and link * Apply suggestions from code review * Apply suggestions from code review * move example function within useEffect
regen-network · Jul 12, 2023 · f2cfd92 · f2cfd92
1 parent ef4fd28
commit f2cfd92
Show file tree

Hide file tree

Showing 12 changed files with 692 additions and 21 deletions.
diff --git a/packages/api-demo/package.json b/packages/api-demo/package.json
@@ -7,6 +7,7 @@
 	"private": true,
 	"repository": "https://github.com/regen-network/regen-js",
 	"dependencies": {
+		"@keplr-wallet/types": "^0.12.15",
 		"@regen-network/api": "^1.0.0-alpha3",
 		"@testing-library/jest-dom": "^5.16.5",
 		"@testing-library/react": "^14.0.0",

diff --git a/packages/api-demo/src/App.tsx b/packages/api-demo/src/App.tsx
@@ -2,6 +2,13 @@ import { cosmos } from '@regen-network/api';
 import React, { useEffect, useState } from 'react';
 
 import { MyBalance } from './MyBalance';
+import { LCDCosmos } from './examples/LCDCosmos';
+import { LCDRegen } from './examples/LCDRegen';
+import { MsgCosmos } from './examples/MsgCosmos';
+import { MsgMultiple } from './examples/MsgMultiple';
+import { MsgRegen } from './examples/MsgRegen';
+import { RPCCosmos } from './examples/RPCCosmos';
+import { RPCRegen } from './examples/RPCRegen';
 
 const REGEN_LOCAL_REST_ENDPOINT = 'http://localhost:1317';
 const REGEN_MAINNET_REST_ENDPOINT = 'http://regen.regen.network:1317';
@@ -66,6 +73,16 @@ export function App(): React.ReactElement {
           {error?.message ? error?.message : client ? 'ok' : 'loading...'}
         </p>
       </div>
+      <div>
+        <h2>{'README Examples'}</h2>
+        <LCDCosmos />
+        <LCDRegen />
+        <RPCCosmos />
+        <RPCRegen />
+        <MsgCosmos />
+        <MsgRegen />
+        <MsgMultiple />
+      </div>
     </div>
   );
 }
diff --git a/packages/api-demo/src/examples/LCDCosmos.tsx b/packages/api-demo/src/examples/LCDCosmos.tsx
@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from 'react';
+
+import { cosmos } from '@regen-network/api';
+import { QueryAllBalancesResponseSDKType } from '@regen-network/api/types/codegen/cosmos/bank/v1beta1/query';
+import { PageRequest } from '@regen-network/api/types/codegen/helpers';
+
+export function LCDCosmos(): React.ReactElement {
+  const [result, setResult] = useState<
+    QueryAllBalancesResponseSDKType | undefined
+  >(undefined);
+  const [error, setError] = useState<{ message: string } | undefined>(
+    undefined,
+  );
+
+  useEffect(() => {
+    const executeExample = async (): Promise<void> => {
+      const client = await cosmos.ClientFactory.createLCDClient({
+        restEndpoint: 'http://redwood.regen.network:1317',
+      });
+
+      await client.cosmos.bank.v1beta1
+        .allBalances({
+          address: 'regen1df675r9vnf7pdedn4sf26svdsem3ugavgxmy46',
+          pagination: { countTotal: true } as PageRequest,
+        })
+        .then(setResult)
+        .catch(setError);
+    };
+
+    if (!result && !error) executeExample();
+  }, [result, error]);
+
+  return (
+    <div>
+      <h3>{'LCD Queries > cosmos bank balances'}</h3>
+      {'Response: '}
+      <code>
+        {result ? (
+          JSON.stringify(result)
+        ) : error ? (
+          <span>{error.message}</span>
+        ) : (
+          '...'
+        )}
+      </code>
+    </div>
+  );
+}
diff --git a/packages/api-demo/src/examples/LCDRegen.tsx b/packages/api-demo/src/examples/LCDRegen.tsx
@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from 'react';
+
+import { regen } from '@regen-network/api';
+import { QueryProjectsByClassResponseSDKType } from '@regen-network/api/types/codegen/regen/ecocredit/v1/query';
+import { PageRequest } from '@regen-network/api/types/codegen/helpers';
+
+export function LCDRegen(): React.ReactElement {
+  const [result, setResult] = useState<
+    QueryProjectsByClassResponseSDKType | undefined
+  >(undefined);
+  const [error, setError] = useState<{ message: string } | undefined>(
+    undefined,
+  );
+
+  useEffect(() => {
+    const executeExample = async (): Promise<void> => {
+      const client = await regen.ClientFactory.createLCDClient({
+        restEndpoint: 'http://redwood.regen.network:1317',
+      });
+
+      await client.regen.ecocredit.v1
+        .projectsByClass({
+          classId: 'C01',
+          pagination: { countTotal: true } as PageRequest,
+        })
+        .then(setResult)
+        .catch(setError);
+    };
+
+    if (!result && !error) executeExample();
+  }, [result, error]);
+
+  return (
+    <div>
+      <h3>{'LCD Queries > regen ecocredit projects'}</h3>
+      {'Response: '}
+      <code>
+        {result ? (
+          JSON.stringify(result)
+        ) : error ? (
+          <span>{error.message}</span>
+        ) : (
+          '...'
+        )}
+      </code>
+    </div>
+  );
+}
diff --git a/packages/api-demo/src/examples/MsgCosmos.tsx b/packages/api-demo/src/examples/MsgCosmos.tsx
@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+
+import { cosmos, getSigningCosmosClient } from '@regen-network/api';
+
+export function MsgCosmos(): React.ReactElement {
+  const [result, setResult] = useState<any | undefined>(undefined);
+  const [error, setError] = useState<{ message: string } | undefined>(
+    undefined,
+  );
+
+  const executeExample = async (): Promise<void> => {
+    // NOTE: make sure you have a src/global.d.ts file within your project
+    // that includes "interface Window extends KeplrWindow"
+    const { keplr } = window;
+
+    if (!keplr) {
+      setError({ message: 'keplr not found' });
+      return; // exit with error
+    }
+
+    // get offline signer from keplr wallet
+    const offlineSigner = keplr.getOfflineSigner('regen-redwood-1');
+
+    // get first account (the active account) from offline signer
+    const [account] = await offlineSigner.getAccounts();
+
+    // initialize signing client for signing transactions
+    const signingClient = await getSigningCosmosClient({
+      rpcEndpoint: 'http://redwood.regen.network:26657',
+      signer: offlineSigner,
+    });
+
+    // compose message using cosmos client from @regen-network/api
+    const msg = cosmos.bank.v1beta1.MessageComposer.withTypeUrl.send({
+      amount: [
+        {
+          denom: 'uregen',
+          amount: '10000',
+        },
+      ],
+      toAddress: 'regen1df675r9vnf7pdedn4sf26svdsem3ugavgxmy46',
+      fromAddress: account.address,
+    });
+
+    // define default fee
+    const fee = {
+      amount: [
+        {
+          denom: 'uregen',
+          amount: '5000',
+        },
+      ],
+      gas: '100000',
+    };
+
+    // sign and broadcast transaction that includes message
+    await signingClient
+      .signAndBroadcast(account.address, [msg], fee)
+      .then(setResult)
+      .catch(setError);
+  };
+
+  return (
+    <div>
+      <h3>{'Msg Cosmos > cosmos bank send'}</h3>
+      <div>
+        <button onClick={executeExample}>{'execute'}</button>
+      </div>
+      <br />
+      {'Response: '}
+      <code>
+        {result ? (
+          JSON.stringify(result)
+        ) : error ? (
+          <span>{error.message}</span>
+        ) : (
+          '...'
+        )}
+      </code>
+    </div>
+  );
+}
diff --git a/packages/api-demo/src/examples/MsgMultiple.tsx b/packages/api-demo/src/examples/MsgMultiple.tsx
@@ -0,0 +1,114 @@
+import React, { useState } from 'react';
+
+import { Registry } from '@cosmjs/proto-signing';
+import { AminoTypes, SigningStargateClient } from '@cosmjs/stargate';
+import {
+  cosmos,
+  cosmosAminoConverters,
+  cosmosProtoRegistry,
+  regen,
+  regenAminoConverters,
+  regenProtoRegistry,
+} from '@regen-network/api';
+
+export function MsgMultiple(): React.ReactElement {
+  const [result, setResult] = useState<any | undefined>(undefined);
+  const [error, setError] = useState<{ message: string } | undefined>(
+    undefined,
+  );
+
+  const executeExample = async (): Promise<void> => {
+    // NOTE: make sure you have a src/global.d.ts file within your project
+    // that includes "interface Window extends KeplrWindow"
+    const { keplr } = window;
+
+    if (!keplr) {
+      setError({ message: 'keplr not found' });
+      return; // exit with error
+    }
+
+    // get offline signer from keplr wallet
+    const offlineSigner = keplr.getOfflineSigner('regen-redwood-1');
+
+    // get first account (the active account) from offline signer
+    const [account] = await offlineSigner.getAccounts();
+
+    // declare registry and include both cosmos and regen protobuf types
+    const registry = new Registry([
+      ...cosmosProtoRegistry,
+      ...regenProtoRegistry,
+    ]);
+
+    // initialize signing client and include both cosmos and regen amino types
+    const signingClient = await SigningStargateClient.connectWithSigner(
+      'http://redwood.regen.network:26657',
+      offlineSigner,
+      {
+        registry,
+        aminoTypes: new AminoTypes({
+          ...cosmosAminoConverters,
+          ...regenAminoConverters,
+        }),
+      },
+    );
+
+    // compose message using cosmos client from @regen-network/api
+    const msg1 = cosmos.bank.v1beta1.MessageComposer.withTypeUrl.send({
+      amount: [
+        {
+          denom: 'uregen',
+          amount: '10000',
+        },
+      ],
+      toAddress: 'regen1df675r9vnf7pdedn4sf26svdsem3ugavgxmy46',
+      fromAddress: account.address,
+    });
+
+    // compose message using regen client from @regen-network/api
+    const msg2 = regen.ecocredit.v1.MessageComposer.withTypeUrl.createProject({
+      admin: account.address,
+      classId: 'C01',
+      metadata:
+        'regen:13toVgf5UjYBz6J29x28pLQyjKz5FpcW3f4bT5uRKGxGREWGKjEdXYG.rdf',
+      jurisdiction: 'US-WA',
+      referenceId: 'ABC-123',
+    });
+
+    // define default fee
+    const fee = {
+      amount: [
+        {
+          denom: 'uregen',
+          amount: '5000',
+        },
+      ],
+      gas: '100000',
+    };
+
+    // sign and broadcast transaction that includes both messages
+    await signingClient
+      .signAndBroadcast(account.address, [msg1, msg2], fee)
+      .then(setResult)
+      .catch(setError);
+  };
+
+  return (
+    <div>
+      <h3>{'Msg Multiple > cosmos and regen messages'}</h3>
+      <div>
+        <button onClick={executeExample}>{'execute'}</button>
+      </div>
+      <br />
+      {'Response: '}
+      <code>
+        {result ? (
+          JSON.stringify(result)
+        ) : error ? (
+          <span>{error.message}</span>
+        ) : (
+          '...'
+        )}
+      </code>
+    </div>
+  );
+}