Send regen

netlify.toml

@@ -2,4 +2,4 @@
   environment = { REACT_APP_SANITY_DATASET = "production", REACT_APP_API_URI = "https://regen-registry-server.herokuapp.com", GATSBY_API_URI = "https://regen-registry-server.herokuapp.com", GATSBY_RECAPTCHA_SITE_KEY = "6LeqBFIaAAAAAPfLave4lUtLBKF2WYXinbaLNFqB", GATSBY_INTERCOM_APP_ID = "kn5di10s" }
 
 [context.deploy-preview]
-  environment = { REACT_APP_SANITY_DATASET = "staging", REACT_APP_DEPLOY_PREVIEW = "true", REACT_APP_RECAPTCHA_SITE_KEY = "6LchxlAaAAAAANjtO3w4b5ihVCL87tYfbe0ltzp9", REACT_APP_API_URI = "https://regen-registry-server-staging.herokuapp.com", GATSBY_API_URI = "https://regen-registry-server-staging.herokuapp.com", GATSBY_RECAPTCHA_SITE_KEY = "6LchxlAaAAAAANjtO3w4b5ihVCL87tYfbe0ltzp9", GATSBY_INTERCOM_APP_ID = "kn5di10s", REACT_APP_INTERCOM_APP_ID = "kn5di10s", REACT_APP_LEDGER_CHAIN_ID = "regen-hambach-1", REACT_APP_LEDGER_RPC = "http://147.182.238.116:26657/", REACT_APP_LEDGER_REST_ENDPOINT = "http://147.182.238.116:1317/", REACT_APP_LEDGER_CHAIN_NAME = "Regen - Hambach Testnet" }
+  environment = { REACT_APP_SANITY_DATASET = "staging", REACT_APP_DEPLOY_PREVIEW = "true", REACT_APP_RECAPTCHA_SITE_KEY = "6LchxlAaAAAAANjtO3w4b5ihVCL87tYfbe0ltzp9", REACT_APP_API_URI = "https://regen-registry-server-staging.herokuapp.com", GATSBY_API_URI = "https://regen-registry-server-staging.herokuapp.com", GATSBY_RECAPTCHA_SITE_KEY = "6LchxlAaAAAAANjtO3w4b5ihVCL87tYfbe0ltzp9", GATSBY_INTERCOM_APP_ID = "kn5di10s", REACT_APP_INTERCOM_APP_ID = "kn5di10s", REACT_APP_LEDGER_CHAIN_ID = "regen-hambach-1", REACT_APP_LEDGER_REST_ENDPOINT = "http://147.182.238.116:1317/", REACT_APP_LEDGER_CHAIN_NAME = "Regen - Hambach Testnet" }

web-registry/.env.example

@@ -7,6 +7,5 @@ REACT_APP_INTERCOM_APP_ID=
 REACT_APP_SANITY_DATASET=
 REACT_APP_SANITY_PROJECT_ID=
 REACT_APP_LEDGER_CHAIN_ID=
-REACT_APP_LEDGER_RPC=
 REACT_APP_LEDGER_REST_ENDPOINT=
 REACT_APP_LEDGER_CHAIN_NAME=

web-registry/package.json

