nimiq · onmax · Apr 15, 2024 · Apr 15, 2024 · Apr 15, 2024 · Apr 15, 2024
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -1,3 +1,6 @@
 {
-  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin", "denoland.vscode-deno"]
+  "recommendations": [
+    "Vue.volar",
+    "denoland.vscode-deno"
+  ]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -8,5 +8,6 @@
   "deno.unstable": true,
   "deno.suggest.imports.hosts": {
     "https://deno.land": false
-  }
+  },
+  "editor.formatOnSave": true
 }
diff --git a/README.md b/README.md
@@ -40,17 +40,6 @@ and running!
 2. Run `pnpm i`
 3. Run `pnpm dev` to run the app or run `pnpm story:dev` to run histoire
 
-## Project structure
-
-The project is structured in a monorepo:
-
-- [`src`](src): The vue app.
-- [`types`](types): Shared types across the project.
-- [`shared`](shared): Shared functions across the project.
-- [`database`](database): Functions to interact with the database.
-- [`bot`](bot): A slack bot to manage the database.
-- [`supabase`](supabase): Edge Functions in Supabase.
-
 ### Database
 
 The `app` only can make read operations to the database, all read operations can
@@ -146,6 +135,26 @@ all the possible combinations in the database. We could use some strategies to
 mitigate this issue, but the amount of lines of code involved is too big, and
 the performance gain is not worth it.
 
