feat: continue with staking poc

public/locales/en/staking.json

@@ -92,7 +92,7 @@
     "available": "Available",
     "memo": "Memo",
     "memoError": {
-      "tooLong": ""
+      "tooLongMemo": "Please enter a smaller memo"
     },
     "success": "Your amount has been staked",
     "title": "Stake with Forbole",

public/locales/zh-CN/staking.json

@@ -92,7 +92,7 @@
     "available": "Available",
     "memo": "Memo",
     "memoError": {
-      "tooLong": ""
+      "tooLongMemo": "Please enter a smaller memo"
     },
     "success": "Your amount has been staked",
     "title": "Stake with forbole",

public/locales/zh-HK/staking.json

@@ -92,7 +92,7 @@
     "available": "Available",
     "memo": "Memo",
     "memoError": {
-      "tooLong": ""
+      "tooLongMemo": "Please enter a smaller memo"
     },
     "success": "Your amount has been staked",
     "title": "Stake with forbole",

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 import useTranslation from "next-translate/useTranslation";
-import { useContext, useState } from "react";
+import { useContext } from "react";
 
 import HighlightButton from "@src/components/highlight-button";
 import { toastSuccess } from "@src/components/notification";
@@ -9,7 +9,6 @@ import {
   setSelectedAccount,
 } from "@src/screens/staking/lib/context";
 import { claimRewards } from "@src/screens/staking/lib/context/operations";
-import { ChainId } from "@src/screens/staking/lib/context/types";
 
 import ModalBase from "./modal_base";
 import NetworksSelect from "./networks_select";
@@ -18,10 +17,6 @@ const ClaimRewardsModal = () => {
   const { setState: setStakingState, state: stakingState } =
     useContext(StakingContext);
 
-  const [selectedNetwork, setSelectedNetwork] = useState<ChainId>(
-    ChainId.CosmosHubTestnet,
-  );
-
   const { t } = useTranslation("staking");
 
   const { selectedAccount, selectedAction } = stakingState;
@@ -34,7 +29,7 @@ const ClaimRewardsModal = () => {
       open={isOpen}
       title={t("claimRewards.title")}
     >
-      <NetworksSelect setValue={setSelectedNetwork} value={selectedNetwork} />
+      <NetworksSelect variant="accounts" />
       <div>
         <div>Gas Fee</div>
         <div>0.002 ATOM</div>

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

@@ -49,6 +49,7 @@
 }
 
 .modal {
+  min-height: 100vh;
   overflow: auto;
 }
 

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

@@ -1,12 +1,17 @@
 import MenuItem from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
+import { useContext } from "react";
 
-import {
-  ChainId,
-  chainIdToNetworkKey,
-} from "@src/screens/staking/lib/context/types";
+import type { Account, ChainId } from "@src/screens/staking/lib/context/types";
+import { chainIdToNetworkKey } from "@src/screens/staking/lib/context/types";
 import { getNetworkInfo } from "@src/utils/network_info";
 
+import {
+  StakingContext,
+  getSelectedAccount,
+  setSelectedAccount,
+} from "../../lib/context";
+import { sortAccounts } from "../../lib/context/formatters";
 import * as styles from "./networks_select.module.scss";
 
 const ITEM_HEIGHT = 48;
@@ -23,13 +28,12 @@ const MenuProps = {
   },
 };
 
-// @TODO: Get this from context (so testnets are filtered out)
-const networks = Object.values(ChainId).sort();
-
 type NetworkItemProps = {
   value: ChainId;
 };
 
