chore: update dependencies

BoltzExchange · Nov 1, 2024 · db667fe · db667fe
1 parent 8c40705
commit db667fe
Show file tree

Hide file tree

Showing 9 changed files with 1,871 additions and 1,017 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,32 +21,32 @@
         "changelog": "git-cliff -o CHANGELOG.md"
     },
     "devDependencies": {
-        "@babel/core": "^7.25.2",
-        "@babel/plugin-transform-modules-commonjs": "^7.24.8",
-        "@babel/preset-env": "^7.25.3",
-        "@babel/preset-typescript": "^7.24.7",
-        "@playwright/test": "^1.46.0",
-        "@solidjs/testing-library": "^0.8.9",
-        "@testing-library/jest-dom": "^6.4.8",
+        "@babel/core": "^7.26.0",
+        "@babel/plugin-transform-modules-commonjs": "^7.25.9",
+        "@babel/preset-env": "^7.26.0",
+        "@babel/preset-typescript": "^7.26.0",
+        "@playwright/test": "^1.48.2",
+        "@solidjs/testing-library": "^0.8.10",
+        "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/user-event": "^14.5.2",
         "@trivago/prettier-plugin-sort-imports": "^4.3.0",
-        "@types/jest": "^29.5.12",
+        "@types/jest": "^29.5.14",
         "@webbtc/webln-types": "^3.0.0",
         "babel-jest": "^29.7.0",
         "babel-plugin-transform-import-meta": "^2.2.1",
         "babel-plugin-transform-vite-meta-env": "^1.0.3",
         "babel-preset-jest": "^29.6.3",
         "babel-preset-solid": "^1.8.19",
         "eventsource": "^2.0.2",
-        "git-cliff": "^2.4.0",
+        "git-cliff": "^2.6.1",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
-        "jsdom": "^24.1.1",
+        "jsdom": "^25.0.1",
         "prettier": "^3.3.3",
-        "sass": "^1.77.8",
+        "sass-embedded": "^1.80.5",
         "solid-jest": "^0.2.0",
-        "typescript": "^5.5.4",
-        "vite": "^5.4.8",
+        "typescript": "^5.6.3",
+        "vite": "^5.4.10",
         "vite-plugin-mkcert": "^1.17.6",
         "vite-plugin-node-polyfills": "^0.22.0",
         "vite-plugin-solid": "^2.10.2",
@@ -55,14 +55,14 @@
     },
     "dependencies": {
         "@bitcoinerlab/secp256k1": "^1.1.1",
-        "@fontsource/noto-mono": "^5.0.11",
-        "@fontsource/noto-sans": "^5.0.22",
+        "@fontsource/noto-mono": "^5.1.0",
+        "@fontsource/noto-sans": "^5.1.0",
         "@ledgerhq/hw-app-eth": "6.38.2",
         "@ledgerhq/hw-transport-webhid": "^6.29.4",
-        "@scure/base": "^1.1.7",
+        "@scure/base": "^1.1.9",
         "@solid-primitives/i18n": "^2.1.1",
-        "@solid-primitives/storage": "^4.0.0",
-        "@solidjs/router": "^0.14.3",
+        "@solid-primitives/storage": "^4.2.1",
+        "@solidjs/router": "^0.15.0",
         "@trezor/connect-web": "^9.4.2",
         "@vulpemventures/secp256k1-zkp": "^3.2.1",
         "bignumber.js": "^9.1.2 ",
@@ -73,11 +73,11 @@
         "buffer": "^6.0.3",
         "create-hmac": "^1.1.7",
         "ecpair": "^2.1.0",
-        "ethers": "^6.13.2",
-        "iframe-resizer": "^5.2.4",
+        "ethers": "^6.13.4",
+        "iframe-resizer": "^5.3.2",
         "liquidjs-lib": "^6.0.2-liquid.36",
         "localforage": "^1.10.0",
-        "loglevel": "^1.9.1",
+        "loglevel": "^1.9.2",
         "qr-scanner": "^1.4.2",
         "qrcode": "^1.5.4",
         "solid-icons": "^1.1.0",

diff --git a/src/style/asset.scss b/src/style/asset.scss
@@ -1,4 +1,4 @@
-@import "vars";
+@use "vars";
 .icon {
     display: inline-block;
     width: 36px;
@@ -16,7 +16,7 @@
 
 .asset-LN {
     .icon {
-        background-image: $lightning_icon;
+        background-image: vars.$lightning_icon;
         background-size: 80%;
         background-position: center;
     }
@@ -27,7 +27,7 @@
 
 .asset-BTC {
     .icon {
-        background-image: $bitcoin_icon;
+        background-image: vars.$bitcoin_icon;
     }
     .asset-text:before {
         content: "bitcoin";
@@ -36,7 +36,7 @@
 
 .asset-L-BTC {
     .icon {
-        background-image: $liquid_icon;
+        background-image: vars.$liquid_icon;
     }
     .asset-text:before {
         content: "liquid";
@@ -45,7 +45,7 @@
 
 .asset-RBTC {
     .icon {
-        background-image: $rootstock_icon;
+        background-image: vars.$rootstock_icon;
     }
     .asset-text:before {
         content: "rootstock";

diff --git a/src/style/hero.scss b/src/style/hero.scss
@@ -1,4 +1,5 @@
-@import "vars";
+@use "sass:color";
+@use "vars";
 
 .headline,
 h1 {
@@ -50,7 +51,7 @@ h2.headline small {
 }
 h3 {
     margin: 0;
-    color: $primary;
+    color: vars.$primary;
 }
 
 .inner-wrap {
@@ -117,7 +118,7 @@ h3 {
     font-size: 16px;
     display: block;
     font-weight: normal;
-    color: $primary;
+    color: vars.$primary;
 }
 
 .thunderhub:before {
@@ -312,14 +313,14 @@ h3 {
 }
 #create-overlay.glow .frame {
     transition: all 0.8s ease-in-out;
-    box-shadow: 0 0 0 transparentize($primary, 0.7);
+    box-shadow: 0 0 0 color.adjust(vars.$primary, $alpha: -0.7);
 }
 
 @media (min-width: 488px) {
     #create-overlay.glow .frame {
-        box-shadow: 0 0 40px transparentize($primary, 0.7);
+        box-shadow: 0 0 40px color.adjust(vars.$primary, $alpha: -0.7);
     }
     #create-overlay.glow .frame:hover {
-        box-shadow: 0 0 60px transparentize($primary, 0.7);
+        box-shadow: 0 0 60px color.adjust(vars.$primary, $alpha: -0.7);
     }
 }
diff --git a/src/style/index.scss b/src/style/index.scss
@@ -1,4 +1,5 @@
-@import "vars";
+@use "sass:color";
+@use "vars";
 
 * {
     box-sizing: border-box;
@@ -12,8 +13,8 @@
 body {
     font-size: 14px;
     margin: 0;
-    background: $background;
-    color: $color;
+    background: vars.$background;
+    color: vars.$color;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-align: center;
@@ -34,7 +35,7 @@ footer {
 
 a,
 a:hover {
-    color: $primary;
+    color: vars.$primary;
 }
 
 .headline,
@@ -147,7 +148,7 @@ hr.spacer {
     padding: 8px 12px;
     text-decoration: none;
     border-radius: 16px;
-    background-color: $primary;
+    background-color: vars.$primary;
     color: #14283f;
     font-weight: bold;
     text-transform: uppercase;
@@ -161,7 +162,7 @@ hr.spacer {
 }
 
 .btn-small {
-    background-color: $primary;
+    background-color: vars.$primary;
     color: #14283f;
     border-radius: 7px;
     padding: 0 6px;
@@ -175,7 +176,7 @@ hr.spacer {
 [data-status="invoice.failedToPay"],
 [data-status="transaction.lockupFailed"] {
     > p > .btn-small {
-        background-color: $error;
+        background-color: vars.$error;
         color: #fff;
     }
 }
@@ -216,7 +217,7 @@ hr.spacer {
     background-color: rgb(11, 22, 35);
 }
 .btn-light:hover {
-    background-color: $primary;
+    background-color: vars.$primary;
 }
 .btn-explorer {
     background: #533180;
@@ -236,11 +237,11 @@ hr.spacer {
 }
 .btn-danger:disabled,
 .btn-danger {
-    background-color: transparentize($error, 0.42);
+    background-color: color.adjust(vars.$error, $alpha: -0.42);
     color: white;
 }
 .btn-danger:hover {
-    background: $error;
+    background: vars.$error;
 }
 .btns {
     display: flex;
@@ -307,13 +308,13 @@ input:focus,
 textarea:focus {
     outline: none;
     color: #ddd;
-    border-color: $primary;
+    border-color: vars.$primary;
 }
 input.invalid,
 textarea.invalid {
     outline: none;
     color: #ddd;
-    border-color: $error;
+    border-color: vars.$error;
 }
 .fees-dyn label {
     display: block;
@@ -442,7 +443,7 @@ textarea {
 }
 
 .error {
-    background: transparentize($error, 0.15);
+    background: color.adjust(vars.$error, $alpha: -0.15);
     color: #ddd;
     padding: 6px 10px;
     display: inline-block;

diff --git a/src/style/nav.scss b/src/style/nav.scss
@@ -1,4 +1,5 @@
-@import "vars";
+@use "sass:color";
+@use "vars";
 
 .nav-inner {
     display: flex;
@@ -16,7 +17,7 @@ nav {
     top: 0;
     z-index: 999;
     width: 100%;
-    background: darken($background, 3%);
+    background: color.adjust(vars.$background, $lightness: -3%);
     position: relative;
 }
 nav a {
@@ -32,7 +33,7 @@ nav a:first-child {
 
 nav a:hover,
 nav a.active {
-    color: $primary;
+    color: vars.$primary;
     text-decoration: underline;
 }
 
@@ -69,7 +70,7 @@ nav a.active {
 }
 
 #languages .lang:hover {
-    background-color: $primary;
+    background-color: vars.$primary;
     color: rgb(11, 22, 35);
 }
 
@@ -191,14 +192,14 @@ nav a.active {
 }
 
 .banner {
-    background: $error;
+    background: vars.$error;
     font-size: 18px;
     padding: 5px;
     position: relative;
     z-index: 9999;
 }
 
 .banner-yellow {
-    background: $primary;
+    background: vars.$primary;
     color: #14283f;
 }
diff --git a/src/style/notification.scss b/src/style/notification.scss
@@ -1,4 +1,5 @@
-@import "vars";
+@use "sass:color";
+@use "vars";
 
 #notification {
     background: black;
@@ -23,10 +24,10 @@
     box-shadow: 0px 0 3px black;
 }
 #notification.error {
-    background-color: transparentize($error, 0.15);
+    background-color: color.adjust(vars.$error, $alpha: -0.15);
 }
 #notification.success {
-    background-color: transparentize($success, 0.15);
+    background-color: color.adjust(vars.$success, $alpha: -0.15);
 }
 
 #notification img {

diff --git a/src/style/qrcode.scss b/src/style/qrcode.scss
@@ -1,4 +1,4 @@
-@import "vars";
+@use "vars";
 $size: 40px;
 #qrcode {
     position: relative;
@@ -12,18 +12,18 @@ $size: 40px;
         height: $size;
         z-index: 1;
         background: white;
-        background-image: $boltz_icon;
+        background-image: vars.$boltz_icon;
         background-size: 100%;
         border-radius: 50%;
     }
     &[data-asset="BTC"] span {
-        background-image: $bitcoin_icon;
+        background-image: vars.$bitcoin_icon;
     }
     &[data-asset="L-BTC"] span {
-        background-image: $liquid_icon;
+        background-image: vars.$liquid_icon;
     }
     &[data-asset="RBTC"] span {
-        background-image: $rootstock_icon;
+        background-image: vars.$rootstock_icon;
     }
     img {
         width: 300px;

diff --git a/vite.config.mjs b/vite.config.mjs
@@ -28,6 +28,13 @@ export default defineConfig({
             transformMixedEsModules: true,
         },
     },
+    css: {
+        preprocessorOptions: {
+            scss: {
+                api: "modern-compiler",
+            },
+        },
+    },
     define: {
         __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
         __GIT_COMMIT__: JSON.stringify(commitHash),