Stargate with musselnet

packages/cw20-wallet/package.json

@@ -10,19 +10,21 @@
     "last 2 safari versions"
   ],
   "scripts": {
-    "start": "craco start",
-    "start:heldernet": "REACT_APP_NETWORK=heldernet craco start",
-    "build": "REACT_APP_NETWORK=heldernet craco build",
+    "start:base": "craco start",
+    "start:local": "REACT_APP_NETWORK=local yarn start:base",
+    "start:musselnet": "REACT_APP_NETWORK=musselnet yarn start:base",
+    "start": "yarn start:musselnet",
+    "build": "REACT_APP_NETWORK=musselnet craco build",
     "test": "craco test"
   },
   "dependencies": {
     "@ant-design/icons": "^4.2.2",
     "@cosmicdapp/design": "^0.4.5",
     "@cosmicdapp/logic": "^0.4.5",
-    "@cosmjs/cosmwasm": "^0.23.1",
-    "@cosmjs/crypto": "^0.23.1",
-    "@cosmjs/launchpad": "^0.23.1",
-    "@cosmjs/math": "^0.23.1",
+    "@cosmjs/cosmwasm": "^0.24.0-alpha.18",
+    "@cosmjs/crypto": "^0.24.0-alpha.18",
+    "@cosmjs/launchpad": "^0.24.0-alpha.18",
+    "@cosmjs/math": "^0.24.0-alpha.18",
     "antd": "^4.5.4",
     "clipboard-copy": "^3.1.0",
     "formik": "^2.1.5",

packages/cw20-wallet/src/App/index.tsx

@@ -1,11 +1,5 @@
 import { GlobalStyle } from "@cosmicdapp/design";
-import {
-  AccountProvider,
-  ContractsProvider,
-  ErrorProvider,
-  ProtectedSwitch,
-  SdkProvider,
-} from "@cosmicdapp/logic";
+import { ContractsProvider, ErrorProvider, ProtectedSwitch, SdkProvider } from "@cosmicdapp/logic";
 import React from "react";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import { config } from "../config";
@@ -34,43 +28,41 @@ function App(): JSX.Element {
   return (
     <ErrorProvider>
       <SdkProvider config={config}>
-        <AccountProvider>
-          <ContractsProvider>
-            <GlobalStyle />
-            <Router basename={process.env.PUBLIC_URL}>
-              <Switch>
-                <Route exact path="/" component={Login} />
-                <Route exact path={pathLogin} component={Login} />
-                <ProtectedSwitch authPath={pathLogin}>
-                  <Route exact path={pathTokens} component={Tokens} />
-                  <Route exact path={`${pathTokensAdd}/:codeId?`} component={TokensAdd} />
-                  <Route
-                    exact
-                    path={`${pathTokenDetail}/:contractAddress/:allowingAddress?`}
-                    component={TokenDetail}
-                  />
-                  <Route
-                    exact
-                    path={`${pathTokenSend}/:contractAddress/:allowingAddress?`}
-                    component={TokenSend}
-                  />
-                  <Route exact path={`${pathAllowances}/:contractAddress`} component={Allowances} />
-                  <Route
-                    exact
-                    path={`${pathAllowances}/:contractAddress${pathAllowanceAdd}`}
-                    component={AllowanceAdd}
-                  />
-                  <Route
-                    exact
-                    path={`${pathAllowances}/:contractAddress${pathAllowanceEdit}/:spenderAddress`}
-                    component={AllowanceEdit}
-                  />
-                  <Route exact path={pathOperationResult} component={OperationResult} />
-                </ProtectedSwitch>
-              </Switch>
-            </Router>
-          </ContractsProvider>
-        </AccountProvider>
+        <ContractsProvider>
+          <GlobalStyle />
+          <Router basename={process.env.PUBLIC_URL}>
+            <Switch>
+              <Route exact path="/" component={Login} />
+              <Route exact path={pathLogin} component={Login} />
+              <ProtectedSwitch authPath={pathLogin}>
+                <Route exact path={pathTokens} component={Tokens} />
+                <Route exact path={`${pathTokensAdd}/:codeId?`} component={TokensAdd} />
+                <Route
+                  exact
+                  path={`${pathTokenDetail}/:contractAddress/:allowingAddress?`}
+                  component={TokenDetail}
+                />
+                <Route
+                  exact
+                  path={`${pathTokenSend}/:contractAddress/:allowingAddress?`}
+                  component={TokenSend}
+                />
+                <Route exact path={`${pathAllowances}/:contractAddress`} component={Allowances} />
+                <Route
+                  exact
+                  path={`${pathAllowances}/:contractAddress${pathAllowanceAdd}`}
+                  component={AllowanceAdd}
+                />
+                <Route
+                  exact
+                  path={`${pathAllowances}/:contractAddress${pathAllowanceEdit}/:spenderAddress`}
+                  component={AllowanceEdit}
+                />
+                <Route exact path={pathOperationResult} component={OperationResult} />
+              </ProtectedSwitch>
+            </Switch>
+          </Router>
+        </ContractsProvider>
       </SdkProvider>
     </ErrorProvider>
   );

packages/cw20-wallet/src/App/routes/AllowanceAdd/index.tsx

@@ -1,5 +1,5 @@
 import { BackButton, Loading, OperationResultState, PageLayout } from "@cosmicdapp/design";
-import { CW20, getErrorFromStackTrace, useAccount, useSdk } from "@cosmicdapp/logic";
+import { CW20, getErrorFromStackTrace, useSdk } from "@cosmicdapp/logic";
 import { Decimal } from "@cosmjs/math";
 import { Button, Typography } from "antd";
 import { Formik } from "formik";
@@ -26,8 +26,7 @@ function AllowanceAdd(): JSX.Element {
   const [loading, setLoading] = useState(false);
 
   const history = useHistory();
-  const { getClient } = useSdk();
-  const { account } = useAccount();
+  const { getClient, address } = useSdk();
 
   const { contractAddress }: AllowanceAddParams = useParams();
 
@@ -50,7 +49,7 @@ function AllowanceAdd(): JSX.Element {
 
     const cw20Contract = CW20(getClient()).use(contractAddress);
 
-    cw20Contract.allowance(account.address, spenderAddress).then(({ allowance }) => {
+    cw20Contract.allowance(address, spenderAddress).then(({ allowance }) => {
       const decNewAmount = Decimal.fromUserInput(newAmount, tokenDecimals);
       const decCurrentAmount = Decimal.fromAtomics(allowance, tokenDecimals);
 
@@ -59,11 +58,13 @@ function AllowanceAdd(): JSX.Element {
 
         if (decNewAmount.isGreaterThan(decCurrentAmount)) {
           allowanceOperation = cw20Contract.increaseAllowance(
+            address,
             spenderAddress,
             decNewAmount.minus(decCurrentAmount).atomics,
           );
         } else {
           allowanceOperation = cw20Contract.decreaseAllowance(
+            address,
             spenderAddress,
             decCurrentAmount.minus(decNewAmount).atomics,
           );

packages/cw20-wallet/src/App/routes/AllowanceEdit/index.tsx

@@ -1,5 +1,5 @@
 import { BackButton, Loading, OperationResultState, PageLayout } from "@cosmicdapp/design";
-import { CW20, getErrorFromStackTrace, useAccount, useSdk } from "@cosmicdapp/logic";
+import { CW20, getErrorFromStackTrace, useSdk } from "@cosmicdapp/logic";
 import { Decimal } from "@cosmjs/math";
 import { Typography } from "antd";
 import React, { useEffect, useState } from "react";
@@ -20,8 +20,7 @@ function AllowanceEdit(): JSX.Element {
   const [loading, setLoading] = useState(false);
 
   const history = useHistory();
-  const { getClient } = useSdk();
-  const { account } = useAccount();
+  const { getClient, address } = useSdk();
 
   const { contractAddress, spenderAddress }: AllowanceEditParams = useParams();
 
@@ -36,10 +35,8 @@ function AllowanceEdit(): JSX.Element {
       setTokenName(tokenInfo.symbol);
       setTokenDecimals(tokenInfo.decimals);
     });
-    cw20Contract
-      .allowance(account.address, spenderAddress)
-      .then(({ allowance }) => setAllowanceAmount(allowance));
-  }, [getClient, contractAddress, account.address, spenderAddress]);
+    cw20Contract.allowance(address, spenderAddress).then(({ allowance }) => setAllowanceAmount(allowance));
+  }, [getClient, contractAddress, address, spenderAddress]);
 
   const submitChangeAmount = (values: FormChangeAmountFields) => {
     setLoading(true);
@@ -55,11 +52,13 @@ function AllowanceEdit(): JSX.Element {
 
       if (decNewAmount.isGreaterThan(decCurrentAmount)) {
         allowanceOperation = cw20Contract.increaseAllowance(
+          address,
           spenderAddress,
           decNewAmount.minus(decCurrentAmount).atomics,
         );
       } else {
         allowanceOperation = cw20Contract.decreaseAllowance(
+          address,
           spenderAddress,
           decCurrentAmount.minus(decNewAmount).atomics,
         );

packages/cw20-wallet/src/App/routes/Allowances/index.tsx

@@ -1,5 +1,5 @@
 import { BackButton, PageLayout } from "@cosmicdapp/design";
-import { AllowanceInfo, CW20, useAccount, useSdk } from "@cosmicdapp/logic";
+import { AllowanceInfo, CW20, useSdk } from "@cosmicdapp/logic";
 import { Decimal } from "@cosmjs/math";
 import { Button, Divider, Typography } from "antd";
 import React, { useEffect, useState } from "react";
@@ -24,8 +24,7 @@ interface AllowancesParams {
 
 function Allowances(): JSX.Element {
   const history = useHistory();
-  const { getClient } = useSdk();
-  const { account } = useAccount();
+  const { getClient, address } = useSdk();
 
   const { contractAddress }: AllowancesParams = useParams();
 
@@ -41,9 +40,9 @@ function Allowances(): JSX.Element {
       setTokenName(symbol);
       setFractionalDigits(decimals);
     });
-    cw20Contract.balance(account.address).then((balance) => setTokenAmount(balance));
-    cw20Contract.allAllowances(account.address).then(({ allowances }) => setAllowances(allowances));
-  }, [getClient, contractAddress, account.address]);
+    cw20Contract.balance(address).then((balance) => setTokenAmount(balance));
+    cw20Contract.allAllowances(address).then(({ allowances }) => setAllowances(allowances));
+  }, [getClient, contractAddress, address]);
 
   function goToAllowancesEdit(spender: string) {
     history.push(`${pathAllowances}/${contractAddress}${pathAllowanceEdit}/${spender}`);

packages/cw20-wallet/src/App/routes/TokenDetail/index.tsx

@@ -1,5 +1,5 @@
 import { BackButton, PageLayout, YourAccount } from "@cosmicdapp/design";
-import { CW20, useAccount, useSdk } from "@cosmicdapp/logic";
+import { CW20, useSdk } from "@cosmicdapp/logic";
 import { Decimal } from "@cosmjs/math";
 import { Button, Divider, Typography } from "antd";
 import React, { useEffect, useState } from "react";
@@ -18,8 +18,7 @@ interface TokenDetailParams {
 
 function TokenDetail(): JSX.Element {
   const history = useHistory();
-  const { getClient } = useSdk();
-  const { account } = useAccount();
+  const { getClient, address } = useSdk();
 
   const { contractAddress, allowingAddress: allowingAddressParam }: TokenDetailParams = useParams();
 
@@ -32,14 +31,14 @@ function TokenDetail(): JSX.Element {
 
   useEffect(() => {
     const cw20Contract = CW20(getClient()).use(contractAddress);
-    const tokenAddress = allowingAddress ?? account.address;
+    const tokenAddress = allowingAddress ?? address;
 
     cw20Contract.tokenInfo().then(({ symbol, decimals }) => {
       setTokenName(symbol);
       setFractionalDigits(decimals);
     });
     cw20Contract.balance(tokenAddress).then((balance) => setTokenAmount(balance));
-  }, [getClient, contractAddress, allowingAddress, account.address]);
+  }, [getClient, contractAddress, allowingAddress, address]);
 
   function updateAllowance(allowingAddress: string) {
     if (!allowingAddress) {
@@ -51,9 +50,7 @@ function TokenDetail(): JSX.Element {
     setAllowingAddress(allowingAddress);
 
     const cw20contract = CW20(getClient()).use(contractAddress);
-    cw20contract
-      .allowance(allowingAddress, account.address)
-      .then((response) => setAllowance(response.allowance));
+    cw20contract.allowance(allowingAddress, address).then((response) => setAllowance(response.allowance));
   }
 
   function goToSend() {

packages/cw20-wallet/src/App/routes/TokenSend/index.tsx

@@ -1,5 +1,5 @@
 import { BackButton, Loading, OperationResultState, PageLayout, YourAccount } from "@cosmicdapp/design";
-import { CW20, getErrorFromStackTrace, useAccount, useSdk } from "@cosmicdapp/logic";
+import { CW20, getErrorFromStackTrace, useSdk } from "@cosmicdapp/logic";
 import { Decimal } from "@cosmjs/math";
 import { Typography } from "antd";
 import React, { useEffect, useState } from "react";
@@ -20,8 +20,7 @@ function TokenSend(): JSX.Element {
   const [loading, setLoading] = useState(false);
 
   const history = useHistory();
-  const { getClient } = useSdk();
-  const { account, refreshAccount } = useAccount();
+  const { getClient, address, refreshBalance } = useSdk();
 
   const { contractAddress, allowingAddress }: TokenSendParams = useParams();
   const fullPathTokenDetail = `${pathTokenDetail}/${contractAddress}/${allowingAddress ?? ""}`;
@@ -32,21 +31,19 @@ function TokenSend(): JSX.Element {
 
   useEffect(() => {
     const cw20Contract = CW20(getClient()).use(contractAddress);
-    const tokenAddress = allowingAddress ?? account.address;
+    const tokenAddress = allowingAddress ?? address;
 
     cw20Contract.tokenInfo().then(({ symbol, decimals }) => {
       setTokenName(symbol);
       setTokenDecimals(decimals);
     });
 
     if (allowingAddress) {
-      cw20Contract
-        .allowance(allowingAddress, account.address)
-        .then((response) => setTokenAmount(response.allowance));
+      cw20Contract.allowance(allowingAddress, address).then((response) => setTokenAmount(response.allowance));
     } else {
       cw20Contract.balance(tokenAddress).then((balance) => setTokenAmount(balance));
     }
-  }, [getClient, contractAddress, allowingAddress, account.address]);
+  }, [getClient, contractAddress, allowingAddress, address]);
 
   const sendTokensAction = (values: FormSendTokensFields) => {
     setLoading(true);
@@ -58,30 +55,32 @@ function TokenSend(): JSX.Element {
 
     try {
       if (allowingAddress) {
-        cw20Contract.transferFrom(allowingAddress, recipientAddress, transferAmount).then((txHash) => {
-          if (!txHash) {
-            return Promise.reject("Transfer from failed");
-          }
-
-          refreshAccount();
-
-          history.push({
-            pathname: pathOperationResult,
-            state: {
-              success: true,
-              message: `${amount} ${tokenName} successfully sent to ${recipientAddress} with allowance from ${allowingAddress}`,
-              customButtonText: "Token detail",
-              customButtonActionPath: fullPathTokenDetail,
-            } as OperationResultState,
+        cw20Contract
+          .transferFrom(address, allowingAddress, recipientAddress, transferAmount)
+          .then((txHash) => {
+            if (!txHash) {
+              return Promise.reject("Transfer from failed");
+            }
+
+            refreshBalance();
+
+            history.push({
+              pathname: pathOperationResult,
+              state: {
+                success: true,
+                message: `${amount} ${tokenName} successfully sent to ${recipientAddress} with allowance from ${allowingAddress}`,
+                customButtonText: "Token detail",
+                customButtonActionPath: fullPathTokenDetail,
+              } as OperationResultState,
+            });
           });
-        });
       } else {
-        cw20Contract.transfer(recipientAddress, transferAmount).then((txHash) => {
+        cw20Contract.transfer(address, recipientAddress, transferAmount).then((txHash) => {
           if (!txHash) {
             return Promise.reject("Transfer failed");
           }
 
-          refreshAccount();
+          refreshBalance();
 
           history.push({
             pathname: pathOperationResult,