Skip to content

Commit

Permalink
chore: added more setup pages
Browse files Browse the repository at this point in the history
  • Loading branch information
dafuga committed Sep 18, 2024
1 parent 37d6464 commit 5e151b9
Show file tree
Hide file tree
Showing 4 changed files with 256 additions and 5 deletions.
78 changes: 78 additions & 0 deletions src/routes/[network]/(account)/anchor/desktop/+page.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<script lang="ts">
import Pageheader from '$lib/components/pageheader.svelte';
import Stack from '$lib/components/layout/stack.svelte';
import Button from '$lib/components/button/button.svelte';
const steps = [
{
title: 'Download Anchor Desktop',
description:
'Visit the official Anchor website to download the Anchor desktop wallet application.',
link: 'https://greymass.com/en/anchor/'
},
{
title: 'Install the Desktop Application',
description:
'Run the installer and follow the on-screen instructions to install the Anchor desktop wallet on your computer.'
},
{
title: 'Launch Anchor',
description:
"Open the Anchor desktop application from your computer's applications menu or desktop shortcut."
},
{
title: 'Create a New Account',
description:
'In the Anchor desktop app, click on "Create New Account" and follow the prompts to set up your wallet.'
},
{
title: 'Secure Your Account',
description:
'Write down your private key and store it in a safe place. This is crucial for account recovery and should never be shared.'
},
{
title: 'Configure Desktop Settings',
description:
'Explore the settings to customize your experience, such as default networks and resource management preferences.'
},
{
title: 'Fund Your Wallet',
description:
'Transfer some cryptocurrency to your new Anchor wallet address to start using it on your desktop.'
}
];
</script>

<Stack>
<Pageheader
title="Setup Anchor Desktop Wallet"
subtitle="Follow these steps to get started with Anchor on your desktop"
/>

