refactor: reorganise staking section

.github/workflows/test.yml

@@ -12,5 +12,6 @@ jobs:
       - run: yarn --immutable
 
       - run: yarn lint
+      - run: yarn test
       - run: yarn type-check
       - run: yarn build

e2e/poms/staking_page.ts

@@ -1,10 +1,10 @@
 import type { Coin } from "@cosmjs/stargate";
 import type { Page } from "@playwright/test";
 
+import type { TStakingContext } from "@src/screens/staking/lib/staking_sdk/context";
 import type {
   Account,
   StakingNetworkId,
-  TStakingContext,
   Wallet,
 } from "@src/screens/staking/lib/staking_sdk/core";
 import { WalletId } from "@src/screens/staking/lib/staking_sdk/core";

jest.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+  moduleNameMapper: {
+    "\\.(css)$": "<rootDir>/src/tests/styleMock.ts",
+    "\\.(scss)$": "<rootDir>/src/tests/styleMock.ts",
+    "^@src/(.*)$": "<rootDir>/src/$1",
+  },
+  preset: "ts-jest",
+  testEnvironment: "node",
+  transform: {
+    "\\.(ts|tsx)$": [
+      "ts-jest",
+      {
+        tsconfig: "<rootDir>/src/tests/tsconfig.test.json",
+      },
+    ],
+  },
+};

package.json

@@ -17,7 +17,7 @@
     "postinstall": "husky install",
     "scss-types": "typed-scss-modules src",
     "start": "next start",
