enhancement: displaying list of other wallets on signup get started page

greymass · Oct 23, 2024 · 08e08b6 · 08e08b6
1 parent 5424b48
commit 08e08b6
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 43 deletions.
diff --git a/src/routes/[network]/(account)/signup/+page.svelte b/src/routes/[network]/(account)/signup/+page.svelte
@@ -7,23 +7,67 @@
 
 	const { data } = $props();
 
-	const currentEnvironment = detectEnvironment();
+	const currentEnvironment = 'mobile'; //detectEnvironment();
 	const currentWalletType = walletTypes[currentEnvironment];
 	const currentWalletTypePath = `/${data.network}/signup/wallets/${currentWalletType.type}`;
 	const recommendedWallet = currentWalletType.wallets[0];
+	const otherWallets = currentWalletType.wallets.slice(1);
 </script>
 
 <Stack class="gap-2">
 	<h3 class="h3">Lets's get started</h3>
 	<p>
-		There are many options to setup your first account, but for new users we recommend the following
-		wallet for your current platform. Feel free to explore other platforms and wallet options.
+		There are many options to create your first account but we recommend {recommendedWallet.name} for
+		most people new to EOS.
 	</p>
 </Stack>
 
+<Stack class="rounded-2xl border border-white/20 p-4">
+	<div class="flex items-start space-x-4">
+		<div class="mt-2 rounded-full bg-mineShaft-800">
+			{#if recommendedWallet.logo}
+				<img src={recommendedWallet.logo} alt={`${recommendedWallet.name} logo`} width="72" />
+			{/if}
+		</div>
+		<div>
+			<h3 class="text-2xl font-semibold">{recommendedWallet.name}</h3>
+			<p>{recommendedWallet.description}</p>
+			<Stack class="mt-4 gap-2">
+				<Button variant="primary" href={recommendedWallet.route}
+					>Continue with {recommendedWallet.name}</Button
+				>
+			</Stack>
+		</div>
+	</div>
+</Stack>
+<div class="my-6 border-t border-white/20"></div>
+
+{#each otherWallets as wallet}
+	<Stack>
+		<a
+			href={wallet.route}
+			class="group grid grid-cols-[auto_1fr_auto] items-center gap-4 rounded-2xl border border-white/20 p-4
+			hover:bg-mineShaft-950 focus-visible:outline focus-visible:outline-transparent focus-visible:ring-2 focus-visible:ring-solar-500"
+		>
+			<div class="rounded-full bg-mineShaft-900/60">
+				{#if wallet.logo}
+					<img src={wallet.logo} alt={`${wallet.name} logo`} width="52" />
+				{/if}
+			</div>
+			<div class="space-y-1">
+				<h4 class="text-xl font-semibold">
+					{wallet.name}
+				</h4>
+				<p>{wallet.description}</p>
+			</div>
+			<ChevronRight class="size-6 group-hover:stroke-skyBlue-500" />
+		</a>
+	</Stack>
+{/each}
+
 <Stack>
 	<a
-		href="/{data.network}/signup/wallets"
+		href={currentWalletTypePath}
 		class="group grid grid-cols-[auto_1fr_auto] items-center gap-4 rounded-2xl border border-white/20 p-4
 hover:bg-mineShaft-950 focus-visible:outline focus-visible:outline-transparent focus-visible:ring-2 focus-visible:ring-solar-500"
 	>
@@ -42,37 +86,3 @@ hover:bg-mineShaft-950 focus-visible:outline focus-visible:outline-transparent f
 		<ChevronRight class="size-6 group-hover:stroke-skyBlue-500" />
 	</a>
 </Stack>
-
-<Stack class="rounded-2xl border border-white/20 p-4">
-	<div class="flex items-center space-x-4">
-		<div class="rounded-full bg-mineShaft-800">
-			{#if recommendedWallet.logo}
-				<img src={recommendedWallet.logo} alt={`${recommendedWallet.name} logo`} />
-			{/if}
-		</div>
-		<div>
-			<h3 class="text-2xl font-semibold">{recommendedWallet.name}</h3>
-			<p class="text-gray-300">{recommendedWallet.description}</p>
-		</div>
-	</div>
-	<Stack class="gap-2">
-		<Button variant="primary" href={recommendedWallet.route}>Get Started</Button>
-		<Button variant="secondary" href={currentWalletTypePath}>Select another wallet</Button>
-	</Stack>
-</Stack>
-
-<Stack class="gap-2">
-	<h3 class="h3">Why do I need an account?</h3>
-	<p>
-		An account on the blockchain is your unique identity, enabling you to perform transactions,
-		store assets, and participate in the network.
-	</p>
-</Stack>
-
-<Stack class="gap-2">
-	<h3 class="h3">Why do I need a wallet?</h3>
-	<p>
-		A wallet is your gateway to the blockchain, allowing you to manage your digital assets and
-		interact with decentralized applications.
-	</p>
-</Stack>
diff --git a/src/routes/[network]/(account)/signup/walletTypes.ts b/src/routes/[network]/(account)/signup/walletTypes.ts
@@ -66,9 +66,16 @@ export const walletTypes: Record<string, WalletType> = {
 				name: 'Anchor',
 				route: 'signup/wallets/desktop/anchor',
 				logo: AnchorLogo,
-				description: 'Anchor is a secure and easy-to-use mobile wallet.'
+				description:
+					'Popular option with a user-friendly interface. Supports multiple EOSIO chains.'
 			},
-			{ name: 'Wombat', route: 'signup/wallets/desktop/wombat', logo: WombatLogo }
+			{
+				name: 'Wombat',
+				route: 'signup/wallets/desktop/wombat',
+				logo: WombatLogo,
+				description:
+					'Fast and secure with multi-chain support. Offers a smooth onboarding experience.'
+			}
 		]
 	},
 	mobile: {
@@ -82,9 +89,26 @@ export const walletTypes: Record<string, WalletType> = {
 			'Quick and easy transactions from your smartphone'
 		],
 		wallets: [
-			{ name: 'Anchor Mobile', route: 'signup/wallets/mobile/anchor', logo: AnchorLogo },
-			{ name: 'Wombat Mobile', route: 'signup/wallets/mobile/wombat', logo: WombatLogo },
-			{ name: 'TokenPocket', route: 'signup/wallets/mobile/tokenpocket', logo: TokenPocketLogo }
+			{
+				name: 'Anchor Mobile',
+				route: 'signup/wallets/mobile/anchor',
+				logo: AnchorLogo,
+				description:
+					'Popular mobile option with a user-friendly interface. Supports multiple EOSIO chains.'
+			},
+			{
+				name: 'Wombat Mobile',
+				route: 'signup/wallets/mobile/wombat',
+				logo: WombatLogo,
+				description:
+					'Fast and secure with multi-chain support. Offers a smooth onboarding experience.'
+			},
+			{
+				name: 'TokenPocket',
+				route: 'signup/wallets/mobile/tokenpocket',
+				logo: TokenPocketLogo,
+				description: 'A leading crypto wallet that supports multiple chains.'
+			}
 		]
 	},
 	extensions: {