feat(app): make the CRT effect toggleable (#2700)

unionlabs · Aug 8, 2024 · 079965d · 079965d
2 parents ca7e64d + 6ba58c0
commit 079965d
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 3 deletions.
diff --git a/app/src/app.html b/app/src/app.html
@@ -18,7 +18,6 @@
 <body class="bg-card" data-sveltekit-preload-data="hover">
   <div class="max-w-screen h-dvh max-h-dvh flex flex-col">%sveltekit.body%</div>
 </body>
-<div class="crt absolute top-0 w-dvw h-dvh z-50 pointer-events-none"></div>
 <script src="https://uptime.betterstack.com/widgets/announcement.js" data-id="188605" async="async"
   type="text/javascript"></script>
 

diff --git a/app/src/lib/components/connect/connect.svelte b/app/src/lib/components/connect/connect.svelte
@@ -16,6 +16,7 @@ import Sun from "virtual:icons/lucide/sun"
 import Moon from "virtual:icons/lucide/moon"
 import { setMode } from "mode-watcher"
 import * as DropdownMenu from "$lib/components/ui/dropdown-menu"
+import { crtEffectEnabled } from "$lib/stores/user"
 
 let buttonText: string
 let connectedWallets = 0
@@ -119,10 +120,14 @@ $: if ($navigating) sheetOpen = false
       onConnectClick={cosmosStore.connect}
       onDisconnectClick={cosmosStore.disconnect}
     />
+    <div class="flex items-center space-x-2">
+      <Switch bind:checked={$showUnsupported} id="unsupported-assets" />
+      <Label for="unsupported-assets">Show unverified assets</Label>
+    </div>
     <div class="mt-auto flex justify-between">
       <div class="flex items-center space-x-2">
-        <Switch bind:checked={$showUnsupported} id="unsupported-assets" />
-        <Label for="unsupported-assets">Show unverified assets</Label>
+        <Switch bind:checked={$crtEffectEnabled} id="crt-effect-enabled" />
+        <Label for="unsupported-assets">CRT effect</Label>
       </div>
       <DropdownMenu.Root>
         <DropdownMenu.Trigger asChild let:builder>

diff --git a/app/src/lib/stores/user.ts b/app/src/lib/stores/user.ts
@@ -1,4 +1,5 @@
 import { writable } from "svelte/store"
+import { persisted } from "svelte-persisted-store"
 
 function persistStore<T>(key: string, initial: T) {
   const storedValue = localStorage.getItem(key)
@@ -13,3 +14,4 @@ function persistStore<T>(key: string, initial: T) {
 }
 
 export const showUnsupported = persistStore("show-unsupported", true)
+export const crtEffectEnabled = persisted("crt-effect-enabled", true)
diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
@@ -18,6 +18,7 @@ import { updateTheme } from "$lib/utilities/update-theme.ts"
 import { SvelteQueryDevtools } from "@tanstack/svelte-query-devtools"
 import { checkWebGLSupport, deviceWidth } from "$lib/utilities/device.ts"
 import { disablePinchToZoom } from "$lib/utilities/disable-pinch-to-zoom.ts"
+import { crtEffectEnabled } from "$lib/stores/user"
 
 const { queryClient, localStoragePersister, PersistQueryClientProvider } = createQueryClient()
 if (browser) notifyManager.setScheduler(window.requestAnimationFrame)
@@ -91,6 +92,8 @@ $: updateTheme({ path: $page.url.pathname, activeTheme: "dark" })
   <!-- <OnlineStatus /> !-->
 </PersistQueryClientProvider>
 
+<div class:crt={$crtEffectEnabled} class="absolute top-0 w-dvw h-dvh z-50 pointer-events-none"></div>
+
 <style>
   :global([data-close-button]) {
     background-color: hsl(var(--card) / var(--tw-bg-opacity));