Merge branch 'main' into fix/transfer-balance

apps/extension/FIREFOX_README.md

@@ -14,7 +14,7 @@ exactly as they are described below.
 
 **NOTE** The add-on submission was built in the following environment:
 
-- Ubuntu Server 24.04 LTS **x86_64** - Please ensure your environment matches this to produce an identical build!
+- Ubuntu Desktop 24.04 LTS **ARM64** - Please ensure your environment matches this to produce an identical build!
 - Docker version 27.x
 
 Follow these instructions to build with Docker:
@@ -47,6 +47,50 @@ docker run --rm -v ./apps/extension/build:/shared namada-keychain-firefox cp -r
 
 If Docker is not currently installed in your environment, please refer to the [instructions of the official Docker documentation](https://docs.docker.com/engine/install/ubuntu/).
 
+The steps we took to install Docker on Ubuntu Desktop 24.04 ARM64 are as follows:
+
+1. Remove any pre-existing Docker-related packages:
+
+```bash
+for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done
+```
+
+2. Setup Docker repository and install keyring
+
+```bash
+# Add Docker's official GPG key:
+sudo apt-get update
+sudo apt-get install ca-certificates curl
+sudo install -m 0755 -d /etc/apt/keyrings
+sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
+sudo chmod a+r /etc/apt/keyrings/docker.asc
+
+# Add the repository to Apt sources:
+echo \
+  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
+  $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
+  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
+sudo apt-get update
+```
+
+3. Install Docker packages:
+
+```bash
+sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
+```
+
+4. Post-install - Add `docker` group to user:
+
+```bash
+# If docker group doesn't currently exist:
+sudo groupadd docker
+
+# Add current user to docker group:
+sudo usermod -aG docker $USER
+```
+
+5. Log out, then log back in for group to take effect! This is to ensure that you don't need to run our Docker commands as root via `sudo`.
+
 [ [Table of Contents](#table-of-contents) ]
 
 ### Source code

apps/extension/webpack.config.js

@@ -234,7 +234,6 @@ module.exports = {
     warningsFilter: [/dependency between chunks.+wasm-bindgen-rayon/],
   },
   optimization: {
-    minimize: false,
     moduleIds: "deterministic", // Ensures consistent module IDs
     chunkIds: "deterministic", // Ensures consistent chunk IDs
   },

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

@@ -102,7 +102,7 @@ export const NamBalanceContainer = (): JSX.Element => {
           NAM Balance
         </Heading>
       )}
-      <div className="flex gap-2 h-full w-full">
+      <div className="flex gap-2 w-full">
         <AtomErrorBoundary
           result={[balanceQuery, stakeQuery]}
           niceError="Unable to load balances"

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

@@ -0,0 +1,30 @@
+import { Stack } from "@namada/components";
+import clsx from "clsx";
+
+type AssetsModalCard = {
+  title: string;
+  icon: React.ReactNode;
+  onClick: () => void;
+} & React.PropsWithChildren;
+
+export const AssetsModalCard = ({
+  title,
+  icon,
+  children,
+  onClick,
+}: AssetsModalCard): JSX.Element => {
+  return (
+    <Stack
+      gap={6}
+      onClick={onClick}
+      className={clsx(
+        "w-[220px] h-full items-stretch pb-8 pt-2.5 px-4 border rounded-md border-transparent transition-colors cursor-pointer",
+        "items-center text-white text-center hover:border-yellow"
+      )}
+    >
+      <h3 className="text-xl font-medium">{title}</h3>
+      <aside className="max-w-[78px]">{icon}</aside>
+      <div className="text-base/tight">{children}</div>
+    </Stack>
+  );
+};

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

@@ -39,11 +39,11 @@ export const ModalContainer = ({
       >
         <IoClose />
       </i>
-      <header className="flex w-full justify-center items-center relative mb-3 text-xl text-medium">
+      <header className="flex w-full justify-center items-center relative mb-3 text-lg text-medium">
         {header}
       </header>
       <div
-        className={twMerge("flex-1 overflow-hidden", contentClassName)}
+        className={twMerge("flex-1 overflow-hidden py-6", contentClassName)}
         {...otherContentProps}
       >
         {children}

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

@@ -1,8 +1,4 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { getDefaultStore } from "jotai";
-import { queryClientAtom } from "jotai-tanstack-query";
-import { Provider as JotaiProvider } from "jotai/react";
-import { useHydrateAtoms } from "jotai/utils";
 
 type ErrorWithResponse = Error & {
   response?: {
@@ -11,7 +7,6 @@ type ErrorWithResponse = Error & {
 };
 
 const MAX_RETRIES = 3;
-
 export const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -31,21 +26,12 @@ export const queryClient = new QueryClient({
   },
 });
 
-const HydrateAtoms = (props: { children: JSX.Element }): JSX.Element => {
-  useHydrateAtoms([[queryClientAtom, queryClient]]);
-  return props.children;
-};
-
 export const QueryProvider = ({
   children,
 }: {
   children: JSX.Element;
 }): JSX.Element => {
   return (
-    <QueryClientProvider client={queryClient}>
-      <JotaiProvider store={getDefaultStore()}>
-        <HydrateAtoms>{children}</HydrateAtoms>
-      </JotaiProvider>
-    </QueryClientProvider>
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
   );
 };

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

@@ -0,0 +1,46 @@
+import { Modal } from "@namada/components";
+import { AssetsModalCard } from "./AssetsModalCard";
+import { ModalContainer } from "./ModalContainer";
+
+type Entry = {
+  title: string;
+  onClick: () => void;
+  icon: React.ReactNode;
+  children: React.ReactNode;
+};
+
+type SelectOptionModalProps = {
+  title: string;
+  onClose: () => void;
+  items: Entry[];
+};
+
+export const SelectOptionModal = ({
+  title,
+  onClose,
+  items,
+}: SelectOptionModalProps): JSX.Element => {
+  return (
+    <Modal onClose={onClose}>
+      <ModalContainer
+        header={title}
+        onClose={onClose}
+        containerProps={{ className: "!w-auto !h-auto bg-rblack" }}
+        contentProps={{ className: "pt-0 mt-3" }}
+      >
+        <ul className="grid grid-cols-[1fr_1px_1fr] gap-4 pt-1">
+          {items.map((item, index) => (
+            <>
+              <li key={index}>
+                <AssetsModalCard {...item}>{item.children}</AssetsModalCard>
+              </li>
+              {index + 1 < items.length && (
+                <li className="w-px bg-white -my-1" />
+              )}
+            </>
+          ))}
+        </ul>
+      </ModalContainer>
+    </Modal>
+  );
+};

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

@@ -0,0 +1,45 @@
+import { routes } from "App/routes";
+import { wallets } from "integrations";
+import { getAssetImageUrl } from "integrations/utils";
+import { useNavigate } from "react-router-dom";
+import { namadaAsset } from "utils";
+import { SelectOptionModal } from "./SelectOptionModal";
+
+type ShieldAssetsModal = {
+  onClose: () => void;
+};
+
+export const ShieldAssetsModal = ({
+  onClose,
+}: ShieldAssetsModal): JSX.Element => {
+  const navigate = useNavigate();
+  const goTo = (url: string): void => {
+    navigate(url);
+    onClose();
+  };
+
+  return (
+    <SelectOptionModal
+      title="Shield Assets"
+      onClose={onClose}
+      items={[
+        {
+          title: "IBC Shield",
+          icon: <img src={wallets.keplr.iconUrl} className="w-full" />,
+          onClick: () => goTo(routes.ibc),
+          children: "Shield external assets over IBC to Namada",
+        },
+        {
+          title: "Internal Shield",
+          icon: (
+            <span className="flex w-full bg-yellow rounded-md">
+              <img src={getAssetImageUrl(namadaAsset())} className="w-full" />
+            </span>
+          ),
+          onClick: () => goTo(routes.maspShield),
+          children: "Shield Assets from your Namada transparent account",
+        },
+      ]}
+    />
+  );
+};

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

@@ -0,0 +1,24 @@
+import { queryClient } from "App/Common/QueryProvider";
+import { getDefaultStore } from "jotai";
+import { queryClientAtom } from "jotai-tanstack-query";
+import { Provider as JotaiProvider } from "jotai/react";
+import { useHydrateAtoms } from "jotai/utils";
+
+type StorageProviderProps = { children: JSX.Element };
+
+const HydrateAtoms = (props: { children: JSX.Element }): JSX.Element => {
+  useHydrateAtoms([[queryClientAtom, queryClient]]);
+  return props.children;
+};
+
+export const defaultStore = getDefaultStore();
+
+export const StorageProvider = ({
+  children,
+}: StorageProviderProps): JSX.Element => {
+  return (
+    <JotaiProvider store={defaultStore}>
+      <HydrateAtoms>{children}</HydrateAtoms>
+    </JotaiProvider>
+  );
+};

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

@@ -0,0 +1,46 @@
+import { routes } from "App/routes";
+import { wallets } from "integrations";
+import { getAssetImageUrl } from "integrations/utils";
+import { useNavigate } from "react-router-dom";
+import { namadaAsset } from "utils";
+import { SelectOptionModal } from "./SelectOptionModal";
+
+type UnshieldAssetsModal = {
+  onClose: () => void;
+};
+
+export const UnshieldAssetsModal = ({
+  onClose,
+}: UnshieldAssetsModal): JSX.Element => {
+  const navigate = useNavigate();
+  const goTo = (url: string): void => {
+    navigate(url);
+    onClose();
+  };
+
+  return (
+    <SelectOptionModal
+      title="Unshield Assets"
+      onClose={onClose}
+      items={[
+        {
+          title: "IBC Unshield",
+          icon: <img src={wallets.keplr.iconUrl} className="w-full" />,
+          onClick: () => goTo(routes.ibcWithdraw),
+          children: "Unshield assets over IBC to an IBC chain",
+        },
+        {
+          title: "Internal Unshield",
+          icon: (
+            <span className="flex w-full bg-yellow rounded-md">
+              <img src={getAssetImageUrl(namadaAsset())} className="w-full" />
+            </span>
+          ),
+          onClick: () => goTo(routes.maspUnshield),
+          children:
+            "Unshield assets from your Namada shielded to transparent account",
+        },
+      ]}
+    />
+  );
+};