feat(namadillo): general content tweaks (#1117)

Author: pedrorezende

apps/namadillo/src/App/Common/ConnectExtensionButton.tsx

@@ -13,7 +13,7 @@ export const ConnectExtensionButton = (): JSX.Element => {
     <>
       {extensionAttachStatus === "attached" && !isExtensionConnected && (
         <ActionButton backgroundColor="yellow" size="sm" onClick={connect}>
-          Connect Extension
+          Connect Keychain
         </ActionButton>
       )}
       {extensionAttachStatus === "detached" && (
@@ -24,7 +24,7 @@ export const ConnectExtensionButton = (): JSX.Element => {
           backgroundColor="yellow"
           size="sm"
         >
-          Download Extension
+          Download Keychain
         </ActionButton>
       )}
     </>

apps/namadillo/src/App/Common/Intro.tsx

@@ -13,7 +13,7 @@ export const Intro = (): JSX.Element => {
             "uppercase text-center font-medium text-yellow leading-10 text-4xl"
           )}
         >
-          Your Gateway to Shielded Multichain
+          Your Gateway to the Shielded Multichain
         </h2>
       </div>
       <div className="flex gap-4 w-full">
@@ -25,7 +25,7 @@ export const Intro = (): JSX.Element => {
           size="sm"
           outlineColor="yellow"
         >
-          Help
+          Community Help
         </ActionButton>
       </div>
     </div>

apps/namadillo/src/App/Common/Navigation.tsx

@@ -1,7 +1,6 @@
 import { SidebarMenuItem } from "App/Common/SidebarMenuItem";
 import GovernanceRoutes from "App/Governance/routes";
 import { MASPIcon } from "App/Icons/MASPIcon";
-import { SwapIcon } from "App/Icons/SwapIcon";
 import { AiFillHome } from "react-icons/ai";
 import { BsDiscord, BsTwitterX } from "react-icons/bs";
 import { FaVoteYea } from "react-icons/fa";
@@ -36,7 +35,7 @@ export const Navigation = (): JSX.Element => {
         <li>
           <SidebarMenuItem>
             <IoSwapHorizontal />
-            Transfer
+            IBC Transfer
           </SidebarMenuItem>
         </li>
         <li>
@@ -47,14 +46,6 @@ export const Navigation = (): JSX.Element => {
             MASP
           </SidebarMenuItem>
         </li>
-        <li>
-          <SidebarMenuItem>
-            <i className="w-4">
-              <SwapIcon />
-            </i>
-            Swap
-          </SidebarMenuItem>
-        </li>
       </ul>
       <footer className="flex flex-col gap-10">
         <ul className="flex flex-col gap-1 text-neutral-300 text-sm">
@@ -65,7 +56,7 @@ export const Navigation = (): JSX.Element => {
               target="_blank"
               rel="noreferrer"
             >
-              Help
+              Community Help
             </a>
           </li>
         </ul>

apps/namadillo/src/App/Settings/Advanced.tsx

@@ -1,11 +1,12 @@
 import { ActionButton, Input, Stack } from "@namada/components";
+import { chainParametersAtom } from "atoms/chain";
 import {
   indexerUrlAtom,
   rpcUrlAtom,
   updateIndexerUrlAtom,
   updateRpcUrlAtom,
 } from "atoms/settings";
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import { useState } from "react";
 import { useLocation } from "react-router-dom";
 
@@ -16,6 +17,7 @@ export const Advanced = (): JSX.Element => {
   const [rpcMutation] = useAtom(updateRpcUrlAtom);
   const [currentIndexer] = useAtom(indexerUrlAtom);
   const [indexerMutation] = useAtom(updateIndexerUrlAtom);
+  const { data: chainParameters } = useAtomValue(chainParametersAtom);
 
   const [rpc, setRpc] = useState(currentRpc);
   const [indexer, setIndexer] = useState(currentIndexer);
@@ -69,6 +71,14 @@ export const Advanced = (): JSX.Element => {
           }}
           required
         />
+        <Input
+          type="text"
+          variant="ReadOnlyCopy"
+          value={chainParameters?.chainId}
+          label="Chain ID (provided by the Indexer)"
+          disabled={true}
+          className="[&_input]:border-neutral-800"
+        />
       </Stack>
       <ActionButton
         className="shrink-0"

apps/namadillo/src/App/Settings/SettingsMain.tsx

@@ -1,12 +1,8 @@
-import { chainParametersAtom } from "atoms/chain/atoms";
-import { useAtomValue } from "jotai";
 import { version } from "../../../package.json";
 import { SettingsPanelMenuItem } from "./SettingsPanelMenuItem";
 import SettingsRoutes from "./routes";
 
 export const SettingsMain = (): JSX.Element => {
-  const { data: chainParameters } = useAtomValue(chainParametersAtom);
-
   return (
     <div className="flex flex-1 justify-between flex-col">
       <ul className="flex flex-col gap-2">
@@ -20,8 +16,7 @@ export const SettingsMain = (): JSX.Element => {
         />
       </ul>
       <div className="text-xs">
-        <div>Version: {version}</div>
-        <div>Chain ID: {chainParameters?.chainId}</div>
+        <div>Namadillo Version: {version}</div>
       </div>
     </div>
   );

apps/namadillo/src/App/Sidebars/MainnetRoadmap.tsx

@@ -51,25 +51,22 @@ const MainnetRoadmap = (): JSX.Element => {
         )}
         {renderPhase(
           "2",
-          <>
-            Proof of Stake Rewards
-            <br />
-            PGF Inflation
-          </>,
+          <>Staking Rewards</>,
           claimRewardsEnabled ? "opacity-100" : "opacity-25",
           claimRewardsEnabled
         )}
+        {renderPhase("2", <></>, "opacity-25")}
         {renderPhase(
           "3",
           <>
-            MASP Enabled
-            <br />
             IBC Transfers
+            <br />
+            MASP Enabled
           </>,
           "opacity-25"
         )}
-        {renderPhase("4", "Shielded Rewards", "opacity-25")}
-        {renderPhase("5", "NAM Transfers", "opacity-25")}
+        {renderPhase("4", "Shielding Rewards", "opacity-25")}
+        {renderPhase("5", "NAM Transfers enabled", "opacity-25")}
       </ul>
       <ActionButton
         className="max-w-40 mt-6"

apps/namadillo/src/App/Sidebars/ValidatorDiversification.tsx

@@ -18,8 +18,9 @@ export const ValidatorDiversification = (): JSX.Element => {
         outlineColor="cyan"
         textHoverColor="black"
         backgroundHoverColor="cyan"
-        href="https://namada.net"
+        href="https://namada.net/blog/namada-cubic-proof-of-stake"
         target="_blank"
+        rel="nofollow noreferrer"
         size="xs"
       >
         Learn about CPoS

apps/namadillo/src/App/Sidebars/YourStakingDistribution.tsx

@@ -70,7 +70,7 @@ export const YourStakingDistribution = ({
                 animate={{ opacity: 1 }}
                 exit={{ opacity: 0 }}
               >
-                Your Staking Distribution
+                Your Stake Distribution
               </motion.span>
             )}
             {displayedValidator && (