Skip to content

Redesign: Minimalist Scaffold Stellar-inspired #20

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

Open
willemneal wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Redesign: Minimalist Scaffold Stellar-inspired #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
332 changes: 332 additions & 0 deletions packages/frontend/src/pages/new-account/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,110 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
---

<BaseLayout title="G2C — Set Up Passkey">
<<<<<<< ours
<<<<<<< ours
<div class="page-header">
<h1>Set Up Account</h1>
</div>
<p class="info">Register a passkey and deploy your smart account on-chain. Your passkey is the only key.</p>

<div class="status-bar">
<span class="status-label">Contract</span>
<code id="contract-id"></code>
||||||| ancestor
<h1>Set Up Your Account</h1>
<p class="info">
Register a passkey to secure your smart account, then deploy it on-chain.
Your passkey (fingerprint, face, or security key) will be the only way to authorize transactions.
</p>

<div id="status-bar">
<div>Account: <code id="contract-id"></code></div>
=======
<h1>Set Up Account</h1>
<p class="info">Register a passkey. Deploy on-chain. Your passkey is the only key. No recovery. No compromise.</p>
||||||| ancestor
<h1>Set Up Account</h1>
<p class="info">Register a passkey. Deploy on-chain. Your passkey is the only key. No recovery. No compromise.</p>
=======
<h1>Set Up Your Account</h1>
<p class="info">
Register a passkey to secure your smart account, then deploy it on-chain.
Your passkey (fingerprint, face, or security key) will be the only way to authorize transactions.
</p>
>>>>>>> theirs

<div id="status-bar">
<<<<<<< ours
<span class="status-label">CONTRACT:</span> <code id="contract-id"></code>
>>>>>>> theirs
||||||| ancestor
<span class="status-label">CONTRACT:</span> <code id="contract-id"></code>
=======
<div>Account: <code id="contract-id"></code></div>
>>>>>>> theirs
</div>

<div id="error-box" class="error" style="display:none"></div>

<!-- Step indicator -->
<div class="steps">
<div class="step active" id="step-1-indicator">
<div class="step-number">1</div>
<div class="step-text">Register Passkey</div>
</div>
<div class="step-divider"></div>
<div class="step" id="step-2-indicator">
<div class="step-number">2</div>
<div class="step-text">Deploy</div>
</div>
</div>

<section>
<<<<<<< ours
<<<<<<< ours
<h2>Register Passkey</h2>
<p class="info">Your browser will prompt you to create a passkey bound to your account.</p>
||||||| ancestor
<h2>1. Register Passkey</h2>
<p class="info">
Your browser will prompt you to create a passkey.
This passkey is bound to your account and will be used to sign all future transactions.
</p>
=======
<h2>01 // Register Passkey</h2>
<p class="info">Your browser will prompt you to create a passkey bound to your account.</p>
>>>>>>> theirs
||||||| ancestor
<h2>01 // Register Passkey</h2>
<p class="info">Your browser will prompt you to create a passkey bound to your account.</p>
=======
<h2>1. Register Passkey</h2>
<p class="info">
Your browser will prompt you to create a passkey.
This passkey is bound to your account and will be used to sign all future transactions.
</p>
>>>>>>> theirs
<div class="field">
<button id="register-btn">Register Passkey</button>
</div>
<pre id="register-result" style="display:none"></pre>
</section>

<section id="deploy-section" class="hidden">
<<<<<<< ours
<<<<<<< ours
<h2>Deploy Account</h2>
||||||| ancestor
<h2>2. Deploy Account</h2>
=======
<h2>02 // Deploy Account</h2>
>>>>>>> theirs
||||||| ancestor
<h2>02 // Deploy Account</h2>
=======
<h2>2. Deploy Account</h2>
>>>>>>> theirs
<p class="info">Publish your passkey-secured smart account to the Stellar network.</p>
<div class="field">
<button id="deploy-btn" class="primary">Deploy Account</button>
Expand All @@ -37,15 +115,268 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
</section>

<section id="done-section" class="hidden">
<<<<<<< ours
<<<<<<< ours
<div class="success-card">
<div class="success-icon">&#10003;</div>
<h2>Account Live</h2>
<p class="info">Your smart account is deployed. Use your passkey to sign transactions.</p>
<div class="field">
<a id="account-link" class="button-link">Go to Account &rarr;</a>
</div>
||||||| ancestor
<h2>Account Ready</h2>
<p class="info">Your smart account is live. Use your passkey to sign transactions.</p>
<div class="field">
<a id="account-link" class="button-link">Go to Account</a>
=======
<h2>// Account Live</h2>
<p class="info">Your smart account is deployed. Use your passkey to sign transactions.</p>
||||||| ancestor
<h2>// Account Live</h2>
<p class="info">Your smart account is deployed. Use your passkey to sign transactions.</p>
=======
<h2>Account Ready</h2>
<p class="info">Your smart account is live. Use your passkey to sign transactions.</p>
>>>>>>> theirs
<div class="field">
<<<<<<< ours
<a id="account-link" class="button-link">Go to Account &rarr;</a>
>>>>>>> theirs
||||||| ancestor
<a id="account-link" class="button-link">Go to Account &rarr;</a>
=======
<a id="account-link" class="button-link">Go to Account</a>
>>>>>>> theirs
</div>
</section>
</BaseLayout>

<style>
<<<<<<< ours
<<<<<<< ours
.status-bar {
background: var(--color-code-bg);
border: 1px solid var(--color-border);
padding: 0.625rem var(--space-md);
margin: var(--space-lg) 0;
border-radius: var(--radius-md);
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: 0.8rem;
}

