feat(ski-dapp): swap @ika.xyz/sdk → @dika.sui/sdk, tbai.svg logo, white glow

- Replace @ika.xyz/sdk with @dika.sui/sdk (github:arbuthnot-eth/dika, v0.1.1)
- Update dynamic import and type declaration to @dika.sui/sdk
- Update sui.ski to 0.1.14
- Replace thunderbun-logo.png with tbai.svg everywhere (favicon, splash,
  sidebar, wallet widget, home loading screens, CCTP logo)
- Change all logo drop-shadow glows from amber to white (single drop-shadow,
  GPU-composited — zero layout/paint cost)
- Add tbai.svg + source assets to repo

Author: arbuthnot-eth

assets/Tb.png

@@ -0,0 +1,78 @@
+#!/usr/bin/env bun
+/**
+ * Strip white background from Tb.svg and scale down by 95% (to 5% of original size).
+ * Adds back a thick white outline via SVG filter (feMorphology dilate).
+ * Usage: bun assets/process-svg.ts
+ */
+import { readFileSync, writeFileSync } from "fs";
+import { join } from "path";
+
+const inPath = join(import.meta.dirname, "Tb.svg");
+const outPath = join(import.meta.dirname, "Tb-transparent.svg");
+
+// Outline radius in viewBox units. At 200px display size over a 4000-unit square canvas:
+// scale = 4000/200 = 20. radius=60 → 3px white border at display size.
+const OUTLINE_RADIUS = 60;
+
+let svg = readFileSync(inPath, "utf-8");
+
+// 1. Remove the full-canvas white background rectangle (first path, fill="#FEFEFE")
+svg = svg.replace(
+  /<path d="M0 0 [^"]*" fill="#FEFEFE" transform="translate\(0,0\)"\/>\n?/,
+  ""
+);
+
+// 2. Center the logo in a 4000x4000 square canvas with padding for the white outline.
+//    This prevents the outline from being clipped on any edge.
+//    Logo is 2025 wide × 3687 tall. Center it: x offset = (4000-2025)/2 = 987.5, y = (4000-3687)/2 = 156.5
+//    Add 100-unit outline buffer → final viewBox: "-1088 -257 4200 4200"  (display: 210×210px at 5%)
+const CANVAS = 4200;
+const LOGO_W = 2025, LOGO_H = 3687;
+const PAD = 100; // extra buffer beyond centering for filter overflow
+const vbX = -Math.round((CANVAS - LOGO_W) / 2 + PAD);
+const vbY = -Math.round((CANVAS - LOGO_H) / 2 + PAD);
+const displaySize = (CANVAS * 0.05).toFixed(0);
+
+svg = svg.replace(
+  /<svg version="1.1" xmlns="http:\/\/www\.w3\.org\/2000\/svg" width="\d+(?:\.\d+)?" height="\d+(?:\.\d+)?"(?:[^>]*)?>/,
+  `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="${displaySize}" height="${displaySize}" viewBox="${vbX} ${vbY} ${CANVAS} ${CANVAS}">`,
+);
+
+// 3. Inject white-outline filter into <defs> (or create <defs> if absent)
+const filterDef = `<defs>
+  <filter id="white-outline" x="-8%" y="-5%" width="116%" height="110%" color-interpolation-filters="sRGB">
+    <feMorphology in="SourceAlpha" operator="dilate" radius="${OUTLINE_RADIUS}" result="expanded"/>
+    <feFlood flood-color="white" result="white"/>
+    <feComposite in="white" in2="expanded" operator="in" result="outline"/>
+    <feMerge>
+      <feMergeNode in="outline"/>
+      <feMergeNode in="SourceGraphic"/>
+    </feMerge>
+  </filter>
+</defs>`;
+
+if (svg.includes("</defs>")) {
+  // Append filter inside existing defs
+  svg = svg.replace("</defs>", `  <filter id="white-outline" x="-8%" y="-5%" width="116%" height="110%" color-interpolation-filters="sRGB">
+    <feMorphology in="SourceAlpha" operator="dilate" radius="${OUTLINE_RADIUS}" result="expanded"/>
+    <feFlood flood-color="white" result="white"/>
+    <feComposite in="white" in2="expanded" operator="in" result="outline"/>
+    <feMerge>
+      <feMergeNode in="outline"/>
+      <feMergeNode in="SourceGraphic"/>
+    </feMerge>
+  </filter>
+</defs>`);
+} else {
+  // Insert defs right after the opening <svg> tag
+  svg = svg.replace(/(<svg[^>]*>)/, `$1\n${filterDef}`);
+}
+
+// 4. Wrap all logo content in a group with the white-outline filter applied
+svg = svg.replace(/(<svg[^>]*>[\s\S]*?<\/defs>)\n?([\s\S]*)(<\/svg>)/, (_, header, content, close) => {
+  return `${header}\n<g filter="url(#white-outline)">\n${content}</g>\n${close}`;
+});
+
+writeFileSync(outPath, svg, "utf-8");
+console.log(`Written: ${outPath}`);
+console.log(`Background removed, white outline (radius=${OUTLINE_RADIUS}) added, scaled to 5%.`);

