chore: added purchase tokens button

.gitignore

@@ -3,3 +3,4 @@ build
 web_modules
 node_modules
 .idea
+yarn-error.log

README.md

@@ -6,10 +6,10 @@
 
 ```bash
 # Clone the repo
-git clone https://github.com/greymass/wallet.git
+git clone https://github.com/greymass/unicove.git
 
 # Navigate to cloned folder and Install dependencies
-cd wallet && yarn install
+cd unicove && yarn install
 ```
 
 #### 2. Run

package.json

@@ -17,6 +17,7 @@
         "acorn": "8.0.1"
     },
     "dependencies": {
+        "@greymass/create-account": "^0.0.9",
         "@greymass/eosio": "^0.6.0",
         "@greymass/eosio-resources": "0.7.0",
         "@lottiefiles/svelte-lottie-player": "^0.2.0",

snowpack.config.js

@@ -9,10 +9,14 @@ if (!process.env['NODE_ENV']) {
     process.env['NODE_ENV'] = isProductionBuild ? 'production' : 'development'
 }
 
+const defaultValues = {
+    WHALESPLAINER_URL: 'https://create.anchor.link',
+    UNICOVE_URL: 'https://unicove.com',
+}
 // env vars to forward to snowpack (included in js bundle)
-const forwardEnv = ['BRANCH', 'REV', 'VERSION']
+const forwardEnv = ['BRANCH', 'REV', 'VERSION', 'WHALESPLAINER_URL', 'UNICOVE_URL']
 for (const key of forwardEnv) {
-    process.env[`SNOWPACK_PUBLIC_${key}`] = process.env[key]
+    process.env[`SNOWPACK_PUBLIC_${key}`] = process.env[key] || defaultValues[key]
 }
 
 /** @type { import("snowpack").SnowpackUserConfig } */

src/app.svelte

@@ -15,7 +15,18 @@
     import Loading from '~/pages/loading.svelte'
     import Toasts from '~/components/elements/toasts.svelte'
 
-    $: document.body.classList.toggle('darkmode', $darkMode)
+    $: {
+        document.body.classList.toggle('darkmode', $darkMode)
+        if ($darkMode) {
+            document
+                .querySelector('meta[name=theme-color]')
+                ?.setAttribute('content', needLogin ? '#101010' : '#1c1c1e')
+        } else {
+            document
+                .querySelector('meta[name=theme-color]')
+                ?.setAttribute('content', needLogin ? '#ececec' : '#ffffff')
+        }
+    }
 
     $: needLogin =
         $activeSession === undefined &&

src/components/layout/page.svelte

@@ -6,6 +6,7 @@
     import Header from '~/components/layout/header.svelte'
     import NavigationSidebar from '~/components/layout/navigation/index.svelte'
     import NavigationSidebarButton from '~/components/layout/navigation/button.svelte'
+    import TokensPurchaseButton from '~/components/layout/tokens-purchase/button.svelte'
 
     /** Title of the page. */
     export let title: string = ''
@@ -174,6 +175,7 @@
             </div>
         {/if}
         <AccountSidebarButton bind:open={accountSidebar} />
+        <TokensPurchaseButton />
     </header>
     <AccountSidebar bind:open={accountSidebar} />
 

src/components/layout/tokens-purchase/button.svelte

@@ -0,0 +1,37 @@
+<script>
+    import Button from '~/components/elements/button.svelte'
+    import {openPopupForAccount} from '~/lib/token-purchase'
+    import {activeSession, activeBlockchain} from '~/store'
+
+    $: shouldDisplayButton = $activeBlockchain?.id === 'eos'
+
+    let loadingPopup = false
+
+    function handleBuyingTokens() {
+        loadingPopup = true
+
+        openPopupForAccount($activeSession?.auth?.actor)
+            .catch((err) => {
+                console.error(err)
+            })
+            .finally(() => {
+                loadingPopup = false
+            })
+    }
+</script>
+
+<style type="scss">
+    .buy-tokens-button {
+        display: flex;
+        align-items: center;
+        padding: 10px;
+    }
+</style>
+
+{#if shouldDisplayButton}
+    <div class="buy-tokens-button">
+        <Button on:action={handleBuyingTokens} style="primary">
+            {loadingPopup ? 'Loading...' : 'Buy Tokens'}
+        </Button>
+    </div>
+{/if}

src/lib/token-purchase.ts

@@ -0,0 +1,63 @@
+import type {Name} from '@greymass/eosio'
+
+import {addToast} from '~/stores/toast'
+
+const creationServiceUrl = import.meta.env.SNOWPACK_PUBLIC_WHALESPLAINER_URL
+const unicoveUrl = import.meta.env.SNOWPACK_PUBLIC_UNICOVE_URL
+
+const tokenOrderUrl = `${creationServiceUrl}/api/tokens/order`
+
+export const openPopupForAccount = async (accountName: Name | undefined): Promise<void> => {
+    let whalesplainerTokenOrderResponse
+    let whalesplainerTokenOrder
+
+    try {
+        whalesplainerTokenOrderResponse = await fetch(tokenOrderUrl, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                wallet_address: accountName?.toString(),
+                account_reference: accountName?.toString(),
+                fiat_code: 'USD',
+                coin_code: 'EOS',
+                return_url_on_success: unicoveUrl,
+            }),
+        })
+
+        whalesplainerTokenOrder = await whalesplainerTokenOrderResponse.json()
+
+        console.log({whalesplainerTokenOrder})
+    } catch (error) {
+        addToast({
+            title: 'An error occurred when creating your order.',
+            message: error.message,
+        })
+    }
+
+    const checkoutUrl = whalesplainerTokenOrder?.data?.order?.checkout_url
+
+    const popup =
+        checkoutUrl &&
+        window.open(
+            checkoutUrl,
+            'targetWindow',
+            `toolbar=no,
+            location=no,
+            status=no,
+            menubar=no,
+            scrollbars=yes,
+            resizable=yes,
+            width=400,
+            height=600`
+        )!
+    if (popup) {
+        popup.focus()
+    } else {
+        addToast({
+            title: 'Unable to open token purchase popup.',
+            message: 'Please make sure that popups are allowed for this website.',
+        })
+    }
+}

