init

2026-01-31 12:04:23 +01:00 · 2023-01-30 14:46:24 -06:00
commit 8d39191921
27 changed files with 7456 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/dev-dist/registerSW.js
+++ b/dev-dist/registerSW.js
@@ -0,0 +1 @@
+if('serviceWorker' in navigator) navigator.serviceWorker.register('/dev-sw.js?dev-sw', { scope: '/', type: 'classic' })
--- a/dev-dist/sw.js
+++ b/dev-dist/sw.js
@@ -0,0 +1,92 @@
+/**
+ * Copyright 2018 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// If the loader is already loaded, just stop.
+if (!self.define) {
+  let registry = {};
+
+  // Used for `eval` and `importScripts` where we can't get script URL by other means.
+  // In both cases, it's safe to use a global var because those functions are synchronous.
+  let nextDefineUri;
+
+  const singleRequire = (uri, parentUri) => {
+    uri = new URL(uri + ".js", parentUri).href;
+    return registry[uri] || (
+      
+        new Promise(resolve => {
+          if ("document" in self) {
+            const script = document.createElement("script");
+            script.src = uri;
+            script.onload = resolve;
+            document.head.appendChild(script);
+          } else {
+            nextDefineUri = uri;
+            importScripts(uri);
+            resolve();
+          }
+        })
+      
+      .then(() => {
+        let promise = registry[uri];
+        if (!promise) {
+          throw new Error(`Module ${uri} didn’t register its module`);
+        }
+        return promise;
+      })
+    );
+  };
+
+  self.define = (depsNames, factory) => {
+    const uri = nextDefineUri || ("document" in self ? document.currentScript.src : "") || location.href;
+    if (registry[uri]) {
+      // Module is already loading or loaded.
+      return;
+    }
+    let exports = {};
+    const require = depUri => singleRequire(depUri, uri);
+    const specialDeps = {
+      module: { uri },
+      exports,
+      require
+    };
+    registry[uri] = Promise.all(depsNames.map(
+      depName => specialDeps[depName] || require(depName)
+    )).then(deps => {
+      factory(...deps);
+      return exports;
+    });
+  };
+}
+define(['./workbox-01d9f47c'], (function (workbox) { 'use strict';
+
+  self.skipWaiting();
+  workbox.clientsClaim();
+
+  /**
+   * The precacheAndRoute() method efficiently caches and responds to
+   * requests for URLs in the manifest.
+   * See https://goo.gl/S9QRab
+   */
+  workbox.precacheAndRoute([{
+    "url": "registerSW.js",
+    "revision": "3ca0b8505b4bec776b69afdba2768812"
+  }, {
+    "revision": null,
+    "url": "index.html"
+  }], {});
+  workbox.cleanupOutdatedCaches();
+  workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
+    allowlist: [/^\/$/]
+  }));
+
+}));
--- a/dev-dist/workbox-01d9f47c.js
+++ b/dev-dist/workbox-01d9f47c.js
--- a/index.html
+++ b/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0 height=device-height viewport-fit=cover user-scalable=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Lightning wallet for the web" />
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon" href="/180.png" sizes="180x180" />
+    <link rel="mask-icon" href="/mask-icon.svg" color="#000" />
+    <title>Mutiny Wallet</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "next-frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "framer-motion": "^8.5.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-modal-sheet": "^1.10.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^3.0.0",
+    "autoprefixer": "^10.4.13",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.2.4",
+    "typescript": "^4.9.3",
+    "vite": "^4.0.0",
+    "vite-plugin-pwa": "^0.14.1"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/public/180.png
+++ b/public/180.png
--- a/public/192.png
+++ b/public/192.png
--- a/public/512.png
+++ b/public/512.png
--- a/public/mutiny_logo_mask.svg
+++ b/public/mutiny_logo_mask.svg
@@ -0,0 +1,3 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M50 180H63V186.5H82.5V180H89V115H95.5V102H89V95.5H76V102H69.5V108.5H63V115H82.5V128H76V134.5H63V128H56.5V102H63V95.5H69.5V89H108.5V95.5H115V102H121.5V115H128V128H134.5V134.5H141V121.5H147.5V115H154V102H160.5V89H167V82.5H173.5V69.5H186.5V63H199.5V69.5H206V76H193V69.5H186.5V76H180V154H186.5V186.5H193V193H167V186.5H160.5V121.5H154V128H147.5V141H141V154H134.5V167H121.5V154H115V141H108.5V121.5H102V160.5H95.5V180H89V186.5H82.5V193H56.5V186.5H50V180Z" fill="#E23A5E"/>
+</svg>
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /
--- a/public/vite.svg
+++ b/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,115 @@
+import Sheet from 'react-modal-sheet';
+import { useState } from 'react';
+import logo from './assets/mutiny-logo.svg';
+import mutiny_m from './assets/m.svg';
+import scan from './assets/scan.svg';
+import settings from './assets/settings.svg';
+import send from './assets/send.svg';
+
+
+function ActivityItem() {
+  return (
+    <div className="flex flex-row border-b border-gray-500 gap-4 py-2">
+      <img src={send} className="App-logo" alt="logo" />
+      <div className='flex flex-col flex-1'>
+        <h1>Bitcoin Beefsteak</h1>
+        <h2>-1,441,851 SAT</h2>
+        <h3 className='text-sm text-gray-500'>Jul 24</h3>
+      </div>
+      <div className='text-sm font-semibold uppercase text-[#E23A5E]'>SEND</div>
+    </div>
+  )
+}
+
+function App() {
+  const [isOpen, setOpen] = useState(false);
+
+  return (
+    <div className="safe-top safe-left safe-right safe-bottom">
+      <div className="disable-scrollbars max-h-screen h-full overflow-y-scroll mx-4">
+        <main className='flex flex-col gap-4 py-8'>
+          <header>
+            <img src={logo} className="App-logo" alt="logo" />
+          </header>
+          <div className='border border-white rounded-xl border-b-4 p-4 flex flex-col gap-2'>
+            <header className='text-sm font-semibold uppercase'>
+              Balance
+            </header>
+            <div>
+              <h1 className='text-4xl font-light'>
+                69,420 <span className='text-xl'>SAT</span>
+              </h1>
+            </div>
+            <div className="flex gap-2 py-4">
+              <button onClick={() => setOpen(true)} className='bg-[#1EA67F] p-4 flex-1 rounded-xl text-xl font-semibold '><span className="drop-shadow-sm shadow-black">Send</span></button>
+              <button className='bg-[#3B6CCC] p-4 flex-1 rounded-xl text-xl font-semibold '><span className="drop-shadow-sm shadow-black">Receive</span></button>
+            </div>
+          </div>
+          <div className='rounded-xl p-4 flex flex-col gap-2 bg-[rgba(0,0,0,0.5)]'>
+            <header className='text-sm font-semibold uppercase'>
+              Activity
+            </header>
+            <ActivityItem />
+            <ActivityItem />
+            <ActivityItem />
+            <ActivityItem />
+            <ActivityItem />
+            <ActivityItem />
+            <ActivityItem />
+            <div className='flex justify-end py-4'>
+              <a href="#" className='underline text-sm'>
+                MORE
+              </a>
+            </div>
+          </div>
+          {/* safety div */}
+          <div className="h-32" />
+        </main>
+
+
+      </div>
+
+      <Sheet isOpen={isOpen} onClose={() => setOpen(false)}>
+        <Sheet.Container>
+          <Sheet.Header />
+          <Sheet.Content>
+            <div className='p-4 flex flex-col gap-2'>
+              <header className='text-sm font-semibold uppercase'>
+                Activity
+              </header>
+              <ActivityItem />
+              <h1 className='text-4xl font-light'>
+                It's a sheet! Like a modal, but a sheet.
+              </h1>
+            </div>
+          </Sheet.Content>
+        </Sheet.Container>
+
+        <Sheet.Backdrop />
+      </Sheet>
+
+
+      <nav className='bg-black fixed bottom-0 shadow-lg z-40 w-full safe-bottom'>
+        <ul className='h-16 flex justify-between px-16 items-center'>
+          <li className='h-full border-t-2 border-b-2 border-b-black flex flex-col justify-center'>
+            <img src={mutiny_m} className="App-logo" alt="logo" />
+          </li>
+          <li>
+            <img src={scan} className="App-logo" alt="logo" />
+          </li>
+          <li>
+            <img src={settings} className="App-logo" alt="logo" />
+          </li>
+          {/* <li>home</li> */}
+          {/* <li>scan</li> */}
+          {/* <li>settings</li> */}
+        </ul>
+      </nav>
+
+
+
+    </div >
+  )
+}
+
+export default App
--- a/src/assets/m.svg
+++ b/src/assets/m.svg
@@ -0,0 +1,3 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.5 28.4H5.08333V29.7H8.95833V28.4H10.25V15.4H11.5417V12.8H10.25V11.5H7.66667V12.8H6.375V14.1H5.08333V15.4H8.95833V18H7.66667V19.3H5.08333V18H3.79167V12.8H5.08333V11.5H6.375V10.2H14.125V11.5H15.4167V12.8H16.7083V15.4H18V18H19.2917V19.3H20.5833V16.7H21.875V15.4H23.1667V12.8H24.4583V10.2H25.75V8.9H27.0417V6.3H29.625V5H32.2083V6.3H33.5V7.6H30.9167V6.3H29.625V7.6H28.3333V23.2H29.625V29.7H30.9167V31H25.75V29.7H24.4583V16.7H23.1667V18H21.875V20.6H20.5833V23.2H19.2917V25.8H16.7083V23.2H15.4167V20.6H14.125V16.7H12.8333V24.5H11.5417V28.4H10.25V29.7H8.95833V31H3.79167V29.7H2.5V28.4Z" fill="white"/>
+</svg>
--- a/src/assets/mutiny-logo.svg
+++ b/src/assets/mutiny-logo.svg
@@ -0,0 +1,9 @@
+<svg width="75" height="25" viewBox="0 0 75 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M54.9369 11.0035H50.9243V13.003H52.9306V18.0018H51.9274V19.0015H50.9243V20.0013H56.9432V19.0015H55.9401V18.0018H54.9369V17.002H55.9401V16.0023H54.9369V15.0025H55.9401V13.003H56.9432V12.0033H58.9495V19.0015H57.9464V20.0013H63.9653V19.0015H61.959V12.0033H60.9558V11.0035H55.9401V12.0033H54.9369V11.0035Z" fill="#F61D5B"/>
+<path d="M63.9653 12.0033V11.0035H68.9811V12.0033H67.9779V14.0028H68.9811V15.0025H69.9842V17.002H70.9874V15.0025H71.9905V12.0033H70.9874V11.0035H75V12.0033H73.9968V14.0028H72.9937V16.0023H71.9905V18.0018H70.9874V20.0013H69.9842V22.0008H68.9811V24.0003H67.9779V25H64.9685V23.0005H66.9748V22.0008H67.9779V21.001H68.9811V19.0015H67.9779V17.002H66.9748V15.0025H65.9716V14.0028H64.9685V12.0033H63.9653Z" fill="#F61D5B"/>
+<path d="M38.0062 11.0035H36.0035V12.0012H38.0062V19.9824H43.0128V18.9847H44.0141V17.9871H42.0114V18.9847H41.0101V17.9871H40.0088V16.9894H41.0101V13.9965H40.0088V12.0012H44.0141V11.0035H40.0088V10.0059H41.0101V8.01056H39.0075V10.0059H38.0062V11.0035Z" fill="#F61D5B"/>
+<path d="M46.0094 8.01056V5.01761H49.0023V8.01056H46.0094Z" fill="#F61D5B"/>
+<path d="M45.0117 11.0035H49.0023V18.9847H50V19.9824H44.0141V18.9847H46.0094V12.9988H44.0141V12.0012H45.0117V11.0035Z" fill="#F61D5B"/>
+<path d="M0 17.9842H2.00631V18.9833H5.01577V17.9842H6.01893V7.99296H7.02208V5.99472H6.01893V4.9956H4.01262V5.99472H3.00946V6.99384H2.00631V7.99296H5.01577V9.9912H4.01262V10.9903H2.00631V9.9912H1.00315V5.99472H2.00631V4.9956H3.00946V3.99648H9.02839V4.9956H10.0315V5.99472H11.0347V7.99296H12.0379V9.9912H13.041V10.9903H14.0442V8.99208H15.0473V7.99296H16.0505V5.99472H17.0536V3.99648H18.0568V2.99736H19.0599V0.99912H21.0662V0H23.0725V0.99912H24.0757V1.99824H22.0694V0.99912H21.0662V1.99824H20.0631V13.9877H21.0662V18.9833H22.0694V19.9824H18.0568V18.9833H17.0536V8.99208H16.0505V9.9912H15.0473V11.9894H14.0442V13.9877H13.041V15.9859H11.0347V13.9877H10.0315V11.9894H9.02839V8.99208H8.02523V14.9868H7.02208V17.9842H6.01893V18.9833H5.01577V19.9824H1.00315V18.9833H0V17.9842Z" fill="#F61D5B"/>
+<path d="M22.9313 11.0035H26.9535V17.9871H27.9591V18.9847H29.9702V17.9871H30.9758V12.0012H28.9647V11.0035H33.9924V18.9847H36.0035V19.9824H30.9758V18.9847H29.9702V19.9824H24.9424V17.9871H23.9369V13.9965H24.9424V12.9988H23.9369V12.0012H22.9313V11.0035Z" fill="#F61D5B"/>
+</svg>
--- a/src/assets/scan.svg
+++ b/src/assets/scan.svg
@@ -0,0 +1,3 @@
+<svg width="37" height="36" viewBox="0 0 37 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26 3H30.5C32.1569 3 33.5 4.34315 33.5 6V10.5H36.5V6C36.5 2.68629 33.8137 0 30.5 0H26V3ZM11 3V0H6.5C3.18629 0 0.5 2.68629 0.5 6V10.5H3.5V6C3.5 4.34315 4.84315 3 6.5 3H11ZM3.5 25.5H0.5V30C0.5 33.3137 3.18629 36 6.5 36H11V33H6.5C4.84315 33 3.5 31.6569 3.5 30V25.5ZM26 33V36H30.5C33.8137 36 36.5 33.3137 36.5 30V25.5H33.5V30C33.5 31.6569 32.1569 33 30.5 33H26Z" fill="white"/>
+</svg>
--- a/src/assets/send.svg
+++ b/src/assets/send.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.66667 4.16667C5.66667 3.79848 5.96515 3.5 6.33334 3.5H12.3333C12.7015 3.5 13 3.79848 13 4.16667V10.1667C13 10.5349 12.7015 10.8333 12.3333 10.8333C11.9651 10.8333 11.6667 10.5349 11.6667 10.1667V5.77614L4.31941 13.1234C4.05906 13.3838 3.63695 13.3838 3.3766 13.1234C3.11625 12.8631 3.11625 12.4409 3.3766 12.1806L10.7239 4.83333H6.33334C5.96515 4.83333 5.66667 4.53486 5.66667 4.16667Z" fill="white"/>
+</svg>
--- a/src/assets/settings.svg
+++ b/src/assets/settings.svg
@@ -0,0 +1,3 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.25 18C29.25 17.655 29.235 17.325 29.205 16.98L31.995 14.865C32.595 14.415 32.76 13.575 32.385 12.915L29.58 8.07C29.4001 7.75228 29.1092 7.51221 28.7631 7.39593C28.417 7.27965 28.0402 7.29534 27.705 7.44L24.48 8.805C23.925 8.415 23.34 8.07 22.725 7.785L22.29 4.32C22.2 3.57 21.555 3 20.805 3H15.21C14.445 3 13.8 3.57 13.71 4.32L13.275 7.785C12.66 8.07 12.075 8.415 11.52 8.805L8.29499 7.44C7.60499 7.14 6.79499 7.41 6.41999 8.07L3.61499 12.93C3.23999 13.59 3.40499 14.415 4.00499 14.88L6.79499 16.995C6.73281 17.6686 6.73281 18.3464 6.79499 19.02L4.00499 21.135C3.40499 21.585 3.23999 22.425 3.61499 23.085L6.41999 27.93C6.79499 28.59 7.60499 28.86 8.29499 28.56L11.52 27.195C12.075 27.585 12.66 27.93 13.275 28.215L13.71 31.68C13.8 32.43 14.445 33 15.195 33H20.79C21.54 33 22.185 32.43 22.275 31.68L22.71 28.215C23.325 27.93 23.91 27.585 24.465 27.195L27.69 28.56C28.38 28.86 29.19 28.59 29.565 27.93L32.37 23.085C32.745 22.425 32.58 21.6 31.98 21.135L29.19 19.02C29.235 18.675 29.25 18.345 29.25 18ZM18.06 23.25C15.165 23.25 12.81 20.895 12.81 18C12.81 15.105 15.165 12.75 18.06 12.75C20.955 12.75 23.31 15.105 23.31 18C23.31 20.895 20.955 23.25 18.06 23.25Z" fill="white"/>
+</svg>
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,14 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  @apply text-white;
+  @apply bg-fixed bg-no-repeat bg-gradient-to-b from-black to-[#0b215b] bg-black;
+  overscroll-behavior-y: none;
+  min-height: 100.3%;
+}
+
+.react-modal-sheet-container {
+  @apply !bg-[#262626];
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -0,0 +1,58 @@
+const plugin = require('tailwindcss/plugin')
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        'fade-to-blue': 'linear-gradient(1.63deg, #0B215B 32.05%, rgba(11, 33, 91, 0) 84.78%)'
+      }
+    },
+  },
+  plugins: [
+    plugin(function ({ addUtilities }) {
+      const newUtilities = {
+        '.safe-top': {
+          paddingTop: 'constant(safe-area-inset-top)',
+          paddingTop: 'env(safe-area-inset-top)'
+        },
+        '.safe-left': {
+          paddingLeft: 'constant(safe-area-inset-left)',
+          paddingLeft: 'env(safe-area-inset-left)'
+        },
+        '.safe-right': {
+          paddingRight: 'constant(safe-area-inset-right)',
+          paddingRight: 'env(safe-area-inset-right)'
+        },
+        '.safe-bottom': {
+          paddingBottom: 'constant(safe-area-inset-bottom)',
+          paddingBottom: 'env(safe-area-inset-bottom)'
+        },
+        '.disable-scrollbars': {
+          scrollbarWidth: 'none',
+          '-ms-overflow-style': 'none',
+          '&::-webkit-scrollbar': {
+            width: '0px',
+            background: 'transparent',
+            display: 'none'
+          },
+          '& *::-webkit-scrollbar': {
+            width: '0px',
+            background: 'transparent',
+            display: 'none'
+          },
+          '& *': {
+            scrollbarWidth: 'none',
+            '-ms-overflow-style': 'none'
+          }
+        }
+      }
+
+      addUtilities(newUtilities);
+    })
+  ],
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,32 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { VitePWA } from 'vite-plugin-pwa'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+
+  plugins: [react(), VitePWA({
+    includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg'],
+    manifest: {
+      name: 'Mutiny Wallet',
+      short_name: 'Mutiny',
+      description: 'A lightning wallet',
+      theme_color: '#000',
+      icons: [
+        {
+          src: '192.png',
+          sizes: '192x192',
+          type: 'image/png'
+        },
+        {
+          src: '512.png',
+          sizes: '512x512',
+          type: 'image/png'
+        }
+      ]
+    },
+    registerType: 'autoUpdate', devOptions: {
+      enabled: true
+    }
+  })],
+})
				`@@ -0,0 +1 @@`
				`if('serviceWorker' in navigator) navigator.serviceWorker.register('/dev-sw.js?dev-sw', { scope: '/', type: 'classic' })`
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>