feat/1383: Extension - Add apps link to accounts view (#1385)

Co-authored-by: Harrison Mendonça <[email protected]>

Author: jurevans

apps/extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@namada/extension",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "Namada Keychain",
   "repository": "https://github.com/anoma/namada-interface/",
   "author": "Heliax Dev <[email protected]>",

apps/extension/src/App/Accounts/ParentAccounts.tsx

@@ -8,6 +8,7 @@ import {
   Stack,
 } from "@namada/components";
 import { DerivedAccount } from "@namada/types";
+import { ParentAccountsFooter } from "App/Accounts/ParentAccountsFooter";
 import { PageHeader } from "App/Common";
 import routes from "App/routes";
 import { ParentAccount } from "background/keyring";
@@ -43,9 +44,13 @@ export const ParentAccounts = (): JSX.Element => {
   };
 
   return (
-    <Stack gap={GapPatterns.TitleContent}>
+    <Stack
+      gap={GapPatterns.TitleContent}
+      full
+      className="max-h-[calc(100vh-40px)]"
+    >
       <PageHeader title="Select Account" />
-      <Stack gap={4}>
+      <Stack gap={4} className="flex-1 overflow-auto">
         <nav className="grid items-end grid-cols-[auto_min-content]">
           <p className="text-white font-medium text-xs">Set default keys</p>
           <div className="w-26">
@@ -54,7 +59,7 @@ export const ParentAccounts = (): JSX.Element => {
             </ActionButton>
           </div>
         </nav>
-        <Stack as="ul" gap={3}>
+        <Stack as="ul" gap={3} className="flex-1 overflow-auto">
           {[...parentAccounts].reverse().map((account, idx) => (
             <KeyListItem
               key={`key-listitem-${account.id}`}
@@ -78,6 +83,7 @@ export const ParentAccounts = (): JSX.Element => {
             />
           ))}
         </Stack>
+        <ParentAccountsFooter />
       </Stack>
     </Stack>
   );

apps/extension/src/App/Accounts/ParentAccountsFooter.tsx

@@ -0,0 +1,21 @@
+import { ActionButton } from "@namada/components";
+import { GoArrowUpRight } from "react-icons/go";
+
+export const ParentAccountsFooter = (): JSX.Element => {
+  return (
+    <div>
+      <ActionButton
+        href="https://namada.net/apps"
+        target="_blank"
+        rel="noreferrer"
+        outlineColor="yellow"
+        textHoverColor="black"
+        itemType="button"
+        icon={<GoArrowUpRight className="w-6 h-6" />}
+        iconPosition="right"
+      >
+        View Keychain compatible apps
+      </ActionButton>
+    </div>
+  );
+};

packages/components/src/ActionButton.tsx

@@ -67,12 +67,23 @@ const actionButtonText = tv({
   ),
 });
 
+const actionButtonIcon = tv({
+  base: "flex items-center justify-center absolute top-1/2 -translate-y-1/2 w-6 z-40",
+  variants: {
+    position: {
+      left: "left-3",
+      right: "right-3",
+    },
+  },
+});
+
 type ButtonTailwindVariantsProps = VariantProps<typeof actionButtonShape> &
   VariantProps<typeof actionButtonBackground>;
 
 export type ActionButtonProps<HtmlTag extends keyof React.ReactHTML> = {
   as?: HtmlTag;
   icon?: React.ReactNode;
+  iconPosition?: "left" | "right";
   backgroundColor?: Color;
   backgroundHoverColor?: Color;
   outlineColor?: Color;
@@ -83,6 +94,7 @@ export type ActionButtonProps<HtmlTag extends keyof React.ReactHTML> = {
 
 const Button = ({
   icon,
+  iconPosition = "left",
   children,
   className,
   size,
@@ -136,9 +148,7 @@ const Button = ({
     },
     <>
       {icon && (
-        <i className="flex items-center justify-center left-3 absolute top-1/2 -translate-y-1/2 w-6 z-40">
-          {icon}
-        </i>
+        <i className={actionButtonIcon({ position: iconPosition })}>{icon}</i>
       )}
       <span className={actionButtonText()}>{children}</span>
       <span