Skip to content

Commit 751c76a

Browse files
jarrodwattsjarrodwatts
committed
feat(app): streamline onboarding flow and align session card UI
1 parent 803a65c commit 751c76a

8 files changed

Lines changed: 166 additions & 130 deletions

File tree

‎app/public/assets/images/Abstract_AppIcon_LightMode.svg‎

Lines changed: 40 additions & 0 deletions
Loading

‎app/src/app/session/new/page.tsx‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import SessionFlowClient from '@/components/SessionFlowClient';
22
import { parseOnboardingParams } from '@/lib/onboarding-params';
3+
import pageStyles from '@/app/styles.module.scss';
34
import styles from '@/components/SessionWizard/styles.module.scss';
45

56
function toSearchParams(
@@ -29,18 +30,22 @@ export default function NewSessionPage({
2930

3031
if (!result.ok || !result.params) {
3132
return (
32-
<div className={styles.wrapper}>
33-
<p className={styles.error}>{result.error ?? 'Invalid onboarding parameters.'}</p>
34-
<p className={styles.helper}>Use the agw-mcp CLI to start this flow.</p>
33+
<div className={pageStyles.container}>
34+
<div className={styles.wrapper}>
35+
<p className={styles.error}>{result.error ?? 'Invalid onboarding parameters.'}</p>
36+
<p className={styles.helper}>Use the agw-mcp CLI to start this flow.</p>
37+
</div>
3538
</div>
3639
);
3740
}
3841

3942
return (
40-
<SessionFlowClient
41-
callbackUrl={result.params.callbackUrl}
42-
chainId={result.params.chainId}
43-
signerAddress={result.params.signerAddress}
44-
/>
43+
<div className={pageStyles.container}>
44+
<SessionFlowClient
45+
callbackUrl={result.params.callbackUrl}
46+
chainId={result.params.chainId}
47+
signerAddress={result.params.signerAddress}
48+
/>
49+
</div>
4550
);
4651
}

‎app/src/components/SessionWizard/index.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { useSessionWizardState } from '@/hooks/useSessionWizardState';
55
import Creating from './steps/Creating';
66
import ErrorStep from './steps/Error';
77
import NotLoggedIn from './steps/NotLoggedIn';
8-
import ReviewPolicy from './steps/ReviewPolicy';
98
import SelectPolicy from './steps/SelectPolicy';
109
import Success from './steps/Success';
1110

@@ -25,8 +24,6 @@ export default function SessionWizard({
2524
return <NotLoggedIn />;
2625
case 'select_policy':
2726
return <SelectPolicy />;
28-
case 'review_policy':
29-
return <ReviewPolicy />;
3027
case 'creating':
3128
return <Creating callbackUrl={callbackUrl} signerAddress={signerAddress} chain={chain} />;
3229
case 'success':

‎app/src/components/SessionWizard/steps/ReviewPolicy.tsx‎

Lines changed: 0 additions & 80 deletions
This file was deleted.

‎app/src/components/SessionWizard/steps/SelectPolicy.tsx‎

Lines changed: 29 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
'use client';
22

3+
import Image from 'next/image';
34
import Button from '@/@abstract-ui/components/Button';
45
import {
56
Card,
@@ -20,28 +21,44 @@ export default function SelectPolicy() {
2021
customPolicyJson,
2122
selectPreset,
2223
updateCustomPolicyJson,
23-
proceedToReview,
24+
proceedToCreating,
2425
setValidationError,
2526
} = useSessionWizardState();
2627
const policyState = usePolicyPreview(selectedPreset, customPolicyJson);
28+
const displayAddress = agwAddress
29+
? `${agwAddress.slice(0, 6)}...${agwAddress.slice(-4)}`
30+
: 'Wallet';
2731

28-
const handleReview = () => {
32+
const handleCreate = () => {
2933
if (!policyState.preview || !policyState.risk) {
3034
setValidationError(policyState.error ?? 'Unable to build policy preview.');
3135
return;
3236
}
3337

34-
proceedToReview(policyState.preview, policyState.risk);
38+
proceedToCreating(policyState.preview, policyState.risk);
3539
};
3640

3741
return (
3842
<div className={styles.wrapper}>
39-
<Card>
40-
<CardHeader>
41-
<h2 className={styles.title}>Configure Session Policy</h2>
42-
<p className={styles.description}>Connected account: {agwAddress}</p>
43+
<Card className={styles.mainCard}>
44+
<CardHeader className={styles.mainHeader}>
45+
<div className={styles.identity}>
46+
<div className={styles.logoWrap}>
47+
<Image
48+
src="/assets/images/Abstract_AppIcon_LightMode.svg"
49+
alt="Abstract AGW icon"
50+
width={68}
51+
height={68}
52+
priority
53+
/>
54+
</div>
55+
<h2 className={styles.walletAddress}>{displayAddress}</h2>
56+
<p className={styles.walletLabel}>AGW Wallet</p>
57+
</div>
4358
</CardHeader>
44-
<CardContent className={styles.content}>
59+
<CardContent className={styles.mainBody}>
60+
<p className={styles.sectionTitle}>Configure session policy</p>
61+
4562
<div className={styles.row}>
4663
<label htmlFor="preset">Preset</label>
4764
<select
@@ -71,13 +88,13 @@ export default function SelectPolicy() {
7188
) : null}
7289

7390
{policyState.error ? <p className={styles.error}>{policyState.error}</p> : null}
74-
<CardDescription>
91+
<CardDescription className={styles.policyDescription}>
7592
{POLICY_PRESET_OPTIONS.find(option => option.id === selectedPreset)?.description}
7693
</CardDescription>
7794
</CardContent>
78-
<CardFooter className={styles.footer}>
79-
<Button className={styles.footerButton} height="40" variant="primary" onClick={handleReview}>
80-
Review Policy
95+
<CardFooter className={styles.mainFooter}>
96+
<Button className={styles.footerButton} height="40" variant="primary" onClick={handleCreate}>
97+
Create Session
8198
</Button>
8299
</CardFooter>
83100
</Card>

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

Lines changed: 76 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,69 @@
11
@import '@/styles/mixins';
22

33
.wrapper {
4-
max-width: 640px;
4+
max-width: 420px;
55
margin: 0 auto;
66
width: 100%;
77
}
88

9+
.mainCard {
10+
border-radius: 16px;
11+
}
12+
13+
.mainHeader {
14+
padding: 24px;
15+
padding-bottom: 20px;
16+
border-bottom: 1px solid #e7ebf0;
17+
}
18+
19+
.identity {
20+
display: flex;
21+
flex-direction: column;
22+
align-items: center;
23+
gap: 10px;
24+
}
25+
26+
.logoWrap {
27+
width: 72px;
28+
height: 72px;
29+
display: flex;
30+
align-items: center;
31+
justify-content: center;
32+
border-radius: 18px;
33+
background: #f7faf9;
34+
box-shadow:
35+
inset 0 0 0 1px rgba(0, 0, 0, 0.06),
36+
0 8px 20px -14px rgba(21, 32, 53, 0.4);
37+
}
38+
39+
.walletAddress {
40+
margin: 0;
41+
font-size: 34px;
42+
line-height: 1;
43+
letter-spacing: -0.03em;
44+
font-weight: 500;
45+
}
46+
47+
.walletLabel {
48+
margin: 0;
49+
color: #9da3ac;
50+
font-size: 14px;
51+
}
52+
53+
.mainBody {
54+
display: flex;
55+
flex-direction: column;
56+
gap: 12px;
57+
padding: 20px 24px 16px;
58+
}
59+
60+
.sectionTitle {
61+
margin: 0;
62+
text-align: center;
63+
font-size: 14px;
64+
color: #9da3ac;
65+
}
66+
967
.content {
1068
display: flex;
1169
flex-direction: column;
@@ -22,14 +80,17 @@
2280
.textarea,
2381
.input {
2482
width: 100%;
25-
border-radius: 10px;
26-
border: 1px solid #d7dce3;
27-
padding: 10px;
83+
border-radius: 999px;
84+
border: 1px solid #d9e0ea;
85+
background: #f4f7fb;
86+
padding: 12px 14px;
2887
font-family: inherit;
2988
font-size: 14px;
89+
color: #2a313c;
3090
}
3191

3292
.textarea {
93+
border-radius: 14px;
3394
min-height: 200px;
3495
resize: vertical;
3596
}
@@ -49,6 +110,12 @@
49110
width: 100%;
50111
}
51112

113+
.mainFooter {
114+
justify-content: center;
115+
width: 100%;
116+
padding: 0 24px 24px;
117+
}
118+
52119
.footerButton {
53120
width: 100%;
54121
}
@@ -80,3 +147,8 @@
80147
margin: 0;
81148
color: #4c5361;
82149
}
150+
151+
.policyDescription {
152+
margin-top: 2px;
153+
color: #919aa8;
154+
}

‎app/src/hooks/useSessionWizardState.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,8 @@ export function useSessionWizardState() {
2323
const selectPreset = useSessionWizardStore(state => state.selectPreset);
2424
const updateCustomPolicyJson = useSessionWizardStore(state => state.updateCustomPolicyJson);
2525
const setValidationError = useSessionWizardStore(state => state.setValidationError);
26-
const proceedToReview = useSessionWizardStore(state => state.proceedToReview);
26+
const proceedToCreating = useSessionWizardStore(state => state.proceedToCreating);
2727
const backToPolicySelection = useSessionWizardStore(state => state.backToPolicySelection);
28-
const startCreating = useSessionWizardStore(state => state.startCreating);
2928
const markCreationSuccess = useSessionWizardStore(state => state.markCreationSuccess);
3029
const markCreationError = useSessionWizardStore(state => state.markCreationError);
3130

@@ -49,9 +48,8 @@ export function useSessionWizardState() {
4948
selectPreset,
5049
updateCustomPolicyJson,
5150
setValidationError,
52-
proceedToReview,
51+
proceedToCreating,
5352
backToPolicySelection,
54-
startCreating,
5553
markCreationSuccess,
5654
markCreationError,
5755
isConnected,

0 commit comments

Comments
 (0)