chore: start with staking poc

package.json

@@ -22,9 +22,13 @@
   },
   "dependencies": {
     "@apollo/client": "^3.8.8",
+    "@cosmjs/proto-signing": "^0.32.2",
+    "@cosmjs/stargate": "^0.32.2",
     "@emotion/react": "^11.11.1",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
+    "@keplr-wallet/types": "^0.12.54",
+    "@keplr-wallet/unit": "^0.12.54",
     "@mui/icons-material": "^5.15.0",
     "@mui/lab": "^5.0.0-alpha.156",
     "@mui/material": "^5.15.0",

src/screens/staking/components/staking_section/index.module.scss

@@ -0,0 +1,19 @@
+@import "src/styles/sass.scss";
+
+.wrapper {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+.container {
+  background-color: $color-primary-light;
+  color: #000;
+
+  button {
+    &,
+    &:hover {
+      background-color: $color-forbole-indigo6;
+    }
+  }
+}

src/screens/staking/components/staking_section/index.tsx

@@ -0,0 +1,144 @@
+import { coin } from "@cosmjs/proto-signing";
+import {
+  GasPrice,
+  SigningStargateClient,
+  assertIsDeliverTxSuccess,
+} from "@cosmjs/stargate";
+import type { Window as KeplrWindow } from "@keplr-wallet/types";
+import { Dec } from "@keplr-wallet/unit";
+import { Box, Button } from "@mui/material";
+import { useState } from "react";
+
+import * as styles from "./index.module.scss";
+
+declare global {
+  interface Window extends KeplrWindow {}
+}
+
+// https://github.com/chainapsis/keplr-example
+// https://github.com/chainapsis/keplr-wallet/blob/master/packages/cosmos/src/index.ts
+// https://github.com/cosmos/testnets/tree/master/public
+// https://github.com/chainapsis/keplr-chain-registry/tree/main
+
+// https://github.com/forbole/big-dipper-2.0-cosmos/blob/rachelhox/staking/packages/ui/src/components/nav/components/connect_wallet/keplr_utils.ts
+// https://github.com/forbole/big-dipper-2.0-cosmos/blob/rachelhox/staking/packages/ui/src/screens/validators/components/list/components/staking/hooks.ts
+
+// Theta testnet:
+// https://github.com/chainapsis/keplr-chain-registry/blob/main/cosmos/theta-testnet.json
+
+const earthValidatorAddress =
+  "cosmosvaloper10v6wvdenee8r9l6wlsphcgur2ltl8ztkfrvj9a";
+
+const CosmosHubInfo = {
+  chainId: "theta-testnet-001",
+  rest: "https://api-t.cosmos.nodestake.top",
+  rpc: "https://rpc-t.cosmos.nodestake.top",
+};
+
+const uatomDecimal = 6;
+
+const StakingSection = () => {
+  const [address, setAddress] = useState("");
+  const [balance, setBalance] = useState("");
+
+  const getBalance = async () => {
+    const uri = `${CosmosHubInfo.rest}/cosmos/bank/v1beta1/balances/${address}?pagination.limit=1000`;
+
+    const data = await fetch(uri, {
+      headers: {
+        Accept: "application/json",
+      },
+    }).then((res) => res.json());
+
+    const newBalance = data.balances.find(
+      (balanceParam: any) => balanceParam.denom === "uatom",
+    );
+
+    if (newBalance) {
+      const amount = new Dec(newBalance.amount, uatomDecimal);
+      setBalance(`${amount.toString(uatomDecimal)} ATOM`);
+    } else {
+      setBalance(`0 ATOM`);
+    }
+  };
+
+  const getKey = async () => {
+    const key = await window.keplr?.getKey(CosmosHubInfo.chainId);
+
+    // eslint-disable-next-line
+    console.log("debug: index.tsx: key", key);
+  };
+
+  const getAddress = async () => {
+    // Example of signing a message:
+    // https://github.com/chainapsis/keplr-example/blob/master/src/util/sendMsgs.ts
+    if (!window.keplr) {
+      alert("Please install keplr extension");
+    } else {
+      try {
+        const chainId = "cosmoshub-4";
+        await window.keplr.enable(chainId);
+        const offlineSigner = window.keplr.getOfflineSigner(chainId);
+        const accounts = await offlineSigner.getAccounts();
+        setAddress(accounts[0].address);
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.log(error);
+      }
+    }
+  };
+
+  const delegateTokens = async () => {
+    const offlineSigner = window.keplr?.getOfflineSignerOnlyAmino(
+      CosmosHubInfo.chainId,
+    );
+
+    if (!offlineSigner) {
+      throw new Error("Can't get offline signer");
+    }
+
+    const client = await SigningStargateClient.connectWithSigner(
+      CosmosHubInfo.rpc,
+      offlineSigner,
+      {
+        gasPrice: GasPrice.fromString(`0.01atom`),
+      },
+    );
+
+    const result = await client.delegateTokens(
+      address,
+      earthValidatorAddress,
+      coin(100000, "uatom"),
+      "auto",
+      "", // memo
+    );
+
+    try {
+      assertIsDeliverTxSuccess(result);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log("assertion error", error);
+    }
+
+    // eslint-disable-next-line
+    console.log("debug: index.tsx: result", result);
+  };
+
+  return (
+    <Box className={styles.wrapper}>
+      <Box className={styles.container}>
+        <Box>Staking section</Box>
+        <Box>
+          <Button onClick={getAddress}>Get address</Button>
+          {address && <Button onClick={getBalance}>Get balance</Button>}
+          {address && <Button onClick={delegateTokens}>Stake tokens</Button>}
+          {address && <Button onClick={getKey}>Get key</Button>}
+        </Box>
+        <Box>Current address: {address}</Box>
+        <Box>Current balance: {balance}</Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default StakingSection;

src/screens/staking/index.tsx

@@ -10,6 +10,7 @@ import FAQ from "./components/faq";
 import Hero from "./components/hero";
 import HowItWorks from "./components/how_it_works";
 import Networks from "./components/networks";
+import StakingSection from "./components/staking_section";
 import WhyForbole from "./components/why_forbole";
 import { LaptopCSS } from "./styles";
 
@@ -37,6 +38,9 @@ const Staking = () => {
         <LaptopCSS>
           <Hero />
         </LaptopCSS>
+        <LaptopCSS>
+          <StakingSection />.
+        </LaptopCSS>
         <LaptopCSS>
           <Networks />
         </LaptopCSS>