feat: add refactors and stake accounts display

forbole · Mar 26, 2024 · 439806b · 439806b
1 parent e69fb36
commit 439806b
Show file tree

Hide file tree

Showing 11 changed files with 97 additions and 14 deletions.
diff --git a/public/icons/external.svg b/public/icons/external.svg
diff --git a/...ens/staking/components/networks/components/network_grid/components/network_card/index.tsx b/...ens/staking/components/networks/components/network_grid/components/network_card/index.tsx
@@ -71,8 +71,10 @@ const NetworkCard = ({
     </div>
   );
 
+  const forceDisplay = network.key === process.env.NEXT_PUBLIC_STAKING_POPOVER;
+
   const popover =
-    isEmptyPopover || network.name !== showPopover ? null : (
+    !forceDisplay && (isEmptyPopover || network.name !== showPopover) ? null : (
       <PopOver
         canClickNetwork={canClickNetwork}
         handleExploreClick={handleExploreClick}

diff --git a/...nts/networks/components/network_grid/components/network_card/staking_data_box.module.scss b/...nts/networks/components/network_grid/components/network_card/staking_data_box.module.scss
@@ -63,3 +63,16 @@
     text-shadow: $box-shadow-variant-3;
   }
 }
+
+.stakeAccount {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.external {
+  height: 20px;
+  width: 20px;
+}
diff --git a/.../components/networks/components/network_grid/components/network_card/staking_data_box.tsx b/.../components/networks/components/network_grid/components/network_card/staking_data_box.tsx
@@ -20,6 +20,7 @@ import {
   formatStakedDataUSD,
 } from "@src/screens/staking/lib/staking_sdk/formatters";
 import type { StakeAccount } from "@src/screens/staking/lib/staking_sdk/staking_client_types";
+import { getExplorerLink } from "@src/screens/staking/lib/staking_sdk/utils/accounts";
 import type { Network, NetworkKey } from "@src/utils/network_info";
 
 import * as styles from "./staking_data_box.module.scss";
@@ -133,13 +134,38 @@ const StakingDataBox = ({ network }: PopOverProps) => {
             Accounts {stakeAccounts?.length}
           </div>
           <div>
-            {stakeAccounts?.map((account, accountIdx) => (
-              <div key={accountIdx}>
-                <div>{account.address}</div>
-                <div>{formatCoin(account)}</div>
-                <div>{account.status}</div>
-              </div>
-            ))}
+            {stakeAccounts?.map((account) => {
+              const shortenedAddress = `${account.address.slice(0, 8)}...`;
+
+              const explorerLink = getExplorerLink(
+                account.address,
+                stakingNetworkId,
+              );
+
+              return (
+                <div className={styles.stakeAccount} key={account.address}>
+                  <div>
+                    <div>
+                      {shortenedAddress}
+                      {!!explorerLink && (
+                        <>
+                          {" "}
+                          <a
+                            className={styles.external}
+                            href={explorerLink}
+                            target="_blank"
+                          >
+                            <img alt="" src="/icons/external.svg" />
+                          </a>
+                        </>
+                      )}
+                    </div>
+                    <div>{account.status}</div>
+                  </div>
+                  <div>{formatCoin(account)}</div>
+                </div>
+              );
+            })}
           </div>
         </div>
       );

diff --git a/src/screens/staking/lib/staking_sdk/core/base.ts b/src/screens/staking/lib/staking_sdk/core/base.ts
@@ -42,6 +42,7 @@ export enum StakingNetworkId {
   Osmosis = "osmosis-1",
   Regen = "regen-1",
   Solana = "solana",
+  SolanaDevnet = "solana-devnet",
   SolanaTestnet = "solana-testnet",
   Stargaze = "stargaze-1",
   StargazeTestnet = "elgafar-1",
@@ -60,6 +61,7 @@ export const mainNetworkDenom: Record<StakingNetworkId, CoinDenom | null> = {
   [StakingNetworkId.Osmosis]: CoinDenom.OSMO,
   [StakingNetworkId.Regen]: CoinDenom.REGEN,
   [StakingNetworkId.Solana]: CoinDenom.SOL,
+  [StakingNetworkId.SolanaDevnet]: CoinDenom.SOL,
   [StakingNetworkId.SolanaTestnet]: CoinDenom.SOL,
   [StakingNetworkId.Stargaze]: CoinDenom.STARS,
   [StakingNetworkId.StargazeTestnet]: CoinDenom.STARS,
@@ -70,5 +72,6 @@ export const testnetNetworks = new Set([
   StakingNetworkId.CosmosHubTestnet,
   StakingNetworkId.KavaTestnet,
   StakingNetworkId.SolanaTestnet,
+  StakingNetworkId.SolanaDevnet,
   StakingNetworkId.StargazeTestnet,
 ]);
diff --git a/src/screens/staking/lib/staking_sdk/core/index.ts b/src/screens/staking/lib/staking_sdk/core/index.ts
@@ -32,6 +32,7 @@ export const networkIdToNetworkKey: Record<StakingNetworkId, NetworkKey> = {
   [StakingNetworkId.Osmosis]: "osmosis",
   [StakingNetworkId.Regen]: "regen",
   [StakingNetworkId.Solana]: "solana",
+  [StakingNetworkId.SolanaDevnet]: "solana-devnet",
   [StakingNetworkId.SolanaTestnet]: "solana-testnet",
   [StakingNetworkId.Stargaze]: "stargaze",
   [StakingNetworkId.StargazeTestnet]: "stargaze-testnet",

diff --git a/src/screens/staking/lib/staking_sdk/core/solana.ts b/src/screens/staking/lib/staking_sdk/core/solana.ts
@@ -8,7 +8,8 @@ import {
 export const solanaNetworks = new Set(
   [
     // StakingNetworkId.Solana,
-    StakingNetworkId.SolanaTestnet,
+    // StakingNetworkId.SolanaTestnet,
+    StakingNetworkId.SolanaDevnet,
   ].filter(
     ENABLE_TESTNETS ? () => true : (network) => !testnetNetworks.has(network),
   ),

diff --git a/src/screens/staking/lib/staking_sdk/utils/accounts.ts b/src/screens/staking/lib/staking_sdk/utils/accounts.ts
@@ -5,7 +5,7 @@ import { getNetworkInfo } from "@src/utils/network_info";
 
 import type { Account } from "../core";
 import { networkIdToNetworkKey } from "../core";
-import { testnetNetworks } from "../core/base";
+import { StakingNetworkId, testnetNetworks } from "../core/base";
 import { normaliseCoin, sumAllCoins, sumCoins } from "./coins";
 import { sortNetworksByName } from "./networks";
 
@@ -102,3 +102,14 @@ export const sortAccountsByNetworkName = (a: Account, b: Account) => {
 
   return sortNetworksByName(networkA, networkB);
 };
+
+export const getExplorerLink = (address: string, network?: string) => {
+  switch (network) {
+    case StakingNetworkId.Solana:
+    case StakingNetworkId.SolanaTestnet:
+    case StakingNetworkId.SolanaDevnet:
+      return `https://explorer.solana.com/address/${address}?cluster=devnet`;
+    default:
+      return null;
+  }
+};
diff --git a/src/screens/staking/lib/staking_sdk/utils/coins.ts b/src/screens/staking/lib/staking_sdk/utils/coins.ts
@@ -16,6 +16,7 @@ export const networkToUnnormalisedDenom = {
   [StakingNetworkId.Osmosis]: "UOSMO",
   [StakingNetworkId.Regen]: "UREGEN",
   [StakingNetworkId.Solana]: "LAMPORTS",
+  [StakingNetworkId.SolanaDevnet]: "LAMPORTS",
   [StakingNetworkId.SolanaTestnet]: "LAMPORTS",
   [StakingNetworkId.Stargaze]: "USTARS",
   [StakingNetworkId.StargazeTestnet]: "USTARS",

diff --git a/src/screens/staking/lib/staking_sdk/wallet_operations/solana.ts b/src/screens/staking/lib/staking_sdk/wallet_operations/solana.ts
@@ -149,7 +149,12 @@ export const tryToConnectPhantom = async (
     const publicKey = resp.publicKey.toString();
 
     return [StakingNetworkId.Solana]
-      .concat(ENABLE_TESTNETS ? [StakingNetworkId.SolanaTestnet] : [])
+      .concat(
+        ENABLE_TESTNETS
+          ? [StakingNetworkId.SolanaTestnet, StakingNetworkId.SolanaDevnet]
+          : [],
+      )
+      .filter((networkId) => solanaNetworks.has(networkId))
       .reduce(async (promise, networkId) => {
         await promise;
 

diff --git a/src/utils/network_info.ts b/src/utils/network_info.ts
@@ -645,7 +645,6 @@ const networks = {
     name: "Sentinel",
   },
   "solana": {
-    address: "76nwV8zz8tLz97SBRXH6uwHvgHXtqJDLQfF66jZhQ857",
     denom: "SOL",
     graphql: "solana",
     guide: "how-to-stake-sol-on-solana",
@@ -654,8 +653,16 @@ const networks = {
     label: "Solana - SOL",
     name: "Solana",
   },
+  "solana-devnet": {
+    denom: "SOL",
+    graphql: "solana",
+    guide: "how-to-stake-sol-on-solana",
+    image: "/images/network/solana.svg",
+    key: "solana-devnet",
+    label: "SolanaDevnet - SOL",
+    name: "Solana Devnet",
+  },
   "solana-testnet": {
-    address: "76nwV8zz8tLz97SBRXH6uwHvgHXtqJDLQfF66jZhQ857",
     denom: "SOL",
     graphql: "solana",
     guide: "how-to-stake-sol-on-solana",
@@ -804,7 +811,7 @@ const cosmosTestNetworkKeys = ENABLE_TESTNETS
   : [];
 
 const solanaTestNetworkKeys = ENABLE_TESTNETS
-  ? (["solana-testnet"] satisfies NetworkKey[])
+  ? (["solana-testnet", "solana-devnet"] satisfies NetworkKey[])
   : [];
 
 export const cosmosNetworkKeys = [