+## Embed the map in an iframe
+
+You can embed the map in an iframe with the following code:
+
+```html
+<iframe src="https://map.nimiq.com/" width="100%" height="600" frameborder="0" style="border:0" allowfullscreen></iframe>
+```
+
+You can customize the app with some query parameters:
+
+| Parameter    | Description          | Example                                     | Comments                                                                           |
+| ------------ | -------------------- | ------------------------------------------- | ---------------------------------------------------------------------------------- |
+| Map position | Position of the map  | `https://map.nimiq.com/@{lat},{lng},{zoom}` |
+| uuid         | UUID of the location | `https://map.nimiq.com/?uuid={uuid}`        | Don't use it with Map position if you don't know the coordinates of the location   |
+| Language     | Language of the app  | `https://map.nimiq.com/?lang={language}`    | Check [supported languages`](./apps/web/src/i18n/i18n-setup.ts)                    |
+| Layout       | Layout of the app    | `https://map.nimiq.com/?layout={layout}`    | Check [supported layouts](./apps/web/src/composables/useUI.ts)                     |
+| Modal        | Modal to show        | `https://map.nimiq.com/?modal={modal}`      | Check [supported modals](./apps/web/src/components/Modal.vue)                      |
+| Nested Modal | Nest modal to show   | `https://map.nimiq.com/?nested={nested}`    | Check [supported modals](./apps/web/src/components/Modal.vue). Use it with `modal` |
+| Search       | Search to show       | `https://map.nimiq.com/?search={search}`    |                                                                                    |
+
 ## 🏗️ Stack
 
 For the app:
@@ -165,3 +174,11 @@ For the app:
   APIs, scalable PostgreSQL, and realtime subscriptions.
 - [Deno Slack SDK](https://github.com/slackapi/deno-slack-sdk) A Deno SDK for
   Slack's APIs.
+
+
+# TODO
+
+- [ ] Binance Pay
+- [ ] Tooltip in banner
+- [ ] Search desktop
+- [ ] Check all providers
diff --git a/apps/web/index.html b/apps/web/index.html
@@ -4,8 +4,6 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link rel="preload" as="font" href="/fonts/Mulish-VariableFont_wght.woff2" type="font/woff2" crossorigin="anonymous">
-  <link rel="preload" as="font" href="/fonts/Mulish-Italic-VariableFont_wght.woff2" type="font/woff2" crossorigin="anonymous">
 
   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -1,5 +1,6 @@
 {
   "name": "web",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "pnpm i18n:extract && pnpm type-check && pnpm build-only",
@@ -18,46 +19,52 @@
     "i18n:sync": "pnpm i18n:extract && pnpm i18n:push; pnpm i18n:pull"
   },
   "dependencies": {
-    "@fontsource/mulish": "^5.0.17",
     "@googlemaps/js-api-loader": "^1.16.6",
-    "@headlessui/vue": "^1.7.19",
+    "@headlessui/vue": "^1.7.21",
     "@nimiq/utils": "^0.10.1",
     "@nimiq/vue3-components": "github:nimiq/vue3-components#build/full",
-    "@turf/turf": "^7.0.0-alpha.114",
+    "@turf/turf": "7.0.0-alpha.113",
     "@vueuse/components": "^10.9.0",
     "@vueuse/core": "^10.9.0",
-    "@vueuse/math": "^10.9.0",
     "@vueuse/router": "^10.9.0",
+    "nimiq-css": "^0.0.88",
     "pinia": "^2.1.7",
-    "radix-vue": "^1.7.0",
-    "vue": "^3.4.21",
-    "vue-i18n": "^9.12.0",
-    "vue-router": "^4.3.0",
+    "radix-vue": "^1.7.3",
+    "vue": "^3.4.26",
+    "vue-i18n": "^9.13.1",
+    "vue-router": "^4.3.2",
     "vue-virtual-scroller": "2.0.0-beta.8",
     "vue3-google-map": "^0.20.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.13.3",
+    "@antfu/eslint-config": "^2.16.1",
     "@histoire/plugin-vue": "^0.17.17",
+    "@iconify-json/cryptocurrency-color": "^1.1.7",
+    "@iconify-json/logos": "^1.1.42",
     "@types/geojson": "^7946.0.14",
-    "@types/google.maps": "^3.55.7",
+    "@types/google.maps": "^3.55.8",
     "@types/grecaptcha": "^3.0.9",
-    "@types/node": "^20.12.7",
+    "@types/node": "^20.12.10",
+    "@unocss/preset-mini": "^0.59.4",
+    "@unocss/preset-rem-to-px": "^0.59.4",
+    "@unocss/reset": "^0.59.4",
+    "@unocss/transformer-directives": "^0.59.4",
     "@vitejs/plugin-vue": "^5.0.4",
-    "autoprefixer": "^10.4.19",
     "database": "workspace:*",
-    "eslint": "^9.0.0",
-    "eslint-plugin-vue": "^9.24.1",
+    "eslint": "^9.2.0",
+    "eslint-plugin-vue": "^9.25.0",
     "geo": "workspace:*",
     "histoire": "^0.17.17",
-    "postcss": "^8.4.38",
-    "tailwindcss": "^3.4.3",
-    "tailwindcss-nimiq-theme": "^0.2.2",
     "types": "workspace:*",
     "typescript": "5.3.3",
-    "vite": "^5.2.8",
+    "unocss": "^0.59.4",
+    "unplugin-auto-import": "^0.17.5",
+    "unplugin-vue-components": "^0.26.0",
+    "unplugin-vue-router": "^0.8.6",
+    "vite": "^5.2.11",
     "vite-plugin-checker": "^0.6.4",
-    "vue-tsc": "^2.0.13",
+    "vite-plugin-vue-devtools": "^7.1.3",
+    "vue-tsc": "^2.0.16",
     "webpack-i18n-tools": "github:nimiq/webpack-i18n-tools"
   }
 }
diff --git a/apps/web/postcss.config.js b/apps/web/postcss.config.js
diff --git a/apps/web/src/App.vue b/apps/web/src/App.vue
@@ -1,48 +1,11 @@
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
+const isDark = useDark()
+isDark.value = false // We don't want to use dark mode in the Crypto Map for now
 </script>
 
 <template>
-  <RouterView v-slot="{ Component, route }">
-    <component :is="route.meta.transition ? 'transition' : 'div'" :name="route.meta.transition ? route.meta.transition : ''">
-      <template v-if="typeof route.name === 'string' && ['coords', 'map'].includes(route.name)">
-        <h1 class="sr-only">
-          {{ $t('Explore the Crypto Map') }}
-        </h1>
-      </template>
-      <component :is="Component" />
-    </component>
-  </RouterView>
+  <h1 class="sr-only">
+    {{ $t('Explore the Crypto Map') }}
+  </h1>
+  <RouterView />
 </template>
-
-<style scoped>
-.slide-left-leave-active,
-.slide-left-enter-active {
-  transition-property: transform;
-  transition-timing-function: cubic-bezier(0.25, 0, 0, 1);
-  transition-duration: 400ms;
-}
-
-.slide-left-enter {
-  transform: translate(100%, 0);
-}
-
-.slide-left-leave-to {
-  transform: translate(-100%, 0);
-}
-
-.slide-right-leave-active,
-.slide-right-enter-active {
-  transition-property: transform;
-  transition-timing-function: cubic-bezier(0.25, 0, 0, 1);
-  transition-duration: 400ms;
-}
-
-.slide-right-enter {
-  transform: translate(-100%, 0);
-}
-
-.slide-right-leave-to {
-  transform: translate(200%, 0);
-}
-</style>
diff --git a/apps/web/src/assets-dev/banner-assets.ts b/apps/web/src/assets-dev/banner-assets.ts
@@ -20,7 +20,7 @@ const i18nKeyPassThrough = {
 type BannerConfiguration = Pick<Location, 'bg' | 'theme' | 'bannerLabel' | 'bannerTooltip' | 'bannerTooltipCta' | 'bannerTooltipLabel' | 'bannerGooglePlay' | 'bannerAppStore'>
 const cardConfiguration: Record<Banner, BannerConfiguration> = {
   'None': {
-    bg: ['white', undefined],
+    bg: ['rgb(var(--nq-neutral-0))', undefined],
     theme: Theme.Light,
   },
   [Provider.DefaultAtm]: {

diff --git a/apps/web/src/assets-dev/stories/locations.ts b/apps/web/src/assets-dev/stories/locations.ts
@@ -46,6 +46,7 @@ export const locations: Record<Provider, Location> = {
     lng: 1,
     rating: 4,
     photo: 'https://images.unsplash.com/photo-1646491946169-76e0668b8b3f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80',
+    cryptocity: 'San Jose',
     ...getExtra(Provider.Coinmap),
   },
   [Provider.AcceptLightning]: {
@@ -58,6 +59,7 @@ export const locations: Record<Provider, Location> = {
     lng: 1,
     rating: 4,
     photo: 'https://images.unsplash.com/photo-1646491946169-76e0668b8b3f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80',
+    cryptocity: 'San Jose',
     ...getExtra(Provider.BtcMap),
   },
   [Provider.BtcMap]: {
@@ -70,6 +72,7 @@ export const locations: Record<Provider, Location> = {
     lng: 1,
     rating: 4,
     photo: 'https://images.unsplash.com/photo-1646491946169-76e0668b8b3f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80',
+    cryptocity: 'San Jose',
     ...getExtra(Provider.BtcMap),
   },
   [Provider.Bridge2Bitcoin]: {
@@ -82,6 +85,7 @@ export const locations: Record<Provider, Location> = {
     lng: 1,
     rating: 4,
     photo: 'https://images.unsplash.com/photo-1646491946169-76e0668b8b3f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80',
+    cryptocity: 'San Jose',
     ...getExtra(Provider.Bridge2Bitcoin),
   },
   [Provider.NAKA]: {
@@ -94,6 +98,7 @@ export const locations: Record<Provider, Location> = {
     lng: 1,
     rating: 4,
     photo: 'https://images.unsplash.com/photo-1646491946169-76e0668b8b3f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80',
+    cryptocity: 'San Jose',
     ...getExtra(Provider.NAKA),
   },
   [Provider.Bluecode]: {
@@ -106,6 +111,7 @@ export const locations: Record<Provider, Location> = {
     lng: 1,
     rating: 4,
     photo: 'https://images.unsplash.com/photo-1543007631-283050bb3e8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80',
+    cryptocity: 'San Jose',
     ...getExtra(Provider.Bluecode),
   },
   [Provider.CryptopaymentLink]: {
@@ -118,6 +124,7 @@ export const locations: Record<Provider, Location> = {
     lng: 1,
     rating: 4,
     photo: 'https://images.unsplash.com/photo-1646491946169-76e0668b8b3f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80',
+    cryptocity: 'San Jose',
     ...getExtra(Provider.CryptopaymentLink),
   },
   [Provider.DefaultAtm]: {
@@ -129,6 +136,7 @@ export const locations: Record<Provider, Location> = {
     lat: 1,
     lng: 1,
     rating: 4,
+    cryptocity: 'San Jose',
     ...getExtra(Provider.DefaultAtm, [Currency.NIM, Currency.BTC, Currency.ETH, Currency.DASH, Currency.XLM]),
   },
   [Provider.Kurant]: {
@@ -141,6 +149,7 @@ export const locations: Record<Provider, Location> = {
     lng: 1,
     rating: 4,
     gmaps: 'https://goo.gl/maps/ujJkv9DFuPfkwqat9',
+    cryptocity: 'San Jose',
     ...getExtra(Provider.Kurant, [Currency.NIM, Currency.BTC]),
   },
   [Provider.Edenia]: {
@@ -152,6 +161,7 @@ export const locations: Record<Provider, Location> = {
     lat: 1,
     lng: 1,
     rating: 4,
+    cryptocity: 'San Jose',
     ...getExtra(Provider.Edenia, [Currency.NIM, Currency.BTC, Currency.USDC_on_POLYGON], LocationLink.Facebook),
   },
   [Provider.DefaultShop]: {
@@ -164,6 +174,7 @@ export const locations: Record<Provider, Location> = {
     lng: 1,
     rating: 4,
     photo: 'https://images.unsplash.com/photo-1646491946169-76e0668b8b3f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80',
+    cryptocity: 'San Jose',
     ...getExtra(Provider.DefaultShop, [], LocationLink.Instagram),
   },
   [Provider.BitcoinJungle]: {
@@ -176,6 +187,7 @@ export const locations: Record<Provider, Location> = {
     lng: 1,
     rating: 4,
     photo: 'https://images.unsplash.com/photo-1646491946169-76e0668b8b3f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80',
+    cryptocity: 'San Jose',
     ...getExtra(Provider.BitcoinJungle),
   },
 }