[WIP] Nimiq Wallet Demo

README.md

@@ -10,7 +10,9 @@ yarn install
 yarn serve
 ```
 
-> You will also need to run the [Nimiq Hub](https://github.com/nimiq/hub#contribute) and [Nimiq Keyguard](https://github.com/nimiq/keyguard/#development) in development, too.
+If you need to interact with a real account and data, then you will also need to run the [Nimiq Hub](https://github.com/nimiq/hub#contribute) and [Nimiq Keyguard](https://github.com/nimiq/keyguard/#development) in development, too.
+
+Otherwise, you can use activate the `demo` mode by appending `?demo` in the URL: `http://localhost:8081/?demo`.
 
 ### Compiles and minifies for production
 ```

src/components/modals/demos/DemoModalBuy.vue

@@ -0,0 +1,140 @@
+<template>
+  <Modal :showOverlay="showOverlay">
+    <PageHeader class="flex-column">
+      <h1 class="nq-h1">{{ $t('Buy NIM') }}</h1>
+      <div class="demo-warning nq-label">
+        {{ $t('DEMO') }}
+      </div>
+    </PageHeader>
+    <PageBody>
+      <div class="flex-row">
+
+       <AmountInput v-model="amount" :decimals="5">
+          <AmountMenu slot="suffix" class="ticker" :currency="CryptoCurrency.NIM"  :open="amountMenuOpened"
+            :activeCurrency="activeCurrency" :fiatCurrency="fiatCurrency" :feeOption="false"
+            :otherFiatCurrencies="otherFiatCurrencies"
+            @click.native.stop="amountMenuOpened = !amountMenuOpened"
+          />
+        </AmountInput>
+      </div>
+    </PageBody>
+    <PageFooter>
+      <button class="nq-button light-blue" @click="buyDummyNim" :disabled="!amount">
+        {{ $t('Buy NIM') }}
+      </button>
+    </PageFooter>
+
+    <PageBody slot="overlay" class="overlay-content">
+        <HighFiveIcon />
+        <h2 class="nq-h2">
+          {{ $t('Your NIM is under its way!') }}
+        </h2>
+        <p>
+          {{ $t('This transaction is instant and secure.') }}
+        </p>
+    </PageBody>
+  </Modal>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from '@vue/composition-api';
+import { PageBody, PageHeader, PageFooter } from '@nimiq/vue-components';
+import AmountInput from '@/components/AmountInput.vue';
+import AmountMenu from '@/components/AmountMenu.vue';
+import Modal from '@/components/modals/Modal.vue';
+import { useAccountStore } from '@/stores/Account';
+import { useFiatStore } from '@/stores/Fiat';
+import { FIAT_CURRENCIES_OFFERED, CryptoCurrency } from '@/lib/Constants';
+import { dangerouslyInsertFakeBuyNimTransaction } from '@/lib/Demo';
+import { useRouter } from '@/router';
+import HighFiveIcon from '@/components/icons/HighFiveIcon.vue';
+
+export default defineComponent({
+    setup() {
+        const { activeCurrency } = useAccountStore();
+        const { currency: fiatCurrency } = useFiatStore();
+        const otherFiatCurrencies = computed(() =>
+            FIAT_CURRENCIES_OFFERED.filter((fiat) => fiat !== fiatCurrency.value));
+        const amount = ref(0);
+        const amountMenuOpened = ref(false);
+        const showOverlay = ref(false);
+        const router = useRouter();
+
+        function buyDummyNim() {
+            dangerouslyInsertFakeBuyNimTransaction(amount.value);
+            showOverlay.value = true;
+            setTimeout(() => {
+                showOverlay.value = false;
+                router.push('/');
+            }, 4000);
+        }
+
+        return {
+            amount,
+            activeCurrency,
+            fiatCurrency,
+            otherFiatCurrencies,
+            amountMenuOpened,
+            buyDummyNim,
+            showOverlay,
+            CryptoCurrency,
+        };
+    },
+    components: {
+        Modal,
+        AmountInput,
+        AmountMenu,
+        PageHeader,
+        PageBody,
+        PageFooter,
+        HighFiveIcon,
+    },
+});
+</script>
+
+<style scoped lang="scss">
+.small-page {
+  > .page-header {
+    overflow: hidden;
+
+    .demo-warning {
+      margin: 0;
+      text-align: center;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      background: var(--nimiq-orange-bg);
+      color: white;
+      padding: 0.5rem 0;
+    }
+  }
+}
+
+::v-deep .nq-card.overlay {
+  background: var(--nimiq-green);
+  color: white;
+
+  .overlay-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+
+    svg {
+      width: 128px;
+      height: 128px;
+    }
+
+  p {
+    margin-top: 0;
+    text-wrap: pretty;
+  }
+  }
+
+  .close-button {
+    display: none;
+  }
+}
+</style>

src/components/modals/demos/DemoModalFallback.vue

@@ -0,0 +1,35 @@
+<template>
+  <Modal>
+    <PageHeader class="flex-column">
+      <h1 class="nq-h1">{{ $t('Nimiq Demo') }}</h1>
+    </PageHeader>
+    <PageBody>
+      <p class="nq-p">
+        {{ $t('This is not a real Nimiq Wallet. It is just a demo so it is limited in functionality.') }}
+      </p>
+      <p>
+        {{ $t('You can open a free NIM account in less than a minute.') }}
+      </p>
+    </PageBody>
+    <PageFooter>
+      <a href="https://wallet.nimiq.com" target="_blank" class="nq-button light-blue">
+        {{ $t('Open Nimiq Wallet') }}
+      </a>
+    </PageFooter>
+  </Modal>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+import { PageBody, PageHeader, PageFooter } from '@nimiq/vue-components';
+import Modal from '../Modal.vue';
+
+export default defineComponent({
+    components: {
+        Modal,
+        PageHeader,
+        PageBody,
+        PageFooter,
+    },
+});
+</script>

src/hub.ts

@@ -18,6 +18,7 @@ import type { PlainTransactionDetails } from '@nimiq/core';
 import type { RequestBehavior, BehaviorType } from '@nimiq/hub-api/dist/src/RequestBehavior.d';
 import type { ForwardRequest } from '@opengsn/common/dist/EIP712/ForwardRequest';
 import Config from 'config';
+import { DemoHubApi, checkIfDemoIsActive } from '@/lib/Demo';
 import { useAccountStore, AccountInfo, AccountType } from './stores/Account';
 import { useAddressStore, AddressInfo, AddressType } from './stores/Address';
 import { useBtcAddressStore, BtcAddressInfo } from './stores/BtcAddress';
@@ -114,7 +115,7 @@ function getBehavior({
 
 // We can't use the reactive config via useConfig() here because that one can only be used after the composition-api
 // plugin has been registered in Vue 2.
-const hubApi = new HubApi(Config.hubEndpoint);
+const hubApi = checkIfDemoIsActive() ? DemoHubApi.create() : new HubApi(Config.hubEndpoint);
 
 hubApi.on(HubApi.RequestType.ONBOARD, async (accounts) => {
     const { config } = useConfig();