assets/process-svg.ts

@@ -0,0 +1,51 @@
+#!/usr/bin/env bun
+/**
+ * Reduce SVG path data by scaling coordinate space down 4x.
+ * At display size (101x184), coordinate resolution of 506x922 is still sub-pixel.
+ * This eliminates nearly-coincident points without visible quality loss.
+ */
+import { readFileSync, writeFileSync } from "fs";
+import { join } from "path";
+
+const inPath = join(import.meta.dirname, "tbai.svg");
+const outPath = join(import.meta.dirname, "tbai-small.svg");
+
+const SCALE = 0.25; // 4x reduction in coordinate precision
+
+let svg = readFileSync(inPath, "utf-8");
+
+// Scale viewBox dimensions
+svg = svg.replace(/viewBox="0 0 (\d+(?:\.\d+)?) (\d+(?:\.\d+)?)"/, (_, w, h) => {
+  const nw = Math.round(Number(w) * SCALE);
+  const nh = Math.round(Number(h) * SCALE);
+  return `viewBox="0 0 ${nw} ${nh}"`;
+});
+
+// Scale all numeric values inside path d="..." attributes
+// Strategy: wrap all path-bearing elements in a <g transform="scale(SCALE)">
+// and also adjust the viewBox, then let the numbers stay as-is.
+// BUT to actually reduce file size we must scale the coordinate values themselves.
+//
+// Simpler approach: scale every number in path d attributes by SCALE, then re-round to int.
+svg = svg.replace(/ d="([^"]+)"/g, (_, d) => {
+  // Scale every float/int number in the path data
+  const scaled = d.replace(/[-+]?[0-9]*\.?[0-9]+/g, (n: string) => {
+    const v = parseFloat(n) * SCALE;
+    return Math.round(v).toString();
+  });
+  return ` d="${scaled}"`;
+});
+
+// Also scale feMorphology radius proportionally
+svg = svg.replace(/radius="(\d+(?:\.\d+)?)"/, (_, r) => {
+  return `radius="${Math.round(Number(r) * SCALE)}"`;
+});
+
+writeFileSync(outPath, svg, "utf-8");
+
+const origSize = readFileSync(inPath).byteLength;
+const newSize = readFileSync(outPath).byteLength;
+console.log(`Input:  ${(origSize / 1024).toFixed(1)} KB`);
+console.log(`Output: ${(newSize / 1024).toFixed(1)} KB  (${((1 - newSize / origSize) * 100).toFixed(1)}% smaller)`);
+const orig = 3581635;
+console.log(`Total reduction from original 3.5MB: ${((1 - newSize / orig) * 100).toFixed(1)}%`);

assets/simplify-svg.ts

@@ -0,0 +1,19 @@
+export default {
+  plugins: [
+    {
+      name: "preset-default",
+      params: {
+        overrides: {
+          convertPathData: {
+            floatPrecision: 0,
+            transformPrecision: 0,
+            noSpaceAfterFlags: true,
+            negativeExtraSpace: true,
+          },
+          cleanupNumericValues: { floatPrecision: 0 },
+          mergePaths: { force: true },
+        },
+      },
+    },
+  ],
+};

assets/svgo.config.mjs

