adjust authenticator list styles and copy

burnt-labs · Apr 19, 2024 · 1c4d692 · 1c4d692
1 parent 4ad43cb
commit 1c4d692
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 4 deletions.
diff --git a/apps/abstraxion-dashboard/components/AccountInfo.tsx b/apps/abstraxion-dashboard/components/AccountInfo.tsx
@@ -1,7 +1,12 @@
 import { Dispatch, SetStateAction, useState } from "react";
 import dynamic from "next/dynamic";
-import { Button } from "@burnt-labs/ui";
-import { CopyIcon, ScanIcon } from "@/components/Icons";
+import {
+  Button,
+  EmailIcon,
+  AccountWalletLogo,
+  MetamaskLogo,
+} from "@burnt-labs/ui";
+import { CopyIcon } from "@/components/Icons";
 import type { AbstraxionAccount } from "@/hooks";
 import { truncateAddress } from "@/utils";
 
@@ -30,6 +35,42 @@ export const AccountInfo = ({ account }: { account?: AbstraxionAccount }) => {
     }
   };
 
+  type authenticatorTypes = "SECP256K1" | "ETHWALLET" | "JWT";
+
+  const handleAuthenticatorLabels = (type: authenticatorTypes) => {
+    switch (type) {
+      case "SECP256K1":
+        return "OKX WALLET";
+      case "ETHWALLET":
+        return "ETH WALLET";
+      case "JWT":
+        return "EMAIL";
+      default:
+        return "";
+    }
+  };
+
+  const handleAuthenticatorLogos = (type: authenticatorTypes) => {
+    switch (type) {
+      case "SECP256K1":
+        return (
+          <img
+            className="ui-invert"
+            src="https://www.okx.com/cdn/assets/imgs/239/4A66953783FC5452.png"
+            height={24}
+            width={24}
+            alt="OKX Logo"
+          />
+        );
+      case "ETHWALLET":
+        return <MetamaskLogo />;
+      case "JWT":
+        return <EmailIcon />;
+      default:
+        return <AccountWalletLogo />;
+    }
+  };
+
   const renderAuthenticators = () => {
     return account?.authenticators?.nodes.map((authenticator) => {
       return (
@@ -38,11 +79,15 @@ export const AccountInfo = ({ account }: { account?: AbstraxionAccount }) => {
           className="ui-flex ui-items-center ui-px-4 ui-mb-3 ui-h-16 ui-bg-black ui-rounded-lg"
         >
           <div className="ui-flex ui-w-10 ui-h-10 ui-bg-white/20 ui-items-center ui-justify-center ui-rounded-full">
-            <ScanIcon color="white" />
+            {handleAuthenticatorLogos(
+              authenticator.type.toUpperCase() as authenticatorTypes,
+            )}
           </div>
           <div className="ui-ml-4 ui-flex ui-flex-1 ui-items-center ui-justify-between">
             <p className="ui-text-white ui-text-base ui-font-normal ui-font-akkuratLL ui-leading-normal">
-              {String(authenticator.type).toUpperCase()}
+              {handleAuthenticatorLabels(
+                authenticator.type.toUpperCase() as authenticatorTypes,
+              )}
             </p>
           </div>
         </div>

diff --git a/packages/ui/src/icons/email.tsx b/packages/ui/src/icons/email.tsx
@@ -0,0 +1,19 @@
+import { cn } from "../../lib/utils";
+
+export const EmailIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      className={cn("ui-h-5 ui-w-5", className)}
+      width="16"
+      height="13"
+      viewBox="0 0 16 13"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.4 0H1.6C0.72 0 0.00799999 0.72 0.00799999 1.6L0 11.2C0 12.08 0.72 12.8 1.6 12.8H14.4C15.28 12.8 16 12.08 16 11.2V1.6C16 0.72 15.28 0 14.4 0ZM14.4 3.2L8 7.2L1.6 3.2V1.6L8 5.6L14.4 1.6V3.2Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
@@ -17,3 +17,4 @@ export * from "./icons/browser";
 export * from "./icons/keplr";
 export * from "./icons/metamask";
 export * from "./icons/passkey";
+export * from "./icons/email";