From 520f767d094ddd16cd8563a4625c2009c88101d7 Mon Sep 17 00:00:00 2001
From: Sam Keen <samuel@vegaprotocol.io>
Date: Mon, 3 Oct 2022 09:09:35 +0100
Subject: [PATCH] Feat/1279: Make validator profiles visible on token front end
 without wallet connected (#1578)

---
 apps/token/src/i18n/translations/dev.json     |  1 +
 .../token/src/routes/staking/staking-node.tsx | 63 ++++++++++---------
 .../staking/staking-nodes-container.tsx       |  1 -
 3 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/apps/token/src/i18n/translations/dev.json b/apps/token/src/i18n/translations/dev.json
index bafd0d2a2..5f96f96fa 100644
--- a/apps/token/src/i18n/translations/dev.json
+++ b/apps/token/src/i18n/translations/dev.json
@@ -470,6 +470,7 @@
   "notAssociated": "Not Associated",
   "title": "VEGA TOKEN",
   "Use the Ethereum wallet you want to send your tokens to. You'll also need enough Ethereum to pay gas.": "Connect to the Ethereum wallet that holds your $VEGA tokens to see what can be redeemed from vesting tranches. To redeem tokens you will need some ETH to pay gas fees.\n",
+  "Connect to see your stake": "Connect to see your stake",
   "Staked on Vega validator": "Associated to Vega key",
   "You can associate tokens while they are held in the vesting contract, when they unlock you will need to disassociate them before they can be redeemed.": "You can associate tokens while they are held in the vesting contract, when they unlock you will need to disassociate them before they can be redeemed.",
   "Nominate Stake to Validator Node": "Select a validator to nominate",
diff --git a/apps/token/src/routes/staking/staking-node.tsx b/apps/token/src/routes/staking/staking-node.tsx
index 510a58091..54044649d 100644
--- a/apps/token/src/routes/staking/staking-node.tsx
+++ b/apps/token/src/routes/staking/staking-node.tsx
@@ -16,21 +16,17 @@ import { YourStake } from './your-stake';
 export const StakingNodeContainer = () => {
   return (
     <StakingWalletsContainer>
-      {({ currVegaKey }) =>
-        currVegaKey ? (
-          <StakingNodesContainer>
-            {({ data }) => <StakingNode vegaKey={currVegaKey} data={data} />}
-          </StakingNodesContainer>
-        ) : (
-          <ConnectToVega />
-        )
-      }
+      {({ currVegaKey }) => (
+        <StakingNodesContainer>
+          {({ data }) => <StakingNode vegaKey={currVegaKey} data={data} />}
+        </StakingNodesContainer>
+      )}
     </StakingWalletsContainer>
   );
 };
 
 interface StakingNodeProps {
-  vegaKey: VegaKeyExtended;
+  vegaKey: VegaKeyExtended | null;
   data?: StakingQueryResult;
 }
 
@@ -88,14 +84,14 @@ export const StakingNode = ({ vegaKey, data }: StakingNodeProps) => {
 
   if (!nodeInfo) {
     return (
-      <span className={'text-vega-red'}>
+      <span data-testid="staking-node-not-found" className={'text-vega-red'}>
         {t('stakingNodeNotFound', { node })}
       </span>
     );
   }
 
   return (
-    <>
+    <div data-testid="staking-node">
       <h2 data-test-id="validator-node-title" className="text-2xl break-word">
         {nodeInfo.name
           ? t('validatorTitle', { nodeName: nodeInfo.name })
@@ -117,22 +113,33 @@ export const StakingNode = ({ vegaKey, data }: StakingNodeProps) => {
           />
         </section>
       )}
-      <section className="mb-4">
-        <YourStake
-          stakeNextEpoch={stakeNextEpoch}
-          stakeThisEpoch={stakeThisEpoch}
-        />
-      </section>
-      <section>
-        <StakingForm
-          pubkey={vegaKey.pub}
-          nodeId={nodeInfo.id}
-          nodeName={nodeInfo.name}
-          availableStakeToAdd={unstaked}
-          availableStakeToRemove={stakeNextEpoch}
-        />
-      </section>
-    </>
+
+      {vegaKey ? (
+        <>
+          <section className="mb-4">
+            <YourStake
+              stakeNextEpoch={stakeNextEpoch}
+              stakeThisEpoch={stakeThisEpoch}
+            />
+          </section>
+
+          <section>
+            <StakingForm
+              pubkey={vegaKey.pub}
+              nodeId={nodeInfo.id}
+              nodeName={nodeInfo.name}
+              availableStakeToAdd={unstaked}
+              availableStakeToRemove={stakeNextEpoch}
+            />
+          </section>
+        </>
+      ) : (
+        <>
+          <h2>{t('Connect to see your stake')}</h2>
+          <ConnectToVega />
+        </>
+      )}
+    </div>
   );
 };
 
diff --git a/apps/token/src/routes/staking/staking-nodes-container.tsx b/apps/token/src/routes/staking/staking-nodes-container.tsx
index 29cad5031..20a371617 100644
--- a/apps/token/src/routes/staking/staking-nodes-container.tsx
+++ b/apps/token/src/routes/staking/staking-nodes-container.tsx
@@ -85,7 +85,6 @@ export const StakingNodesContainer = ({
     STAKING_QUERY,
     {
       variables: { partyId: keypair?.pub || '' },
-      skip: !keypair?.pub,
     }
   );