<div class="container mx-auto p-4">
<ol class="list-decimal space-y-6 pl-5">
{#each steps as step, index}
<li>
<h2 class="mb-2 text-xl font-semibold">{step.title}</h2>
<p class="mb-2">{step.description}</p>
{#if step.link}
<Button href={step.link} blank rel="noopener noreferrer">Download Anchor Desktop</Button
>
{/if}
</li>
{/each}
</ol>

<div class="mt-8">
<h2 class="mb-4 text-xl font-semibold">Why Choose Anchor Desktop?</h2>
<ul class="list-disc space-y-2 pl-5">
<li>Full-featured desktop application for enhanced functionality</li>
<li>Improved security with local key storage on your computer</li>
<li>Supports multiple EOSIO-based blockchains</li>
<li>Advanced features for power users, including multi-sig support</li>
<li>Regular updates and desktop-specific features</li>
<li>Open-source software for transparency and community contributions</li>
</ul>
</div>
</div>
</Stack>
79 changes: 79 additions & 0 deletions src/routes/[network]/(account)/anchor/mobile/+page.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<script lang="ts">
import Pageheader from '$lib/components/pageheader.svelte';
import Stack from '$lib/components/layout/stack.svelte';
import Button from '$lib/components/button/button.svelte';
const steps = [
{
title: 'Download Anchor Mobile',
description:
"Visit your device's app store (Google Play Store for Android or App Store for iOS) to download the Anchor mobile wallet application.",
link: 'https://greymass.com/en/anchor/'
},
{
title: 'Install the Mobile App',
description:
'Tap the "Install" button and wait for the Anchor mobile app to download and install on your device.'
},
{
title: 'Launch Anchor',
description:
"Open the Anchor mobile app by tapping its icon on your device's home screen or app drawer."
},
{
title: 'Create a New Account',
description:
'In the Anchor mobile app, tap on "Create New Account" and follow the on-screen prompts to set up your wallet.'
},
{
title: 'Secure Your Account',
description:
'Write down your private key and store it in a safe place. This is crucial for account recovery and should never be shared or stored digitally.'
},
{
title: 'Configure Mobile Settings',
description:
'Explore the mobile-specific settings to customize your experience, such as biometric authentication and push notification preferences.'
},
{
title: 'Fund Your Wallet',
description:
'Transfer some cryptocurrency to your new Anchor wallet address to start using it on your mobile device.'
}
];
</script>

<Stack>
<Pageheader
title="Setup Anchor Mobile Wallet"
subtitle="Follow these steps to get started with Anchor on your mobile device"
/>

<div class="container mx-auto p-4">
<ol class="list-decimal space-y-6 pl-5">
{#each steps as step, index}
<li>
<h2 class="mb-2 text-xl font-semibold">{step.title}</h2>
<p class="mb-2">{step.description}</p>
{#if step.link}
<Button href={step.link} blank rel="noopener noreferrer">Download Anchor Mobile</Button>
{/if}
</li>
{/each}
</ol>

<div class="mt-8">
<h2 class="mb-4 text-xl font-semibold">Why Choose Anchor Mobile?</h2>
<ul class="list-disc space-y-2 pl-5">
<li>User-friendly mobile interface for on-the-go access</li>
<li>Secure storage of your digital assets on your mobile device</li>
<li>Quick and easy transactions from your smartphone</li>
<li>Supports multiple EOSIO-based blockchains</li>
<li>Built-in dApp browser for mobile-optimized decentralized applications</li>
<li>Biometric authentication for enhanced security</li>
<li>Push notifications for important wallet activities</li>
<li>Open-source software for transparency and community contributions</li>
</ul>
</div>
</div>
</Stack>
26 changes: 21 additions & 5 deletions src/routes/[network]/(account)/signup/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
// benefits: [
// 'No software installation needed',
// 'Access your account from any device with a web browser',
// 'Secure and easy to use'
// 'Relatively secure and easy to use'
// ],
// wallets: [{ name: 'Anchor Web', route: 'anchor' }]
// },
Expand All @@ -30,7 +30,7 @@
],
wallets: [{ name: 'Ledger', route: 'ledger' }]
},
softWallets: {
desktopWallets: {
title: 'Soft Wallets',
description:
'Software wallets are applications you install on your computer or mobile device.',
Expand All @@ -40,8 +40,21 @@
'Often free to download and use'
],
wallets: [
{ name: 'Anchor', route: 'anchor' },
{ name: 'Wombat', route: 'wombat' },
{ name: 'Anchor', route: 'anchor/desktop' },
{ name: 'Wombat', route: 'wombat/desktop' }
]
},
mobileWallets: {
title: 'Mobile Wallets',
description: 'Mobile wallets are applications you install on your mobile device.',
benefits: [
'Convenient for on-the-go access',
'Secure storage of your digital assets on your mobile device',
'Quick and easy transactions from your smartphone'
],
wallets: [
{ name: 'Anchor Mobile', route: 'anchor/mobile' },
{ name: 'Wombat Mobile', route: 'wombat/mobile' },
{ name: 'TokenPocket', route: 'tokenpocket' }
]
},
Expand All @@ -54,7 +67,10 @@
'Quick access from your browser',
'Easy to use for web3 interactions'
],
wallets: [{ name: 'MetaMask', route: 'metamask' }]
wallets: [
{ name: 'MetaMask', route: 'metamask' },
{ name: 'Wombat', route: 'wombat/extension' }
]
}
};
Expand Down
78 changes: 78 additions & 0 deletions src/routes/[network]/(account)/tokenpocket/+page.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<script lang="ts">
import Pageheader from '$lib/components/pageheader.svelte';
import Stack from '$lib/components/layout/stack.svelte';
import Button from '$lib/components/button/button.svelte';
const steps = [
{
title: 'Download TokenPocket',
description:
"Visit your device's app store (Google Play Store for Android or App Store for iOS) to download the TokenPocket wallet application.",
link: 'https://www.tokenpocket.pro/en/download/app'
},
{
title: 'Install the App',
description:
'Tap the "Install" button and wait for TokenPocket to download and install on your device.'
},
{
title: 'Launch TokenPocket',
description:
"Open the TokenPocket app by tapping its icon on your device's home screen or app drawer."
},
{
title: 'Create a New Wallet',
description:
'In TokenPocket, select "Create Wallet" and choose the blockchain you want to use (e.g., EOS). Follow the prompts to set up your wallet.'
},
{
title: 'Secure Your Wallet',
description:
'Write down your recovery phrase and private key, storing them in a safe place. This is crucial for account recovery and should never be shared.'
},
{
title: 'Configure Settings',
description:
'Explore the app settings to customize your experience, such as language preferences, network settings, and security options.'
},
{
title: 'Fund Your Wallet',
description:
'Transfer some cryptocurrency to your new TokenPocket wallet address to start using it for transactions and dApps.'
}
];
</script>

<Stack>
<Pageheader
title="Setup TokenPocket Wallet"
subtitle="Follow these steps to get started with TokenPocket on your device"
/>

<div class="container mx-auto p-4">
<ol class="list-decimal space-y-6 pl-5">
{#each steps as step, index}
<li>
<h2 class="mb-2 text-xl font-semibold">{step.title}</h2>
<p class="mb-2">{step.description}</p>
{#if step.link}
<Button href={step.link} blank rel="noopener noreferrer">Download TokenPocket</Button>
{/if}
</li>
{/each}
</ol>

<div class="mt-8">
<h2 class="mb-4 text-xl font-semibold">Why Choose TokenPocket?</h2>
<ul class="list-disc space-y-2 pl-5">
<li>Multi-chain support including EOS, Ethereum, and many others</li>
<li>User-friendly interface for managing multiple cryptocurrencies</li>
<li>Built-in dApp browser for easy access to decentralized applications</li>
<li>Secure storage with optional hardware wallet integration</li>
<li>Regular updates and new features to enhance user experience</li>
<li>Cross-platform availability (mobile and browser extension)</li>
<li>Active community and support for troubleshooting</li>
</ul>
</div>
</div>
</Stack>

0 comments on commit 5e151b9

Please sign in to comment.