.status-label {
font-weight: 600;
color: var(--color-text-secondary);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
flex-shrink: 0;
}

.status-bar code {
background: transparent;
color: var(--color-text);
padding: 0;
font-size: 0.75rem;
word-break: break-all;
}

.steps {
display: flex;
align-items: center;
gap: var(--space-sm);
margin: var(--space-lg) 0;
}

.step {
display: flex;
align-items: center;
gap: var(--space-sm);
opacity: 0.4;
}

.step.active {
opacity: 1;
}

.step-number {
width: 1.75rem;
height: 1.75rem;
border-radius: var(--radius-full);
background: var(--color-border);
color: var(--color-text-secondary);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 700;
flex-shrink: 0;
}

.step.active .step-number {
background: var(--color-accent);
color: #ffffff;
}

.step-text {
font-size: 0.8rem;
font-weight: 500;
color: var(--color-text-secondary);
}

.step.active .step-text {
color: var(--color-text);
}

.step-divider {
flex: 1;
height: 1px;
background: var(--color-border);
min-width: 2rem;
}

button.primary {
background: var(--color-success);
padding: 0.75rem 1.75rem;
font-size: 0.9375rem;
}

button.primary:hover {
background: #059669;
}

.button-link {
display: inline-block;
font-family: var(--font-sans);
background: var(--color-accent);
color: #ffffff;
border: none;
padding: 0.625rem 1.25rem;
cursor: pointer;
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
border-radius: var(--radius-md);
transition: background 0.15s ease;
}

.button-link:hover {
background: var(--color-accent-hover);
color: #ffffff;
text-decoration: none;
}

.success-card {
text-align: center;
padding: var(--space-xl) var(--space-md);
}

.success-icon {
width: 3rem;
height: 3rem;
border-radius: var(--radius-full);
background: var(--color-success-light);
color: var(--color-success);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: var(--space-md);
border: 2px solid var(--color-success-border);
}

.success-card h2 {
margin-bottom: var(--space-sm);
}

.success-card .info {
margin-bottom: var(--space-lg);
}

#deploy-result a {
color: var(--color-accent);
text-decoration: underline;
font-weight: 500;
}

#deploy-result a:hover {
color: var(--color-accent-hover);
}
||||||| ancestor
body {
background: #1a1a2e;
}

button.primary {
background: #1a6b3a;
border-color: #1a8b4a;
font-size: 1.1rem;
padding: 0.7rem 2rem;
}

button.primary:hover {
background: #1a8b4a;
}

#status-bar {
background: #0a2040;
border: 1px solid #1a3060;
border-radius: 4px;
padding: 0.5rem 0.75rem;
margin: 1rem 0;
font-size: 0.85rem;
}

.button-link {
display: inline-block;
background: #1a6b3a;
color: #e0e0e0;
border: 1px solid #1a8b4a;
padding: 0.5rem 1.2rem;
border-radius: 4px;
cursor: pointer;
font-size: 0.95rem;
text-decoration: none;
}

.button-link:hover {
background: #1a8b4a;
}

#deploy-result a {
color: #5bc0de;
text-decoration: underline;
}

#deploy-result a:hover {
color: #7dd4ed;
}
=======
button.primary { background: #ffff00; color: #000000; border: 3px solid #000000; font-size: 1rem; padding: 0.85rem 2rem; }
button.primary:hover { background: #000000; color: #ffff00; }
#status-bar { background: #000000; color: #ffffff; border: 3px solid #000000; padding: 0.75rem 1rem; margin: 1.5rem 0; font-family: 'Space Mono', 'Courier New', monospace; font-size: 0.75rem; word-break: break-all; }
.status-label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
#status-bar code { background: transparent; color: #ffff00; padding: 0; font-size: 0.75rem; }
.button-link { display: inline-block; font-family: 'Space Mono', 'Courier New', monospace; background: #ffff00; color: #000000; border: 3px solid #000000; padding: 0.75rem 1.5rem; cursor: pointer; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; border-radius: 0; }
.button-link:hover { background: #000000; color: #ffff00; }
#deploy-result a { color: #000000; text-decoration: underline; text-decoration-thickness: 2px; font-weight: 700; }
#deploy-result a:hover { background: #ffff00; }
>>>>>>> theirs
||||||| ancestor
button.primary { background: #ffff00; color: #000000; border: 3px solid #000000; font-size: 1rem; padding: 0.85rem 2rem; }
button.primary:hover { background: #000000; color: #ffff00; }
#status-bar { background: #000000; color: #ffffff; border: 3px solid #000000; padding: 0.75rem 1rem; margin: 1.5rem 0; font-family: 'Space Mono', 'Courier New', monospace; font-size: 0.75rem; word-break: break-all; }
.status-label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
#status-bar code { background: transparent; color: #ffff00; padding: 0; font-size: 0.75rem; }
.button-link { display: inline-block; font-family: 'Space Mono', 'Courier New', monospace; background: #ffff00; color: #000000; border: 3px solid #000000; padding: 0.75rem 1.5rem; cursor: pointer; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; border-radius: 0; }
.button-link:hover { background: #000000; color: #ffff00; }
#deploy-result a { color: #000000; text-decoration: underline; text-decoration-thickness: 2px; font-weight: 700; }
#deploy-result a:hover { background: #ffff00; }
=======
body {
background: #1a1a2e;
}
Expand Down Expand Up @@ -94,6 +425,7 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
#deploy-result a:hover {
color: #7dd4ed;
}
>>>>>>> theirs
</style>

<script>
Expand Down
Loading
Loading