🔧 POW Server side rendering

[roiLeo]

Let me know your thoughts about this change.

SSR is needed if we want to use all Nuxt power

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	d2a3520
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/6552186ee7f8e400082eeb93
😎 Deploy Preview	https://deploy-preview-7725--koda-canary.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[reviewpad]

AI-Generated Summary: This pull request makes extensive changes across multiple files focusing primarily on preventing potential errors during server-side rendering. It introduces checks using process.client to best ensure that specific 'window' and 'localStorage' operations are only executed on the client-side where they are available. This adjustment allows for more reliable performance in both client and server-side environments and is likely guided towards improving compatibility with server-side rendering (SSR) and enhancing Universal Render environments.

External package imports have been modified, such as @polkadot/extension-dapp and @ramp-network/ramp-instant-sdk, often being adjusted to only import when needed. In some components, these are moved from a static import at the start of the file to a dynamic import within a specific function. Various parts of the script are also now wrapped with Vue's client-only component to preserve intended functionality while avoiding potential errors during server-side rendering. This suggests an intent to reduce package load times and potentially improve overall performance.

Some Vue components saw changes to their lifecycle hooks, with moves from the use of 'onBeforeUnmount' hook to 'onMounted' hook for event listeners, specifying essential processes to only run after the component has transitioned into the DOM.

Lastly, changes to the project package.json and pnpm-lock.yaml files denote alterations in dependency management, including the movement of @ramp-network/ramp-instant-sdk and the addition of ts-invariant version 0.10.3.

Overall, these changes aim to improve flexibility and compatibility across various environments, potentially enhancing performance, load times, and error handling in both client and server-side contexts.

[reviewpad]

Reviewpad Report

⚠️ Warnings

• Please link an issue to the pull request

[roiLeo]

😢

[preschian]

as long the build and deployed successfull im fine with it 👍🏻

[roiLeo]

So many things to reconfigure on client-side, don't mind first load only showing footer it's normal.
Looks like all playwright tests are broken now 😞

[yangwao]

What can potentially break?

[roiLeo]

What can potentially break?

UI/UX, client side plugin and maybe more?

[yangwao]

UI/UX, client side plugin and maybe more?

And do we need to setup something special from CF/Netlify to work?

[roiLeo]

And do we need to setup something special from CF/Netlify to work?

Nope, only check which components needs to be loaded on client-side and which can be loaded on server side.
For now I've wrapped most components on client-side that why we have a "delayed loading" and weird darkmode

note: SSR is needed for SEO & prerender stuff

[roiLeo]

// TODO: persist localstorage (or maybe vueuse equivalent)

[codeclimate]

Code Climate has analyzed commit d2a3520 and detected 2 issues on this pull request.

Here's the issue category breakdown:

Category	Count
Complexity	2

View more on Code Climate.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.2% Duplication

[roiLeo]

more changes in #8356