@@ -8,7 +8,7 @@
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <meta name="description" content="The Sui-native framework for launching dApps. Built-in SDKs, Cloudflare Agents, PWA-ready." />
-    <link rel="icon" type="image/png" href="/icons/thunderbun-logo.png" />
+    <link rel="icon" type="image/svg+xml" href="/icons/tbai.svg" />
     <link rel="apple-touch-icon" href="/icons/pwa-192x192.png" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@@ -17,27 +17,27 @@
     <style>
       #splash{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:#09090F;transition:opacity .3s ease}
       #splash.fade{opacity:0;pointer-events:none}
-      #splash img{width:64px;height:64px;border-radius:14px;animation:splash-glow 1.4s ease-in-out infinite;filter:drop-shadow(0 0 20px rgba(255,184,0,0.35)) drop-shadow(0 0 40px rgba(245,158,11,0.15))}
-      @keyframes splash-glow{0%,100%{opacity:.6;transform:scale(.95);filter:drop-shadow(0 0 20px rgba(255,184,0,0.35)) drop-shadow(0 0 40px rgba(245,158,11,0.15))}50%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 30px rgba(255,184,0,0.5)) drop-shadow(0 0 60px rgba(245,158,11,0.25))}}
+      #splash img{width:64px;height:64px;border-radius:14px;animation:splash-glow 1.4s ease-in-out infinite;filter:drop-shadow(0 0 16px rgba(255,255,255,0.5))}
+      @keyframes splash-glow{0%,100%{opacity:.65;transform:scale(.95);filter:drop-shadow(0 0 14px rgba(255,255,255,0.4))}50%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 24px rgba(255,255,255,0.7))}}
       #app{opacity:0;transition:opacity .2s ease}
       #app.ready{opacity:1}
     </style>
   </head>
   <body>
     <div id="splash">
-      <img src="/icons/thunderbun-logo.png" alt="" width="64" height="64" />
+      <img src="/icons/tbai.svg" alt="" width="50" height="50" />
     </div>
     <div id="app">
       <button id="sidebar-dock-toggle" aria-label="Open navigation">
-        <img src="/icons/thunderbun-logo.png" alt="" width="20" height="20" />
+        <img src="/icons/tbai.svg" alt="" width="20" height="20" />
         <span>Menu</span>
       </button>
       <div id="sidebar-backdrop" aria-hidden="true"></div>
 
       <!-- Sidebar -->
       <aside id="sidebar">
         <div class="sidebar-logo">
-          <img class="sidebar-logo-icon" src="/icons/thunderbun-logo.png" alt="Thunderbun" width="32" height="32" />
+          <img class="sidebar-logo-icon" src="/icons/tbai.svg" alt="Thunderbun" width="50" height="50" />
           <span class="sidebar-logo-name" id="app-title">Thunderbun</span>
           <button id="sidebar-close" class="sidebar-close" aria-label="Close navigation">✕</button>
         </div>
@@ -78,7 +78,7 @@
 
         <div id="wallet-widget-content">
           <div id="wallet-widget-loading">
-            <img class="wallet-widget-loading-logo" src="/icons/thunderbun-logo.png" alt="" width="42" height="42" />
+            <img class="wallet-widget-loading-logo" src="/icons/tbai.svg" alt="" width="50" height="50" />
             <div class="wallet-widget-sub">Checking WaaP session…</div>
           </div>
 

assets/tb.svg

@@ -30,8 +30,8 @@
     "validate": "bun run test:playstore && tsc -p tsconfig.json --noEmit && echo 'All validations passed'"
   },
   "dependencies": {
+    "@dika.sui/sdk": "github:arbuthnot-eth/dika",
     "@human.tech/waap-sdk": "file:vendor/waap-sdk",
-    "@ika.xyz/sdk": "github:arbuthnot-eth/ika#feat/upgrade-mysten-sui-v2",
     "@mysten/dapp-kit": "latest",
     "@mysten/dapp-kit-core": "^1.0.4",
     "@mysten/deepbook-v3": "^1.0.12",
@@ -50,7 +50,7 @@
     "hono-agents": "^3.0.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "sui.ski": "0.1.11"
+    "sui.ski": "^0.1.14"
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20260228.0",