-    "test": "echo no tests",
+    "test": "jest src",
     "type-check": "tsc"
   },
   "dependencies": {
@@ -67,6 +67,7 @@
     "@stylistic/eslint-plugin": "^1.5.4",
     "@svgr/webpack": "^8.1.0",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/jest": "^29.5.11",
     "@types/node": "^20.11.5",
     "@types/nodemailer": "^6.4.14",
     "@types/ramda": "^0.29.9",
@@ -85,6 +86,7 @@
     "eslint-plugin-playwright": "^0.22.1",
     "husky": "^8.0.3",
     "i18next-parser": "^8.12.0",
+    "jest": "^29.7.0",
     "postcss": "^8.4.33",
     "prettier": "^3.2.4",
     "rss": "^1.2.2",
@@ -93,6 +95,7 @@
     "stylelint-config-standard-scss": "^13.0.0",
     "stylelint-order": "^6.0.4",
     "stylelint-scss": "^6.0.0",
+    "ts-jest": "^29.1.1",
     "ts-unused-exports": "^10.0.1",
     "tsx": "^4.7.0",
     "typed-scss-modules": "^8.0.0",

public/locales/en/staking.json

@@ -1,4 +1,5 @@
 {
+  "addressCopied": "Address copied",
   "apy": "Annual Percentage Yield",
   "benefits bullet 1": "Earn your staking rewards, it allows you to earn rewards for securing the network with your contribution",
   "benefits bullet 2": "Boost network security, the more token holders that stake, the more secure the network becomes",
@@ -115,12 +116,14 @@
     "memoError": {
       "tooLongMemo": "Please enter a smaller memo"
     },
+    "networkSelect": "Select network:",
     "success": {
       "sub": "Thank you for supporting Forbole !",
       "title": "Your token has been staked!"
     },
     "title": "Stake with Forbole",
-    "tokenAmount": "Token amount"
+    "tokenAmount": "Token amount",
+    "walletSellect": "Stake from:"
   },
   "stakingWidget": {
     "connected_one": "Connected wallet",
@@ -164,6 +167,7 @@
     "title": "Unstake",
     "unlockedDateInfo": "Your token will be locked in until <1>{{date}} ({{days}} days later)</1>."
   },
+  "votingPower": "Voting Power",
   "wallets": {
     "keplr": "Keplr"
   },

public/locales/zh-CN/staking.json

@@ -1,4 +1,5 @@
 {
+  "addressCopied": "Address copied",
   "apy": "年收益率",
   "benefits bullet 1": "赚取您的质押奖励，它可以让您通过贡献来获得保护网络的奖励",
   "benefits bullet 2": "提高网络安全性，质押的代币持有者越多，网络就越安全",
@@ -115,12 +116,14 @@
     "memoError": {
       "tooLongMemo": "Please enter a smaller memo"
     },
+    "networkSelect": "Select network:",
     "success": {
       "sub": "Thank you for supporting Forbole !",
       "title": "Your token has been staked!"
     },
     "title": "Stake with forbole",
-    "tokenAmount": "Token amount"
+    "tokenAmount": "Token amount",
+    "walletSellect": "Stake from:"
   },
   "stakingWidget": {
     "connected_other": "Connected wallet",
@@ -163,6 +166,7 @@
     "title": "Unstake",
     "unlockedDateInfo": "Your token will be locked in until <2>{{date}} ({{days}} days later)</2>."
   },
+  "votingPower": "Voting Power",
   "wallets": {
     "keplr": "Keplr"
   },

public/locales/zh-HK/staking.json

@@ -1,4 +1,5 @@
 {
+  "addressCopied": "Address copied",
   "apy": "年報酬率",
   "benefits bullet 1": "賺取您的質押獎勵，它可以讓您透過貢獻來獲得保護網路的獎勵",
   "benefits bullet 2": "提高網路安全性，質押的代幣持有者越多，網路就越安全",
@@ -115,12 +116,14 @@
     "memoError": {
       "tooLongMemo": "Please enter a smaller memo"
     },
+    "networkSelect": "Select network:",
     "success": {
       "sub": "Thank you for supporting Forbole !",
       "title": "Your token has been staked!"
     },
     "title": "Stake with forbole",
-    "tokenAmount": "Token amount"
+    "tokenAmount": "Token amount",
+    "walletSellect": "Stake from:"
   },
   "stakingWidget": {
     "connected_other": "Connected wallet",
@@ -163,6 +166,7 @@
     "title": "Unstake",
     "unlockedDateInfo": "Your token will be locked in until <2>{{date}} ({{days}} days later)</2>."
   },
+  "votingPower": "Voting Power",
   "wallets": {
     "keplr": "Keplr"
   },

scripts/check_ci.sh

@@ -4,5 +4,6 @@ set -e
 
 yarn lint
 yarn type-check
+yarn test
 
 QUICK_BUILD=true yarn build

scripts/lint.sh

@@ -15,6 +15,7 @@ yarn ts-unused-exports tsconfig.json \
   --excludePathsFromReport='.*rss.xml' \
   --excludePathsFromReport='i18next-parser.config' \
   --excludePathsFromReport='index-poc' \
+  --excludePathsFromReport='styleMock' \
   --excludePathsFromReport='playwright.config'
 
 yarn i18next

src/hooks/use_middle_ellipsis.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+
+export const useMiddleEllipsis = (text: string, chars = 10) => {
+  const [parsedText, setParsedText] = useState<string>("");
+
+  useEffect(() => {
+    const listener = () => {
+      const parsed = `${text.substring(0, chars)}...${text.substring(
+        text.length - chars,
+        text.length,
+      )}`;
+
+      setParsedText(parsed);
+    };
+
+    // In the future this can be updated to listen to a resize event
+    listener();
+  }, [text, chars]);
+
+  if (!parsedText) return null;
+
+  return parsedText;
+};

src/screens/network_guides/components/guide/components/guide_details/index.tsx

@@ -1,37 +1,10 @@
 import DOMPurify from "isomorphic-dompurify";
-import useTranslation from "next-translate/useTranslation";
-import Link from "next/link";
-
-import HighlightButton from "@src/components/highlight-button";
-import { getNetworkInfo } from "@src/utils/network_info";
 
 import * as styles from "./index.module.scss";
 
 const GuideDetails = ({ post }: any) => {
-  const { tags } = post;
-  const { t } = useTranslation("staking");
-
-  const networkData =
-    // eslint-disable-next-line no-nested-ternary
-    tags.length <= 1
-      ? null
-      : tags[1].slug === "crypto-org"
-        ? getNetworkInfo("crypto.org")
-        : getNetworkInfo(tags[1].slug);
-
   const { sanitize } = DOMPurify;
 
-  const ctaLink = !!networkData?.delegate ? (
-    <div className={styles.stakeButtonWrapper}>
-      <Link
-        href={networkData?.delegate ? networkData.delegate : ""}
-        target="_blank"
-      >
-        <HighlightButton>{t("stake_now")}</HighlightButton>
-      </Link>
-    </div>
-  ) : null;
-
   return (
     <div className={styles.wrapper}>
       <div className={styles.content}>
@@ -41,7 +14,6 @@ const GuideDetails = ({ post }: any) => {
             dangerouslySetInnerHTML={{ __html: sanitize(post.html) }}
           />
         </div>
-        {ctaLink}
       </div>
     </div>
   );

src/screens/network_guides/components/network_info/index.tsx

@@ -11,11 +11,9 @@ import {
 import DOMPurify from "isomorphic-dompurify";
 import useTranslation from "next-translate/useTranslation";
 import Image from "next/legacy/image";
-import Link from "next/link";
 import type { MouseEvent } from "react";
 import { useCallback, useState } from "react";
 
-import HighlightButton from "@src/components/highlight-button";
 import CopyIcon from "@src/components/icons/icon_copy.svg";
 import * as guideStyles from "@src/screens/network_guides/components/guide/components/guide_details/index.module.scss";
 import { getMiddleEllipsis } from "@src/utils/get_middle_ellipsis";
@@ -140,13 +138,6 @@ const NetworkInfo = ({ post }: any) => {
                 )}
               </div>
             </div>
-            {!!networkData?.delegate && (
-              <div>
-                <Link href={networkData?.delegate ? networkData.delegate : ""}>
-                  <HighlightButton>{t("stake_now")}</HighlightButton>
-                </Link>
-              </div>
-            )}
           </CardContent>
           <CardContent>
             <div className={styles.contentBox}>

src/screens/staking/components/hooks.ts

@@ -114,11 +114,7 @@ export const useInitStaking = () => {
 
     fetchNetworksInfo(stakingRef.current.setState);
 
-    tryToConnectWallets(
-      stakingRef.current.state,
-      stakingRef.current.setState,
-      connectedWallets,
-    ).then(() => {
+    tryToConnectWallets(stakingRef.current, connectedWallets).then(() => {
       stakingRef.current.setState({
         hasInit: true,
       });

src/screens/staking/components/networks/components/network_grid/components/network_card/index.tsx

@@ -19,15 +19,13 @@ import PopOver from "./popover";
 import StakingLabel from "./staking-label";
 
 interface CardProp {
-  canStakeToAnyWallet: boolean;
   network: Network;
   networkSummary: ParamsProps;
   setShowPopover: Dispatch<SetStateAction<string>>;
   showPopover: string;
 }
 
 const NetworkCard = ({
-  canStakeToAnyWallet,
   network,
   networkSummary,
   setShowPopover,
@@ -49,8 +47,7 @@ const NetworkCard = ({
     [network],
   );
 
-  const chainSupportsStaking =
-    canStakeToAnyWallet && networkKeyToNetworkId[network.key as NetworkKey];
+  const chainSupportsStaking = networkKeyToNetworkId[network.key as NetworkKey];
 
   const isEmptyPopover =
     networksWithHiddenInfo.has(network.graphql) ||

src/screens/staking/components/networks/components/network_grid/components/network_card/popover.module.scss

@@ -71,14 +71,19 @@ $popover-background: linear-gradient(
 
 .label {
   align-items: center;
+  color: #25282d;
   display: flex;
   flex: 1;
   flex-flow: row nowrap;
-  font-size: 20px;
-  font-weight: 400;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
   gap: 2px;
   justify-content: center;
+  letter-spacing: 0.032px;
+  line-height: 20px;
   text-align: left;
+  text-shadow: $box-shadow-variant-3;
   white-space: nowrap;
   width: 100%;
 }
@@ -171,3 +176,16 @@ $popover-background: linear-gradient(
 body .stake {
   font-size: 16px;
 }
+
+.totalValue {
+  > div:nth-child(2) {
+    color: #616161;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    letter-spacing: 0.308px;
+    line-height: 20px;
+    text-align: right;
+    text-shadow: $box-shadow-variant-3;
+  }
+}