Update package.json

.env.example

@@ -0,0 +1,10 @@
+VITE_QUICKNODE_APP_NAME=
+VITE_QUICKNODE_APP_KEY=
+VITE_API_ENDPOINT=
+VITE_APP_BASE_URL=
+VITE_INDEXER_ENDPOINT=
+VITE_TENDERLY_NODE_ACCESS_KEY=
+ALCHEMY_API_KEY=
+POSTHOG_API_KEY=
+POSTHOG_API_HOST=
+ENVIO_HYPERSYNC_API_KEY=

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,23 @@
+# Scope UI
+
+## Development
+
+Make sure you have the `.env.local` file with the required config.
+
+To install the dependencies:
+
+```
+bun i
+```
+
+To run the server:
+
+```
+bun run dev
+```
+
+## Related
+
+* [Scope API](https://github.com/scope-sh/scope-api)
+* [Scope Registry](https://github.com/scope-sh/scope-registry)
+* [Indexer](https://github.com/scope-sh/hyperindex-erc4337)

app/app.vue

@@ -1,5 +1,6 @@
 <template>
   <div id="app">
+    <BannerSunset />
     <AppHeader />
     <!-- eslint-disable-next-line vue/no-undef-components -->
     <NuxtPage />
@@ -17,6 +18,7 @@ import '@fontsource-variable/inter';
 import '@fontsource-variable/inconsolata';
 import { computed } from 'vue';
 
+import BannerSunset from '@/components/_app/BannerSunset.vue';
 import CommandPalette from '@/components/_app/CommandPalette.vue';
 import AppFooter from '@/components/_app/Footer.vue';
 import AppHeader from '@/components/_app/Header.vue';

app/components/_app/BannerSunset.vue

@@ -0,0 +1,82 @@
+<template>
+  <div
+    v-if="isVisible"
+    class="banner"
+  >
+    <div class="message">
+      Scope is now
+      <a
+        href="https://github.com/scope-sh/scope-app"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        open source</a
+      >!
+      <span
+        class="sunset"
+        :class="{ warning: isWarning, error: isError }"
+      >
+        The hosted version will be sunset on {{ formattedSunsetDate }}.
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const SUNSET_DATE = new Date('2026-05-18');
+const DAY = 24 * 60 * 60 * 1000;
+const formattedSunsetDate = SUNSET_DATE.toLocaleDateString('en-US', {
+  month: 'long',
+  day: 'numeric',
+  year: 'numeric',
+});
+
+// Show banner 30 days before sunset
+const isVisible = computed(() => {
+  const date = new Date(SUNSET_DATE.getTime() - 30 * DAY);
+  return date < new Date();
+});
+
+// Show as a warning 14 days before sunset
+const isWarning = computed(() => {
+  const date = new Date(SUNSET_DATE.getTime() - 14 * DAY);
+  return date < new Date();
+});
+
+// Show as an error 7 days before sunset
+const isError = computed(() => {
+  const date = new Date(SUNSET_DATE.getTime() - 7 * DAY);
+  return date < new Date();
+});
+</script>
+
+<style scoped>
+.banner {
+  display: flex;
+  gap: var(--spacing-7);
+  flex-direction: column;
+  align-items: center;
+  margin: 0;
+  padding: var(--spacing-4);
+  border-bottom: 1px solid var(--color-border-tertiary);
+  color: var(--color-text-secondary);
+
+  @media (width >= 992px) {
+    padding: var(--spacing-6);
+  }
+
+  a {
+    color: var(--color-text-primary);
+  }
+
+  .sunset.warning {
+    color: var(--color-accent);
+  }
+
+  .sunset.error {
+    color: var(--color-error);
+  }
+}
+</style>

nuxt.config.ts

@@ -63,8 +63,8 @@ export default defineNuxtConfig({
         },
       ],
       script: [
-        { async: true, src: 'https://cdn.metrical.xyz/script.js' },
-        { children: 'window.metrical = { "app": "QjX4GqlXkK"}' },
+        { async: true, src: 'https://cdn.metrical.xyz/script.js', type: 'text/javascript' },
+        { innerHTML: 'window.metrical = { "app": "QjX4GqlXkK"}', type: 'text/javascript', body: true },
       ],
     },
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "scope-app",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Scope App",
   "author": {
     "name": "Timur Badretdinov",