+const SEPARATOR = "____";
+
 const NetworkItem = ({ value }: NetworkItemProps) => {
   const networkName = chainIdToNetworkKey[value];
   const networkInfo = networkName ? getNetworkInfo(networkName) : "";
@@ -46,29 +50,61 @@ const NetworkItem = ({ value }: NetworkItemProps) => {
 };
 
 type Props = {
-  setValue: (value: ChainId) => void;
-  value: ChainId;
+  variant: "accounts";
 };
 
-const NetworksSelect = ({ setValue, value }: Props) => {
+const NetworksSelect = ({ variant }: Props) => {
+  const { setState: setStakingState, state: stakingState } =
+    useContext(StakingContext);
+
+  const selectedAccount = getSelectedAccount(stakingState);
+
+  if (!variant || !selectedAccount) return null;
+
+  const wallet = stakingState.wallets[selectedAccount.wallet];
+
+  if (!wallet) return null;
+
+  const allAccounts = Object.values(wallet)
+    .reduce((acc, chain) => {
+      acc.push(...chain.accounts);
+
+      return acc;
+    }, [] as Account[])
+    .sort(sortAccounts);
+
   const handleChange = (event: any) => {
-    setValue(event.target.value);
+    const [address, chainId] = event.target.value.split(SEPARATOR);
+
+    setSelectedAccount(setStakingState, {
+      address,
+      chainId,
+      wallet: selectedAccount.wallet,
+    });
   };
 
+  const selectedItem = [selectedAccount.address, selectedAccount.chainId].join(
+    SEPARATOR,
+  );
+
   return (
     <div className={styles.control}>
       <Select
         IconComponent={IconComponent}
         MenuProps={MenuProps}
         className={styles.select}
         onChange={handleChange}
-        value={value as string}
+        value={selectedItem}
       >
-        {networks.map((network) => (
-          <MenuItem key={network} value={network}>
-            <NetworkItem value={network} />
-          </MenuItem>
-        ))}
+        {allAccounts.map((account) => {
+          const item = [account.address, account.chainId].join(SEPARATOR);
+
+          return (
+            <MenuItem key={item} value={item}>
+              <NetworkItem value={account.chainId} />
+            </MenuItem>
+          );
+        })}
       </Select>
     </div>
   );

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

@@ -24,7 +24,6 @@ import type {
   NetworkInfo,
   TStakingContext,
 } from "@src/screens/staking/lib/context/types";
-import { ChainId } from "@src/screens/staking/lib/context/types";
 
 import Label from "./label";
 import ModalBase, { ModalError } from "./modal_base";
@@ -40,10 +39,6 @@ const StakingModal = () => {
   const [isLoading, setIsLoading] = useState(false);
   const { selectedAccount, selectedAction } = stakingState;
 
-  const [selectedNetwork, setSelectedNetwork] = useState<ChainId>(
-    ChainId.CosmosHubTestnet,
-  );
-
   const [networkInfo, setNetworkInfo] = useState<NetworkInfo | null>(null);
   const [amount, setAmount] = useState("");
   const [amountError, setAmountError] = useState("");
@@ -98,12 +93,7 @@ const StakingModal = () => {
       title={t("stakingModal.title")}
     >
       <div className={styles.wrapper}>
-        <div>
-          <NetworksSelect
-            setValue={setSelectedNetwork}
-            value={selectedNetwork}
-          />
-        </div>
+        <div>{selectedAccount && <NetworksSelect variant="accounts" />}</div>
         {networkInfo?.apy && (
           <div className={styles.row}>
             <Label className={styles.apy}>
@@ -166,7 +156,7 @@ const StakingModal = () => {
                 if (!memo) return "";
 
                 if (memo.length > 256) {
-                  return t("stakingModal.memoError.tooLong");
+                  return t("stakingModal.memoError.tooLongMemo");
                 }
               })() as string;
 

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

@@ -13,8 +13,12 @@ import {
   setSelectedAccount,
   syncAccountData,
 } from "@src/screens/staking/lib/context";
-import { formatDenom } from "@src/screens/staking/lib/context/formatters";
+import {
+  formatDenom,
+  resolveDenom,
+} from "@src/screens/staking/lib/context/formatters";
 import { unstake } from "@src/screens/staking/lib/context/operations";
+import { MAX_MEMO } from "@src/screens/staking/lib/context/types";
 
 import Label from "./label";
 import ModalBase, { ModalError } from "./modal_base";
@@ -136,7 +140,9 @@ const UnstakingModal = () => {
             setAmount(e.target.value);
           }}
           placeholder={t("unstakingModal.amount.placeholder")}
-          rightText="ATOM"
+          {...(account?.info?.delegation?.denom && {
+            rightText: resolveDenom(account.info.delegation?.denom),
+          })}
           value={amount}
         />
         {!!amountError && <ModalError>{amountError}</ModalError>}
@@ -148,8 +154,8 @@ const UnstakingModal = () => {
             const newMemoError = (() => {
               if (!memo) return "";
 
-              if (memo.length > 256) {
-                return t("stakingModal.memoError.tooLong");
+              if (memo.length > MAX_MEMO) {
+                return t("stakingModal.memoError.tooLongMemo");
               }
             })() as string;
 

src/screens/staking/components/staking_section/utils/staking_client.ts

@@ -1,4 +1,4 @@
-import type { ChainId } from "@src/screens/staking/lib/context";
+import type { ChainId } from "@src/screens/staking/lib/context/types";
 
 const baseUrl = process.env.NEXT_PUBLIC_STAKING_API as string;
 

src/screens/staking/lib/context/types.ts

@@ -7,6 +7,8 @@ import { networks } from "@src/utils/network_info";
 export const ENABLE_TESTNETS =
   process.env.NEXT_PUBLIC_STAKING_ENABLE_TESTNETS === "true";
 
+export const MAX_MEMO = 256;
+
 export enum WalletId {
   Keplr = "keplr",
 }