@@ -5,6 +5,8 @@
   "dependencies": {
     "@apollo/client": "^3.3.7",
     "@auth0/auth0-react": "^1.2.0",
+    "@cosmjs/launchpad": "^0.26.2",
+    "@cosmjs/stargate": "^0.26.2",
     "@date-io/date-fns": "1.x",
     "@mapbox/togeojson": "^0.16.0",
     "@material-ui/pickers": "^3.3.10",
@@ -70,6 +72,7 @@
     "@graphql-codegen/typescript-graphql-files-modules": "1.18.1",
     "@graphql-codegen/typescript-operations": "^1.18.0",
     "@graphql-codegen/typescript-react-apollo": "2.2.4",
+    "@keplr-wallet/types": "^0.9.0",
     "@storybook/addon-storyshots": "^5.2.8",
     "@types/enzyme": "^3.10.8",
     "@types/enzyme-adapter-react-16": "^1.0.6",

web-registry/src/components/organisms/BuyCreditsModal.tsx

@@ -28,6 +28,7 @@ import Tooltip from 'web-components/lib/components/tooltip/InfoTooltip';
 import { countries } from '../../lib/countries';
 import { Project } from '../../mocks';
 import fallbackImage from '../../assets/time-controlled-rotational-grazing.jpg'; //TODO: more generic fallback
+import { useWallet } from '../../wallet';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -218,6 +219,7 @@ const BuyCreditsModal: React.FC<BuyCreditsModalProps> = ({
   imageStorageBaseUrl,
 }) => {
   const styles = useStyles();
+  const walletContext = useWallet();
   const [stateOptions, setStateOptions] = useState<Option[]>([]);
   const initialCountry = 'US';
 
@@ -245,7 +247,12 @@ const BuyCreditsModal: React.FC<BuyCreditsModalProps> = ({
   });
 
   const submit = async (values: BuyCreditsValues): Promise<void> => {
-    // console.log('submit ', values); TODO: purchase flow
+    const recipient = 'regen18hj7m3skrsrr8lfvwqh66r7zruzdvp6ylwxrx4'; // test account
+    const amount = values.creditCount;
+    if (walletContext.sendTokens) {
+      const txHash = await walletContext.sendTokens(amount, recipient);
+      alert(`TX Hash: ${txHash}`);
+    }
   };
 
   return (

web-registry/src/components/templates/ProjectDetails.tsx

@@ -307,6 +307,14 @@ function ProjectDetails({ projects, project, projectDefault }: ProjectProps): JS
     siteUrl: `${window.location.origin}/registry`,
   };
 
+  // TODO: ### for UI testing. Delete  below before merge! #######
+  project.creditPrice = { unitPrice: 15.12, currency: 'USD' };
+  project.credits = {
+    issued: 10000,
+    purchased: 7500,
+  };
+  // ###### DELETE mock credit issuance data above ####
+
   return (
     <div className={styles.root}>
       <SEO location={location} siteMetadata={siteMetadata} title={project.name} imageUrl={project.image} />

web-registry/src/wallet.tsx

@@ -1,10 +1,6 @@
 import React, { useState, createContext } from 'react';
-
-interface Keplr {
-  enable: (chainId: string) => Promise<void>;
-  experimentalSuggestChain: (chainOptions: object) => Promise<void>;
-  getKey: (chainId: string) => Promise<ChainKey>;
-}
+import { assertIsBroadcastTxSuccess, SigningStargateClient } from '@cosmjs/stargate';
+import { Window as KeplrWindow } from '@keplr-wallet/types';
 
 interface ChainKey {
   name: string;
@@ -21,25 +17,25 @@ interface KeplrWallet {
 }
 
 declare global {
-  interface Window {
-    keplr?: Keplr;
-  }
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface Window extends KeplrWindow {}
 }
 
 type ContextType = {
-  wallet?: any;
+  wallet?: KeplrWallet;
   suggestChain?: () => Promise<void>;
+  sendTokens?: (amount: number, recipient: string) => Promise<string>;
 };
 
 const WalletContext = createContext<ContextType>({});
 
 export const chainId = process.env.REACT_APP_LEDGER_CHAIN_ID;
 const chainName = process.env.REACT_APP_LEDGER_CHAIN_NAME;
-const chainRpc = process.env.REACT_APP_LEDGER_RPC;
+const chainRpc = `${process.env.REACT_APP_API_URI}/ledger`;
 const chainRestEndpoint = process.env.REACT_APP_LEDGER_REST_ENDPOINT;
 
 export const WalletProvider: React.FC = ({ children }) => {
-  const [wallet, setWallet] = useState<KeplrWallet | null>();
+  const [wallet, setWallet] = useState<KeplrWallet | undefined>();
 
   window.onload = async () => {
     if (!wallet) {
@@ -70,7 +66,7 @@ export const WalletProvider: React.FC = ({ children }) => {
   };
 
   const suggestChain = async (): Promise<void> => {
-    if (window.keplr) {
+    if (window.keplr && chainId && chainName && chainRpc && chainRestEndpoint) {
       return window.keplr
         .experimentalSuggestChain({
           // Chain-id of the Regen chain.
@@ -160,12 +156,52 @@ export const WalletProvider: React.FC = ({ children }) => {
           getWallet();
         })
         .catch(() => {
-          setWallet(null);
+          setWallet(undefined);
         });
     }
   };
 
-  return <WalletContext.Provider value={{ wallet, suggestChain }}>{children}</WalletContext.Provider>;
+  const sendTokens = async (amount: number, recipient: string): Promise<string> => {
+    if (chainId && chainRpc) {
+      amount *= 1000000;
+      amount = Math.floor(amount);
+
+      await window?.keplr?.enable(chainId);
+      const offlineSigner = !!window.getOfflineSigner && (await window.getOfflineSigner(chainId));
+
+      if (offlineSigner) {
+        const accounts = await offlineSigner.getAccounts();
+        const client = await SigningStargateClient.connectWithSigner(chainRpc, offlineSigner);
+        const fee = {
+          amount: [
+            {
+              denom: 'uregen',
+              amount: '100',
+            },
+          ],
+          gas: '200000',
+        };
+
+        const coinAmount = [
+          {
+            denom: 'uregen',
+            amount: amount.toString(),
+          },
+        ];
+        const result = await client.sendTokens(accounts[0].address, recipient, coinAmount, fee, 'test');
+        console.log('result', result);
+        assertIsBroadcastTxSuccess(result);
+
+        return result.transactionHash;
+        // TODO: error handling
+      }
+    }
+    return Promise.reject('No chain id or enpoint provided');
+  };
+
+  return (
+    <WalletContext.Provider value={{ wallet, suggestChain, sendTokens }}>{children}</WalletContext.Provider>
+  );
 };
 
 export const useWallet = (): ContextType => React.useContext(WalletContext);