Skip to content

fix: refactored UI & guide per Rael's feedback #238

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
blueogin merged 2 commits into from
Oct 6, 2026
Merged

fix: refactored UI & guide per Rael's feedback #238

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a9b95b3
refactor: update labels for clarity in CreditsManagementCard and enha…
blueogin Oct 6, 2026
38c9ecb
refactor: remove redundant warning message in GenerateSignerKeyPanel
blueogin Oct 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 40 additions & 26 deletions packages/ai-credits-widget/src/components/buy/GenerateSignerKeyPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,26 +21,42 @@ interface GenerateSignerKeyPanelProps {
}

/** Numbered heading, so each screen reads as a short ordered list. */
function NumberedStep({ index, title }: { index: number; title: string }) {
function NumberedStep({
index,
title,
note,
}: {
index: number
title: string
/** Caveat shown under the title, aligned with it rather than the number. */
note?: string
}) {
return (
<XStack gap="$2" alignItems="center">
<YStack
width={24}
height={24}
borderRadius="$full"
backgroundColor="$backgroundSurface"
alignItems="center"
justifyContent="center"
flexShrink={0}
>
<Text fontSize="$1" fontWeight="700">
{index}
<YStack gap="$1">
<XStack gap="$2" alignItems="center">
<YStack
width={24}
height={24}
borderRadius="$full"
backgroundColor="$backgroundSurface"
alignItems="center"
justifyContent="center"
flexShrink={0}
>
<Text fontSize="$1" fontWeight="700">
{index}
</Text>
</YStack>
<Text fontSize="$3" fontWeight="700">
{title}
</Text>
</YStack>
<Text fontSize="$3" fontWeight="700">
{title}
</Text>
</XStack>
</XStack>
{note && (
<Text marginLeft={32} fontSize="$2" color="$warning" fontStyle="italic" lineHeight="$3">
{note}
</Text>
)}
</YStack>
)
}

Expand Down Expand Up @@ -92,7 +108,12 @@ export function GenerateSignerKeyPanel({
<YStack gap="$2">
<NumberedStep index={1} title="Open Antseed Desktop" />
<NumberedStep index={2} title="Go to Profile → Signer" />
<NumberedStep index={3} title="Tap ↑, paste your Signer Private Key, and save" />
<NumberedStep
index={3}
title="Back up your existing Signer Key"
note="⚠️ Tap ↓ to back up your existing signer key. Importing a new signer key will replace it."
/>
Comment thread
blueogin marked this conversation as resolved.
<NumberedStep index={4} title="Tap ↑ to paste your Signer Key, then save." />
</YStack>

<AntseedSignerRow mode="generate" showCaption={false} />
Expand All @@ -104,13 +125,6 @@ export function GenerateSignerKeyPanel({
</Text>
</AiCreditsStatusNotice>

<AiCreditsStatusNotice borderColor="$warning">
<Text color="$warning" fontSize="$2" lineHeight="$3">
Back up any existing AntSeed signer key before importing this one. Importing replaces
the signer used by your AntSeed account.
</Text>
</AiCreditsStatusNotice>

{onOpenApiSetup && (
<XStack gap="$2" alignItems="center">
<Icon name="settings" size="xs" color="muted" />
Expand Down
6 changes: 3 additions & 3 deletions packages/ai-credits-widget/src/components/manage/CreditsManagementCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@ export function CreditsManagementCard({ state, actions }: CreditsManagementCardP
<Heading level={6}>AI Credits</Heading>

<StatRow>
<StatCell label="Total Credit (US$)">
<StatCell label="Credit balance (US$)">
Comment thread
blueogin marked this conversation as resolved.
{totalCreditDisplay !== null ? (
<StatValueText fontSize="$5">{totalCreditDisplay}</StatValueText>
) : (
Expand All @@ -197,7 +197,7 @@ export function CreditsManagementCard({ state, actions }: CreditsManagementCardP
</StatRow>

<StatRow>
<StatCell label="Total Deposited (G$)">
<StatCell label="Deposited (G$)">
<CompactGStatValue amount={totalGdDepositedG ?? '0.00'} />
</StatCell>
<StatCell label="Monthly Stream (G$)">
Expand All @@ -206,7 +206,7 @@ export function CreditsManagementCard({ state, actions }: CreditsManagementCardP
</StatRow>

<StatRow>
<StatCell label="Bonus Earned (US$)">
<StatCell label="Bonus (US$)">
{totalBonusDisplay !== null ? (
<StatValueText>{totalBonusDisplay}</StatValueText>
) : (
Expand Down
Loading