merge

apps/faucet/webpack.config.js

@@ -10,8 +10,6 @@ require("dotenv").config({ path: resolve(__dirname, ".env") });
 
 const { NODE_ENV } = process.env;
 
-const ASSET_PATH = "/";
-
 const createStyledComponentsTransformer =
   require("typescript-plugin-styled-components").default;
 
@@ -62,7 +60,7 @@ module.exports = {
     faucet: "./src",
   },
   output: {
-    publicPath: ASSET_PATH,
+    publicPath: "/",
     path: resolve(__dirname, `./build/`),
     filename: "[name].bundle.js",
   },

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

@@ -63,7 +63,9 @@ export const AccountOverview = (): JSX.Element => {
 
       {showSidebar &&
         (maspEnabled ?
-          <ShieldAllBanner />
+          <aside>
+            <ShieldAllBanner />
+          </aside>
         : <aside className="bg-black rounded-sm">
             <MainnetRoadmap />
           </aside>)}

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

@@ -0,0 +1,40 @@
+import { Modal } from "@namada/components";
+import clsx from "clsx";
+import React from "react";
+import { IoClose } from "react-icons/io5";
+import { ModalTransition } from "./ModalTransition";
+
+type SelectModalProps = {
+  children: React.ReactNode;
+  title: React.ReactNode;
+  onClose: () => void;
+};
+
+export const SelectModal = ({
+  children,
+  title,
+  onClose,
+}: SelectModalProps): JSX.Element => {
+  return (
+    <Modal onClose={onClose}>
+      <ModalTransition>
+        <div
+          className={clsx(
+            "px-3 pt-2 pb-6 bg-rblack max-w-[400px] min-h-[120px] w-screen rounded-xl border border-neutral-700"
+          )}
+        >
+          <header className="flex w-full justify-center items-center relative mb-4 text-light leading-8">
+            {title}
+            <i
+              className="cursor-pointer text-white absolute right-0 text-xl p-1.5 hover:text-yellow z-50"
+              onClick={onClose}
+            >
+              <IoClose />
+            </i>
+          </header>
+          {children}
+        </div>
+      </ModalTransition>
+    </Modal>
+  );
+};

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

@@ -0,0 +1,42 @@
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+type TabSelectorItem = {
+  text: React.ReactNode;
+  id: string;
+  className?: string;
+};
+
+type TabSelectorProps = {
+  items: TabSelectorItem[];
+  active: string;
+  onChange: (item: TabSelectorItem) => void;
+};
+
+export const TabSelector = ({
+  items,
+  active,
+  onChange,
+}: TabSelectorProps): JSX.Element => {
+  return (
+    <nav>
+      <ul className="flex">
+        {items.map((item) => (
+          <li key={item.id} className="w-full">
+            <button
+              onClick={() => onChange(item)}
+              className={twMerge(
+                clsx(
+                  "border border-current text-current rounded-sm bg-black opacity-70",
+                  { "border border-current opacity-100": item.id === active },
+                  item.className
+                )
+              )}
+            >
+              {item.text}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+};

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

@@ -57,6 +57,7 @@ export const WithProposalId: React.FC<{ proposalId: bigint }> = ({
     data: voteTxData,
     isError,
     error: voteTxError,
+    isPending: isPerformingTx,
   } = useAtomValue(createVoteTxAtom);
   const dispatchNotification = useSetAtom(dispatchToastNotificationAtom);
 
@@ -191,10 +192,12 @@ export const WithProposalId: React.FC<{ proposalId: bigint }> = ({
             <ActionButton
               type="submit"
               disabled={
-                !canVote.data || typeof selectedVoteType === "undefined"
+                !canVote.data ||
+                typeof selectedVoteType === "undefined" ||
+                isPerformingTx
               }
             >
-              Confirm
+              {isPerformingTx ? "Processing..." : "Confirm"}
             </ActionButton>
           </Stack>
         )}

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

@@ -1,8 +1,13 @@
 import { ActionButton } from "@namada/components";
+import svgImg from "App/Assets/ShieldedParty.svg";
 import TransferRoutes from "App/Transfer/routes";
+import { useState } from "react";
+import { Link } from "react-router-dom";
 import { twMerge } from "tailwind-merge";
 
 export const ShieldAllBanner = (): JSX.Element => {
+  const [isAnimating, setIsAnimating] = useState(false);
+
   return (
     <div
       className={twMerge(
@@ -11,17 +16,29 @@ export const ShieldAllBanner = (): JSX.Element => {
         "p-3"
       )}
     >
-      <div className="w-[145px] h-[145px] bg-white">img</div>
-      <ActionButton
-        href={TransferRoutes.shieldAll().url}
-        className="max-w-[160px]"
-        size="sm"
-        backgroundColor="black"
-        textColor="yellow"
-        backgroundHoverColor="yellow"
+      <img
+        className="h-[145px] w-full"
+        // hover effect with :target for external loaded svg with <img>
+        // https://developer.mozilla.org/en-US/docs/Web/CSS/:target
+        // https://gist.github.com/LeaVerou/5198257
+        src={`${svgImg}${isAnimating ? "#hover " : ""}`}
+      />
+      <Link
+        to={TransferRoutes.shieldAll().url}
+        onMouseEnter={() => setIsAnimating(true)}
+        onMouseLeave={() => setIsAnimating(false)}
       >
-        Shield All Assets
-      </ActionButton>
+        <ActionButton
+          as="div"
+          className="max-w-[160px]"
+          size="sm"
+          backgroundColor="black"
+          textColor="yellow"
+          backgroundHoverColor="yellow"
+        >
+          Shield All Assets
+        </ActionButton>
+      </Link>
     </div>
   );
 };

apps/namadillo/src/App/Transfer/AvailableAmountFooter.tsx

@@ -0,0 +1,54 @@
+import { ActionButton, Currency } from "@namada/components";
+import { KnownCurrencies } from "@namada/utils";
+import BigNumber from "bignumber.js";
+import clsx from "clsx";
+
+type AvailableAmountFooterProps = {
+  availableAmount?: BigNumber;
+  currency?: keyof typeof KnownCurrencies;
+  onClickMax?: () => void;
+};
+
+export const AvailableAmountFooter = ({
+  availableAmount,
+  currency,
+  onClickMax,
+}: AvailableAmountFooterProps): JSX.Element => {
+  if (!currency || availableAmount === undefined) {
+    return <></>;
+  }
+
+  return (
+    <div
+      className={clsx(
+        "flex justify-between items-center text-sm text-neutral-500 font-light"
+      )}
+    >
+      <span className="flex gap-2">
+        Available:
+        <Currency
+          amount={availableAmount}
+          currency={currency}
+          spaceAroundSign={true}
+          currencyPosition="right"
+        />
+      </span>
+      <span>
+        {onClickMax && (
+          <ActionButton
+            type="button"
+            size="xs"
+            disabled={availableAmount.eq(0)}
+            onClick={onClickMax}
+            outlineColor="neutral"
+            className="text-neutral-500 text-xs py-0 px-3"
+            backgroundHoverColor="white"
+            backgroundColor="transparent"
+          >
+            Max
+          </ActionButton>
+        )}
+      </span>
+    </div>
+  );
+};

apps/namadillo/src/App/Transfer/ConnectProviderButton.tsx

@@ -0,0 +1,21 @@
+import { ActionButton } from "@namada/components";
+
+type ConnectProviderButtonProps = {
+  onClick?: () => void;
+};
+
+export const ConnectProviderButton = ({
+  onClick,
+}: ConnectProviderButtonProps): JSX.Element => {
+  return (
+    <ActionButton
+      type="button"
+      className="inline-flex absolute top-0 right-0 w-auto text-xs px-2 py-px"
+      onClick={onClick}
+      size="xs"
+      backgroundColor="white"
+    >
+      Connect Wallet
+    </ActionButton>
+  );
+};

apps/namadillo/src/App/Transfer/CustomAddressForm.tsx

@@ -0,0 +1,35 @@
+import { Input, Stack } from "@namada/components";
+
+type CustomAddressFormProps = {
+  onChangeAddress?: (address: string | undefined) => void;
+  customAddress?: string;
+  memo?: string;
+  onChangeMemo?: (address: string) => void;
+};
+
+export const CustomAddressForm = ({
+  customAddress,
+  onChangeAddress,
+  memo,
+  onChangeMemo,
+}: CustomAddressFormProps): JSX.Element => {
+  return (
+    <Stack as="fieldset" gap={2}>
+      {onChangeAddress && (
+        <Input
+          label="Recipient address"
+          value={customAddress}
+          onChange={(e) => onChangeAddress(e.target.value)}
+        />
+      )}
+      {onChangeMemo && (
+        <Input
+          label="Memo"
+          value={memo}
+          onChange={(e) => onChangeMemo(e.target.value)}
+          placeholder="Required for centralized exchanges"
+        />
+      )}
+    </Stack>
+  );
+};

apps/namadillo/src/App/Transfer/EmptyResourceIcon.tsx

@@ -0,0 +1,20 @@
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+type EmptyResourceProps = { className?: string };
+
+export const EmptyResourceIcon = ({
+  className = "",
+}: EmptyResourceProps): JSX.Element => {
+  return (
+    <i
+      className={twMerge(
+        clsx(
+          "flex items-center justify-center aspect-square rounded-full bg-neutral-900 relative ",
+          "before:h-[50%] before:w-[50%] before:bg-neutral-700 before:rounded-full group-hover:before:bg-neutral-600",
+          "before:transition-colors before:duration-300",
+          className
+        )
+      )}
+    />
+  );
+};

apps/namadillo/src/App/Transfer/IBCFromNamadaModule.tsx

@@ -0,0 +1,9 @@
+import { TransferModule } from "./TransferModule";
+
+export const IBCFromNamadaModule = (): JSX.Element => {
+  return (
+    <div>
+      <TransferModule isConnected={false} onSubmitTransfer={() => {}} />
+    </div>
+  );
+};

apps/namadillo/src/App/Transfer/IBCTransfers.tsx

@@ -0,0 +1,12 @@
+import { Panel } from "@namada/components";
+import { IBCFromNamadaModule } from "./IBCFromNamadaModule";
+
+export const IBCTransfers = (): JSX.Element => {
+  return (
+    <div>
+      <Panel>
+        <IBCFromNamadaModule />
+      </Panel>
+    </div>
+  );
+};

apps/namadillo/src/App/Transfer/SelectAssetsModal.tsx

@@ -0,0 +1,15 @@
+import { SelectModal } from "App/Common/SelectModal";
+
+type SelectItemsModalProps = {
+  onClose: () => void;
+};
+
+export const SelectAssetsModal = ({
+  onClose,
+}: SelectItemsModalProps): JSX.Element => {
+  return (
+    <SelectModal onClose={onClose} title="Select Asset">
+      <></>
+    </SelectModal>
+  );
+};

apps/namadillo/src/App/Transfer/SelectChainModal.tsx

@@ -0,0 +1,34 @@
+import { Stack } from "@namada/components";
+import { SelectModal } from "App/Common/SelectModal";
+import clsx from "clsx";
+import { Chain } from "types";
+
+type SelectChainModalProps = {
+  onClose: () => void;
+  chains: Chain[];
+};
+
+export const SelectChainModal = ({
+  onClose,
+  chains,
+}: SelectChainModalProps): JSX.Element => {
+  return (
+    <SelectModal title="Select Source Chain" onClose={onClose}>
+      <Stack as="ul">
+        {chains.map((chain) => (
+          <li key={chain.chainId}>
+            <button
+              className={clsx(
+                "grid grid-cols-[30px_auto] w-full px-6 py-2.5 rounded-sm border",
+                "hover:border-neutral-400"
+              )}
+            >
+              <img src={chain.iconUrl} />
+              <span>{chain.name}</span>
+            </button>
+          </li>
+        ))}
+      </Stack>
+    </SelectModal>
+  );
+};