Add dashboard + Phantom + toast component

pkg/controller/page_test.go

@@ -9,6 +9,7 @@ import (
 )
 
 func TestNewPage_IsHome(t *testing.T) {
+	// TODO: Implement proper tests
 	ctx, _ := tests.NewContext(c.Web, "/")
 	page := NewPage(ctx)
 

pkg/routes/dashboard.go

@@ -0,0 +1,23 @@
+package routes
+
+import (
+	"github.com/labstack/echo/v4"
+
+	"github.com/tiny-blob/tinyblob/pkg/controller"
+	"github.com/tiny-blob/tinyblob/templates"
+)
+
+type (
+	dashboard struct {
+		controller.Controller
+	}
+)
+
+func (c *dashboard) Get(ctx echo.Context) error {
+	page := controller.NewPage(ctx)
+	page.Layout = templates.LayoutMain
+	page.Name = templates.PageDashboard
+	page.Title = "Dashboard"
+
+	return c.RenderPage(ctx, page)
+}

pkg/routes/router.go

@@ -16,7 +16,8 @@ import (
 )
 
 const (
-	routeNameHome = "home"
+	routeNameDashboard = "dashboard"
+	routeNameHome      = "home"
 )
 
 // BuildRouter builds the router.
@@ -69,10 +70,13 @@ func BuildRouter(c *services.Container) {
 	c.Web.HTTPErrorHandler = err.Get
 
 	// Routes
-	publicRoutes(c, g, ctr)
+	userRoutes(g, ctr)
 }
 
-func publicRoutes(c *services.Container, g *echo.Group, ctr controller.Controller) {
+func userRoutes(g *echo.Group, ctr controller.Controller) {
 	home := home{Controller: ctr}
 	g.GET("/", home.Get).Name = routeNameHome
+
+	dashboard := dashboard{Controller: ctr}
+	g.GET("/d", dashboard.Get).Name = routeNameDashboard
 }

static/css/fonts.css

@@ -0,0 +1,7 @@
+@font-face {
+    font-family: "Inter";
+    src: url("/files/fonts/InterVariable.woff2") format("woff2");
+    font-weight: 100 900;
+    font-display: swap;
+    font-style: normal;
+}

static/js/store.js

@@ -0,0 +1,109 @@
+/**
+ * Constants
+ */
+const APP_NAME = '__tiny_blob__';
+const __provider__ = window.phantom?.solana;
+
+/**
+ * Alpine store
+ */
+document.addEventListener('alpine:init', () => {
+  Alpine.store(APP_NAME, {
+    ...__provider__,
+    app_name: APP_NAME,
+    pub_key: null,
+    is_phantom_installed: false,
+    is_connected: false,
+    init_wallet(pub_key) {
+      this.is_phantom_installed = true;
+      this.is_connected = true;
+      this.pub_key = pub_key;
+    },
+    clean_up() {
+      this.is_connected = false;
+      this.pub_key = null;
+    },
+    init() {
+      if (__provider__?.isPhantom) {
+        __provider__.on('connect', (pub_key) => {
+          if (pub_key) {
+            this.init_wallet();
+          } else {
+            this.clean_up();
+          }
+        });
+
+        __provider__.on('disconnect', () => {
+          this.clean_up();
+        });
+
+        __provider__.on('accountChanged', (pub_key) => {
+          if (pub_key) {
+            let pub_key_str = pub_key.toBase58();
+            this.init_wallet(pub_key_str);
+            window.toast('Switched account', {
+              type: 'info',
+              description: `Switched to ${pub_key_str.substring(0, 5)}…${pub_key_str.substring(pub_key_str.length - 5)}`,
+              position: 'bottom-left',
+            });
+          } else {
+            // Account is not connected.
+            // Prompt user to connect.
+            this.clean_up();
+            this.connect_wallet();
+          }
+        });
+
+        // Attempt to eagerly connect
+        __provider__.connect({ onlyIfTrusted: true }).catch((e) => {
+          /* ignore error */
+        });
+      } else {
+        console.warn('Phantom wallet is not installed');
+      }
+    },
+    async connect_wallet() {
+      if (!this.is_connected) {
+        try {
+          const res = await this.connect();
+          this.init_wallet(res.publicKey.toBase58());
+
+          window.toast('Connected', {
+            type: 'success',
+            description: 'Wallet has been connected.',
+            position: 'bottom-left',
+          });
+        } catch (e) {
+          let msg = '';
+          switch (true) {
+            case e instanceof Error && e.message.includes('rejected'):
+              msg = 'Wallet connection cancelled.';
+              break;
+            default:
+              msg = 'Could not connect to your wallet.';
+              break;
+          }
+          window.toast('Unsuccessful', {
+            type: 'warning',
+            description: msg,
+            position: 'bottom-left',
+          });
+        }
+      }
+    },
+    async disconnect_wallet() {
+      if (this.is_connected && this.is_phantom_installed) {
+        try {
+          this.clean_up();
+          window.toast('Disconnected', {
+            type: 'info',
+            description: 'Wallet has been disconnected.',
+            position: 'bottom-left',
+          });
+        } catch (e) {
+          console.error(e);
+        }
+      }
+    },
+  });
+});

templates/components/core.tmpl

@@ -1,36 +1,27 @@
 {{define "metatags"}}
-    <title>{{ if .Title }}{{ .Title }} &mdash; {{ end }}{{ .AppName }}</title>
-    <link rel="icon" href="{{file "favicon.ico"}}">
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    {{- if .Metatags.Description}}
-        <meta name="description" content="{{.Metatags.Description}}">
-    {{- end}}
-    {{- if .Metatags.Keywords}}
-        <meta name="keywords" content="{{.Metatags.Keywords | join ", "}}">
-    {{- end}}
-{{end}}
-
-{{define "css"}}
-    <link rel="stylesheet" type="text/css" href="{{file "css/global.css"}}">
-    <link rel="stylesheet" type="text/css" href="{{file "css/tailwind.min.css"}}">
+	<title>{{ if .Title }}{{ .Title }} &mdash; {{ end }}{{ .AppName }}</title>
+	<link rel="icon" href="{{file "favicon.ico"}}">
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	{{- if .Metatags.Description}}
+		<meta name="description" content="{{.Metatags.Description}}">
+	{{- end}}
+	{{- if .Metatags.Keywords}}
+			<meta name="keywords" content="{{.Metatags.Keywords | join ", "}}">
+	{{- end}}
 {{end}}
 
 {{define "js"}}
-    <!-- locally load unocss runtime -->
-    <script type="text/javascript" src="{{file "js/preset-wind.global.js"}}"></script>
-    <!-- unocss options -->
-    <script>
-        window.__unocss = {
-            rules: [],
-            presets: [
-                () => window.__unocss_runtime.presets.presetWind(),
-            ]
-        }
-    </script>
-    <script>
-        let FF_FOUC_FIX;
-    </script>
-    <script type="text/javascript" src="{{file "js/core.global.js"}}"></script>
-{{end}}
+	<script defer src="{{file "js/alpinejs-3.13.7.min.js"}}"></script>
+	<script type="text/javascript" src="{{file "js/core.global.js"}}"></script>
+	<script type="text/javascript" src="{{file "js/preset-wind.global.js"}}"></script>
+	<script src="{{file "js/htmx-1.9.3.min.js"}}"></script>
+	<script src="{{file "js/store.js"}}"></script>
+	<script>
+		window.__unocss = {
+			rules: [],
+			presets: [() => window.__unocss_runtime.presets.presetWind()]
+		}
+	</script>
+{{end}}

templates/components/css.tmpl

@@ -0,0 +1,28 @@
+{{define "css"}}
+  <link rel="stylesheet" type="text/css" href="{{file "css/tailwind.min.css"}}">
+  <link rel="stylesheet" type="text/css" href="{{file "css/fonts.css"}}">
+  <link rel="stylesheet" type="text/css" href="{{file "css/tiny.min.css"}}">
+  <link rel="stylesheet" type="text/css" href="{{file "css/global.css"}}">
+
+  <style>
+    :root {
+      font-family: 'Inter', var(--tiny-font-family);
+      font-size: 14px;
+      height: 100%;
+      margin: 0;
+    }
+    body {
+      background: var(--tiny-background-color);
+      color: var(--tiny-color);
+      font-family: Inter, system-ui,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,'Helvetica Neue',sans-serif,var(--tiny-font-family-emoji);
+      font-size: 1rem;
+      font-weight: var(--tiny-font-weight);
+      font-feature-settings: 'liga' 1, 'calt' 1, 'ss01' 1, 'ss02' 1, 'ss03' 1;
+      text-rendering: optimizeLegibility;
+      height: 100%;
+      width: 100%;
+      margin: 0;
+      padding: 0;
+    }
+  </style>
+{{end}}