POC Coinjoin Fee Calculator for Wasabi Wallet

package.json

@@ -1,20 +1,25 @@
 {
-	"name": "coinjoins",
-	"version": "0.0.1",
-	"private": true,
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview"
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/kit": "^1.20.4",
-		"autoprefixer": "^10.4.14",
-		"postcss": "^8.4.27",
-		"svelte": "^4.0.0",
-		"tailwindcss": "^3.3.3",
-		"vite": "^4.3.6"
-	},
-	"type": "module"
+  "name": "coinjoins",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.27",
+    "svelte": "^4.2.12",
+    "tailwindcss": "^3.3.3",
+    "vite": "^5.0.0",
+    "svelte-check": "^3.6.7",
+    "typescript": "^5.4.2"
+  },
+  "type": "module",
+  "dependencies": {}
 }

src/lib/components/Header.svelte

@@ -202,6 +202,22 @@
         {headerData.menu.history}
       </a>
     </div>
+    <div
+      class="cursor-default hover:text-green-cj hover:cursor-pointer {$page.url
+        .pathname === '/calculator'
+        ? 'text-green-cj'
+        : 'text-white'}"
+    >
+      <a
+        on:click={showMobileMenu
+          ? handleMobileMenuItemClick
+          : handleDesktopMenuItemClick}
+        href="/calculator"
+        class="no-underline"
+      >
+        {headerData.menu.calculator}
+      </a>
+    </div>
     <div class="isolate z-20 md:hidden flex justify-center pt-12">
       <a
         href="/try"

src/lib/data/calculator.json

@@ -0,0 +1,71 @@
+{
+  "no_results": {
+    "title": "No results for now. Run the numbers first!"
+  },
+  "hero": {
+    "title": "Coinjoin Fee Calculator",
+    "body": "Coinjoin fees can be difficult to calculate. This calculator aims to make coinjoin fees easier to estimate for Wasabi Wallet. For educational purposes only."
+  },
+  "calculator": {
+    "how_much_bitcoin": {
+      "label": "How much bitcoin to coinjoin?",
+      "placeholder": "Enter the amount of BTC",
+      "btc": "BTC"
+    },
+    "how_many_inputs": {
+      "label": "How many inputs?",
+      "placeholder": "Enter the amount of coins"
+    },
+    "expected_privacy": {
+      "label": "What is your expected level of privacy?",
+      "placeholder": "Select your privacy level",
+      "dropdown": [
+        {
+          "id": "low",
+          "value": false,
+          "name": "Low"
+        },
+        {
+          "id": "high",
+          "value": true,
+          "name": "High"
+        }
+      ]
+    },
+    "current_fee_rate": "Current fee rate (from Mempool.Space)",
+    "is_first_coinjoin": {
+      "label": "Is this your first coinjoin with this wallet?",
+      "placeholder": "Choose your situation",
+      "dropdown": [
+        {
+          "id": "false",
+          "value": false,
+          "name": "No, used it before"
+        },
+        {
+          "id": "true",
+          "value": true,
+          "name": "Yes, first wallet"
+        }
+      ]
+    },
+    "cta": {
+      "text": "Calculate fees"
+    }
+  },
+  "results": {
+    "title": "Results",
+    "total_fees": {
+      "title": "Total Fees",
+      "subtitle": "All fees, including coordinator and mining fees."
+    },
+    "coordinator_fees": {
+      "title": "Coordinator Fees (0.3%)",
+      "subtitle": "Fees that the coinjoin coordinator takes for its service."
+    },
+    "mining_fees": {
+      "title": "Mining Fees",
+      "subtitle": "Depend on the live block space market conditions."
+    }
+  }
+}

src/lib/data/header.json

@@ -2,7 +2,8 @@
   "menu": {
     "basics": "Basics",
     "wallets": "Wallets",
-    "history": "History"
+    "history": "History",
+    "calculator": "Calculator"
   },
   "submenu": [
     {

src/routes/+layout.svelte

@@ -60,7 +60,7 @@
 <Header />
 {#key data.url}
   <div
-    class="z-0 min-w-[320px] bg-dark-blue flex flex-col gap-52 md:gap-56"
+    class="z-0 min-w-[320px] bg-dark-blue flex flex-col gap-16 md:gap-32"
     in:fly={{ x: -200, duration: 300, delay: 300 }}
     out:fly={{ x: 200, duration: 300 }}
   >