feat(namadillo): fixing errors when extension is connected and user doesn't have an account (#1125)

Author: pedrorezende

apps/namadillo/src/App/AccountOverview/AccountOverview.tsx

@@ -8,6 +8,7 @@ import {
   applicationFeaturesAtom,
   namadaExtensionConnectedAtom,
 } from "atoms/settings";
+import { useUserHasAccount } from "hooks/useUserHasAccount";
 import { useAtomValue } from "jotai";
 import { twMerge } from "tailwind-merge";
 import { AccountBalanceContainer } from "./AccountBalanceContainer";
@@ -16,24 +17,25 @@ import { NavigationFooter } from "./NavigationFooter";
 
 export const AccountOverview = (): JSX.Element => {
   const isConnected = useAtomValue(namadaExtensionConnectedAtom);
+  const hasAccount = useUserHasAccount();
   const { claimRewardsEnabled, maspEnabled } = useAtomValue(
     applicationFeaturesAtom
   );
 
-  const showSidebar = isConnected;
+  const showSidebar = isConnected && hasAccount !== undefined;
 
   return (
     <PageWithSidebar>
       <div className={twMerge("flex w-full", !showSidebar && "col-span-2")}>
-        {!isConnected && (
+        {(!isConnected || hasAccount === false) && (
           <section className="flex rounded-sm items-center w-full bg-black">
             <div className="w-[420px] mx-auto">
               <Intro />
             </div>
           </section>
         )}
 
-        {isConnected && !claimRewardsEnabled && (
+        {isConnected && hasAccount && !claimRewardsEnabled && (
           <section className="flex items-center bg-black rounded-sm w-full">
             <Stack gap={5} className="my-auto min-w-[365px] mx-auto py-12">
               <AccountBalanceContainer />
@@ -42,7 +44,7 @@ export const AccountOverview = (): JSX.Element => {
           </section>
         )}
 
-        {isConnected && claimRewardsEnabled && (
+        {isConnected && hasAccount && claimRewardsEnabled && (
           <section className="flex flex-col w-full rounded-sm min-h-full gap-2">
             <div className="grid grid-cols-[1.25fr_1fr] gap-2">
               <Panel className="pl-4 pr-6 py-5">

apps/namadillo/src/App/Governance/GovernanceOverview.tsx

@@ -8,6 +8,7 @@ import {
   atomsAreLoaded,
   useNotifyOnAtomError,
 } from "atoms/utils";
+import { useUserHasAccount } from "hooks/useUserHasAccount";
 import { useAtomValue } from "jotai";
 import { AllProposalsTable } from "./AllProposalsTable";
 import { LiveGovernanceProposals } from "./LiveGovernanceProposals";
@@ -19,10 +20,11 @@ export const GovernanceOverview: React.FC = () => {
   const isConnected = useAtomValue(namadaExtensionConnectedAtom);
   const allProposals = useAtomValue(allProposalsAtom);
   const votedProposals = useAtomValue(votedProposalsAtom);
+  const hasAccount = useUserHasAccount();
 
   // TODO: is there a better way than this to show that votedProposalIdsAtom
   // is dependent on isConnected?
-  const extensionAtoms = isConnected ? [votedProposals] : [];
+  const extensionAtoms = isConnected && hasAccount ? [votedProposals] : [];
   const activeAtoms = [allProposals, ...extensionAtoms];
 
   const liveProposals =
@@ -44,6 +46,9 @@ export const GovernanceOverview: React.FC = () => {
         {!isConnected && (
           <ConnectBanner text="To vote please connect your account" />
         )}
+        {isConnected && hasAccount === false && (
+          <ConnectBanner text="To vote please create or import an account using Namada keychain" />
+        )}
         <ProposalListPanel
           title="Live Proposals"
           errorText="Unable to load live governance proposals"

apps/namadillo/src/App/Staking/AllValidatorsTable.tsx

@@ -9,6 +9,7 @@ import { namadaExtensionConnectedAtom } from "atoms/settings";
 import { atomsAreLoading, atomsAreNotInitialized } from "atoms/utils";
 import { allValidatorsAtom } from "atoms/validators";
 import BigNumber from "bignumber.js";
+import { useUserHasAccount } from "hooks/useUserHasAccount";
 import { useValidatorFilter } from "hooks/useValidatorFilter";
 import { useValidatorTableSorting } from "hooks/useValidatorTableSorting";
 import { useAtomValue } from "jotai";
@@ -33,6 +34,7 @@ export const AllValidatorsTable = ({
   const isConnected = useAtomValue(namadaExtensionConnectedAtom);
   const navigate = useNavigate();
   const [searchTerm, setSearchTerm] = useState("");
+  const hasAccount = useUserHasAccount();
 
   const filteredValidators = useValidatorFilter({
     validators: validators.isSuccess ? validators.data : [],
@@ -117,7 +119,7 @@ export const AllValidatorsTable = ({
             onChange={(value: string) => setSearchTerm(value)}
             placeholder="Search Validator"
           />
-          {isConnected && (
+          {isConnected && hasAccount && (
             <ActionButton
               size="sm"
               backgroundColor="cyan"

apps/namadillo/src/App/Staking/StakingOverview.tsx

@@ -5,13 +5,15 @@ import { ValidatorDiversification } from "App/Sidebars/ValidatorDiversification"
 import { YourStakingDistribution } from "App/Sidebars/YourStakingDistribution";
 import { namadaExtensionConnectedAtom } from "atoms/settings";
 import { myValidatorsAtom } from "atoms/validators";
+import { useUserHasAccount } from "hooks/useUserHasAccount";
 import { useAtomValue } from "jotai";
 import { AllValidatorsTable } from "./AllValidatorsTable";
 import { MyValidatorsTable } from "./MyValidatorsTable";
 import { StakingSummary } from "./StakingSummary";
 import { UnbondingAmountsTable } from "./UnbondingAmountsTable";
 
 export const StakingOverview = (): JSX.Element => {
+  const hasAccount = useUserHasAccount();
   const isConnected = useAtomValue(namadaExtensionConnectedAtom);
   const myValidators = useAtomValue(myValidatorsAtom);
   const hasStaking = myValidators.data?.some((v) => v.stakedAmount?.gt(0));
@@ -26,7 +28,10 @@ export const StakingOverview = (): JSX.Element => {
         {!isConnected && (
           <ConnectBanner text="To stake please connect your account" />
         )}
-        {isConnected && <StakingSummary />}
+        {isConnected && hasAccount === false && (
+          <ConnectBanner text="To stake please create or import an account using Namada keychain" />
+        )}
+        {isConnected && hasAccount && <StakingSummary />}
         {hasStaking && (
           <Panel title="My Validators" className="relative grid">
             <MyValidatorsTable />

apps/namadillo/src/hooks/useUserHasAccount.ts

@@ -0,0 +1,8 @@
+import { defaultAccountAtom } from "atoms/accounts";
+import { useAtomValue } from "jotai";
+
+export const useUserHasAccount = (): boolean | undefined => {
+  const account = useAtomValue(defaultAccountAtom);
+  if (account.isPending) return undefined;
+  return Boolean(account.data);
+};

apps/namadillo/src/theme.ts

@@ -3,7 +3,7 @@ export const colors = {
   balance: "#ffffff",
   unbond: "#DD1599",
   shielded: "#ffff00",
-  empty: "2F2F2F",
+  empty: "#2F2F2F",
 };
 
 export const keyframes = {