Feat/1279: Make validator profiles visible on token front end without wallet connected (#1578)

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",

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>
   );
 };
 

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,
     }
   );