Merge branch 'main' into feat/top-navigation-shield-buttons

apps/faucet/package.json

@@ -19,7 +19,6 @@
     "@cosmjs/encoding": "^0.29.0",
     "buffer": "^6.0.3",
     "dompurify": "^3.0.5",
-    "ethers": "6.7.1",
     "framer-motion": "^11.5.4",
     "node-forge": "^1.3.1",
     "react": "^18.3.0",

apps/namadillo/package.json

@@ -16,7 +16,6 @@
     "bignumber.js": "^9.1.1",
     "clsx": "^2.1.1",
     "crypto-browserify": "^3.12.0",
-    "ethers": "^6.7.1",
     "fp-ts": "^2.16.1",
     "framer-motion": "^11.3.28",
     "idb-keyval": "^6.2.1",

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/AppRoutes.tsx

@@ -1,4 +1,5 @@
 import { Router } from "@remix-run/router";
+import { useAtomValue } from "jotai";
 import {
   Route,
   Routes,
@@ -11,11 +12,14 @@ import { AccountOverview } from "./AccountOverview";
 import { App } from "./App";
 import { RouteErrorBoundary } from "./Common/RouteErrorBoundary";
 import { Governance } from "./Governance";
+import { Ibc } from "./Ibc";
 import { SettingsPanel } from "./Settings/SettingsPanel";
 import { Staking } from "./Staking";
 import { SwitchAccountPanel } from "./SwitchAccount/SwitchAccountPanel";
 
+import { applicationFeaturesAtom } from "atoms/settings";
 import GovernanceRoutes from "./Governance/routes";
+import IbcRoutes from "./Ibc/routes";
 import SettingsRoutes from "./Settings/routes";
 import { SignMessages } from "./SignMessages/SignMessages";
 import MessageRoutes from "./SignMessages/routes";
@@ -28,6 +32,7 @@ import TransferRoutes from "./Transfer/routes";
 export const MainRoutes = (): JSX.Element => {
   const location = useLocation();
   const state = location.state as { backgroundLocation?: Location };
+  const features = useAtomValue(applicationFeaturesAtom);
 
   // Avoid animation being fired twice when navigating inside settings modal routes
   const settingsAnimationKey =
@@ -46,6 +51,9 @@ export const MainRoutes = (): JSX.Element => {
             element={<Governance />}
           />
           <Route path={`${TransferRoutes.index()}/*`} element={<Transfer />} />
+          {features.ibcTransfersEnabled && (
+            <Route path={`${IbcRoutes.index()}/*`} element={<Ibc />} />
+          )}
         </Route>
       </Routes>
       <Routes location={location} key={settingsAnimationKey}>

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/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/Governance/ProposalHeader.tsx

@@ -291,7 +291,7 @@ const ProgressBar: React.FC<{
 
 const VoteButton: React.FC<{
   proposal: AtomWithQueryResult<Proposal>;
-  vote: AtomWithQueryResult<VoteType | undefined>;
+  vote: AtomWithQueryResult<VoteType | null>;
   proposalId: bigint;
 }> = ({ proposal, vote, proposalId }) => {
   const navigate = useNavigate();
@@ -317,7 +317,7 @@ const VoteButton: React.FC<{
       const disabled =
         !isExtensionConnected || !canVote.data || status !== "ongoing";
 
-      const voted = typeof vote.data !== "undefined";
+      const voted = vote.data !== null;
       const text = voted ? "Edit Vote" : "Vote";
 
       return {
@@ -344,9 +344,9 @@ const VoteButton: React.FC<{
 };
 
 const VotedLabel: React.FC<{
-  vote: AtomWithQueryResult<VoteType | undefined>;
+  vote: AtomWithQueryResult<VoteType | null>;
 }> = ({ vote }) => {
-  if (vote.isSuccess && typeof vote.data !== "undefined") {
+  if (vote.isSuccess && vote.data !== null) {
     return (
       <VotedLabelComponent vote={vote.data} className="text-xs min-w-22" />
     );