From 5424b4846ff63666398a495f030afbaf4a495782 Mon Sep 17 00:00:00 2001 From: dafuga Date: Wed, 23 Oct 2024 14:27:24 -0700 Subject: [PATCH 01/14] chore: added basic womabt page --- .../signup/wallets/mobile/wombat/+page.svelte | 135 +++++++++--------- 1 file changed, 66 insertions(+), 69 deletions(-) diff --git a/src/routes/[network]/(account)/signup/wallets/mobile/wombat/+page.svelte b/src/routes/[network]/(account)/signup/wallets/mobile/wombat/+page.svelte index 122a8f68..07dc1725 100644 --- a/src/routes/[network]/(account)/signup/wallets/mobile/wombat/+page.svelte +++ b/src/routes/[network]/(account)/signup/wallets/mobile/wombat/+page.svelte @@ -1,77 +1,74 @@ - -

Sign Up with {currentWalletType.title}

-

{currentWalletType.description}

- - - -

Benefits

- - - - -

Available Wallets

- - {#each currentWalletType.wallets as wallet} - -
- {#if wallet.logo} - {wallet.name} - {:else} -
- {/if} -
-
-

- {wallet.name} -

- -
- - - {/each} + + +
+
    +
  1. +

    Download Wombat

    +

    + Visit your device's app store (Google Play Store for Android or App Store for iOS) to + download the Wombat wallet application. +

    + +
    2. +
  2. +

    Install the App

    +

    + Tap the "Install" button and wait for Wombat to download and install on your device. +

    +
    3. +
  3. +

    Launch Wombat

    +

    + Open the Wombat app by tapping its icon on your device's home screen or app drawer. +

    +
    4. +
  4. +

    Create a New Wallet

    +

    + In Wombat, follow the prompts to create a new wallet. You may need to set up a PIN or use + biometric authentication for security. +

    +
    5. +
  5. +

    Secure Your Wallet

    +

    + Write down your recovery phrase and store it in a safe place. This is crucial for account + recovery and should never be shared. +

    +
    6. +
  6. +

    Visit the Welcome Page

    +

    + Visit the Wombat welcome page for next steps. +

    +
    7. +
- - +
+

Why Choose Wombat?

+
    +
  • User-friendly interface designed for simplicity
    • +
  • Multi-chain support including EOS and other popular blockchains
    • +
  • Built-in dApp browser for easy access to decentralized applications
    • +
  • Fast and secure transactions
    • +
  • Regular updates and new features to enhance user experience
    • +
  • Cross-platform availability (mobile and browser extension)
    • +
  • Smooth onboarding experience for crypto newcomers
    • +
+
+
From 08e08b66ad2d20fb02e9d8fb7209ecb340d41358 Mon Sep 17 00:00:00 2001 From: dafuga Date: Wed, 23 Oct 2024 14:31:15 -0700 Subject: [PATCH 02/14] enhancement: displaying list of other wallets on signup get started page --- .../[network]/(account)/signup/+page.svelte | 86 +++++++++++-------- .../[network]/(account)/signup/walletTypes.ts | 34 ++++++-- 2 files changed, 77 insertions(+), 43 deletions(-) diff --git a/src/routes/[network]/(account)/signup/+page.svelte b/src/routes/[network]/(account)/signup/+page.svelte index 8f594c89..664c53bb 100644 --- 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);

Lets's get started

- 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.

+ +
+
+ {#if recommendedWallet.logo} + {`${recommendedWallet.name} + {/if} +
+
+

{recommendedWallet.name}

+

{recommendedWallet.description}

+ + + +
+
+ +
+ +{#each otherWallets as wallet} + + +
+ {#if wallet.logo} + {`${wallet.name} + {/if} +
+
+

+ {wallet.name} +

+

{wallet.description}

+
+ + + +{/each} + @@ -42,37 +86,3 @@ hover:bg-mineShaft-950 focus-visible:outline focus-visible:outline-transparent f - - -
-
- {#if recommendedWallet.logo} - {`${recommendedWallet.name} - {/if} -
-
-

{recommendedWallet.name}

-

{recommendedWallet.description}

-
-
- - - - - - - -

Why do I need an account?

-

- An account on the blockchain is your unique identity, enabling you to perform transactions, - store assets, and participate in the network. -

- - - -

Why do I need a wallet?

-

- A wallet is your gateway to the blockchain, allowing you to manage your digital assets and - interact with decentralized applications. -

- diff --git a/src/routes/[network]/(account)/signup/walletTypes.ts b/src/routes/[network]/(account)/signup/walletTypes.ts index fd62e291..8e83786d 100644 --- a/src/routes/[network]/(account)/signup/walletTypes.ts +++ b/src/routes/[network]/(account)/signup/walletTypes.ts @@ -66,9 +66,16 @@ export const walletTypes: Record = { 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 = { '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: { From 46a12b47e0c91e83147da2eefdeeb92a6ce95da2 Mon Sep 17 00:00:00 2001 From: dafuga Date: Wed, 23 Oct 2024 15:32:27 -0700 Subject: [PATCH 03/14] style: linted --- .../[network]/(account)/signup/+layout.svelte | 2 +- .../[network]/(account)/signup/+page.svelte | 25 +++++++++++-------- .../(account)/signup/wallets/+page.svelte | 17 +++++++------ .../actions/[action]/[[data]]/fields.svelte | 3 ++- 4 files changed, 27 insertions(+), 20 deletions(-) diff --git a/src/routes/[network]/(account)/signup/+layout.svelte b/src/routes/[network]/(account)/signup/+layout.svelte index ae1116fe..78412fb4 100644 --- a/src/routes/[network]/(account)/signup/+layout.svelte +++ b/src/routes/[network]/(account)/signup/+layout.svelte @@ -1,4 +1,4 @@ - @@ -67,21 +66,25 @@
- + {#if currentWalletType.icon} + {@const Component = currentWalletType.icon} + + {/if}
-

- {currentWalletType.title} -

-

{currentWalletType.description}

+

More Options

+

+ Choose from {Object.values(walletTypes) + .filter((type) => type.type !== currentWalletType.type) + .map((type) => type.title.toLowerCase()) + .join(', ') + .replace(/,([^,]*)$/, ' and$1')} +

diff --git a/src/routes/[network]/(account)/signup/wallets/+page.svelte b/src/routes/[network]/(account)/signup/wallets/+page.svelte index d88b52b3..f0a7e585 100644 --- a/src/routes/[network]/(account)/signup/wallets/+page.svelte +++ b/src/routes/[network]/(account)/signup/wallets/+page.svelte @@ -7,20 +7,23 @@ const { data } = $props(); -{#snippet walletButton(wallet: WalletType)} +{#snippet walletTypeButton(walletType: WalletType)}
- + {#if walletType.icon} + {@const Component = walletType.icon} + + {/if}

- {wallet.title} + {walletType.title}

-

{wallet.description}

+

{walletType.description}

 @@ -29,8 +32,8 @@ hover:bg-mineShaft-950 focus-visible:outline focus-visible:outline-transparent f

Choose A Wallet Type

- {#each Object.values(walletTypes) as wallet} - {@render walletButton(wallet)} + {#each Object.values(walletTypes) as walletType} + {@render walletTypeButton(walletType)} {/each} diff --git a/src/routes/[network]/(explorer)/contract/[contract]/actions/[action]/[[data]]/fields.svelte b/src/routes/[network]/(explorer)/contract/[contract]/actions/[action]/[[data]]/fields.svelte index 6170674f..b5f8f323 100644 --- a/src/routes/[network]/(explorer)/contract/[contract]/actions/[action]/[[data]]/fields.svelte +++ b/src/routes/[network]/(explorer)/contract/[contract]/actions/[action]/[[data]]/fields.svelte @@ -3,6 +3,7 @@ import Label from '$lib/components/input/label.svelte'; import Textinput from '$lib/components/input/text.svelte'; import type { ABI } from '@wharfkit/antelope'; + import Fields from './fields.svelte'; interface PageProps { abi: ABI; @@ -26,7 +27,7 @@ {#each fields as field} {@const subfields = deriveFields(field.type)} {#if subfields.length > 0} - + {:else} {@const fieldName = [...codePath, field.name].join('->')}
From 682db40e197a15ad24354c5c857915baeb0d6d8b Mon Sep 17 00:00:00 2001 From: dafuga Date: Wed, 23 Oct 2024 15:39:27 -0700 Subject: [PATCH 04/14] enhancement: recommending metamask on desktop --- src/routes/[network]/(account)/signup/walletTypes.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/routes/[network]/(account)/signup/walletTypes.ts b/src/routes/[network]/(account)/signup/walletTypes.ts index 8e83786d..ee4f268a 100644 --- a/src/routes/[network]/(account)/signup/walletTypes.ts +++ b/src/routes/[network]/(account)/signup/walletTypes.ts @@ -62,6 +62,12 @@ export const walletTypes: Record = { 'Often free to download and use' ], wallets: [ + { + name: 'MetaMask', + route: 'signup/wallets/extensions/metamask', + logo: MetaMaskLogo, + description: 'Secure and easy-to-use browser extension wallet.' + }, { name: 'Anchor', route: 'signup/wallets/desktop/anchor', From 12564a7274c86433dfcd9543e4f741ad66affe64 Mon Sep 17 00:00:00 2001 From: dafuga Date: Wed, 23 Oct 2024 15:56:35 -0700 Subject: [PATCH 05/14] cleanup: code cleanup --- src/lib/components/input/bytes.svelte | 2 -- .../[network]/(account)/signup/+layout.svelte | 20 ++++++++++--------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/lib/components/input/bytes.svelte b/src/lib/components/input/bytes.svelte index 2bb5ce73..e1924b62 100644 --- a/src/lib/components/input/bytes.svelte +++ b/src/lib/components/input/bytes.svelte @@ -44,8 +44,6 @@ return; } - console.log({ value, previousValue, valueSetByParent }); - if (value) { const newInput = String(value / UNIT_MULTIPLIERS[unit]); if (input !== newInput && !isAddingDecimal) { diff --git a/src/routes/[network]/(account)/signup/+layout.svelte b/src/routes/[network]/(account)/signup/+layout.svelte index 78412fb4..b572afbf 100644 --- a/src/routes/[network]/(account)/signup/+layout.svelte +++ b/src/routes/[network]/(account)/signup/+layout.svelte @@ -1,11 +1,9 @@ - - diff --git a/src/routes/[network]/(account)/signup/walletTypes.ts b/src/routes/[network]/(account)/signup/walletTypes.ts index 7c310677..b37912e9 100644 --- a/src/routes/[network]/(account)/signup/walletTypes.ts +++ b/src/routes/[network]/(account)/signup/walletTypes.ts @@ -74,7 +74,14 @@ export const walletTypes: Record = { 'Offline storage of private keys', 'Support for multiple cryptocurrencies' ], - wallets: [{ name: 'Ledger', route: 'signup/wallets/hardware/ledger', logo: LedgerLogo }] + wallets: [ + { + name: 'Ledger', + route: 'signup/wallets/hardware/ledger', + logo: LedgerLogo, + supportedNetworks: ['eos', 'jungle4'] + } + ] }), desktop: new WalletType({ type: 'desktop', @@ -91,21 +98,24 @@ export const walletTypes: Record = { name: 'MetaMask', route: 'signup/wallets/extensions/metamask', logo: MetaMaskLogo, - description: 'Secure and easy-to-use browser extension wallet.' + description: 'Secure and easy-to-use browser extension wallet.', + supportedNetworks: ['eos', 'jungle4'] }, { name: 'Anchor', route: 'signup/wallets/desktop/anchor', logo: AnchorLogo, description: - 'Popular option with a user-friendly interface. Supports multiple EOSIO chains.' + 'Popular option with a user-friendly interface. Supports multiple EOSIO chains.', + supportedNetworks: ['eos', 'jungle4'] }, { name: 'Wombat', route: 'signup/wallets/desktop/wombat', logo: WombatLogo, description: - 'Fast and secure with multi-chain support. Offers a smooth onboarding experience.' + 'Fast and secure with multi-chain support. Offers a smooth onboarding experience.', + supportedNetworks: ['eos'] } ] }), @@ -125,20 +135,23 @@ export const walletTypes: Record = { route: 'signup/wallets/mobile/anchor', logo: AnchorLogo, description: - 'Popular mobile option with a user-friendly interface. Supports multiple EOSIO chains.' + 'Popular mobile option with a user-friendly interface. Supports multiple EOSIO chains.', + supportedNetworks: ['eos', 'jungle4'] }, { name: 'Wombat Mobile', route: 'signup/wallets/mobile/wombat', logo: WombatLogo, description: - 'Fast and secure with multi-chain support. Offers a smooth onboarding experience.' + 'Fast and secure with multi-chain support. Offers a smooth onboarding experience.', + supportedNetworks: ['eos'] }, { name: 'TokenPocket', route: 'signup/wallets/mobile/tokenpocket', logo: TokenPocketLogo, - description: 'A leading crypto wallet that supports multiple chains.' + description: 'A leading crypto wallet that supports multiple chains.', + supportedNetworks: ['eos'] } ] }), @@ -158,9 +171,17 @@ export const walletTypes: Record = { name: 'MetaMask', route: 'signup/wallets/extensions/metamask', logo: MetaMaskLogo, - description: 'MetaMask is a secure and easy-to-use browser extension wallet.' + description: 'MetaMask is a secure and easy-to-use browser extension wallet.', + supportedNetworks: ['eos', 'jungle4'] }, - { name: 'Wombat', route: 'signup/wallets/extensions/wombat', logo: WombatLogo } + { + name: 'Wombat', + route: 'signup/wallets/extensions/wombat', + logo: WombatLogo, + description: + 'Fast and secure with multi-chain support. Offers a smooth onboarding experience.', + supportedNetworks: ['eos'] + } ] }) }; diff --git a/src/routes/[network]/(account)/signup/wallets/[walletType]/+page.svelte b/src/routes/[network]/(account)/signup/wallets/[walletType]/+page.svelte index 8017a249..3abdb2f8 100644 --- a/src/routes/[network]/(account)/signup/wallets/[walletType]/+page.svelte +++ b/src/routes/[network]/(account)/signup/wallets/[walletType]/+page.svelte @@ -2,6 +2,7 @@ import { page } from '$app/stores'; import Button from '$lib/components/button/button.svelte'; import Stack from '$lib/components/layout/stack.svelte'; + import { name } from '@melt-ui/svelte'; import { walletTypes } from '../../walletTypes'; import { ChevronRight } from 'lucide-svelte'; @@ -49,7 +50,7 @@

Available Wallets

- {#each currentWalletType.networkWallets(data.network.chain.name) as wallet} + {#each currentWalletType.networkWallets(data.network.shortname) as wallet} -
- {#if wallet.logo} - {`${wallet.name} - {/if} + +
+
+ {`${recommendedWallet.name}
-
-

- {wallet.name} -

-

{wallet.description}

+
+

{recommendedWallet.name}

+

{recommendedWallet.description}

+ + +
- - +
-{/each} +
- - -
- {#if currentWalletType.icon} - {@const Component = currentWalletType.icon} - - {/if} -
-
-

More Options

-

- Choose from {Object.values(walletTypes) - .filter((type) => type.type !== currentWalletType.type) - .map((type) => type.title.toLowerCase()) - .join(', ') - .replace(/,([^,]*)$/, ' and$1')} -

-
- - - + {#if otherWallets} + {#each otherWallets as wallet} + + +
+ {#if wallet.logo} + {`${wallet.name} + {/if} +
+
+

+ {wallet.name} +

+

{wallet.description}

+
+ + + + {/each} + {/if} + + {#if currentWalletType} + + +
+ {#if currentWalletType.icon} + {@const Component = currentWalletType.icon} + + {/if} +
+
+

More Options

+

+ Choose from {Object.values(walletTypes) + .filter((type) => type.type !== currentWalletType.type) + .map((type) => type.title.toLowerCase()) + .join(', ') + .replace(/,([^,]*)$/, ' and$1')} +

+
+ + + + {/if} +{/if} From 86c1d9f47624f2a3838a268a7b944692310898d9 Mon Sep 17 00:00:00 2001 From: dafuga Date: Fri, 25 Oct 2024 20:53:21 -0700 Subject: [PATCH 11/14] enhancement: added a header over other wallets --- src/routes/[network]/(account)/signup/+page.svelte | 4 +++- src/routes/[network]/(account)/signup/walletTypes.ts | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/routes/[network]/(account)/signup/+page.svelte b/src/routes/[network]/(account)/signup/+page.svelte index 0e65bf5f..66a722a4 100644 --- a/src/routes/[network]/(account)/signup/+page.svelte +++ b/src/routes/[network]/(account)/signup/+page.svelte @@ -46,7 +46,9 @@
-
+
+ +

Other {currentWalletType?.title}

{#if otherWallets} {#each otherWallets as wallet} diff --git a/src/routes/[network]/(account)/signup/walletTypes.ts b/src/routes/[network]/(account)/signup/walletTypes.ts index b37912e9..42703aaf 100644 --- a/src/routes/[network]/(account)/signup/walletTypes.ts +++ b/src/routes/[network]/(account)/signup/walletTypes.ts @@ -85,7 +85,7 @@ export const walletTypes: Record = { }), desktop: new WalletType({ type: 'desktop', - title: 'Desktop', + title: 'Desktop Wallets', description: 'Desktop wallets are applications that you install on your computer.', icon: LaptopMinimal, benefits: [ From f23740d23df05d112b55a25e8765f94aa87cb853 Mon Sep 17 00:00:00 2001 From: dafuga Date: Mon, 4 Nov 2024 15:28:56 -0800 Subject: [PATCH 12/14] cleanup: code cleanup --- docker-compose.yaml | 8 ++++---- src/lib/components/chart/rampricehistory.svelte | 2 -- src/routes/[network]/(account)/signup/+page.svelte | 4 ++-- 3 files changed, 6 insertions(+), 8 deletions(-) diff --git a/docker-compose.yaml b/docker-compose.yaml index e3fda035..7902a329 100644 --- a/docker-compose.yaml +++ b/docker-compose.yaml @@ -1,4 +1,4 @@ -version: "3.8" +version: '3.8' services: nginx: image: nginx:latest @@ -7,7 +7,7 @@ services: networks: - unicove ports: - - "8000:8000" + - '8000:8000' volumes: - ./docker/nginx.conf:/etc/nginx/nginx.conf:ro sveltekit: @@ -15,10 +15,10 @@ services: context: . dockerfile: Dockerfile expose: - - "3000" + - '3000' networks: - unicove restart: always networks: - unicove: \ No newline at end of file + unicove: diff --git a/src/lib/components/chart/rampricehistory.svelte b/src/lib/components/chart/rampricehistory.svelte index 43cf0c9a..c62054eb 100644 --- a/src/lib/components/chart/rampricehistory.svelte +++ b/src/lib/components/chart/rampricehistory.svelte @@ -17,8 +17,6 @@ let { data }: Props = $props(); - console.log({ length: data.length, first20: data.slice(0, 20), last20: data.slice(-20) }); - let ctx: HTMLCanvasElement; let chart: Chart<'line'>; diff --git a/src/routes/[network]/(account)/signup/+page.svelte b/src/routes/[network]/(account)/signup/+page.svelte index d9dfcdbe..faf74499 100644 --- a/src/routes/[network]/(account)/signup/+page.svelte +++ b/src/routes/[network]/(account)/signup/+page.svelte @@ -15,10 +15,10 @@ const recommendedWallet = $derived(currentWalletType?.wallets[0]); const otherWallets = $derived(currentWalletType?.networkWallets(data.network.shortname).slice(1)); - const WalletComponent = currentWalletType?.icon; + const WalletComponent = $derived(currentWalletType?.icon); -{#if !recommendedWallet || !currentWalletType} +{#if !recommendedWallet || !currentWalletType || !WalletComponent}

Detecting your environment...

Please wait while we determine the best options for you.

From 2355f02c9556fa1da48e1f33024f940169994bca Mon Sep 17 00:00:00 2001 From: dafuga Date: Mon, 4 Nov 2024 16:00:56 -0800 Subject: [PATCH 13/14] cleanup: more cleanup --- .../contract/[contract]/actions/[action]/[[data]]/fields.svelte | 1 - 1 file changed, 1 deletion(-) diff --git a/src/routes/[network]/(explorer)/contract/[contract]/actions/[action]/[[data]]/fields.svelte b/src/routes/[network]/(explorer)/contract/[contract]/actions/[action]/[[data]]/fields.svelte index 6bdfc036..77af54e0 100644 --- a/src/routes/[network]/(explorer)/contract/[contract]/actions/[action]/[[data]]/fields.svelte +++ b/src/routes/[network]/(explorer)/contract/[contract]/actions/[action]/[[data]]/fields.svelte @@ -4,7 +4,6 @@ import Label from '$lib/components/input/label.svelte'; import Textinput from '$lib/components/input/text.svelte'; import type { ABI } from '@wharfkit/antelope'; - import Fields from './fields.svelte'; interface PageProps { abi: ABI; From 34763e459b26aa72b7873484a315de6dad473637 Mon Sep 17 00:00:00 2001 From: dafuga Date: Mon, 4 Nov 2024 16:03:35 -0800 Subject: [PATCH 14/14] cleanup: removed redundant button on signup page --- .../[network]/(account)/signup/+page.svelte | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/src/routes/[network]/(account)/signup/+page.svelte b/src/routes/[network]/(account)/signup/+page.svelte index faf74499..aa594ec8 100644 --- a/src/routes/[network]/(account)/signup/+page.svelte +++ b/src/routes/[network]/(account)/signup/+page.svelte @@ -31,24 +31,6 @@ most people new to EOS.

- - -
- -
-
-

- {currentWalletType.title} -

-

{currentWalletType.description}

-
- - -