feat: updating user details dropdown

alchemyplatform · Dec 19, 2024 · f57b486 · f57b486
1 parent 93082a8
commit f57b486
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 40 deletions.
diff --git a/examples/ui-demo/src/components/configuration/Configuration.tsx b/examples/ui-demo/src/components/configuration/Configuration.tsx
@@ -9,14 +9,7 @@ import { useConfigStore } from "@/state";
 import { WalletTypes } from "@/app/config";
 
 export const Configuration = ({ className }: { className?: string }) => {
-  const { setWalletType, walletType } = useConfigStore(
-    ({ walletType, setWalletType }) => {
-      return {
-        walletType,
-        setWalletType,
-      };
-    }
-  );
+  const { setWalletType, walletType } = useConfigStore();
   // const [walletType, setWalletType] = useState(WalletTypes.smart);
 
   const onSwitchWalletType = () => {
@@ -46,7 +39,7 @@ export const Configuration = ({ className }: { className?: string }) => {
       />
       <p className="text-active text-xs font-medium pt-3">
         Sentence describing all of the value props fo 7702 and educating the
-        user. Curious about what this means?
+        user. Curious about what this means?{" "}
         <ExternalLink className="text-[#363FF9]" href="https://google.com">
           Learn more.
         </ExternalLink>

diff --git a/examples/ui-demo/src/components/shared/user-connection-avatar/UserConnectionDetails.tsx b/examples/ui-demo/src/components/shared/user-connection-avatar/UserConnectionDetails.tsx
@@ -1,3 +1,4 @@
+import { WalletTypes } from "@/app/config";
 import { ExternalLinkIcon } from "@/components/icons/external-link";
 import { LogoutIcon } from "@/components/icons/logout";
 import { DeploymentStatusIndicator } from "@/components/shared/DeploymentStatusIndicator";
@@ -15,8 +16,12 @@ export function UserConnectionDetails({
   const user = useUser();
   const signer = useSigner();
   const { logout } = useLogout();
-  const { theme, primaryColor } = useConfigStore(
-    ({ ui: { theme, primaryColor } }) => ({ theme, primaryColor })
+  const { theme, primaryColor, walletType } = useConfigStore(
+    ({ ui: { theme, primaryColor }, walletType }) => ({
+      theme,
+      primaryColor,
+      walletType,
+    })
   );
   const scaAccount = useAccount({ type: "LightAccount" });
 
@@ -69,40 +74,60 @@ export function UserConnectionDetails({
       {/* Smart Account */}
       <div className="flex flex-row justify-between">
         <span className="text-md md:text-sm text-fg-secondary">
-          Smart account
+          {walletType === WalletTypes.smart ? "Smart account" : "Address"}
         </span>
         <UserAddressLink address={scaAccount.address ?? ""} />
       </div>
-      {/* Status */}
-      <div className="flex flex-row justify-between items-center">
-        <span className="text-md md:text-sm text-fg-secondary">Status</span>
-        <div className="flex flex-row items-center">
-          <DeploymentStatusIndicator
-            isDeployed={!!deploymentStatus}
-            className="w-[12px] h-[12px]"
-          />
-          <span className="text-fg-primary block ml-1 text-md md:text-sm">
-            {deploymentStatus ? "Deployed" : "Not deployed"}
-          </span>
-        </div>
-      </div>
-      {/* Signer */}
-      <div className="flex flex-row justify-between items-center mt-[17px]">
-        <a
-          target="_blank"
-          href="https://accountkit.alchemy.com/concepts/smart-account-signer"
-          className="flex justify-center items-center"
-        >
-          <span className="text-md md:text-sm text-fg-secondary mr-1">
-            Signer
-          </span>
-          <div className="flex flex-row justify-center items-center w-[14px] h-[14px] ml-1">
-            <ExternalLinkIcon className="stroke-fg-secondary" />
+
+      {walletType === WalletTypes.smart ? (
+        <>
+          {/* Status */}
+          <div className="flex flex-row justify-between items-center">
+            <span className="text-md md:text-sm text-fg-secondary">Status</span>
+            <div className="flex flex-row items-center">
+              <DeploymentStatusIndicator
+                isDeployed={!!deploymentStatus}
+                className="w-[12px] h-[12px]"
+              />
+              <span className="text-fg-primary block ml-1 text-md md:text-sm">
+                {deploymentStatus ? "Deployed" : "Not deployed"}
+              </span>
+            </div>
           </div>
-        </a>
+          {/* Signer */}
+          <div className="flex flex-row justify-between items-center mt-[17px]">
+            <a
+              target="_blank"
+              href="https://accountkit.alchemy.com/concepts/smart-account-signer"
+              className="flex justify-center items-center"
+            >
+              <span className="text-md md:text-sm text-fg-secondary mr-1">
+                Signer
+              </span>
+              <div className="flex flex-row justify-center items-center w-[14px] h-[14px] ml-1">
+                <ExternalLinkIcon className="stroke-fg-secondary" />
+              </div>
+            </a>
 
-        <UserAddressLink address={signerAddress} />
-      </div>
+            <UserAddressLink address={signerAddress} />
+          </div>
+        </>
+      ) : (
+        <div className="flex flex-row justify-between items-center">
+          <span className="text-md md:text-sm text-fg-secondary">
+            Delegated to
+          </span>
+          <div className="flex flex-row items-center">
+            <DeploymentStatusIndicator
+              isDeployed={false}
+              className="w-[12px] h-[12px]"
+            />
+            <span className="text-fg-primary block ml-1 text-md md:text-sm">
+              None
+            </span>
+          </div>
+        </div>
+      )}
 
       {/* Logout */}