feat(app): refine onboarding card and wallet connect loading

Author: jarrodwatts

app/src/components/AbstractBadge/index.tsx

@@ -0,0 +1,21 @@
+import clsx from 'clsx';
+import Image from 'next/image';
+import styles from './styles.module.scss';
+
+interface AbstractBadgeProps {
+  className?: string;
+}
+
+export default function AbstractBadge({ className }: AbstractBadgeProps) {
+  return (
+    <div className={clsx(styles.badge, className)}>
+      <Image
+        src="/assets/images/Abstract_AppIcon_LightMode.svg"
+        alt="Abstract AGW icon"
+        width={72}
+        height={72}
+        priority
+      />
+    </div>
+  );
+}

app/src/components/AbstractBadge/styles.module.scss

@@ -0,0 +1,7 @@
+@import '@/styles/mixins';
+
+.badge {
+  width: 72px;
+  height: 72px;
+  line-height: 0;
+}

app/src/components/SessionWizard/steps/NotLoggedIn.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import Button from '@/@abstract-ui/components/Button';
+import AbstractBadge from '@/components/AbstractBadge';
 import {
   Card,
   CardContent,
@@ -13,21 +14,33 @@ import { useSessionWizardState } from '@/hooks/useSessionWizardState';
 import styles from '../styles.module.scss';
 
 export default function NotLoggedIn() {
-  const { login } = useSessionWizardState();
+  const { login, isLoginPending } = useSessionWizardState();
 
   return (
     <div className={styles.wrapper}>
       <Card>
-        <CardHeader gradient />
-        <CardContent className={styles.content}>
-          <CardTitle>Create AGW Session Key</CardTitle>
+        <CardHeader gradient>
+          <div className={styles.badge}>
+            <AbstractBadge />
+          </div>
+        </CardHeader>
+        <CardContent className={styles.loginContent}>
+          <CardTitle>AGW MCP Server Onboarding</CardTitle>
           <CardDescription>
-            Connect with Abstract Global Wallet to configure and create a scoped session key.
+            Connect your Abstract Global Wallet to finish AGW MCP Server setup for local tools.
+            After login, you will choose a scoped session policy and create a session for secure
+            automated actions. This flow only configures MCP access for this machine.
           </CardDescription>
         </CardContent>
         <CardFooter className={styles.footer}>
-          <Button className={styles.footerButton} height="40" variant="primary" onClick={login}>
-            Connect with Abstract
+          <Button
+            className={styles.footerButton}
+            height="40"
+            variant="primary"
+            disabled={isLoginPending}
+            onClick={login}
+          >
+            {isLoginPending ? 'Connecting wallet...' : 'Login with AGW'}
           </Button>
         </CardFooter>
       </Card>

app/src/components/SessionWizard/styles.module.scss

@@ -38,8 +38,8 @@
 
 .walletAddress {
   margin: 0;
-  font-size: 34px;
-  line-height: 1;
+  font-size: 22px;
+  line-height: 1.15;
   letter-spacing: -0.03em;
   font-weight: 500;
 }
@@ -57,6 +57,17 @@
   padding: 20px 24px 16px;
 }
 
+.loginContent {
+  text-align: center;
+}
+
+.badge {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
 .sectionTitle {
   margin: 0;
   text-align: center;
@@ -89,6 +100,17 @@
   color: #2a313c;
 }
 
+.select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  padding-right: 40px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 5.5L7 9L10.5 5.5' stroke='%233D4450' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: 14px 14px;
+  background-position: right 16px center;
+}
+
 .textarea {
   border-radius: 14px;
   min-height: 200px;

app/src/hooks/useSessionWizardState.ts

@@ -1,13 +1,20 @@
 'use client';
 
-import { useLoginWithAbstract } from '@abstract-foundation/agw-react';
-import { useAccount } from 'wagmi';
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
+import { useAccount, useConnect } from 'wagmi';
 import useSessionWizardStore from '@/stores/useSessionWizardStore';
 
 export function useSessionWizardState() {
-  const { login } = useLoginWithAbstract();
   const { isConnected, address } = useAccount();
+  const { connect, connectors, isPending: isLoginPending } = useConnect();
+
+  const login = useCallback(() => {
+    const connector = connectors.find(c => c.id === 'xyz.abs.privy');
+    if (!connector) {
+      throw new Error('Abstract connector not found');
+    }
+    connect({ connector });
+  }, [connect, connectors]);
 
   const currentStep = useSessionWizardStore(state => state.currentStep);
   const agwAddress = useSessionWizardStore(state => state.agwAddress);
@@ -53,6 +60,7 @@ export function useSessionWizardState() {
     markCreationSuccess,
     markCreationError,
     isConnected,
+    isLoginPending,
     login,
   };
 }