Skip to content

Updated Sign In presentation withApple / Google modal in place of ext… #751

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
OFiDCrypt merged 1 commit into from
Jun 23, 2026
Merged

Updated Sign In presentation withApple / Google modal in place of ext… #751

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
61 changes: 35 additions & 26 deletions assets/js/webapp/wallet.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -475,46 +475,51 @@ function toggleWalletDropdown() {
if (chevron) chevron.classList.toggle('rotate-180');
}

// Create / Sign In Sub-Dropdown
function toggleCreateSignInDropdown() {
const dropdown = document.getElementById('createSignInDropdown');
const chevron = document.getElementById('createChevron');
// ====================== CREATE / SIGN IN MODAL ======================

if (dropdown) dropdown.classList.toggle('hidden');
// Open Create/Sign In Modal
function openCreateSignInModal() {
const dropdown = document.getElementById('walletDropdown');
if (dropdown) dropdown.classList.add('hidden');

if (chevron) {
chevron.style.transform = dropdown && !dropdown.classList.contains('hidden')
? 'rotate(180deg)'
: 'rotate(0deg)';
}
const modal = document.getElementById('create-signin-modal');
if (modal) modal.style.display = 'flex';
}

function closeCreateSignInDropdown() {
const dropdown = document.getElementById('createSignInDropdown');
const chevron = document.getElementById('createChevron');
if (dropdown) dropdown.classList.add('hidden');
if (chevron) chevron.style.transform = 'rotate(0deg)';
// Close Create/Sign In Modal
function closeCreateSignInModal() {
const modal = document.getElementById('create-signin-modal');
if (modal) modal.style.display = 'none';
}

// Google from Modal
function handleCreateWalletFromModal() {
closeCreateSignInModal();
handleCreateWallet();
}

// Unified Click Outside Handler (handles both dropdowns)
// Apple from Modal
function handleAppleSignInFromModal() {
closeCreateSignInModal();
handleAppleSignIn();
}

// ====================== CLICK OUTSIDE HANDLER ======================

// Unified Click Outside Handler (only handles main wallet dropdown now)
document.addEventListener('click', (e) => {
// Close main wallet dropdown
const addBtn = document.getElementById('addWalletBtn');
const walletDropdown = document.getElementById('walletDropdown');

// Close main wallet dropdown when clicking outside
if (addBtn && walletDropdown &&
!addBtn.contains(e.target) &&
!walletDropdown.contains(e.target)) {

walletDropdown.classList.add('hidden');
const mainChevron = document.getElementById('chevron');
if (mainChevron) mainChevron.classList.remove('rotate-180');
}

// Close Create/Sign In sub-dropdown
const createContainer = document.getElementById('createSignInContainer');
if (createContainer && !createContainer.contains(e.target)) {
closeCreateSignInDropdown();
}
});

// ====================== STATE PROTECTION ======================
Expand Down Expand Up @@ -1397,8 +1402,12 @@ window.sellToken = sellToken;
window.dismissClaimBubble = dismissClaimBubble;
window.toggleCommunityTokens = toggleCommunityTokens;
window.toggleWorldwideCurrencies = toggleWorldwideCurrencies;
window.toggleCreateSignInDropdown = toggleCreateSignInDropdown;
window.closeCreateSignInDropdown = closeCreateSignInDropdown;

// Create / Sign In Modal (Updated)
window.openCreateSignInModal = openCreateSignInModal;
window.closeCreateSignInModal = closeCreateSignInModal;
window.handleCreateWalletFromModal = handleCreateWalletFromModal;
window.handleAppleSignInFromModal = handleAppleSignInFromModal;

window.openValueLockModal = openValueLockModal;
window.closeValueLockModal = closeValueLockModal;
Expand Down
82 changes: 59 additions & 23 deletions wallet.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -743,36 +743,17 @@
<div>Connect Phantom</div>
</button>

<!-- ==================== NEW: CREATE / SIGN IN with Sub-Dropdown ==================== -->
<!-- ==================== CREATE / SIGN IN (Now opens Modal) ==================== -->
<div class="relative" id="createSignInContainer">
<button onclick="toggleCreateSignInDropdown()"
class="w-full flex items-center justify-between px-5 py-4 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold transition-colors">
<button onclick="openCreateSignInModal()"
class="w-full flex items-center justify-between px-5 py-4 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold transition-colors rounded-3xl">
<div class="flex items-center gap-3">
<i class="fas fa-user-plus text-zinc-200"></i>
<div>Create / Sign In</div>
</div>
<i class="fas fa-chevron-down text-base transition-transform"
id="createChevron"></i>
</button>

<!-- Sub Dropdown: Google + Apple -->
<div id="createSignInDropdown"
class="hidden relative w-full z-50 mt-1 flex flex-col gap-1">

<!-- Google Button -->
<button onclick="handleCreateWallet(); closeCreateSignInDropdown()"
class="w-full flex items-center gap-4 px-5 py-4 bg-purple-600 hover:bg-purple-700 text-left text-white font-semibold transition-all rounded-3xl">
<div class="w-6 flex justify-center"><i class="fab fa-google text-lg"></i></div>
<span>Google</span>
</button>

<!-- Apple Button -->
<button onclick="handleAppleSignIn(); closeCreateSignInDropdown()"
class="w-full flex items-center gap-4 px-5 py-4 bg-purple-600 hover:bg-purple-700 text-left text-white font-semibold transition-all rounded-3xl">
<div class="w-6 flex justify-center"><i class="fab fa-apple text-lg"></i></div>
<span>Apple</span>
</button>
</div>
</div>
<!-- ==================== END NEW SECTION ==================== -->

Expand Down Expand Up @@ -1792,6 +1773,7 @@
<div class="modal-content">
<span class="close" onclick="closeModal('redeem')">&times;</span>
<h2 class="text-2xl font-black tracking-tight mb-2">Redeem Code</h2>

<form id="redeem-form">
<input type="text" id="redeem-input" placeholder="Enter your 13-digit code" maxlength="13"
pattern="[0-9]{13}" title="Please enter exactly 13 digits" required>
Expand All @@ -1802,10 +1784,64 @@ <h2 class="text-2xl font-black tracking-tight mb-2">Redeem Code</h2>

<!-- Beautiful Gradient Button Applied Instantly -->
<button type="submit" class="w-full py-4 text-center font-bold text-lg mt-8"
style="height: auto ; line-height: 1.4 ; min-height: 56px ;">
style="height: auto; line-height: 1.4; min-height: 56px;">
Redeem
</button>
</form>

<!-- Powered by Kinnected -->
<p class="text-center text-zinc-400 text-sm mt-8">
Powered by
<a href="https://kinnected-links.com" class="status-link"
style="text-decoration: none; font-weight: 600; color: inherit;">
Kinnected
</a>
• Secure • Instant
</p>
</div>
</div>

<!-- CREATE / SIGN IN MODAL - Phantom Style -->
<div id="create-signin-modal" class="modal"
onclick="if (event.target.id === 'create-signin-modal') closeCreateSignInModal()">
<div class="modal-content"
style="max-width: 380px; width: 92%; padding: 32px 28px; text-align: center; border-radius: 24px;">

<!-- Logo -->
<div class="flex justify-center mb-6">
<div
class="w-20 h-20 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg">
<img src="/assets/images/webp/giddy-key-logo-2.webp" alt="Giddy Key"
class="w-14 h-14 object-contain">
</div>
</div>

<!-- Title & Subtitle -->
<h2 class="text-3xl font-bold tracking-tight mb-2" style="color: var(--text-color);">Sign up or login</h2>
<p class="text-zinc-400 text-sm mb-8 px-4">
Create an account to access your Giddy Key Wallet and start using $GIDDY, $eXPB, and more.
</p>

<!-- Google Button -->
<button onclick="handleCreateWalletFromModal()" class="w-full flex items-center justify-center gap-3 px-6 py-4 mb-3
bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700
text-white font-semibold rounded-2xl transition-all text-lg">
<i class="fab fa-google text-xl"></i>
<span>Continue with Google</span>
</button>

<!-- Apple Button -->
<button onclick="handleAppleSignInFromModal()" class="w-full flex items-center justify-center gap-3 px-6 py-4
bg-gradient-to-r from-zinc-700 to-zinc-800 hover:from-zinc-800 hover:to-zinc-900
text-white font-semibold rounded-2xl transition-all text-lg">
<i class="fab fa-apple text-xl"></i>
<span>Continue with Apple</span>
</button>

<p class="text-[11px] text-zinc-500 mt-6 px-4">
By continuing, you agree to our Terms of Service and <a href="/docs/privacy-policy.html"
class="text-purple-400 hover:text-purple-300 transition-colors">Privacy Policy</a>.
</p>
</div>
</div>

Expand Down
Loading