New "Compact" layout for Nimiq Pay. UI updates. Bug fixes.

[onmax]

Changelog

New layout for Nimiq Pay

Using the query param ?layout=compact, we can activate the new UI for the Nimiq Pay application: https://deploy-preview-9--nimiq-map.netlify.app/?layout=compact

New FAQ modal

Since last month we have added almost 30K locations. The locations have been fetched automatically, but we have not verified them. Therefore, I think it is our responsibility to add a notice/warning. I thought we could do it in the form of a "FAQ" so we can add more content. https://deploy-preview-9--nimiq-map.netlify.app/?modal=faq

Moved Modals

The 'Add new location' and 'Report location' pages have been moved to their own modal instead of their own page.

See diff

| Page | Before | After | |--------|--------|--------| | [New location](https://deploy-preview-9--nimiq-map.netlify.app/?modal=crypto-map&nested=candidate) |  |  | | [Report Location](http://localhost:5173/@49.48782422002133,8.46794567281281,17z?cryptocity=Kryptostadt+Mannheim&uuid=468520fc-2b42-4e39-a477-8dcfbe33754b&modal=report) |  |  |

Query params everywhere

Everything dynamic can be stored in query parameters: modal, language, location... This allows everything in the application to be copied and shared while maintaining the same state.

See all query params

| 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}` | | | Question | Question to show | `https://map.nimiq.com/?q=q-1` | Use it with `faq` modal |

New Cryptocities design

When the user explores the map and is in a Cryptocity, we will display a new banner.

Expand to see details

### Zoom out  ### Zoom in 

New icons and Nimiq CSS library

• With the new Nimiq icons, over 50 files of just icons have been deleted 🤘.
• With the new Nimiq CSS, we achieve more consistency across applications and faster development.

Bug fixes

• Before the first time you load the app, there was an error loading the captcha token

PS: You can open the settings modal (gear icon top left) and click on the logo with the shift key pressed 🤌

[netlify[bot]]

✅ Deploy Preview for nimiq-map canceled.

Name	Link
🔨 Latest commit	7d0ad34f2a74e61470b1e22159b78c89141b7ce1
🔍 Latest deploy log	https://app.netlify.com/sites/nimiq-map/deploys/6641d9828358c70009ada201

[sisou]

Preview doesn't work for me. Stuck on the flash screen. Console says something about TypeError: Cannot read properties of undefined (reading 'slice'), linking to code line

console.log(JSON.stringify({ captchaToken: `${captchaToken.slice(0, 10)}...`, uuid: `${data.captcha_uuid.slice(0, 10)}...` }));

specifically, data.captcha_uuid is undefined

[onmax]

Preview doesn't work for me. Stuck on the flash screen. Console says something about TypeError: Cannot read properties of undefined (reading 'slice'), linking to code line

console.log(JSON.stringify({ captchaToken: `${captchaToken.slice(0, 10)}...`, uuid: `${data.captcha_uuid.slice(0, 10)}...` }));

specifically, data.captcha_uuid is undefined

Should be ok now: deploy-preview-9--nimiq-map.netlify.app/