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
Report Location

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`
Layout	Layout of the app	https://map.nimiq.com/?layout={layout}	Check supported layouts
Modal	Modal to show	https://map.nimiq.com/?modal={modal}	Check supported modals
Nested Modal	Nest modal to show	https://map.nimiq.com/?nested={nested}	Check supported modals. 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]

✅ Deploy Preview for nimiq-map canceled.

Name	Link
🔨 Latest commit	7d0ad34
🔍 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/