src/pages/login.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
+    import {AccountCreator} from '@greymass/create-account'
+
     import {version, isRelease, releaseVersion, chains} from '~/config'
     import {darkMode} from '~/store'
+    import {addToast} from '~/stores/toast'
 
     import Logo from '~/components/elements/logo.svelte'
     import Unicove from '~/components/elements/unicove.svelte'
@@ -12,6 +15,48 @@
     import MediaQuery from '~/components/utils/media-query.svelte'
     import Features from '~/components/elements/features.svelte'
     import UnicoveAnimated from '~/components/elements/unicove-animated.svelte'
+
+    const creationServiceUrl = import.meta.env.SNOWPACK_PUBLIC_WHALESPLAINER_URL
+
+    let creatingAccount = false
+
+    function handleCreateAccount(event: Event) {
+        event.preventDefault()
+
+        if (creatingAccount) return
+
+        creatingAccount = true
+
+        createAccount()
+            .then((accountCreationResponse) => {
+                addToast({
+                    title: 'Account created!',
+                    message: `Successfully created the "${
+                        (accountCreationResponse as any).sa
+                    }" account. Please login to use Unicove.`,
+                    timeout: 10000,
+                })
+            })
+            .catch((error) => {
+                addToast({
+                    title: 'Account not created!',
+                    message: error.message,
+                    timeout: 10000,
+                })
+            })
+            .finally(() => {
+                creatingAccount = false
+            })
+    }
+
+    async function createAccount() {
+        const accountCreator = new AccountCreator({
+            scope: 'unicove',
+            creationServiceUrl,
+        })
+
+        return accountCreator.createAccount()
+    }
 </script>
 
 <style lang="scss">
@@ -419,8 +464,9 @@
                     <Button
                         style="tertiary"
                         size="regular"
-                        href="https://create.anchor.link/"
-                        target="_blank"><Icon name="plus" /><Text>New Account</Text></Button
+                        on:action={handleCreateAccount}
+                        disabled={creatingAccount}
+                        ><Icon name="plus" /><Text>New Account</Text></Button
                     >
                 {/if}
             </MediaQuery>
@@ -444,8 +490,9 @@
                 <Button
                     style="effect"
                     size="regular"
-                    href="https://create.anchor.link/"
-                    target="_blank"><Icon name="plus" /><Text>Create new account</Text></Button
+                    on:action={handleCreateAccount}
+                    disabled={creatingAccount}
+                    ><Icon name="plus" /><Text>Create new account</Text></Button
                 >
             </div>
             <div class="action">
@@ -576,7 +623,9 @@
             <ul>
                 <li><ButtonLogin asLink>Sign In</ButtonLogin></li>
                 <li>
-                    <a href="https://create.anchor.link/" target="_blank"> Create new account</a>
+                    <a href="https://create.anchor.link/" on:click={handleCreateAccount}>
+                        Create new account</a
+                    >
                 </li>
                 <li>
                     <a

yarn.lock

@@ -909,6 +909,16 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@greymass/create-account@^0.0.9":
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/@greymass/create-account/-/create-account-0.0.9.tgz#1f41b00e33508396fa3ece2f431213c80cfd9d7a"
+  integrity sha512-cWzqB5fYHmT5f5V5Kfgu/vF98+5YBIH4hk0XzsfbkC2FqoVy+918fpMx12gx654Effnc8q5stIdluDm/dnjlHw==
+  dependencies:
+    "@greymass/eosio" "^0.6.0"
+    "@greymass/return-path" "^0.0.1"
+    eosio-signing-request "^2.3.1"
+    tslib "^2.1.0"
+
 "@greymass/[email protected]":
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/@greymass/eosio-resources/-/eosio-resources-0.7.0.tgz#41425a22434818dd5caf175a4ffb0feab29fed0b"
@@ -936,6 +946,13 @@
   dependencies:
     tslib "^2.1.0"
 
+"@greymass/return-path@^0.0.1":
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/@greymass/return-path/-/return-path-0.0.1.tgz#bcf4e74671af06d22ecd95dcdadb94efaa5adf78"
+  integrity sha512-PMPgSJYSHeaYXbURj4JfsEeReWkJqlTKFMn2iTPhvb+6ICR5GhVPDJKewqZPqpZumcD13M1c701YYWKHZlMsxw==
+  dependencies:
+    tslib "^2.1.0"
+
 "@humanwhocodes/config-array@^0.5.0":
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"
@@ -2035,7 +2052,7 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
-eosio-signing-request@^2.2.0:
+eosio-signing-request@^2.2.0, eosio-signing-request@^2.3.1:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/eosio-signing-request/-/eosio-signing-request-2.4.0.tgz#87e89d4e016a6317e249dc3cc571390a9c2940d3"
   integrity sha512-jmFAzdXDfuDELN2Xvr857cm/TA0pb9lCoHQvRq9Gb/yp0GfIqWHhJuVyZyLkCHlU2E62rnID7es12qNFmn2l2g==