diff --git a/package-lock.json b/package-lock.json
index eee6f2df5..63d4e0c16 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -177,7 +177,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz",
       "integrity": "sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==",
-      "dev": true,
       "dependencies": {
         "@babel/highlight": "^7.24.7",
         "picocolors": "^1.0.0"
@@ -229,7 +228,6 @@
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.8.tgz",
       "integrity": "sha512-47DG+6F5SzOi0uEvK4wMShmn5yY0mVjVJoWTphdY2B4Rx9wHgjK7Yhtr0ru6nE+sn0v38mzrWOlah0p/YlHHOQ==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.24.8",
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -341,7 +339,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.24.7.tgz",
       "integrity": "sha512-DoiN84+4Gnd0ncbBOM9AZENV4a5ZiL39HYMyZJGZ/AZEykHYdJw0wW3kdcsh9/Kn+BRXHLkkklZ51ecPKmI1CQ==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.24.7"
       },
@@ -353,7 +350,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.24.7.tgz",
       "integrity": "sha512-FyoJTsj/PEUWu1/TYRiXTIHc8lbw+TDYkZuoE43opPS5TrI7MyONBE1oNvfguEXAD9yhQRrVBnXdXzSLQl9XnA==",
-      "dev": true,
       "dependencies": {
         "@babel/template": "^7.24.7",
         "@babel/types": "^7.24.7"
@@ -366,7 +362,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.24.7.tgz",
       "integrity": "sha512-MJJwhkoGy5c4ehfoRyrJ/owKeMl19U54h27YYftT0o2teQ3FJ3nQUf/I3LlJsX4l3qlw7WRXUmiyajvHXoTubQ==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.24.7"
       },
@@ -391,7 +386,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz",
       "integrity": "sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==",
-      "dev": true,
       "dependencies": {
         "@babel/traverse": "^7.24.7",
         "@babel/types": "^7.24.7"
@@ -504,7 +498,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.24.7.tgz",
       "integrity": "sha512-oy5V7pD+UvfkEATUKvIjvIAH/xCzfsFVw7ygW2SI6NClZzquT+mwdTfgfdbUiceh6iQO0CHtCPsyze/MZ2YbAA==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.24.7"
       },
@@ -516,7 +509,6 @@
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
       "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -525,7 +517,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
       "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -571,7 +562,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.7.tgz",
       "integrity": "sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.24.7",
         "chalk": "^2.4.2",
@@ -586,7 +576,6 @@
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.8.tgz",
       "integrity": "sha512-WzfbgXOkGzZiXXCqk43kKwZjzwx4oulxZi3nq2TYL9mOjQv6kYwul9mz6ID36njuL7Xkp6nJEfok848Zj10j/w==",
-      "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -904,21 +893,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-syntax-typescript": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.24.7.tgz",
-      "integrity": "sha512-c/+fVeJBB0FeKsFvwytYiUD+LBvhHjGSI0g446PRGdSVGZLRNArBUno2PETbAly3tpiNAQR5XaZ+JslxkotsbA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.7"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-syntax-unicode-sets-regex": {
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
@@ -1536,6 +1510,101 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-react-display-name": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.24.7.tgz",
+      "integrity": "sha512-H/Snz9PFxKsS1JLI4dJLtnJgCJRoo0AUm3chP6NYr+9En1JMKloheEiLIhlp5MDVznWo+H3AAC1Mc8lmUEpsgg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx": {
+      "version": "7.25.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.25.2.tgz",
+      "integrity": "sha512-KQsqEAVBpU82NM/B/N9j9WOdphom1SZH3R+2V7INrQUH+V9EBFwZsEJl8eBIVeQE62FxJCc70jzEZwqU7RcVqA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.24.7",
+        "@babel/helper-module-imports": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/plugin-syntax-jsx": "^7.24.7",
+        "@babel/types": "^7.25.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-development": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.24.7.tgz",
+      "integrity": "sha512-QG9EnzoGn+Qar7rxuW+ZOsbWOt56FvvI93xInqsZDC5fsekx1AlIO4KIJ5M+D0p0SqSH156EpmZyXq630B8OlQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/plugin-transform-react-jsx": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.24.7.tgz",
+      "integrity": "sha512-fOPQYbGSgH0HUp4UJO4sMBFjY6DuWq+2i8rixyUMb3CdGixs/gccURvYOAhajBdKDoGajFr3mUq5rH3phtkGzw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.24.7.tgz",
+      "integrity": "sha512-J2z+MWzZHVOemyLweMqngXrgGC42jQ//R0KdxqkIz/OrbVIIlhFI3WigZ5fO+nwFvBlncr4MGapd8vTyc7RPNQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-pure-annotations": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.24.7.tgz",
+      "integrity": "sha512-PLgBVk3fzbmEjBJ/u8kFzOqS9tUeDjiaWud/rRym/yjCo/M9cASPlnrd2ZmmZpQT40fOOrvR8jh+n8jikrOhNA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-transform-regenerator": {
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.24.7.tgz",
@@ -1643,24 +1712,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-typescript": {
-      "version": "7.24.8",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.24.8.tgz",
-      "integrity": "sha512-CgFgtN61BbdOGCP4fLaAMOPkzWUh6yQZNMr5YSt8uz2cZSSiQONCQFWqsE4NeVfOIhqDOlS9CR3WD91FzMeB2Q==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.24.7",
-        "@babel/helper-create-class-features-plugin": "^7.24.8",
-        "@babel/helper-plugin-utils": "^7.24.8",
-        "@babel/plugin-syntax-typescript": "^7.24.7"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-transform-unicode-escapes": {
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.24.7.tgz",
@@ -1833,17 +1884,18 @@
         "@babel/core": "^7.0.0-0 || ^8.0.0-0 <8.0.0"
       }
     },
-    "node_modules/@babel/preset-typescript": {
+    "node_modules/@babel/preset-react": {
       "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.24.7.tgz",
-      "integrity": "sha512-SyXRe3OdWwIwalxDg5UtJnJQO+YPcTfwiIY2B0Xlddh9o7jpWLvv8X1RthIeDOxQ+O1ML5BLPCONToObyVQVuQ==",
+      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.24.7.tgz",
+      "integrity": "sha512-AAH4lEkpmzFWrGVlHaxJB7RLH21uPQ9+He+eFLWHmF9IuFQVugz8eAsamaW0DXRrTfco5zj1wWtpdcXJUOfsag==",
       "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.24.7",
         "@babel/helper-validator-option": "^7.24.7",
-        "@babel/plugin-syntax-jsx": "^7.24.7",
-        "@babel/plugin-transform-modules-commonjs": "^7.24.7",
-        "@babel/plugin-transform-typescript": "^7.24.7"
+        "@babel/plugin-transform-react-display-name": "^7.24.7",
+        "@babel/plugin-transform-react-jsx": "^7.24.7",
+        "@babel/plugin-transform-react-jsx-development": "^7.24.7",
+        "@babel/plugin-transform-react-pure-annotations": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1859,10 +1911,9 @@
       "dev": true
     },
     "node_modules/@babel/runtime": {
-      "version": "7.24.8",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.8.tgz",
-      "integrity": "sha512-5F7SDGs1T72ZczbRwbGO9lQi0NLjQxzl6i4lJxLxfW9U5UluCSyEJeniWvnhl3/euNiqQVbo8zruhsDfid0esA==",
-      "dev": true,
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.6.tgz",
+      "integrity": "sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -1874,7 +1925,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.7.tgz",
       "integrity": "sha512-jYqfPrU9JTF0PmPy1tLYHW4Mp4KlgxJD9l2nP9fD6yT/ICi554DmrWBAEYpIelzjHf1msDP3PxJIRt/nFNfBig==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.24.7",
         "@babel/parser": "^7.24.7",
@@ -1888,7 +1938,6 @@
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.8.tgz",
       "integrity": "sha512-t0P1xxAPzEDcEPmjprAQq19NWum4K0EQPjMwZQZbHt+GiZqvjCHjj755Weq1YRPVzBI+3zSfvScfpnuIecVFJQ==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.24.7",
         "@babel/generator": "^7.24.8",
@@ -1906,10 +1955,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.24.8",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.8.tgz",
-      "integrity": "sha512-SkSBEHwwJRU52QEVZBmMBnE5Ux2/6WU1grdYyOhpbCNxbmJrDuDCphBzKZSO3taf0zztp+qkWlymE5tVL5l0TA==",
-      "dev": true,
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.6.tgz",
+      "integrity": "sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==",
       "dependencies": {
         "@babel/helper-string-parser": "^7.24.8",
         "@babel/helper-validator-identifier": "^7.24.7",
@@ -1950,22 +1998,155 @@
         "node": ">=10.0.0"
       }
     },
-    "node_modules/@esbuild/android-arm": {
-      "version": "0.15.18",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.15.18.tgz",
-      "integrity": "sha512-5GT+kcs2WVGjVs7+boataCkO5Fg0y4kCjzkB5bAip7H4jfnOS3dA6KPiww9W1OEKTKeAcUVhdZGvgI65OXmUnw==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz",
+      "integrity": "sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/serialize": "^1.2.0",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
       "engines": {
-        "node": ">=12"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.13.1",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.1.tgz",
+      "integrity": "sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/sheet": "^1.4.0",
+        "@emotion/utils": "^1.4.0",
+        "@emotion/weak-memoize": "^0.4.0",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
+      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g=="
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.0.tgz",
+      "integrity": "sha512-SHetuSLvJDzuNbOdtPVbq6yMMMlLoW5Q94uDqJZqy50gcmAjxFkVqmzqSGEFq9gT2iMuIeKV1PXVWmvUhuZLlQ==",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ=="
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.13.3",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.13.3.tgz",
+      "integrity": "sha512-lIsdU6JNrmYfJ5EbUCf4xW1ovy5wKQ2CkPRM4xogziOxH1nXxBSjpC9YqbFAP7circxMfYp+6x676BqWcEiixg==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.12.0",
+        "@emotion/cache": "^11.13.0",
+        "@emotion/serialize": "^1.3.1",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.1.0",
+        "@emotion/utils": "^1.4.0",
+        "@emotion/weak-memoize": "^0.4.0",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.1.tgz",
+      "integrity": "sha512-dEPNKzBPU+vFPGa+z3axPRn8XVDetYORmDC0wAiej+TNcOZE70ZMJa0X7JdeoM6q/nWTMZeLpN/fTnD9o8MQBA==",
+      "dependencies": {
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/unitless": "^0.10.0",
+        "@emotion/utils": "^1.4.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
+      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg=="
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.13.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.13.0.tgz",
+      "integrity": "sha512-tkzkY7nQhW/zC4hztlwucpT8QEZ6eUzpXDRhww/Eej4tFfO0FxQYWRyg/c5CCXa4d/f174kqeXYjuQRnhzf6dA==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.12.0",
+        "@emotion/is-prop-valid": "^1.3.0",
+        "@emotion/serialize": "^1.3.0",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.1.0",
+        "@emotion/utils": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
+      "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg=="
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz",
+      "integrity": "sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
       }
     },
+    "node_modules/@emotion/utils": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.0.tgz",
+      "integrity": "sha512-spEnrA1b6hDR/C68lC2M7m6ALPUHZC0lIY7jAS/B/9DuuO1ZP04eov8SMv/6fwRd8pzmsn2AuJEznRREWlQrlQ=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
+      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg=="
+    },
     "node_modules/@esbuild/android-arm64": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz",
@@ -2110,22 +2291,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/@esbuild/linux-loong64": {
-      "version": "0.15.18",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.15.18.tgz",
-      "integrity": "sha512-L4jVKS82XVhw2nvzLg/19ClLWg0y27ulRwuP7lcyL6AbUWB5aPglXY3M21mauDQMDfRLs8cQmeT03r/+X3cZYQ==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/@esbuild/linux-mips64el": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz",
@@ -2385,6 +2550,11 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fontsource/roboto": {
+      "version": "5.0.15",
+      "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.0.15.tgz",
+      "integrity": "sha512-352XiID9jfwmYaHpdmS3ocGJi3PA+vOm4HzJIRfSyPEyLP6dZN8iiEKUbdAfB5YXQO3YxO2KZpR+R28q2zMiYw=="
+    },
     "node_modules/@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -3211,7 +3381,6 @@
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
       "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -3225,7 +3394,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -3234,7 +3402,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
       "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -3252,14 +3419,12 @@
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
-      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
-      "dev": true
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
       "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -3788,48 +3953,243 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
       "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ=="
     },
-    "node_modules/@nicolo-ribaudo/chokidar-2": {
-      "version": "2.1.8-no-fsevents.3",
-      "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz",
-      "integrity": "sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==",
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
-      "dependencies": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
-      },
-      "engines": {
-        "node": ">= 8"
+    "node_modules/@mui/core-downloads-tracker": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.0.2.tgz",
+      "integrity": "sha512-Cg68oOlAfbJgMgvbCwcX3Y3HdygCl6X1nREYTdEWcEKUQhNarrC45Cc35mP+zA7p3ZXE/7FLiaTCCgwuSoef/Q==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
       }
     },
-    "node_modules/@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
+    "node_modules/@mui/material": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.0.2.tgz",
+      "integrity": "sha512-KrnkJFSyhsAh8V30DNUbWyRyxMi4ZHjFg1ikQGx+mUAIffFTYIEx9Q+Kxd3vCT0FUFGOmbsuh6F6yRhpybsjkg==",
+      "dependencies": {
+        "@babel/runtime": "^7.25.0",
+        "@mui/core-downloads-tracker": "^6.0.2",
+        "@mui/system": "^6.0.2",
+        "@mui/types": "^7.2.16",
+        "@mui/utils": "^6.0.2",
+        "@popperjs/core": "^2.11.8",
+        "@types/react-transition-group": "^4.4.11",
+        "clsx": "^2.1.1",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.3.1",
+        "react-transition-group": "^4.4.5"
+      },
       "engines": {
-        "node": ">= 8"
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@mui/material-pigment-css": "^6.0.2",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@mui/material-pigment-css": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@nodelib/fs.walk": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
+    "node_modules/@mui/private-theming": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.0.2.tgz",
+      "integrity": "sha512-emddFcRhA0hPGVIwIbW5g0V8vtCgw2g/H/A7jTdGe7dpCWEPpp6jPIXRRKcEUWgmg91R6rBNfV+LFHxBxmZXOQ==",
       "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
+        "@babel/runtime": "^7.25.0",
+        "@mui/utils": "^6.0.2",
+        "prop-types": "^15.8.1"
       },
       "engines": {
-        "node": ">= 8"
-      }
-    },
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styled-engine": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.0.2.tgz",
+      "integrity": "sha512-qd3Vlhted0SYVGotnCfVNcxff7vW2WN0fclbAexff60NeNS1qs/H/CImHEHUBiUGeNWMPRochbN6VF1arQ7/jA==",
+      "dependencies": {
+        "@babel/runtime": "^7.25.0",
+        "@emotion/cache": "^11.13.1",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.0.2.tgz",
+      "integrity": "sha512-AZv1/C4PuHgWFTA8YraIzl3FTVLdRz0RIMRwEADWZBdIhnuTHS/4+r8qE9+3CcpTHg1WsEu8btaO3AhQahSM9A==",
+      "dependencies": {
+        "@babel/runtime": "^7.25.0",
+        "@mui/private-theming": "^6.0.2",
+        "@mui/styled-engine": "^6.0.2",
+        "@mui/types": "^7.2.16",
+        "@mui/utils": "^6.0.2",
+        "clsx": "^2.1.1",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/types": {
+      "version": "7.2.16",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.16.tgz",
+      "integrity": "sha512-qI8TV3M7ShITEEc8Ih15A2vLzZGLhD+/UPNwck/hcls2gwg7dyRjNGXcQYHKLB5Q7PuTRfrTkAoPa2VV1s67Ag==",
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.0.2.tgz",
+      "integrity": "sha512-TeFrYsxcmeoDSlkoPhX+LjIuuqC5Pyj+xz2kRceKCkUpwMNTEeVOfowXDPe+mboZwmpJ5ZxP4eiAgQMdeEasjg==",
+      "dependencies": {
+        "@babel/runtime": "^7.25.0",
+        "@mui/types": "^7.2.16",
+        "@types/prop-types": "^15.7.12",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@nicolo-ribaudo/chokidar-2": {
+      "version": "2.1.8-no-fsevents.3",
+      "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz",
+      "integrity": "sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==",
+      "dev": true,
+      "optional": true
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/@npmcli/fs": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-2.1.2.tgz",
@@ -4731,6 +5091,15 @@
         "node": ">=14"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@puppeteer/browsers": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-1.7.1.tgz",
@@ -4934,26 +5303,6 @@
         }
       }
     },
-    "node_modules/@rollup/plugin-terser": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-terser/-/plugin-terser-0.1.0.tgz",
-      "integrity": "sha512-N2KK+qUfHX2hBzVzM41UWGLrEmcjVC37spC8R3c9mt3oEDFKh3N2e12/lLp9aVSt86veR0TQiCNQXrm8C6aiUQ==",
-      "dev": true,
-      "dependencies": {
-        "terser": "^5.15.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "rollup": "^2.x || ^3.x"
-      },
-      "peerDependenciesMeta": {
-        "rollup": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@rollup/pluginutils": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
@@ -5840,12 +6189,48 @@
       "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==",
       "dev": true
     },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.12",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
+      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
+    },
     "node_modules/@types/qrcode-svg": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@types/qrcode-svg/-/qrcode-svg-1.1.4.tgz",
       "integrity": "sha512-gh+atEBHXpU5iO72Tg4q03YdGKoY0zH1Yr4mGl+NSzFpyPuJcgurs8F3aRpH0Gs93GFuB1rDoQj6U4Xshn72PA==",
       "dev": true
     },
+    "node_modules/@types/react": {
+      "version": "18.3.5",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.5.tgz",
+      "integrity": "sha512-WeqMfGJLGuLCqHGYRGHxnKrXcTitc6L/nBUWfWPcTarG3t9PsquqUMuVeXZeca+mglY4Vo5GZjCi0A3Or2lnxA==",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
+      "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.11",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
+      "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.20.2",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@@ -6155,6 +6540,25 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.1.tgz",
+      "integrity": "sha512-m/V2syj5CuVnaxcUJOQRel/Wr31FFXRFlnOoq1TVtkCxsY5veGMTEmpWHndrhB2U8ScHtCQB1e+4hWYExQc6Lg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.24.5",
+        "@babel/plugin-transform-react-jsx-self": "^7.24.5",
+        "@babel/plugin-transform-react-jsx-source": "^7.24.1",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.14.2"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0"
+      }
+    },
     "node_modules/@walletconnect/core": {
       "version": "2.14.0",
       "resolved": "https://registry.npmjs.org/@walletconnect/core/-/core-2.14.0.tgz",
@@ -6858,7 +7262,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^1.9.0"
       },
@@ -7227,32 +7630,33 @@
       "integrity": "sha512-5Tk1HLk6b6ctmjIkAcU/Ujv/1WqiDl0F0JdRCR80VsOcUlHcu7pWeWRlOqQLHfDEsVx9YH/aif5AG4ehoCtTmg==",
       "dev": true
     },
-    "node_modules/babel-plugin-jsx-dom-expressions": {
-      "version": "0.37.23",
-      "resolved": "https://registry.npmjs.org/babel-plugin-jsx-dom-expressions/-/babel-plugin-jsx-dom-expressions-0.37.23.tgz",
-      "integrity": "sha512-Y/r8LyLi/njnwPTaDuPEReWk30FJ1KplloYvcFUhHmiH1F7yVVj5mWojD7mbO/IruKyvOs9OIPUoeMi3Z++J4w==",
-      "dev": true,
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
       "dependencies": {
-        "@babel/helper-module-imports": "7.18.6",
-        "@babel/plugin-syntax-jsx": "^7.18.6",
-        "@babel/types": "^7.20.7",
-        "html-entities": "2.3.3",
-        "validate-html-nesting": "^1.2.1"
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
       },
-      "peerDependencies": {
-        "@babel/core": "^7.20.12"
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
       }
     },
-    "node_modules/babel-plugin-jsx-dom-expressions/node_modules/@babel/helper-module-imports": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz",
-      "integrity": "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==",
-      "dev": true,
+    "node_modules/babel-plugin-macros/node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
       "dependencies": {
-        "@babel/types": "^7.18.6"
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=10"
       }
     },
     "node_modules/babel-plugin-polyfill-corejs2": {
@@ -7294,18 +7698,6 @@
         "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
       }
     },
-    "node_modules/babel-preset-solid": {
-      "version": "1.8.18",
-      "resolved": "https://registry.npmjs.org/babel-preset-solid/-/babel-preset-solid-1.8.18.tgz",
-      "integrity": "sha512-ky0FA4cCS9dk+xYBBItHoxtbRnaDIOGpmHLFqKPaR81hpMbJBOiLOZia2hT0JBwx4zn/D2OjMRvRr6kqtRMoUw==",
-      "dev": true,
-      "dependencies": {
-        "babel-plugin-jsx-dom-expressions": "^0.37.23"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -7970,7 +8362,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -8081,7 +8472,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -8489,6 +8879,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/cmd-shim": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/cmd-shim/-/cmd-shim-6.0.1.tgz",
@@ -8502,7 +8900,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "dependencies": {
         "color-name": "1.1.3"
       }
@@ -8510,8 +8907,7 @@
     "node_modules/color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-      "dev": true
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
     "node_modules/color-support": {
       "version": "1.1.3",
@@ -9278,7 +9674,6 @@
       "version": "4.3.5",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
       "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==",
-      "dev": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -9631,6 +10026,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -9951,7 +10355,6 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "dev": true,
       "dependencies": {
         "is-arrayish": "^0.2.1"
       }
@@ -10023,441 +10426,84 @@
       "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.2.4"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-errors": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
-      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-module-lexer": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.5.4.tgz",
-      "integrity": "sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==",
-      "dev": true
-    },
-    "node_modules/es-object-atoms": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz",
-      "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==",
-      "dev": true,
-      "dependencies": {
-        "es-errors": "^1.3.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-set-tostringtag": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz",
-      "integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==",
-      "dev": true,
-      "dependencies": {
-        "get-intrinsic": "^1.2.4",
-        "has-tostringtag": "^1.0.2",
-        "hasown": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-shim-unscopables": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz",
-      "integrity": "sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==",
-      "dev": true,
-      "dependencies": {
-        "hasown": "^2.0.0"
-      }
-    },
-    "node_modules/es-to-primitive": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
-      "dev": true,
-      "dependencies": {
-        "is-callable": "^1.1.4",
-        "is-date-object": "^1.0.1",
-        "is-symbol": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/es6-error": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz",
-      "integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==",
-      "dev": true
-    },
-    "node_modules/esbuild": {
-      "version": "0.15.18",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.15.18.tgz",
-      "integrity": "sha512-x/R72SmW3sSFRm5zrrIjAhCeQSAWoni3CmHEqfQrZIQTM3lVCdehdwuIqaOtfC2slvpdlLa62GYoN8SxT23m6Q==",
-      "dev": true,
-      "hasInstallScript": true,
-      "bin": {
-        "esbuild": "bin/esbuild"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "optionalDependencies": {
-        "@esbuild/android-arm": "0.15.18",
-        "@esbuild/linux-loong64": "0.15.18",
-        "esbuild-android-64": "0.15.18",
-        "esbuild-android-arm64": "0.15.18",
-        "esbuild-darwin-64": "0.15.18",
-        "esbuild-darwin-arm64": "0.15.18",
-        "esbuild-freebsd-64": "0.15.18",
-        "esbuild-freebsd-arm64": "0.15.18",
-        "esbuild-linux-32": "0.15.18",
-        "esbuild-linux-64": "0.15.18",
-        "esbuild-linux-arm": "0.15.18",
-        "esbuild-linux-arm64": "0.15.18",
-        "esbuild-linux-mips64le": "0.15.18",
-        "esbuild-linux-ppc64le": "0.15.18",
-        "esbuild-linux-riscv64": "0.15.18",
-        "esbuild-linux-s390x": "0.15.18",
-        "esbuild-netbsd-64": "0.15.18",
-        "esbuild-openbsd-64": "0.15.18",
-        "esbuild-sunos-64": "0.15.18",
-        "esbuild-windows-32": "0.15.18",
-        "esbuild-windows-64": "0.15.18",
-        "esbuild-windows-arm64": "0.15.18"
-      }
-    },
-    "node_modules/esbuild-android-64": {
-      "version": "0.15.18",
-      "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.15.18.tgz",
-      "integrity": "sha512-wnpt3OXRhcjfIDSZu9bnzT4/TNTDsOUvip0foZOUBG7QbSt//w3QV4FInVJxNhKc/ErhUxc5z4QjHtMi7/TbgA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild-android-arm64": {
-      "version": "0.15.18",
-      "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.15.18.tgz",
-      "integrity": "sha512-G4xu89B8FCzav9XU8EjsXacCKSG2FT7wW9J6hOc18soEHJdtWu03L3TQDGf0geNxfLTtxENKBzMSq9LlbjS8OQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild-darwin-64": {
-      "version": "0.15.18",
-      "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.15.18.tgz",
-      "integrity": "sha512-2WAvs95uPnVJPuYKP0Eqx+Dl/jaYseZEUUT1sjg97TJa4oBtbAKnPnl3b5M9l51/nbx7+QAEtuummJZW0sBEmg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild-darwin-arm64": {
-      "version": "0.15.18",
-      "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.18.tgz",
-      "integrity": "sha512-tKPSxcTJ5OmNb1btVikATJ8NftlyNlc8BVNtyT/UAr62JFOhwHlnoPrhYWz09akBLHI9nElFVfWSTSRsrZiDUA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild-freebsd-64": {
-      "version": "0.15.18",
-      "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.18.tgz",
-      "integrity": "sha512-TT3uBUxkteAjR1QbsmvSsjpKjOX6UkCstr8nMr+q7zi3NuZ1oIpa8U41Y8I8dJH2fJgdC3Dj3CXO5biLQpfdZA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild-freebsd-arm64": {
-      "version": "0.15.18",
-      "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.18.tgz",
-      "integrity": "sha512-R/oVr+X3Tkh+S0+tL41wRMbdWtpWB8hEAMsOXDumSSa6qJR89U0S/PpLXrGF7Wk/JykfpWNokERUpCeHDl47wA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild-linux-32": {
-      "version": "0.15.18",
-      "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.15.18.tgz",
-      "integrity": "sha512-lphF3HiCSYtaa9p1DtXndiQEeQDKPl9eN/XNoBf2amEghugNuqXNZA/ZovthNE2aa4EN43WroO0B85xVSjYkbg==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild-linux-64": {
-      "version": "0.15.18",
-      "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.15.18.tgz",
-      "integrity": "sha512-hNSeP97IviD7oxLKFuii5sDPJ+QHeiFTFLoLm7NZQligur8poNOWGIgpQ7Qf8Balb69hptMZzyOBIPtY09GZYw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild-linux-arm": {
-      "version": "0.15.18",
-      "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.15.18.tgz",
-      "integrity": "sha512-UH779gstRblS4aoS2qpMl3wjg7U0j+ygu3GjIeTonCcN79ZvpPee12Qun3vcdxX+37O5LFxz39XeW2I9bybMVA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild-linux-arm64": {
-      "version": "0.15.18",
-      "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.18.tgz",
-      "integrity": "sha512-54qr8kg/6ilcxd+0V3h9rjT4qmjc0CccMVWrjOEM/pEcUzt8X62HfBSeZfT2ECpM7104mk4yfQXkosY8Quptug==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild-linux-mips64le": {
-      "version": "0.15.18",
-      "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.18.tgz",
-      "integrity": "sha512-Mk6Ppwzzz3YbMl/ZZL2P0q1tnYqh/trYZ1VfNP47C31yT0K8t9s7Z077QrDA/guU60tGNp2GOwCQnp+DYv7bxQ==",
-      "cpu": [
-        "mips64el"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild-linux-ppc64le": {
-      "version": "0.15.18",
-      "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.18.tgz",
-      "integrity": "sha512-b0XkN4pL9WUulPTa/VKHx2wLCgvIAbgwABGnKMY19WhKZPT+8BxhZdqz6EgkqCLld7X5qiCY2F/bfpUUlnFZ9w==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild-linux-riscv64": {
-      "version": "0.15.18",
-      "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.18.tgz",
-      "integrity": "sha512-ba2COaoF5wL6VLZWn04k+ACZjZ6NYniMSQStodFKH/Pu6RxzQqzsmjR1t9QC89VYJxBeyVPTaHuBMCejl3O/xg==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild-linux-s390x": {
-      "version": "0.15.18",
-      "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.18.tgz",
-      "integrity": "sha512-VbpGuXEl5FCs1wDVp93O8UIzl3ZrglgnSQ+Hu79g7hZu6te6/YHgVJxCM2SqfIila0J3k0csfnf8VD2W7u2kzQ==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild-netbsd-64": {
-      "version": "0.15.18",
-      "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.18.tgz",
-      "integrity": "sha512-98ukeCdvdX7wr1vUYQzKo4kQ0N2p27H7I11maINv73fVEXt2kyh4K4m9f35U1K43Xc2QGXlzAw0K9yoU7JUjOg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild-openbsd-64": {
-      "version": "0.15.18",
-      "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.18.tgz",
-      "integrity": "sha512-yK5NCcH31Uae076AyQAXeJzt/vxIo9+omZRKj1pauhk3ITuADzuOx5N2fdHrAKPxN+zH3w96uFKlY7yIn490xQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
+      },
       "engines": {
-        "node": ">=12"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/esbuild-sunos-64": {
-      "version": "0.15.18",
-      "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.15.18.tgz",
-      "integrity": "sha512-On22LLFlBeLNj/YF3FT+cXcyKPEI263nflYlAhz5crxtp3yRG1Ugfr7ITyxmCmjm4vbN/dGrb/B7w7U8yJR9yw==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
       "dev": true,
-      "optional": true,
-      "os": [
-        "sunos"
-      ],
       "engines": {
-        "node": ">=12"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/esbuild-windows-32": {
-      "version": "0.15.18",
-      "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.15.18.tgz",
-      "integrity": "sha512-o+eyLu2MjVny/nt+E0uPnBxYuJHBvho8vWsC2lV61A7wwTWC3jkN2w36jtA+yv1UgYkHRihPuQsL23hsCYGcOQ==",
-      "cpu": [
-        "ia32"
-      ],
+    "node_modules/es-module-lexer": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.5.4.tgz",
+      "integrity": "sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==",
+      "dev": true
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz",
+      "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==",
       "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
       "engines": {
-        "node": ">=12"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/esbuild-windows-64": {
-      "version": "0.15.18",
-      "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.15.18.tgz",
-      "integrity": "sha512-qinug1iTTaIIrCorAUjR0fcBk24fjzEedFYhhispP8Oc7SFvs+XeW3YpAKiKp8dRpizl4YYAhxMjlftAMJiaUw==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/es-set-tostringtag": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz",
+      "integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==",
       "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
+      "dependencies": {
+        "get-intrinsic": "^1.2.4",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.1"
+      },
       "engines": {
-        "node": ">=12"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/esbuild-windows-arm64": {
-      "version": "0.15.18",
-      "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.18.tgz",
-      "integrity": "sha512-q9bsYzegpZcLziq0zgUi5KqGVtfhjxGbnksaBFYmWLxeV/S1fK4OLdq2DFYnXcLMjlZw2L0jLsk1eGoB522WXQ==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/es-shim-unscopables": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz",
+      "integrity": "sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==",
       "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
+      "dependencies": {
+        "hasown": "^2.0.0"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "dev": true,
+      "dependencies": {
+        "is-callable": "^1.1.4",
+        "is-date-object": "^1.0.1",
+        "is-symbol": "^1.0.2"
+      },
       "engines": {
-        "node": ">=12"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/es6-error": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz",
+      "integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==",
+      "dev": true
+    },
     "node_modules/escalade": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
@@ -10471,7 +10517,6 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "dev": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -11258,6 +11303,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -11444,7 +11494,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -11791,7 +11840,6 @@
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -11967,7 +12015,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -12080,7 +12127,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -12113,6 +12159,19 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/hosted-git-info": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
@@ -12155,12 +12214,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/html-entities": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.3.tgz",
-      "integrity": "sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==",
-      "dev": true
-    },
     "node_modules/html-escaper": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
@@ -12369,7 +12422,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
       "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-      "dev": true,
       "dependencies": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -12744,8 +12796,7 @@
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
-      "dev": true
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
     },
     "node_modules/is-bigint": {
       "version": "1.0.4",
@@ -12864,7 +12915,6 @@
       "version": "2.14.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.14.0.tgz",
       "integrity": "sha512-a5dFJih5ZLYlRtDc0dZWP7RiKr6xIKzmn/oAYCDvdLThadVgyJwlaoQPmRtMSpz+rk0OGAgIu+TcM9HUF0fk1A==",
-      "dev": true,
       "dependencies": {
         "hasown": "^2.0.2"
       },
@@ -13242,18 +13292,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-what": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz",
-      "integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==",
-      "dev": true,
-      "engines": {
-        "node": ">=12.13"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/mesqueeb"
-      }
-    },
     "node_modules/is-windows": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
@@ -14128,7 +14166,6 @@
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
       "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-      "dev": true,
       "bin": {
         "jsesc": "bin/jsesc"
       },
@@ -14151,8 +14188,7 @@
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
     },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
@@ -15116,7 +15152,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "peer": true,
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       },
@@ -15436,21 +15471,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/merge-anything": {
-      "version": "5.1.7",
-      "resolved": "https://registry.npmjs.org/merge-anything/-/merge-anything-5.1.7.tgz",
-      "integrity": "sha512-eRtbOb1N5iyH0tkQDAoQ4Ipsp/5qSR79Dzrz8hEPxRX10RWWR/iQXdoKmBSRCThY1Fh5EhISDtpSc93fpxUniQ==",
-      "dev": true,
-      "dependencies": {
-        "is-what": "^4.1.8"
-      },
-      "engines": {
-        "node": ">=12.13"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/mesqueeb"
-      }
-    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -16014,8 +16034,7 @@
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "node_modules/multiformats": {
       "version": "9.9.0",
@@ -17364,6 +17383,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
@@ -18223,7 +18250,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
       "dependencies": {
         "callsites": "^3.0.0"
       },
@@ -18289,7 +18315,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
       "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.0.0",
         "error-ex": "^1.3.1",
@@ -18306,8 +18331,7 @@
     "node_modules/parse-json/node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "node_modules/parse-path": {
       "version": "7.0.0",
@@ -18383,8 +18407,7 @@
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "node_modules/path-platform": {
       "version": "0.11.15",
@@ -18436,7 +18459,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -18502,8 +18524,7 @@
     "node_modules/picocolors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
-      "dev": true
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -19635,6 +19656,21 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/protocols": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/protocols/-/protocols-2.0.1.tgz",
@@ -20116,7 +20152,6 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -20124,11 +20159,46 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
     "node_modules/react-is": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "dev": true
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
+    },
+    "node_modules/react-refresh": {
+      "version": "0.14.2",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
+      "integrity": "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
     },
     "node_modules/read": {
       "version": "2.1.0",
@@ -20752,7 +20822,6 @@
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "dev": true,
       "dependencies": {
         "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
@@ -20790,7 +20859,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -21082,39 +21150,6 @@
       "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
       "dev": true
     },
-    "node_modules/rollup-preset-solid": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/rollup-preset-solid/-/rollup-preset-solid-2.0.1.tgz",
-      "integrity": "sha512-CPJn3SqADlIxhAW3jwZuAFRyZcz7HPeUAz4f+6BzulxHnK4v6tgoTbMvk8vEsfsvHwiTmX93KHIKdf79aTdVSA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/core": "^7.20.2",
-        "@babel/preset-env": "^7.20.2",
-        "@babel/preset-typescript": "^7.18.6",
-        "@rollup/plugin-babel": "^6.0.3",
-        "@rollup/plugin-node-resolve": "^15.0.1",
-        "@rollup/plugin-terser": "^0.1.0",
-        "babel-preset-solid": "^1.6.2",
-        "colorette": "^2.0.19",
-        "esbuild": "^0.15.16",
-        "merge-anything": "^5.1.3",
-        "rollup": "^3.5.0",
-        "typescript": "^4.9.3"
-      }
-    },
-    "node_modules/rollup-preset-solid/node_modules/typescript": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
-      "dev": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=4.2.0"
-      }
-    },
     "node_modules/rrweb-cssom": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz",
@@ -21266,6 +21301,14 @@
         "node": ">=v12.22.7"
       }
     },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
     "node_modules/schema-utils": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
@@ -21302,25 +21345,6 @@
         "randombytes": "^2.1.0"
       }
     },
-    "node_modules/seroval": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/seroval/-/seroval-1.0.7.tgz",
-      "integrity": "sha512-n6ZMQX5q0Vn19Zq7CIKNIo7E75gPkGCFUEqDpa8jgwpYr/vScjqnQ6H09t1uIiZ0ZSK0ypEGvrYK2bhBGWsGdw==",
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/seroval-plugins": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/seroval-plugins/-/seroval-plugins-1.0.7.tgz",
-      "integrity": "sha512-GO7TkWvodGp6buMEX9p7tNyIkbwlyuAWbI6G9Ec5bhcm7mQdu3JOK1IXbEUwb3FVzSc363GraG/wLW23NSavIw==",
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "seroval": "^1.0"
-      }
-    },
     "node_modules/set-blocking": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
@@ -21835,6 +21859,12 @@
         "npm": ">= 3.0.0"
       }
     },
+    "node_modules/smob": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/smob/-/smob-1.5.0.tgz",
+      "integrity": "sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==",
+      "dev": true
+    },
     "node_modules/socks": {
       "version": "2.8.3",
       "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.3.tgz",
@@ -21863,30 +21893,6 @@
         "node": ">= 10"
       }
     },
-    "node_modules/solid-js": {
-      "version": "1.8.18",
-      "resolved": "https://registry.npmjs.org/solid-js/-/solid-js-1.8.18.tgz",
-      "integrity": "sha512-cpkxDPvO/AuKBugVv6xKFd1C9VC0XZMu4VtF56IlHoux8HgyW44uqNSWbozMnVcpIzHIhS3vVXPAVZYM26jpWw==",
-      "dependencies": {
-        "csstype": "^3.1.0",
-        "seroval": "^1.0.4",
-        "seroval-plugins": "^1.0.3"
-      }
-    },
-    "node_modules/solid-refresh": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/solid-refresh/-/solid-refresh-0.6.3.tgz",
-      "integrity": "sha512-F3aPsX6hVw9ttm5LYlth8Q15x6MlI/J3Dn+o3EQyRTtTxidepSTwAYdozt01/YA+7ObcciagGEyXIopGZzQtbA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/generator": "^7.23.6",
-        "@babel/helper-module-imports": "^7.22.15",
-        "@babel/types": "^7.23.6"
-      },
-      "peerDependencies": {
-        "solid-js": "^1.3"
-      }
-    },
     "node_modules/sonar-scanner": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/sonar-scanner/-/sonar-scanner-3.1.0.tgz",
@@ -21921,7 +21927,6 @@
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
       "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -22489,6 +22494,11 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
     "node_modules/subarg": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/subarg/-/subarg-1.0.0.tgz",
@@ -22502,7 +22512,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -22514,7 +22523,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -22837,7 +22845,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
       "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -24071,12 +24078,6 @@
       "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
       "dev": true
     },
-    "node_modules/validate-html-nesting": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/validate-html-nesting/-/validate-html-nesting-1.2.2.tgz",
-      "integrity": "sha512-hGdgQozCsQJMyfK5urgFcWEqsSSrK63Awe0t/IMR0bZ0QMtnuaiHzThW81guu3qx9abLi99NEuiaN6P9gVYsNg==",
-      "dev": true
-    },
     "node_modules/validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -24174,30 +24175,6 @@
         }
       }
     },
-    "node_modules/vite-plugin-solid": {
-      "version": "2.10.2",
-      "resolved": "https://registry.npmjs.org/vite-plugin-solid/-/vite-plugin-solid-2.10.2.tgz",
-      "integrity": "sha512-AOEtwMe2baBSXMXdo+BUwECC8IFHcKS6WQV/1NEd+Q7vHPap5fmIhLcAzr+DUJ04/KHx/1UBU0l1/GWP+rMAPQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/core": "^7.23.3",
-        "@types/babel__core": "^7.20.4",
-        "babel-preset-solid": "^1.8.4",
-        "merge-anything": "^5.1.7",
-        "solid-refresh": "^0.6.3",
-        "vitefu": "^0.2.5"
-      },
-      "peerDependencies": {
-        "@testing-library/jest-dom": "^5.16.6 || ^5.17.0 || ^6.*",
-        "solid-js": "^1.7.2",
-        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@testing-library/jest-dom": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/vite/node_modules/@esbuild/android-arm": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
@@ -24267,20 +24244,6 @@
         "@esbuild/win32-x64": "0.18.20"
       }
     },
-    "node_modules/vitefu": {
-      "version": "0.2.5",
-      "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.5.tgz",
-      "integrity": "sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==",
-      "dev": true,
-      "peerDependencies": {
-        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
-      },
-      "peerDependenciesMeta": {
-        "vite": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -24911,7 +24874,6 @@
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
       "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -25203,24 +25165,65 @@
         "@airgap/beacon-transport-postmessage": "4.3.0",
         "@airgap/beacon-types": "4.3.0",
         "@airgap/beacon-utils": "4.3.0",
+        "@emotion/react": "^11.13.3",
+        "@emotion/styled": "^11.13.0",
+        "@fontsource/roboto": "^5.0.15",
+        "@mui/material": "^6.0.2",
         "@walletconnect/utils": "2.14.0",
         "qrcode-svg": "^1.1.0",
-        "solid-js": "^1.7.11"
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
       },
       "devDependencies": {
+        "@babel/preset-react": "^7.24.6",
+        "@rollup/plugin-babel": "^6.0.4",
         "@rollup/plugin-commonjs": "^25.0.4",
         "@rollup/plugin-image": "^3.0.2",
+        "@rollup/plugin-node-resolve": "^15.2.3",
+        "@rollup/plugin-terser": "^0.4.4",
         "@types/node": "^20.6.0",
         "@types/qrcode-svg": "^1.1.2",
+        "@types/react": "^18.2.28",
+        "@types/react-dom": "^18.2.13",
+        "@vitejs/plugin-react": "^4.1.0",
         "rollup": "^3.29.1",
         "rollup-plugin-import-css": "^3.3.3",
         "rollup-plugin-postcss": "^4.0.2",
         "rollup-plugin-svg": "^2.0.0",
         "rollup-plugin-typescript2": "^0.35.0",
-        "rollup-preset-solid": "^2.0.1",
         "typescript": "^5.2.2",
-        "vite": "^4.4.9",
-        "vite-plugin-solid": "^2.7.0"
+        "vite": "^4.4.9"
+      }
+    },
+    "packages/beacon-ui/node_modules/@rollup/plugin-terser": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-terser/-/plugin-terser-0.4.4.tgz",
+      "integrity": "sha512-XHeJC5Bgvs8LfukDwWZp7yeqin6ns8RTl2B9avbejt6tZqsqvVoWI7ZTQrcNsfKEDWBTnTxM8nMDkO2IFFbd0A==",
+      "dev": true,
+      "dependencies": {
+        "serialize-javascript": "^6.0.1",
+        "smob": "^1.0.0",
+        "terser": "^5.17.4"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "packages/beacon-ui/node_modules/serialize-javascript": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
+      "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
+      "dev": true,
+      "dependencies": {
+        "randombytes": "^2.1.0"
       }
     },
     "packages/beacon-utils": {
diff --git a/packages/beacon-dapp/src/dapp-client/DAppClient.ts b/packages/beacon-dapp/src/dapp-client/DAppClient.ts
index 5028b77b1..0ad73ccff 100644
--- a/packages/beacon-dapp/src/dapp-client/DAppClient.ts
+++ b/packages/beacon-dapp/src/dapp-client/DAppClient.ts
@@ -784,14 +784,20 @@ export class DAppClient extends Client {
               console.error(error)
             })
 
+          await p2pTransport.connect()
+
+          const serializer = new Serializer()
+          const p2pPeerInfo = await serializer.serialize(await p2pTransport.getPairingRequestInfo())
+          const walletConnectPeerInfo = (await walletConnectTransport.getPairingRequestInfo()).uri
+          const postmessagePeerInfo = await serializer.serialize(
+            await postMessageTransport.getPairingRequestInfo()
+          )
+
           this.events
             .emit(BeaconEvent.PAIR_INIT, {
-              p2pPeerInfo: () => {
-                p2pTransport.connect().then().catch(console.error)
-                return p2pTransport.getPairingRequestInfo()
-              },
-              postmessagePeerInfo: () => postMessageTransport.getPairingRequestInfo(),
-              walletConnectPeerInfo: () => walletConnectTransport.getPairingRequestInfo(),
+              p2pPeerInfo,
+              postmessagePeerInfo,
+              walletConnectPeerInfo,
               networkType: this.network.type,
               abortedHandler: async () => {
                 logger.log('init', 'ABORTED')
diff --git a/packages/beacon-dapp/src/events.ts b/packages/beacon-dapp/src/events.ts
index 295ced685..3a305d474 100644
--- a/packages/beacon-dapp/src/events.ts
+++ b/packages/beacon-dapp/src/events.ts
@@ -11,9 +11,7 @@ import {
 import {
   BeaconErrorType,
   ExtendedPostMessagePairingResponse,
-  PostMessagePairingRequest,
   ExtendedP2PPairingResponse,
-  P2PPairingRequest,
   AccountInfo,
   ErrorResponse,
   PermissionResponseOutput,
@@ -26,7 +24,6 @@ import {
   AcknowledgeResponse,
   WalletInfo,
   ExtendedWalletConnectPairingResponse,
-  WalletConnectPairingRequest,
   AnalyticsInterface,
   ProofOfEventChallengeResponseOutput,
   SimulatedProofOfEventChallengeResponseOutput
@@ -199,9 +196,9 @@ export interface BeaconEventType {
   [BeaconEvent.SHOW_PREPARE]: { walletInfo?: WalletInfo }
   [BeaconEvent.HIDE_UI]: ('alert' | 'toast')[] | undefined
   [BeaconEvent.PAIR_INIT]: {
-    p2pPeerInfo: () => Promise<P2PPairingRequest>
-    postmessagePeerInfo: () => Promise<PostMessagePairingRequest>
-    walletConnectPeerInfo: () => Promise<WalletConnectPairingRequest>
+    p2pPeerInfo: string
+    postmessagePeerInfo: string
+    walletConnectPeerInfo: string
     networkType: NetworkType
     abortedHandler?(): void
     disclaimerText?: string
@@ -290,16 +287,17 @@ const showPrepare = async (data: { walletInfo?: WalletInfo }): Promise<void> =>
 }
 
 const hideUI = async (elements?: ('alert' | 'toast')[]): Promise<void> => {
-  if (elements) {
-    if (elements.includes('alert')) {
-      await closeAlerts()
-    }
-    if (elements.includes('toast')) {
-      await closeToast()
-    }
-  } else {
-    await closeToast()
-  }
+  // if (elements) {
+  //   if (elements.includes('alert')) {
+  //     await closeAlerts()
+  //   }
+  //   if (elements.includes('toast')) {
+  //     await closeToast()
+  //   }
+  // } else {
+  //   await closeToast()
+  // }
+  console.log('todo', elements)
 }
 
 /**
@@ -411,7 +409,7 @@ const showRateLimitReached = async (): Promise<void> => {
     body: 'Rate limit reached. Please slow down',
     buttons: [{ text: 'Done', style: 'outline' }],
     timer: 3000
-  }).catch((toastError) => console.error(toastError))
+  })
 }
 
 /**
diff --git a/packages/beacon-ui/package.json b/packages/beacon-ui/package.json
index a55fab032..ef1edaf67 100644
--- a/packages/beacon-ui/package.json
+++ b/packages/beacon-ui/package.json
@@ -38,23 +38,33 @@
     "@airgap/beacon-transport-postmessage": "4.3.0",
     "@airgap/beacon-types": "4.3.0",
     "@airgap/beacon-utils": "4.3.0",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@fontsource/roboto": "^5.0.15",
+    "@mui/material": "^6.0.2",
     "@walletconnect/utils": "2.14.0",
     "qrcode-svg": "^1.1.0",
-    "solid-js": "^1.7.11"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@babel/preset-react": "^7.24.6",
+    "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-image": "^3.0.2",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
     "@types/node": "^20.6.0",
     "@types/qrcode-svg": "^1.1.2",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@vitejs/plugin-react": "^4.1.0",
     "rollup": "^3.29.1",
     "rollup-plugin-import-css": "^3.3.3",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-typescript2": "^0.35.0",
-    "rollup-preset-solid": "^2.0.1",
     "typescript": "^5.2.2",
-    "vite": "^4.4.9",
-    "vite-plugin-solid": "^2.7.0"
+    "vite": "^4.4.9"
   }
 }
diff --git a/packages/beacon-ui/rollup.config.mjs b/packages/beacon-ui/rollup.config.mjs
index 8e177460b..75ac3bdc6 100644
--- a/packages/beacon-ui/rollup.config.mjs
+++ b/packages/beacon-ui/rollup.config.mjs
@@ -1,26 +1,76 @@
 import postcss from 'rollup-plugin-postcss'
-import css from "rollup-plugin-import-css";
+import css from 'rollup-plugin-import-css'
 import typescript from 'rollup-plugin-typescript2'
-import withSolid from 'rollup-preset-solid'
+import babel from '@rollup/plugin-babel'
+import terser from '@rollup/plugin-terser'
+import commonjs from '@rollup/plugin-commonjs'
+import resolve from '@rollup/plugin-node-resolve'
 
-export default withSolid([
+const extensions = ['.js', '.jsx', '.ts', '.tsx']
+
+export default [
   {
     input: 'src/index.ts',
-    output: '.',
-    plugins: [css(), typescript()]
+    output: {
+      file: 'dist/bundle.js',
+      format: 'iife',
+      name: 'MyApp',
+      sourcemap: true
+    },
+    plugins: [
+      resolve({ extensions }),
+      commonjs(),
+      // postcss({
+      //   extract: true,
+      //   minimize: true,
+      //   sourceMap: true,
+      // }),
+      css(),
+      typescript({
+        tsconfig: 'tsconfig.json'
+      }),
+      babel({
+        extensions,
+        babelHelpers: 'bundled',
+        include: ['src/**/*'],
+        presets: [['@babel/preset-react', { runtime: 'automatic' }]]
+      }),
+      // terser()
+    ]
   },
   {
     input: 'src/index.ts',
     output: [
       {
         file: 'dist/cjs/index.js',
-        format: 'cjs'
+        format: 'cjs',
+        sourcemap: true
       },
       {
         file: 'dist/esm/index.js',
-        format: 'esm'
+        format: 'esm',
+        sourcemap: true
       }
     ],
-    plugins: [css(), typescript()]
+    plugins: [
+      resolve({ extensions }),
+      commonjs(),
+      // postcss({
+      //   extract: true,
+      //   minimize: true,
+      //   sourceMap: true,
+      // }),
+      css(),
+      typescript({
+        tsconfig: 'tsconfig.json'
+      }),
+      babel({
+        extensions,
+        babelHelpers: 'bundled',
+        include: ['src/**/*'],
+        presets: [['@babel/preset-react', { runtime: 'automatic' }]]
+      }),
+      // terser()
+    ]
   }
-])
+]
diff --git a/packages/beacon-ui/scripts/server-fix.ts b/packages/beacon-ui/scripts/server-fix.ts
index 1a2ee5f3d..edd19fef4 100644
--- a/packages/beacon-ui/scripts/server-fix.ts
+++ b/packages/beacon-ui/scripts/server-fix.ts
@@ -1,24 +1,24 @@
-const fs = require('fs')
+// const fs = require('fs')
 
-// Read the file into a string
-let fileData = fs.readFileSync('./dist/cjs/index.js', 'utf8')
+// // Read the file into a string
+// let fileData = fs.readFileSync('./dist/cjs/index.js', 'utf8')
 
-// Define the code you want to insert
-const codeToInsert = `if (web.isServer) {
-    web.template = () => {
-      return { cloneNode: () => {} }
-    }
-  }`
+// // Define the code you want to insert
+// const codeToInsert = `if (web.isServer) {
+//     web.template = () => {
+//       return { cloneNode: () => {} }
+//     }
+//   }`
 
-// Split the file into an array of lines
-let fileLines = fileData.split('\n')
+// // Split the file into an array of lines
+// let fileLines = fileData.split('\n')
 
-// Insert the code into the desired line (line number starting from 0)
-const lineToInsert = 5 
-fileLines.splice(lineToInsert, 0, codeToInsert)
+// // Insert the code into the desired line (line number starting from 0)
+// const lineToInsert = 5 
+// fileLines.splice(lineToInsert, 0, codeToInsert)
 
-// Join the modified lines into a string
-fileData = fileLines.join('\n')
+// // Join the modified lines into a string
+// fileData = fileLines.join('\n')
 
-// Write the modified file back to disk
-fs.writeFileSync('./dist/cjs/index.js', fileData)
+// // Write the modified file back to disk
+// fs.writeFileSync('./dist/cjs/index.js', fileData)
diff --git a/packages/beacon-ui/src/components/alert/index.tsx b/packages/beacon-ui/src/components/alert/index.tsx
index 3a1949031..a655ff85b 100644
--- a/packages/beacon-ui/src/components/alert/index.tsx
+++ b/packages/beacon-ui/src/components/alert/index.tsx
@@ -1,95 +1,65 @@
-import { Component, onCleanup, onMount } from 'solid-js'
-import { CloseIcon, LeftIcon, LogoIcon } from '../icons'
-import Loader from '../loader'
+import { AlertProps } from '../../ui/alert/common'
+import { Modal, Box, Grid2, Button } from '@mui/material'
+import { LeftIcon, LogoIcon, CloseIcon } from '../icons'
+// import Loader from '../loader'
+import useIsMobile from 'src/ui/alert/hooks/useIsMobile'
 
-export interface AlertProps {
-  content: any
-  open: boolean
-  showMore?: boolean
-  extraContent?: any
-  loading?: boolean
-  onCloseClick: () => void
-  onClickShowMore?: () => void
-  onBackClick?: () => void
-}
-
-const Alert: Component<AlertProps> = (props: AlertProps) => {
-  let prevBodyOverflow: any = null
-  onMount(() => {
-    prevBodyOverflow = document.body.style.overflow
-    document.body.style.overflow = 'hidden'
-  })
-
-  onCleanup(() => {
-    document.body.style.overflow = prevBodyOverflow
-  })
+const Alert: React.FC<React.PropsWithChildren<AlertProps>> = (props) => {
+  const isMobile = useIsMobile()
 
-  const isMobile = window.innerWidth <= 800
+  const backButton = props.onBackClick ? (
+    <Button variant="outlined" onClick={props.onBackClick}>
+      <LeftIcon />
+    </Button>
+  ) : (
+    <Grid2 width={'3rem'} height={'1rem'} />
+  )
 
   return (
-    <div
-      class={props.open ? 'alert-wrapper-show' : 'alert-wrapper-hide'}
-      onClick={() => {
-        props.onCloseClick()
-      }}
-    >
-      <div
-        class={props.open ? 'alert-modal-show' : 'alert-modal-hide'}
-        onClick={(e: any) => {
-          e.stopPropagation()
+    <Modal open={true} onClose={props.onCloseClick}>
+      <Box
+        sx={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          width: 400,
+          bgcolor: 'grey',
+          border: '2px solid #000',
+          boxShadow: 24,
+          borderRadius: '30px',
+          p: 4
         }}
       >
-        <div class="alert-header">
-          {props.onBackClick && (
-            <div class="alert-button-icon" onClick={props.onBackClick}>
-              <LeftIcon />
-            </div>
-          )}
-          {!props.onBackClick && <div class="alert-button-icon-empty"></div>}
-          <div class="alert-logo">
-            <LogoIcon />
-          </div>
-          <div class="alert-button-icon" onClick={props.onCloseClick}>
-            <CloseIcon />
-          </div>
-        </div>
-        <div
-          class="alert-modal-loading-wrapper"
-          style={
-            props.loading
-              ? {
-                  opacity: 1,
-                  transition: 'all ease 0.3s',
-                  height: '14px',
-                  overflow: 'unset',
-                  width: 'unset'
-                }
-              : { opacity: 0, transition: 'all ease 0.3s', height: 0, overflow: 'hidden', width: 0 }
-          }
+        <Grid2
+          container
+          spacing={10}
+          alignItems={'center'}
+          justifyContent={'center'}
+          flexWrap={'nowrap'}
         >
-          <Loader />
-        </div>
-        <div class="alert-body" style={{ 'margin-bottom': props.extraContent ? '' : '1.8em' }}>
-          {props.content}
-          {!isMobile && (
-            <div class={props.showMore ? 'alert-body-extra-show' : 'alert-body-extra-hide'}>
-              {props.extraContent && <div class="alert-divider"></div>}
-              {props.extraContent}
-            </div>
-          )}
-        </div>
+          {backButton}
+          <LogoIcon />
+          <Button variant="outlined" onClick={props.onCloseClick}>
+            <CloseIcon />
+          </Button>
+        </Grid2>
+        <Grid2 textAlign={'center'} container>
+          {props.children}
+          {!isMobile && <Grid2 container>{props.showMore && props.extraContent}</Grid2>}
+        </Grid2>
         {!isMobile && props.extraContent && (
-          <div
-            class="alert-footer"
-            onClick={() => {
-              if (props.onClickShowMore) props.onClickShowMore()
-            }}
+          <Grid2
+            style={{ cursor: 'pointer', justifyContent: 'center' }}
+            onClick={() => props.onClickShowMore && props.onClickShowMore()}
+            marginTop={'15px'}
+            container
           >
             {props.showMore ? 'Show less' : 'Show more'}
-          </div>
+          </Grid2>
         )}
-      </div>
-    </div>
+      </Box>
+    </Modal>
   )
 }
 
diff --git a/packages/beacon-ui/src/components/alert/styles.css b/packages/beacon-ui/src/components/alert/styles.css
deleted file mode 100644
index e9f6b66d1..000000000
--- a/packages/beacon-ui/src/components/alert/styles.css
+++ /dev/null
@@ -1,216 +0,0 @@
-.alert-wrapper-show {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: fixed;
-  height: 100%;
-  width: 100vw;
-  overflow: hidden;
-  top: 0px;
-  left: 0px;
-  background-color: rgba(0, 0, 0, 0.6);
-  opacity: 1;
-  transition: all ease 0.3s;
-  z-index: 99999;
-}
-
-.alert-wrapper-hide {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: fixed;
-  height: 100%;
-  width: 100vw;
-  overflow: hidden;
-  top: 0px;
-  left: 0px;
-  background-color: rgba(0, 0, 0, 0.6);
-  opacity: 0;
-  transition: all ease 0.3s;
-  z-index: 99999;
-}
-
-.theme__dark .alert-modal-show {
-  background-color: #27334c;
-}
-
-.theme__dark .alert-modal-hide {
-  background-color: #27334c;
-}
-
-.theme__dark .alert-footer {
-  color: white;
-  -webkit-box-shadow: 0px -4px 12px rgb(0 0 0 / 20%);
-  -moz-box-shadow: 0px -4px 12px rgb(0 0 0 / 20%);
-  box-shadow: 0px -4px 12px rgb(0 0 0 / 20%);
-}
-
-.theme__dark .alert-logo svg g {
-  fill: white;
-}
-
-.alert-modal-show {
-  background-color: white;
-  border-radius: 32px;
-  transition: all ease 0.3s;
-  transform: translateY(0px);
-  opacity: 1;
-  width: 480px;
-}
-
-.alert-modal-hide {
-  background-color: white;
-  border-radius: 32px;
-  transition: all ease 0.3s;
-  transform: translateY(24px);
-  opacity: 1;
-  width: 480px;
-}
-
-.alert-modal-loading-wrapper {
-  width: 480px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-}
-
-.alert-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1.8em;
-  padding-top: 1.2em;
-  padding-bottom: 0px;
-}
-
-.alert-button-icon-empty {
-  width: 24px;
-  height: 24px;
-  padding: 2px;
-}
-
-.alert-button-icon {
-  width: 24px;
-  height: 24px;
-  padding: 2px;
-  border-radius: 100%;
-  border: 1px solid #f0f0f1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  fill: #64748b;
-  transition: all ease 0.2s;
-}
-
-.alert-button-icon:hover {
-  background-color: #475569;
-  border: 1px solid #475569;
-  fill: #e2e8f0;
-}
-
-.alert-logo {
-  margin: 0px 6em;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.alert-logo svg {
-  height: 28px;
-}
-
-.alert-body {
-  padding: 1.8em;
-  padding-bottom: 0px;
-  transition: all ease 0.3s;
-}
-
-.alert-footer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: grey;
-  cursor: pointer;
-  -webkit-box-shadow: 0px -4px 12px rgb(50 50 50 / 6%);
-  -moz-box-shadow: 0px -4px 12px rgb(50 50 50 / 6%);
-  box-shadow: 0px -4px 12px rgb(50 50 50 / 6%);
-  font-size: 0.938rem;
-  font-weight: bold;
-  height: 64px;
-}
-
-.alert-body-extra-show {
-  transition: all ease 0.3s;
-  overflow: hidden;
-  max-height: 35vh;
-  overflow-y: auto;
-}
-
-.alert-body-extra-hide {
-  transition: all ease 0.3s;
-  overflow: hidden;
-  max-height: 0px;
-}
-
-.alert-divider {
-  border-top: 1px solid #aaaaaa42;
-  width: 100%;
-  border-radius: 6px;
-}
-
-@media only screen and (max-width: 800px) {
-  .alert-logo {
-    margin: 0px 2em;
-  }
-
-  .alert-wrapper-show {
-    align-items: flex-end;
-    width: 100%;
-  }
-
-  .alert-wrapper-hide {
-    align-items: flex-end;
-    width: 100%;
-  }
-
-  .alert-modal-show {
-    border-bottom-left-radius: 0px;
-    border-bottom-right-radius: 0px;
-    padding-bottom: 1.8em;
-    width: 100%;
-  }
-
-  .alert-modal-hide {
-    border-bottom-left-radius: 0px;
-    border-bottom-right-radius: 0px;
-    padding-bottom: 1.8em;
-  }
-}
-
-@media only screen and (max-width: 300px) {
-  .alert-wrapper-show {
-    align-items: flex-end;
-    width: 100vw;
-  }
-
-  .alert-wrapper-hide {
-    align-items: flex-end;
-    width: 100vw;
-  }
-
-  .alert-body {
-    padding: 0.8em;
-  }
-
-  .alert-body {
-    padding: 0.8em;
-    padding-top: 0.4em;
-  }
-
-  .alert-logo {
-    margin: 0px;
-    transform: scale(0.8);
-  }
-}
diff --git a/packages/beacon-ui/src/components/bug-report-form/index.tsx b/packages/beacon-ui/src/components/bug-report-form/index.tsx
index fc06ec539..bfc80a6b3 100644
--- a/packages/beacon-ui/src/components/bug-report-form/index.tsx
+++ b/packages/beacon-ui/src/components/bug-report-form/index.tsx
@@ -1,9 +1,9 @@
+import React, { useState, useEffect } from 'react'
 import { IndexedDBStorage, Logger, SDK_VERSION } from '@airgap/beacon-core'
 import { StorageKey } from '@airgap/beacon-types'
-import { For, createEffect, createSignal } from 'solid-js'
-import styles from './styles.css'
 import { currentBrowser, currentOS } from '../../utils/platform'
 
+
 const logger = new Logger('BugReport')
 
 interface StorageObject {
@@ -22,39 +22,39 @@ interface BugReportRequest {
   wcStorage: string
 }
 
-const BugReportForm = (props: any) => {
-  const [title, setTitle] = createSignal('')
-  const [titleTouched, setTitleTouched] = createSignal(false)
-  const [titleErrorMsg, setTitleErrorMsg] = createSignal('')
-  const [description, setDescription] = createSignal('')
-  const [descriptionTouched, setDescriptionTouched] = createSignal(false)
-  const [descriptionErrorMsg, setDescriptionErrorMsg] = createSignal('')
-  const [steps, setSteps] = createSignal('')
-  const [stepsTouched, setStepsTouched] = createSignal(false)
-  const [stepsErrorMsg, setStepsErrorMsg] = createSignal('')
-  const [isFormValid, setFormValid] = createSignal(false)
-  const [isLoading, setIsLoading] = createSignal(false)
-  const [didUserAllow, setDidUserAllow] = createSignal(false)
-  const [status, setStatus] = createSignal<'success' | 'error' | null>(null)
-  const [showThankYou, setShowThankYou] = createSignal(false)
+const BugReportForm: React.FC<{ onSubmit: () => void }> = (props) => {
+  const [title, setTitle] = useState('')
+  const [titleTouched, setTitleTouched] = useState(false)
+  const [titleErrorMsg, setTitleErrorMsg] = useState('')
+  const [description, setDescription] = useState('')
+  const [descriptionTouched, setDescriptionTouched] = useState(false)
+  const [descriptionErrorMsg, setDescriptionErrorMsg] = useState('')
+  const [steps, setSteps] = useState('')
+  const [stepsTouched, setStepsTouched] = useState(false)
+  const [stepsErrorMsg, setStepsErrorMsg] = useState('')
+  const [isFormValid, setFormValid] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const [didUserAllow, setDidUserAllow] = useState(false)
+  const [status, setStatus] = useState<'success' | 'error' | null>(null)
+  const [showThankYou, setShowThankYou] = useState(false)
   const db = new IndexedDBStorage('beacon', 'bug_report')
 
   const isTitleValid = () => {
-    const check = title().replace(/ /gi, '').length > 10
+    const check = title.trim().length > 10
     const invalidText = check ? '' : 'The title must be at least 10 characters long.'
     setTitleErrorMsg(invalidText)
     return check
   }
 
   const isDescriptionValid = () => {
-    const check = description().replace(/ /gi, '').length >= 30
+    const check = description.trim().length >= 30
     const invalidText = check ? '' : 'The description must be at least 30 characters long.'
     setDescriptionErrorMsg(invalidText)
     return check
   }
 
   const areStepsValid = () => {
-    const check = steps().replace(/ /gi, '').length >= 30
+    const check = steps.trim().length >= 30
     const invalidText = check
       ? ''
       : 'Write at least 30 characters to describe the steps to reproduce.'
@@ -87,23 +87,22 @@ const BugReportForm = (props: any) => {
 
   const getUserId = (): string => {
     if (!localStorage) {
-      return 'UNKOWN'
+      return 'UNKNOWN'
     }
 
     const key = Object.keys(localStorage).find((key) => key.includes('user-id'))
-
-    return key && key.length ? localStorage.getItem(key) ?? 'UNKOWN' : 'UNKOWN'
+    return key && key.length ? localStorage.getItem(key) ?? 'UNKNOWN' : 'UNKNOWN'
   }
 
-  createEffect(() => {
+  useEffect(() => {
     const titleValid = isTitleValid(),
       descriptionValid = isDescriptionValid(),
       stepsValid = areStepsValid(),
-      userAllow = didUserAllow()
+      userAllow = didUserAllow
     setFormValid(titleValid && descriptionValid && stepsValid && userAllow)
-  })
+  }, [title, description, steps, didUserAllow])
 
-  const handleSubmit = async (event: Event) => {
+  const handleSubmit = async (event: React.FormEvent) => {
     event.preventDefault()
     setStatus(null)
     setShowThankYou(false)
@@ -116,10 +115,10 @@ const BugReportForm = (props: any) => {
         beaconState[StorageKey.USER_ID] && beaconState[StorageKey.USER_ID].length
           ? beaconState[StorageKey.USER_ID]
           : getUserId(),
-      title: title(),
+      title,
       sdkVersion: SDK_VERSION,
-      description: description(),
-      steps: steps(),
+      description,
+      steps,
       os: currentOS(),
       browser: currentBrowser(),
       localStorage: JSON.stringify(beaconState),
@@ -159,89 +158,85 @@ const BugReportForm = (props: any) => {
   }
 
   return (
-    <form onSubmit={handleSubmit} class="form-style">
-      <div class="input-group">
-        <label for="title" class="label-style">
+    <form onSubmit={handleSubmit} className="form-style">
+      <div className="input-group">
+        <label htmlFor="title" className="label-style">
           Title
         </label>
         <input
           type="text"
           id="title"
-          value={title()}
-          onBlur={(e) => {
-            !titleTouched() && setTitleTouched(true)
-            setTitle(e.currentTarget.value)
-          }}
-          class={`input-style ${titleTouched() && titleErrorMsg().length ? 'invalid' : ''}`}
+          value={title}
+          onChange={(e) => setTitle(e.currentTarget.value)}
+          onBlur={() => setTitleTouched(true)}
+          className={`input-style ${titleTouched && titleErrorMsg.length ? 'invalid' : ''}`}
         />
-        {titleTouched() && titleErrorMsg().length && (
-          <label class="error-label">{titleErrorMsg()}</label>
+        {titleTouched && titleErrorMsg.length > 0 && (
+          <label className="error-label">{titleErrorMsg}</label>
         )}
       </div>
-      <div class="input-group">
-        <label for="description" class="label-style">
+      <div className="input-group">
+        <label htmlFor="description" className="label-style">
           Description
         </label>
         <textarea
           id="description"
-          value={description()}
-          onBlur={(e) => {
-            !descriptionTouched() && setDescriptionTouched(true)
-            setDescription(e.currentTarget.value)
-          }}
-          class={`textarea-style ${
-            descriptionTouched() && descriptionErrorMsg().length ? 'invalid' : ''
+          value={description}
+          onChange={(e) => setDescription(e.currentTarget.value)}
+          onBlur={() => setDescriptionTouched(true)}
+          className={`textarea-style ${
+            descriptionTouched && descriptionErrorMsg.length ? 'invalid' : ''
           }`}
         />
-        {descriptionTouched() && descriptionErrorMsg().length && (
-          <label class="error-label">{descriptionErrorMsg()}</label>
+        {descriptionTouched && descriptionErrorMsg.length > 0 && (
+          <label className="error-label">{descriptionErrorMsg}</label>
         )}
       </div>
-      <div class="input-group">
-        <label for="steps" class="label-style">
+      <div className="input-group">
+        <label htmlFor="steps" className="label-style">
           Steps to Reproduce
         </label>
         <textarea
           id="steps"
-          value={steps()}
-          onBlur={(e) => {
-            !stepsTouched() && setStepsTouched(true)
-            setSteps(e.currentTarget.value)
-          }}
-          class={`textarea-style ${stepsTouched() && stepsErrorMsg().length ? 'invalid' : ''}`}
+          value={steps}
+          onChange={(e) => setSteps(e.currentTarget.value)}
+          onBlur={() => setStepsTouched(true)}
+          className={`textarea-style ${stepsTouched && stepsErrorMsg.length ? 'invalid' : ''}`}
         />
-        {stepsTouched() && stepsErrorMsg().length && (
-          <label class="error-label">{stepsErrorMsg()}</label>
+        {stepsTouched && stepsErrorMsg.length > 0 && (
+          <label className="error-label">{stepsErrorMsg}</label>
         )}
       </div>
-      <div class="permissions-group">
-        <label for="user-premissions">You agree to share anonymous data with the developers.</label>
+      <div className="permissions-group">
+        <label htmlFor="user-permissions">
+          You agree to share anonymous data with the developers.
+        </label>
         <input
-          id="user-premissions"
+          id="user-permissions"
           type="checkbox"
           onChange={() => setDidUserAllow((prev) => !prev)}
         />
       </div>
       <button
         type="submit"
-        disabled={!isFormValid()}
-        class={`button-style ${isFormValid() ? 'valid' : 'invalid'} ${
-          isLoading() ? 'button-loading' : ''
+        disabled={!isFormValid}
+        className={`button-style ${isFormValid ? 'valid' : 'invalid'} ${
+          isLoading ? 'button-loading' : ''
         }`}
       >
-        {!isLoading() && !status() ? 'Submit' : <>&nbsp;</>}
-        {!isLoading() && status() && (
-          <span class={status() === 'success' ? 'icon success-icon' : 'icon error-icon'}>
-            {status() === 'success' ? '✓' : '✕'}
+        {!isLoading && !status ? 'Submit' : <>&nbsp;</>}
+        {!isLoading && status && (
+          <span className={status === 'success' ? 'icon success-icon' : 'icon error-icon'}>
+            {status === 'success' ? '✓' : '✕'}
           </span>
         )}
-        {showThankYou() && (
-          <div class="thank-you-message">
-            <For each={'Thank You!'.split('')}>
-              {(letter, index) => (
-                <span style={{ 'animation-delay': `${index() * 0.1}s` }}>{letter}</span>
-              )}
-            </For>
+        {showThankYou && (
+          <div className="thank-you-message">
+            {'Thank You!'.split('').map((letter, index) => (
+              <span key={index} style={{ animationDelay: `${index * 0.1}s` }}>
+                {letter}
+              </span>
+            ))}
           </div>
         )}
       </button>
@@ -249,5 +244,4 @@ const BugReportForm = (props: any) => {
   )
 }
 
-export { styles }
 export default BugReportForm
diff --git a/packages/beacon-ui/src/components/bug-report-form/styles.css b/packages/beacon-ui/src/components/bug-report-form/styles.css
deleted file mode 100644
index 81e21afd5..000000000
--- a/packages/beacon-ui/src/components/bug-report-form/styles.css
+++ /dev/null
@@ -1,160 +0,0 @@
-.form-style {
-  display: flex;
-  flex-direction: column;
-  max-width: 500px;
-  min-width: 100%;
-  margin: 0 auto;
-  gap: 20px;
-}
-
-.input-group {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 15px;
-}
-
-.label-style {
-  margin-bottom: 8px;
-}
-
-.input-style,
-.textarea-style {
-  width: 100%;
-  padding: 10px;
-  box-sizing: border-box;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-}
-
-.input-style.invalid,
-.textarea-style.invalid {
-  border-color: #f76b8a;
-  border-width: medium;
-}
-
-.textarea-style {
-  height: 8rem;
-}
-
-.button-style {
-  padding: 10px 20px;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  margin-top: 20px;
-}
-
-.button-style.valid {
-  background-color: #007bff;
-}
-
-.button-style.invalid {
-  background-color: #65afff;
-}
-
-.error-label {
-  display: inline;
-  font-size: 0.7rem;
-  color: #f76b8a;
-}
-
-.permissions-group {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-}
-
-.permissions-group label {
-  flex-grow: 1;
-  font-size: 0.7rem;
-}
-
-.permissions-group input {
-  flex-shrink: 0;
-}
-
-@media screen and (max-height: 700px) {
-  .textarea-style {
-    height: 6rem;
-  }
-}
-
-.button-loading::after {
-  content: '';
-  position: absolute;
-  width: 16px;
-  height: 16px;
-  left: 0;
-  right: 0;
-  margin: auto;
-  border: 4px solid transparent;
-  border-top-color: #ffffff;
-  border-radius: 50%;
-  animation: button-loading-spinner 1s ease infinite;
-}
-
-@keyframes button-loading-spinner {
-  from {
-    transform: rotate(0turn);
-  }
-
-  to {
-    transform: rotate(1turn);
-  }
-}
-
-.icon {
-  display: inline-block;
-  border: 2px solid white;
-  border-radius: 50%;
-  padding: 5px;
-  margin-bottom: 3px;
-  width: 1rem;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-
-.success-icon {
-  animation: successAnimation 0.6s ease forwards;
-}
-
-.error-icon {
-  animation: fadeIn 0.3s ease forwards;
-}
-
-@keyframes successAnimation {
-  0% {
-    transform: rotate(0deg);
-    opacity: 0;
-  }
-  100% {
-    transform: rotate(360deg);
-    opacity: 1;
-  }
-}
-
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-.thank-you-message {
-  display: inline-block;
-  margin-left: 10px;
-}
-
-.thank-you-message span {
-  opacity: 0;
-  animation: fadeInLetter 0.3s ease forwards;
-}
-
-@keyframes fadeInLetter {
-  to {
-    opacity: 1;
-  }
-}
diff --git a/packages/beacon-ui/src/components/icons/index.tsx b/packages/beacon-ui/src/components/icons/index.tsx
index 7bf294da8..171d7b9ce 100644
--- a/packages/beacon-ui/src/components/icons/index.tsx
+++ b/packages/beacon-ui/src/components/icons/index.tsx
@@ -1,21 +1,19 @@
-import { JSX } from 'solid-js/jsx-runtime'
-
 interface IconProps {
-  style?: JSX.CSSProperties | undefined
+  style?: any
 }
 
 export function CloseIcon(props: IconProps) {
   return (
     <svg
-      stroke-width="0"
+      strokeWidth="0"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 512 512"
       height="1em"
       width="1em"
       style={
         props.style
-          ? { overflow: 'visible', 'font-size': '22px', ...props.style }
-          : { overflow: 'visible', 'font-size': '22px' }
+          ? { overflow: 'visible', fontSize: '22px', ...props.style }
+          : { overflow: 'visible', fontSize: '22px' }
       }
     >
       <path d="m289.94 256 95-95A24 24 0 0 0 351 127l-95 95-95-95a24 24 0 0 0-34 34l95 95-95 95a24 24 0 1 0 34 34l95-95 95 95a24 24 0 0 0 34-34Z"></path>
@@ -26,7 +24,7 @@ export function CloseIcon(props: IconProps) {
 export function LeftIcon(props: IconProps) {
   return (
     <svg
-      stroke-width="0"
+      strokeWidth="0"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 320 512"
       height="1em"
@@ -54,22 +52,22 @@ export function LogoIcon(props: IconProps) {
       <path
         fill="#3880FF"
         d="M45 19v.9c0 .3-.2 7.5-3.4 13.2-3.3 5.6-9.4 9.3-9.7 9.5l-.8.4-1.3-.8-7.6-4.4c-.5-.3-.9-.6-1.4-.9-.4-.3-.7-.5-1.1-.8-.8-.7-1.5-1.4-2.1-2.2-.9-1.1-1.6-2.4-2.1-3.7-.9-2.3-1.3-4.8-1.2-7.5.8-.4 1.6-.6 2.4-.6h.6c-.2 2.4.1 4.6.8 6.6 1 2.8 2.9 5.1 5.5 6.6l7.4 4.3c.2-.1.4-.2.6-.4 1.9-1.3 5.3-4.1 7.3-7.6 2.2-3.9 2.8-8.9 3-10.8L38.8 19c.3-1 .4-2.1.5-3.2L45 19z"
-        class="st0"
+        className="st0"
       ></path>
       <path
         fill="#3880FF"
         d="M36.3 4.1v10.3c0 .5 0 1.1-.1 1.6s-.1.9-.2 1.3c-.2 1-.5 2-.9 3-.5 1.3-1.3 2.6-2.2 3.7-1.5 1.9-3.5 3.6-5.9 4.8-.9-.6-1.6-1.3-2-2.4 2.1-1 3.9-2.3 5.2-4 1.9-2.3 3-5.1 3-8.1V5.9l-.6-.3c-2-1-6.1-2.6-10.1-2.6-4.5 0-9.1 2-10.9 2.9v3.6c-1 .3-2 .7-3 1.1V4.1l.8-.4C9.7 3.5 16 0 22.5 0s12.8 3.5 13.1 3.6l.7.5z"
-        class="st0"
+        className="st0"
       ></path>
       <path
         fill="#3880FF"
         d="M10.5 16.5l-7.4 4.3v.7c.2 2.1.9 6.5 2.9 10 2.2 3.9 6.2 6.9 7.9 8l3.1-1.8c.8.7 1.6 1.4 2.5 2L13.8 43l-.8-.5c-.3-.2-6.4-3.9-9.7-9.5C.1 27.4 0 20.2 0 19.9V19l1.3-.8L9 13.9c.5-.3.9-.5 1.4-.7.4-.2.8-.4 1.3-.5 1-.4 2-.6 3-.7 1.4-.2 2.9-.2 4.3 0 2.4.3 4.8 1.2 7.1 2.7 0 1-.4 2-1 2.9-1.9-1.3-4-2.2-6-2.5-3.1-.6-6-.1-8.6 1.4z"
-        class="st0"
+        className="st0"
       ></path>
       <g>
         <path
           d="M73.9 23c.9 1 1.3 2.3 1.3 3.7 0 1.9-.6 3.4-1.9 4.5-1.3 1.1-3.1 1.7-5.5 1.7h-8.6v-23h8.4c2.3 0 4.1.5 5.3 1.5 1.2 1 1.8 2.4 1.8 4.2 0 1.5-.4 2.7-1.2 3.6-.8.9-1.8 1.5-3.1 1.8 1.5.3 2.6 1 3.5 2zm-11.7-3h5c1.5 0 2.6-.3 3.4-1 .8-.7 1.2-1.6 1.2-2.8 0-1.2-.4-2.1-1.1-2.8-.8-.7-1.9-1-3.5-1h-4.8V20zm8.7 9.4c.9-.7 1.3-1.7 1.3-3s-.4-2.3-1.3-3c-.9-.7-2.1-1.1-3.7-1.1h-5v8.2h5c1.6-.1 2.8-.4 3.7-1.1zM95.3 24.6H81c.1 2.1.6 3.6 1.7 4.6s2.4 1.5 4 1.5c1.4 0 2.6-.4 3.6-1.1 1-.7 1.6-1.7 1.8-2.9h3.2c-.2 1.2-.7 2.4-1.5 3.3-.8 1-1.7 1.7-2.9 2.3-1.2.5-2.6.8-4.1.8-1.7 0-3.2-.4-4.6-1.1-1.3-.7-2.4-1.8-3.1-3.2-.8-1.4-1.1-3-1.1-4.9 0-1.9.4-3.5 1.1-4.9.8-1.4 1.8-2.5 3.1-3.2 1.3-.7 2.9-1.1 4.6-1.1 1.7 0 3.3.4 4.6 1.1 1.3.7 2.3 1.7 3 3 .7 1.2 1 2.6 1 4.1.1.7 0 1.2-.1 1.7zm-3.5-4.8c-.5-.9-1.2-1.6-2.1-2-.9-.4-1.8-.7-2.8-.7-1.6 0-3 .5-4.1 1.5-1.1 1-1.7 2.5-1.8 4.5h11.5c0-1.3-.2-2.4-.7-3.3zM111.2 16c1.2.9 2.1 2 2.5 3.5V15h3v18h-3v-4.6c-.5 1.5-1.3 2.6-2.5 3.5-1.2.9-2.7 1.3-4.4 1.3-1.6 0-3-.4-4.3-1.1-1.2-.7-2.2-1.8-2.9-3.2-.7-1.4-1.1-3-1.1-4.9 0-1.9.4-3.5 1.1-4.9.7-1.4 1.7-2.5 2.9-3.2 1.2-.7 2.7-1.1 4.3-1.1 1.7-.1 3.1.4 4.4 1.2zm-8 3.1c-1.1 1.2-1.7 2.8-1.7 4.8 0 2.1.5 3.7 1.7 4.8 1.1 1.2 2.6 1.8 4.4 1.8 1.2 0 2.2-.3 3.2-.8.9-.5 1.7-1.3 2.2-2.3.5-1 .8-2.1.8-3.5 0-1.3-.3-2.5-.8-3.5s-1.2-1.8-2.2-2.3c-.9-.5-2-.8-3.2-.8-1.9.1-3.3.7-4.4 1.8zM135 16.6c1.5 1.2 2.4 2.9 2.8 4.9h-3.1c-.2-1.3-.8-2.3-1.8-3-1-.7-2.2-1.1-3.6-1.1-1 0-2 .2-2.9.7-.9.5-1.6 1.2-2.1 2.2-.5 1-.8 2.2-.8 3.7s.3 2.7.8 3.7 1.2 1.7 2.1 2.2c.9.5 1.8.7 2.9.7 1.4 0 2.6-.4 3.6-1.1 1-.7 1.6-1.8 1.8-3h3.1c-.3 2.1-1.3 3.7-2.8 4.9-1.5 1.2-3.4 1.8-5.7 1.8-1.7 0-3.2-.4-4.6-1.1-1.3-.7-2.4-1.8-3.1-3.2-.8-1.4-1.1-3-1.1-4.9 0-1.9.4-3.5 1.1-4.9.8-1.4 1.8-2.5 3.1-3.2 1.3-.7 2.9-1.1 4.6-1.1 2.3-.1 4.2.6 5.7 1.8zM154.5 15.9c1.4.7 2.4 1.8 3.2 3.2.8 1.4 1.2 3 1.2 4.9 0 1.9-.4 3.5-1.2 4.9-.8 1.4-1.8 2.4-3.2 3.2-1.4.7-2.9 1.1-4.6 1.1-1.7 0-3.3-.4-4.6-1.1-1.4-.7-2.4-1.8-3.2-3.2-.8-1.4-1.2-3-1.2-4.9 0-1.9.4-3.5 1.2-4.9.8-1.4 1.9-2.5 3.2-3.2 1.4-.7 2.9-1.1 4.6-1.1 1.7-.1 3.2.3 4.6 1.1zm-7.6 2.2c-.9.5-1.6 1.2-2.2 2.2-.6 1-.8 2.2-.8 3.7 0 1.4.3 2.7.8 3.6.6 1 1.3 1.7 2.2 2.2.9.5 1.9.7 3 .7s2.1-.2 3-.7c.9-.5 1.6-1.2 2.2-2.2.6-1 .8-2.2.8-3.6 0-1.5-.3-2.7-.8-3.7-.6-1-1.3-1.7-2.2-2.2-.9-.5-1.9-.7-3-.7s-2.1.2-3 .7zM177.3 16.7c1.3 1.3 1.9 3.3 1.9 5.8v10.4h-3V22.8c0-1.8-.5-3.2-1.4-4.1-.9-1-2.2-1.4-3.7-1.4-1.6 0-2.9.5-3.9 1.6s-1.5 2.6-1.5 4.6V33h-3V15h3v4.3c.5-1.5 1.3-2.6 2.4-3.4 1.2-.8 2.5-1.2 4-1.2 2.2 0 3.9.6 5.2 2z"
-          class="st1"
+          className="st1"
         ></path>
       </g>
     </svg>
diff --git a/packages/beacon-ui/src/components/info/index.tsx b/packages/beacon-ui/src/components/info/index.tsx
index 8ce757534..14278e9f5 100644
--- a/packages/beacon-ui/src/components/info/index.tsx
+++ b/packages/beacon-ui/src/components/info/index.tsx
@@ -1,6 +1,7 @@
-import { Component, For } from 'solid-js'
-import styles from './styles.css'
+import React from 'react'
+
 import { QRCodeIcon } from '../icons'
+import { Button, Grid2 } from '@mui/material'
 
 interface InfoProps {
   title: string
@@ -10,53 +11,52 @@ interface InfoProps {
   border?: boolean
   iconBadge?: boolean
   bigIcon?: boolean
-  buttons?: { label: string; type: 'primary' | 'secondary'; onClick: () => void }[]
+  buttons?: {
+    label: string
+    type: 'primary' | 'secondary'
+    onClick: () => void
+  }[]
   downloadLink?: { url: string; label: string }
   onShowQRCodeClick?: (() => void) | (() => Promise<void>)
 }
 
-const Info: Component<InfoProps> = (props: InfoProps) => {
+const Info: React.FC<InfoProps> = (props: InfoProps) => {
   return (
-    <div class={`info-wrapper ${props.border ? 'info-border' : ''}`}>
-      {props.icon && (
-        <div
-          class={`info-icon ${props.iconBadge ? 'info-badge' : ''}`}
-          style={props.bigIcon ? { 'font-size': '3.4em' } : {}}
-        >
-          {props.icon}
-        </div>
-      )}
-      <h3 class="info-title">{props.title}</h3>
-      {props.description && <div class="info-description">{props.description}</div>}
-      {props.data && <pre class="info-data">{props.data}</pre>}
-      <div class="info-buttons">
-        <For each={props.buttons}>
-          {(button) => (
-            <button
-              class={button.type !== 'secondary' ? 'info-button' : 'info-button-secondary'}
-              onClick={button.onClick}
-            >
-              {button.label}
-            </button>
-          )}
-        </For>
-      </div>
-      {props.downloadLink && (
-        <a class="downloadLink" href={props.downloadLink.url}>
-          {props.downloadLink.label}
-        </a>
-      )}
+    <Grid2
+      container
+      justifyContent={'center'}
+      alignItems={'center'}
+      flexDirection={'column'}
+      width={'100%'}
+      sx={
+        props.border
+          ? {
+              borderStyle: 'solid',
+              borderWidth: 'thin',
+              borderColor: 'black'
+            }
+          : undefined
+      }
+    >
+      {props.icon && <Grid2 container>{props.icon}</Grid2>}
+      <h3>{props.title}</h3>
+      {props.description && <span>{props.description}</span>}
+      {props.data && <pre>{props.data}</pre>}
+      <Grid2 container>
+        {props.buttons?.map((button, index) => (
+          <Button key={index} onClick={button.onClick}>
+            {button.label}
+          </Button>
+        ))}
+      </Grid2>
+      {props.downloadLink && <a href={props.downloadLink.url}>{props.downloadLink.label}</a>}
       {props.onShowQRCodeClick && (
-        <button
-          id="qr-code-icon"
-          onClick={() => props.onShowQRCodeClick && props.onShowQRCodeClick()}
-        >
+        <Button id="qr-code-icon" onClick={props.onShowQRCodeClick}>
           <QRCodeIcon />
-        </button>
+        </Button>
       )}
-    </div>
+    </Grid2>
   )
 }
 
-export { styles }
 export default Info
diff --git a/packages/beacon-ui/src/components/info/styles.css b/packages/beacon-ui/src/components/info/styles.css
deleted file mode 100644
index fde80ef90..000000000
--- a/packages/beacon-ui/src/components/info/styles.css
+++ /dev/null
@@ -1,164 +0,0 @@
-.info-wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  border-radius: 10px;
-  padding: 30px;
-}
-
-.info-border {
-  border: 1px solid #aaaaaa42;
-}
-
-.info-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 6px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 28px;
-  margin-bottom: 0.2rem;
-}
-
-.info-badge {
-  background-color: #3880ff;
-  font-size: 38px;
-  -webkit-box-shadow: 0px 0px 12px -4px rgb(0 0 0 / 30%);
-  -moz-box-shadow: 0px 0px 12px -4px rgb(0 0 0 / 30%);
-  box-shadow: 0px 0px 12px -4px rgb(0 0 0 / 30%);
-}
-
-.theme__dark .info-title {
-  color: white;
-}
-
-.theme__dark .info-description {
-  color: #aeaeae;
-}
-
-.info-title {
-  text-align: center;
-  color: #334155;
-  margin: 0px;
-  font-size: 16px;
-}
-
-.info-description {
-  text-align: center;
-  font-size: 12.8px;
-  font-weight: 300;
-  color: #7c828b;
-  line-height: 1.25rem;
-  margin: 6px 0px 12px 0px;
-  margin: 0px;
-  max-width: 300px;
-}
-
-.info-data {
-  font-size: 12.8px;
-  font-weight: 300;
-  color: #7c828b;
-  line-height: 1.25rem;
-  margin: 6px 0px 12px 0px;
-  margin: 0px;
-  overflow: scroll;
-  max-height: 300px;
-}
-
-.info-buttons {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-}
-
-.info-button {
-  border-radius: 6px;
-  background-color: #3880ff;
-  border: 1px solid #3880ff;
-  color: white;
-  padding: 0.6rem 1.2rem;
-  width: 180px;
-  transition: all ease 0.2s;
-  cursor: pointer;
-  margin-top: 1rem;
-  font-size: 12.8px;
-}
-
-.info-button:hover {
-  background-color: #166afc;
-}
-
-.info-button-secondary {
-  border-radius: 6px;
-  background-color: transparent;
-  border: 1px solid #3880ff;
-  color: #3880ff;
-  padding: 0.6em 1.2rem;
-  width: 180px;
-  transition: all ease 0.2s;
-  cursor: pointer;
-  margin-top: 1rem;
-}
-
-.info-button-secondary:hover {
-  background-color: #e8f0ff;
-}
-
-.downloadLink {
-  text-decoration: none;
-  color: gray;
-  font-size: smaller;
-  padding: 0.5rem;
-}
-
-button#qr-code-icon {
-  background-color: transparent;
-  border: none;
-  min-width: 2.5rem;
-  align-self: self-end;
-  position: absolute;
-  top: 0.3rem;
-  right: 0.3rem;
-}
-
-@media only screen and (max-width: 300px) {
-  button#qr-code-icon {
-    min-width: 1.5rem;
-  }
-}
-
-@media only screen and (max-width: 800px) {
-  .info-title {
-    font-size: 14.4px;
-    line-height: 1rem;
-  }
-
-  .info-description {
-    font-size: 0.65rem;
-  }
-
-  .qr-more-info {
-    font-size: 0.75rem;
-  }
-
-  .info-wrapper {
-    max-height: 180px;
-    padding: 1.2em;
-    position: relative;
-  }
-
-  .info-icon {
-    width: 40px;
-    height: 40px;
-    font-size: 1.8rem;
-  }
-
-  .info-button {
-    padding: 0.5em 1.6em;
-    font-size: 16px;
-    font-weight: bold;
-  }
-}
diff --git a/packages/beacon-ui/src/components/loader/index.tsx b/packages/beacon-ui/src/components/loader/index.tsx
index 8fde1fbc0..168601120 100644
--- a/packages/beacon-ui/src/components/loader/index.tsx
+++ b/packages/beacon-ui/src/components/loader/index.tsx
@@ -1,11 +1,11 @@
-import { Component } from 'solid-js'
-import styles from './styles.css'
+import React from "react";
+
 
 interface LoaderProps {}
 
-const Loader: Component<LoaderProps> = (_: LoaderProps) => {
-  return <div class="loader"></div>
-}
+const Loader: React.FC<LoaderProps> = () => {
+  return <div className="loader"></div>;
+};
+
 
-export { styles }
-export default Loader
+export default Loader;
diff --git a/packages/beacon-ui/src/components/loader/styles.css b/packages/beacon-ui/src/components/loader/styles.css
deleted file mode 100644
index 74210adcf..000000000
--- a/packages/beacon-ui/src/components/loader/styles.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.loader {
-  height: 3px;
-  position: relative;
-  background-color: #ddd;
-  position: absolute;
-  width: 100%;
-  left: 0px;
-  bottom: 0px;
-  overflow: hidden;
-}
-
-.loader:before {
-  content: '';
-  position: absolute;
-  left: -50%;
-  height: 3px;
-  width: 40%;
-  background-color: #3880ff;
-  -webkit-animation: lineAnim 1s linear infinite;
-  -moz-animation: lineAnim 1s linear infinite;
-  animation: lineAnim 1s linear infinite;
-}
-
-@keyframes lineAnim {
-  0% {
-    left: -40%;
-  }
-  50% {
-    left: 20%;
-    width: 80%;
-  }
-  100% {
-    left: 100%;
-    width: 100%;
-  }
-}
diff --git a/packages/beacon-ui/src/components/pair-other/pair-other.tsx b/packages/beacon-ui/src/components/pair-other/pair-other.tsx
index 7dcc03b37..f1e632fa3 100644
--- a/packages/beacon-ui/src/components/pair-other/pair-other.tsx
+++ b/packages/beacon-ui/src/components/pair-other/pair-other.tsx
@@ -1,82 +1,50 @@
-import { Component, createSignal, onMount } from 'solid-js'
+import React, { useState, useEffect } from 'react'
 import QR from '../qr'
-import { MergedWallet } from '../../utils/wallets'
-import { P2PPairingRequest, WalletConnectPairingRequest } from '@airgap/beacon-types'
-import styles from './styles.css'
-import { Serializer } from '@airgap/beacon-core'
 
-export interface PairOtherProps {
-  walletList: MergedWallet[]
-  p2pPayload: Promise<P2PPairingRequest> | undefined
-  wcPayload: Promise<WalletConnectPairingRequest> | undefined
-  onClickLearnMore: () => void
-}
+import { PairOtherProps } from 'src/ui/alert/common'
 
-const [uiState, setUiState] = createSignal<'selection' | 'p2p' | 'walletconnect'>('selection')
-const [hasBeacon, setHasBeacon] = createSignal<boolean>(false)
-const [hasWalletConnect, setHasWalletConnect] = createSignal<boolean>(false)
-const [qrData, setQrData] = createSignal<string>('')
+const PairOther: React.FC<PairOtherProps> = (props: PairOtherProps) => {
+  const [uiState, setUiState] = useState<'selection' | 'p2p' | 'walletconnect'>('selection')
+  const [hasBeacon, setHasBeacon] = useState<boolean>(false)
+  const [hasWalletConnect, setHasWalletConnect] = useState<boolean>(false)
+  const [qrData, setQrData] = useState<string>('')
 
-const PairOther: Component<PairOtherProps> = (props: PairOtherProps) => {
-  onMount(() => {
+  useEffect(() => {
     setUiState('selection')
     setQrData('')
-  })
-
-  setHasBeacon(!!props.p2pPayload)
-  setHasWalletConnect(!!props.wcPayload)
+    setHasBeacon(!!props.p2pPayload)
+    setHasWalletConnect(!!props.wcPayload)
+  }, [props.p2pPayload, props.wcPayload])
 
   const buttonClickHandler = (state: 'p2p' | 'walletconnect') => {
-    if (state === 'p2p' && !!props.p2pPayload) {
-      props.p2pPayload.then(async (payload) => {
-        const serializer = new Serializer()
-        const codeQR = await serializer.serialize(payload)
-        setQrData(codeQR)
-      })
-    } else if (state === 'walletconnect' && !!props.wcPayload) {
-      props.wcPayload
-        .then((payload) => {
-          setQrData(payload.uri)
-        })
-        .catch((error) => console.error(error.message))
-    }
+    state === 'p2p' ? setQrData(props.p2pPayload) : setQrData(props.wcPayload)
     setUiState(state)
   }
 
   return (
     <>
-      {uiState() === 'selection' && (
+      {uiState === 'selection' && (
         <div>
-          <span class="pair-other-info">Select QR Type</span>
+          <span className="pair-other-info">Select QR Type</span>
           <br />
-          {hasBeacon() && (
-            <button
-              class="wallets-button"
-              onClick={() => {
-                buttonClickHandler('p2p')
-              }}
-            >
+          {hasBeacon && (
+            <button className="wallets-button" onClick={() => buttonClickHandler('p2p')}>
               Beacon
             </button>
           )}
-          {hasWalletConnect() && (
-            <button
-              class="wallets-button"
-              onClick={() => {
-                buttonClickHandler('walletconnect')
-              }}
-            >
+          {hasWalletConnect && (
+            <button className="wallets-button" onClick={() => buttonClickHandler('walletconnect')}>
               WalletConnect
             </button>
           )}
         </div>
       )}
-      {uiState() !== 'selection' && !!qrData() && (
+      {uiState !== 'selection' && qrData && (
         <QR
-          isWalletConnect={uiState() === 'walletconnect'}
+          isWalletConnect={uiState === 'walletconnect'}
           isMobile={true}
           walletName={'AirGap'}
-          code={qrData()}
+          code={qrData}
           onClickLearnMore={props.onClickLearnMore}
         />
       )}
@@ -84,5 +52,4 @@ const PairOther: Component<PairOtherProps> = (props: PairOtherProps) => {
   )
 }
 
-export { styles }
 export default PairOther
diff --git a/packages/beacon-ui/src/components/pair-other/styles.css b/packages/beacon-ui/src/components/pair-other/styles.css
deleted file mode 100644
index c488692ce..000000000
--- a/packages/beacon-ui/src/components/pair-other/styles.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.pair-other-info {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: #b5b8be;
-}
diff --git a/packages/beacon-ui/src/components/qr/index.tsx b/packages/beacon-ui/src/components/qr/index.tsx
index 6422e0ce4..6ff85caf4 100644
--- a/packages/beacon-ui/src/components/qr/index.tsx
+++ b/packages/beacon-ui/src/components/qr/index.tsx
@@ -1,7 +1,7 @@
-import { Component, createEffect, createSignal } from 'solid-js'
+import React, { useState, useEffect } from 'react'
 import { getTzip10Link } from '../../utils/get-tzip10-link'
 import { getQrData } from '../../utils/qr'
-import styles from './styles.css'
+import { Grid2 } from '@mui/material'
 
 const COPY_RESET_TIMEOUT = 3000
 
@@ -14,58 +14,50 @@ interface QRProps {
   onClickQrCode?: () => void
 }
 
-const QR: Component<QRProps> = (props: QRProps) => {
-  const [copied, setCopied] = createSignal<boolean>(false)
+const QR: React.FC<QRProps> = (props: QRProps) => {
+  const [copied, setCopied] = useState<boolean>(false)
+  const [qrSVG, setQrSVG] = useState<string>('')
 
-  const div = document.createElement('div')
-  div.classList.add('qr-svg-wrapper')
-
-  createEffect(() => {
-    // TODO: We shouldn't do this here, that should be handled on a higher level
+  useEffect(() => {
     const payload = props.code.startsWith('wc:')
       ? props.code
       : getTzip10Link('tezos://', props.code)
 
-    const qrSVG = props.isMobile ? getQrData(payload, 300, 300) : getQrData(payload, 160, 160)
-    div.innerHTML = qrSVG
-  })
+    const svg = props.isMobile ? getQrData(payload, 300, 300) : getQrData(payload, 160, 160)
+    setQrSVG(svg)
+  }, [props.code, props.isMobile])
 
-  async function handleCopyClipboard() {
+  const handleCopyClipboard = async () => {
     if (props.onClickQrCode) {
       props.onClickQrCode()
     }
-    navigator.clipboard
-      .writeText(props.code)
-      .then(() => {
-        if (!copied()) {
-          setCopied(true)
-          setTimeout(() => {
-            setCopied(false)
-          }, COPY_RESET_TIMEOUT)
-        }
-      })
-      .catch((error) => {
-        console.error('Error copying text: ', error)
-      })
+    try {
+      await navigator.clipboard.writeText(props.code)
+      if (!copied) {
+        setCopied(true)
+        setTimeout(() => {
+          setCopied(false)
+        }, COPY_RESET_TIMEOUT)
+      }
+    } catch (error) {
+      console.error('Error copying text: ', error)
+    }
   }
 
   return (
-    <div
-      class="qr-wrapper"
-      style={
-        props.isMobile
-          ? {
-              'flex-direction': 'column',
-              'align-items': 'center',
-              'justify-content': 'center',
-              height: '340px',
-              'text-align': 'center',
-              border: 'none'
-            }
-          : {}
-      }
+    <Grid2
+      container
+      justifyContent={'center'}
+      alignItems={'center'}
+      flexDirection={'column'}
+      width={'100%'}
+      sx={{
+        borderStyle: 'solid',
+        borderWidth: 'thin',
+        borderColor: 'black'
+      }}
     >
-      <div class="qr-left">
+      <Grid2 container justifyContent={'center'} alignItems={'center'} flexDirection={'column'}>
         {!props.isMobile && <h3>Or scan to connect</h3>}
         {!props.isMobile && (
           <span>{`Open ${props.walletName} Wallet on your mobile phone and scan.`}</span>
@@ -75,51 +67,55 @@ const QR: Component<QRProps> = (props: QRProps) => {
             {`Scan QR code with a ${
               props.isWalletConnect ? 'WalletConnect' : 'Beacon'
             }-compatible wallet.`}
+            {props.onClickLearnMore && <span onClick={props.onClickLearnMore}>Learn more</span>}
           </span>
         )}
-      </div>
-      <div
-        class="qr-right"
-        style={props.isMobile ? { 'background-color': 'transparent' } : {}}
-        onClick={handleCopyClipboard}
+
+        {!props.isMobile && props.onClickLearnMore && (
+          <span onClick={props.onClickLearnMore}>Learn more</span>
+        )}
+      </Grid2>
+      <Grid2 container onClick={handleCopyClipboard}>
+        <div style={{ cursor: 'pointer' }} dangerouslySetInnerHTML={{ __html: qrSVG }} />
+      </Grid2>
+      <Grid2
+        container
+        alignItems={'baseline'}
+        gap={'5px'}
+        sx={copied ? undefined : { cursor: 'pointer' }}
       >
-        {div}
-        {copied() && (
-          <div class="qr-copy-wrapper">
+        {copied ? (
+          <>
             <svg
               fill="currentColor"
-              stroke-width="0"
+              strokeWidth="0"
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 512 512"
               height="1em"
               width="1em"
-              style="overflow: visible;"
             >
               <path d="M243.8 339.8c-10.9 10.9-28.7 10.9-39.6 0l-64-64c-10.9-10.9-10.9-28.7 0-39.6 10.9-10.9 28.7-10.9 39.6 0l44.2 44.2 108.2-108.2c10.9-10.9 28.7-10.9 39.6 0 10.9 10.9 10.9 28.7 0 39.6l-128 128zM512 256c0 141.4-114.6 256-256 256S0 397.4 0 256 114.6 0 256 0s256 114.6 256 256zM256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48z"></path>
             </svg>
             <p>Copied!</p>
-          </div>
-        )}
-        {!copied() && (
-          <div class="qr-copy-wrapper">
+          </>
+        ) : (
+          <>
             <svg
               fill="currentColor"
-              stroke-width="0"
+              strokeWidth="0"
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 512 512"
               height="1em"
               width="1em"
-              style="overflow: visible;"
             >
               <path d="M502.6 70.63 441.35 9.38C435.4 3.371 427.2 0 418.7 0H255.1c-35.35 0-64 28.66-64 64l.02 256c.88 35.4 29.58 64 64.88 64h192c35.2 0 64-28.8 64-64V93.25c0-8.48-3.4-16.62-9.4-22.62zM464 320c0 8.836-7.164 16-16 16H255.1c-8.838 0-16-7.164-16-16V64.13c0-8.836 7.164-16 16-16h128L384 96c0 17.67 14.33 32 32 32h47.1v192zM272 448c0 8.836-7.164 16-16 16H63.1c-8.838 0-16-7.164-16-16l.88-255.9c0-8.836 7.164-16 16-16H160V128H63.99c-35.35 0-64 28.65-64 64L0 448c.002 35.3 28.66 64 64 64h192c35.2 0 64-28.8 64-64v-32h-47.1l-.9 32z"></path>
             </svg>
             <p>Copy to clipboard</p>
-          </div>
+          </>
         )}
-      </div>
-    </div>
+      </Grid2>
+    </Grid2>
   )
 }
 
-export { styles }
 export default QR
diff --git a/packages/beacon-ui/src/components/qr/styles.css b/packages/beacon-ui/src/components/qr/styles.css
deleted file mode 100644
index 2e4801d2b..000000000
--- a/packages/beacon-ui/src/components/qr/styles.css
+++ /dev/null
@@ -1,130 +0,0 @@
-.qr-wrapper {
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  gap: 0.5em;
-  border: 1px solid #aaaaaa42;
-  border-radius: 10px;
-  padding: 30px;
-  height: 200px;
-}
-
-.qr-left {
-  display: flex;
-  flex-direction: column;
-  max-width: 16em;
-  height: 100%;
-}
-
-.qr-left h3 {
-  color: #334155;
-  margin: 0px;
-  margin-bottom: 0.4em;
-  font-size: 1em;
-}
-
-.theme__dark .qr-left h3 {
-  color: white;
-}
-
-.theme__dark .qr-left span {
-  color: #aeaeae;
-}
-
-.theme__dark .qr-copy-wrapper p {
-  color: #aeaeae;
-}
-
-.qr-left span {
-  font-size: 0.8em;
-  font-weight: 300;
-  color: #7c828b;
-  line-height: 1.35em;
-  margin: 0px;
-}
-
-.qr-more-info {
-  font-size: 0.95em !important;
-  text-decoration: underline;
-  margin-left: 6px !important;
-  cursor: pointer;
-}
-
-.qr-right {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  border-radius: 6px;
-  transition: all ease 0.2s;
-  cursor: pointer;
-}
-
-.theme__dark .qr-right:hover {
-  background-color: rgba(238, 238, 238, 0.492);
-}
-
-.qr-right:hover {
-  background-color: rgb(238, 238, 238);
-}
-
-.qr-copy-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 0.6em;
-  color: #7c828b;
-  margin-bottom: 8px;
-  margin-top: 18px;
-}
-
-.qr-copy-wrapper svg {
-  font-size: 1em;
-}
-
-.qr-copy-wrapper p {
-  font-size: 0.8em;
-  margin: 0px;
-}
-
-.qr-svg-wrapper {
-  background-color: white;
-  border-radius: 10px;
-}
-
-.qr-svg-wrapper svg rect {
-  fill: transparent !important;
-}
-
-@media only screen and (max-width: 800px) {
-  .qr-wrapper {
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 340px;
-  }
-
-  .qr-left {
-    margin: 0.6em 0px;
-  }
-
-  .qr-left h3 {
-    font-size: 1em;
-    line-height: 1em;
-  }
-
-  .qr-left p {
-    font-size: 0.75em;
-    text-align: center;
-  }
-
-  .qr-left > div {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .qr-more-info {
-    font-size: 0.75em;
-  }
-}
diff --git a/packages/beacon-ui/src/components/toast/index.tsx b/packages/beacon-ui/src/components/toast/index.tsx
index f2b55048a..51820ae29 100644
--- a/packages/beacon-ui/src/components/toast/index.tsx
+++ b/packages/beacon-ui/src/components/toast/index.tsx
@@ -1,163 +1,179 @@
-import { Component, For, createEffect, createSignal } from 'solid-js'
-import { CloseIcon } from '../icons'
-import Loader from '../loader'
-import { isMobileOS } from '../../utils/platform'
+import React, { useState, useEffect } from "react";
+import { CloseIcon } from "../icons";
+import Loader from "../loader";
+import { isMobileOS } from "../../utils/platform";
 
 function parseWallet(
   inputString: string,
   walletInfo: {
-    deeplink?: string
-    icon?: string
-    name: string
-    type?: string
+    deeplink?: string;
+    icon?: string;
+    name: string;
+    type?: string;
   }
 ) {
-  const regex = /({{\s*wallet\s*}})/g
-  const parts = inputString.split(regex)
+  const regex = /({{\s*wallet\s*}})/g;
+  const parts = inputString.split(regex);
 
-  return parts.map((part) => {
+  return parts.map((part, index) => {
     if (part.match(regex)) {
       return (
-        <>
-          <img src={walletInfo.icon}></img>
+        <React.Fragment key={index}>
+          <img src={walletInfo.icon} alt={`${walletInfo.name} icon`} />
           <h3>{walletInfo.name}</h3>
-        </>
-      )
+        </React.Fragment>
+      );
     } else {
-      return <p class="toast-label">{part}</p>
+      return (
+        <p key={index} className="toast-label">
+          {part}
+        </p>
+      );
     }
-  })
+  });
 }
 
 export interface ToastProps {
-  label: string
-  open: boolean
-  onClickClose: () => void
-  actions?: { text: string; isBold?: boolean; actionText?: string; actionCallback?: () => void }[]
+  label: string;
+  open: boolean;
+  onClickClose: () => void;
+  actions?: {
+    text: string;
+    isBold?: boolean;
+    actionText?: string;
+    actionCallback?: () => void;
+  }[];
   walletInfo?: {
-    deeplink?: string
-    icon?: string
-    name: string
-    type?: string
-  }
-  openWalletAction?: () => void
+    deeplink?: string;
+    icon?: string;
+    name: string;
+    type?: string;
+  };
+  openWalletAction?: () => void;
 }
 
-const [showMoreInfo, setShowMoreInfo] = createSignal<boolean>(true)
-
-const Toast: Component<ToastProps> = (props: ToastProps) => {
-  const hasWalletObject = props.label.includes('{{wallet}}') && props.walletInfo
-  const isRequestSentToast = props.label.includes('Request sent to')
-
-  const offset = { x: isMobileOS(window) ? 12 : window.innerWidth - 460, y: 12 }
-  const [divPosition, setDivPosition] = createSignal(offset)
-  const [isDragging, setIsDragging] = createSignal(false)
+const Toast: React.FC<ToastProps> = (props: ToastProps) => {
+  const [showMoreInfo, setShowMoreInfo] = useState<boolean>(true);
+  const [divPosition, setDivPosition] = useState<{ x: number; y: number }>({
+    x: isMobileOS(window) ? 12 : window.innerWidth - 460,
+    y: 12,
+  });
+  const [isDragging, setIsDragging] = useState<boolean>(false);
+  const offset = { x: 0, y: 0 };
+
+  const hasWalletObject =
+    props.label.includes("{{wallet}}") && props.walletInfo;
+  const isRequestSentToast = props.label.includes("Request sent to");
+
+  useEffect(() => {
+    if (isRequestSentToast) {
+      setShowMoreInfo(false);
+      setTimeout(() => {
+        setShowMoreInfo(true);
+      }, 3000);
+    }
+  }, [isRequestSentToast]);
 
-  const onMouseDownHandler = (event: MouseEvent) => {
-    event.preventDefault() // prevents inner text highlighting
-    const target = event.target as HTMLElement
+  const onMouseDownHandler = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.preventDefault(); // prevents inner text highlighting
+    const target = event.target as HTMLElement;
 
-    if (target.className !== 'toast-header' && target.parentElement?.className !== 'toast-header') {
-      return
+    if (
+      target.className !== "toast-header" &&
+      target.parentElement?.className !== "toast-header"
+    ) {
+      return;
     }
 
-    const boundinRect = target.getBoundingClientRect()
-    offset.x = event.clientX - boundinRect.x
-    offset.y = event.clientY - boundinRect.y
-    setIsDragging(true)
-  }
+    const boundingRect = target.getBoundingClientRect();
+    offset.x = event.clientX - boundingRect.x;
+    offset.y = event.clientY - boundingRect.y;
+    setIsDragging(true);
+  };
 
   const onMouseMoveHandler = (event: MouseEvent) => {
-    if (isDragging() && event.buttons === 1) {
-      const newX = Math.min(Math.max(event.clientX - offset.x, 0), window.innerWidth - 460)
-      const newY = Math.min(Math.max(event.clientY - offset.y, 0), window.innerHeight - 12)
+    if (isDragging && event.buttons === 1) {
+      const newX = Math.min(
+        Math.max(event.clientX - offset.x, 0),
+        window.innerWidth - 460
+      );
+      const newY = Math.min(
+        Math.max(event.clientY - offset.y, 0),
+        window.innerHeight - 12
+      );
 
       setDivPosition({
         x: newX,
-        y: newY
-      })
+        y: newY,
+      });
     }
-  }
+  };
 
   const onMouseUpHandler = () => {
-    setIsDragging(false)
-  }
-
-  const onClickHandler = () => {
-    setIsDragging(false)
-  }
+    setIsDragging(false);
+  };
 
-  // when the mouse is out of the div boundaries but it is still pressed, keep moving the toast
-  createEffect(() => {
-    if (isDragging()) {
-      window.addEventListener('mousemove', onMouseMoveHandler)
-      window.addEventListener('mouseup', onMouseUpHandler)
+  useEffect(() => {
+    if (isDragging) {
+      window.addEventListener("mousemove", onMouseMoveHandler);
+      window.addEventListener("mouseup", onMouseUpHandler);
     } else {
-      window.removeEventListener('mousemove', onMouseMoveHandler)
-      window.removeEventListener('mouseup', onMouseUpHandler)
+      window.removeEventListener("mousemove", onMouseMoveHandler);
+      window.removeEventListener("mouseup", onMouseUpHandler);
     }
-  })
 
-  if (isRequestSentToast) {
-    setShowMoreInfo(false)
-    setTimeout(() => {
-      setShowMoreInfo(true)
-    }, 3000)
-  }
+    return () => {
+      window.removeEventListener("mousemove", onMouseMoveHandler);
+      window.removeEventListener("mouseup", onMouseUpHandler);
+    };
+  }, [isDragging]);
 
   return (
     <div
-      style={{ left: `${divPosition().x}px`, top: `${divPosition().y}px` }}
-      class={props.open ? 'toast-wrapper-show' : 'toast-wrapper-hide'}
+      style={{ left: `${divPosition.x}px`, top: `${divPosition.y}px` }}
+      className={props.open ? "toast-wrapper-show" : "toast-wrapper-hide"}
       onMouseDown={onMouseDownHandler}
-      onClick={onClickHandler}
-      onDblClick={onClickHandler}
     >
-      <div class="toast-header">
+      <div className="toast-header">
         <Loader />
-        {hasWalletObject && props.walletInfo && <>{parseWallet(props.label, props.walletInfo)}</>}
-        {!hasWalletObject && <p class="toast-label">props.label</p>}
+        {hasWalletObject && props.walletInfo && (
+          <>{parseWallet(props.label, props.walletInfo)}</>
+        )}
+        {!hasWalletObject && <p className="toast-label">{props.label}</p>}
         {!isMobileOS(window) && props.openWalletAction && (
-          <div
-            class="toast-action-button"
-            onClick={() => {
-              if (props && props.openWalletAction) {
-                props?.openWalletAction()
-              }
-            }}
-          >
+          <div className="toast-action-button" onClick={props.openWalletAction}>
             Open Wallet
           </div>
         )}
-        <div class="toast-button-icon" onClick={props.onClickClose}>
+        <div className="toast-button-icon" onClick={props.onClickClose}>
           <CloseIcon />
         </div>
       </div>
-      {props.actions && showMoreInfo() && (
-        <div class="toast-body">
-          <For each={props.actions}>
-            {(action) => (
-              <div class="toast-action-wrapper">
-                <p class={`toast-action-label ${action.isBold ? 'toast-action-bold' : ''}`}>
-                  {action.text}
-                </p>
-                {action.actionText && (
-                  <div
-                    class="toast-action-button"
-                    onClick={() => {
-                      if (action.actionCallback) action.actionCallback()
-                    }}
-                  >
-                    {action.actionText}
-                  </div>
-                )}
-              </div>
-            )}
-          </For>
+      {props.actions && showMoreInfo && (
+        <div className="toast-body">
+          {props.actions.map((action, index) => (
+            <div key={index} className="toast-action-wrapper">
+              <p
+                className={`toast-action-label ${
+                  action.isBold ? "toast-action-bold" : ""
+                }`}
+              >
+                {action.text}
+              </p>
+              {action.actionText && (
+                <div
+                  className="toast-action-button"
+                  onClick={action.actionCallback}
+                >
+                  {action.actionText}
+                </div>
+              )}
+            </div>
+          ))}
         </div>
       )}
     </div>
-  )
-}
+  );
+};
 
-export default Toast
+export default Toast;
diff --git a/packages/beacon-ui/src/components/toast/styles.css b/packages/beacon-ui/src/components/toast/styles.css
deleted file mode 100644
index 41a90ff1f..000000000
--- a/packages/beacon-ui/src/components/toast/styles.css
+++ /dev/null
@@ -1,125 +0,0 @@
-.toast-wrapper-show {
-  max-width: 460px;
-  overflow: hidden;
-  background-color: white;
-  position: fixed;
-  top: 12px;
-  right: 12px;
-  border-radius: 6px;
-  transition: all ease 0.3s;
-  transform: translateY(0px) scale(1);
-  z-index: 1000000;
-  -webkit-box-shadow: 0px 4px 11px -4px rgba(0, 0, 0, 0.45);
-  -moz-box-shadow: 0px 4px 11px -4px rgba(0, 0, 0, 0.45);
-  box-shadow: 0px 4px 11px -4px rgba(0, 0, 0, 0.45);
-}
-
-.toast-wrapper-hide {
-  max-width: 460px;
-  overflow: hidden;
-  background-color: white;
-  position: fixed;
-  top: 12px;
-  right: 12px;
-  border-radius: 6px;
-  transition: all ease 0.3s;
-  transform: translateY(-150px) scale(0.2);
-  z-index: 1000000;
-  -webkit-box-shadow: 0px 4px 11px -4px rgba(0, 0, 0, 0.45);
-  -moz-box-shadow: 0px 4px 11px -4px rgba(0, 0, 0, 0.45);
-  box-shadow: 0px 4px 11px -4px rgba(0, 0, 0, 0.45);
-}
-
-.toast-header {
-  cursor: move;
-  padding: 0px 0.6em 0px 1.2em;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  overflow: hidden;
-  position: relative;
-}
-
-.toast-header img {
-  width: 24px;
-}
-
-.toast-header h3 {
-  font-weight: bold;
-  color: #334155;
-  font-size: 0.8em;
-  margin-right: auto;
-}
-
-.toast-label {
-  margin: 1em 0em 1em 0em;
-  color: #334155;
-  font-size: 0.9em;
-}
-
-.toast-button-icon {
-  width: 24px;
-  height: 24px;
-  padding: 2px;
-  border-radius: 100%;
-  border: 1px solid #cbd5e1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  fill: #64748b;
-  transition: all ease 0.2s;
-  margin-left: auto;
-}
-
-.toast-button-icon:hover {
-  background-color: #475569;
-  border: 1px solid #475569;
-  fill: #e2e8f0;
-}
-
-.toast-body {
-  padding: 0.6em 1.2em;
-}
-
-.toast-action-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.toast-action-label {
-  margin: 0.8em 0em;
-  font-size: 0.8em;
-  color: #64748b;
-}
-
-.toast-action-bold {
-  font-weight: bold;
-  color: #334155;
-}
-
-.toast-action-button {
-  cursor: pointer;
-  font-size: 0.8em;
-  font-weight: 600;
-  color: #3880ff;
-  transition: all ease 0.2s;
-  border-radius: 6px;
-  padding: 0.4em 0.8em;
-}
-
-.toast-action-button:hover {
-  background-color: #e4eeff;
-  transition: all ease 0.2s;
-}
-
-@media only screen and (max-width: 800px) {
-  .toast-wrapper-show {
-    width: calc(100% - 24px);
-  }
-
-  .toast-wrapper-hide {
-    width: calc(100% - 24px);
-  }
-}
diff --git a/packages/beacon-ui/src/components/top-wallets/index.tsx b/packages/beacon-ui/src/components/top-wallets/index.tsx
index 974f69418..c8d86289c 100644
--- a/packages/beacon-ui/src/components/top-wallets/index.tsx
+++ b/packages/beacon-ui/src/components/top-wallets/index.tsx
@@ -1,8 +1,9 @@
-import { Component, For } from 'solid-js'
+import React from 'react'
 import { MergedWallet } from '../../utils/wallets'
 import Wallet from '../wallet'
-import styles from './styles.css'
+
 import { StorageKey } from '@airgap/beacon-types'
+import { Grid2 } from '@mui/material'
 
 interface TopWalletsProps {
   wallets: MergedWallet[]
@@ -13,69 +14,62 @@ interface TopWalletsProps {
   isMobile: boolean
 }
 
-const TopWallets: Component<TopWalletsProps> = (props: TopWalletsProps) => {
+const TopWallets: React.FC<TopWalletsProps> = (props: TopWalletsProps) => {
   const enableBugReport = localStorage ? localStorage.getItem(StorageKey.ENABLE_METRICS) : 'false'
 
   return (
-    <div class="top-wallets-wrapper">
-      <div class="top-wallets-info">
-        <h3>Connect Wallet</h3>
-        {enableBugReport === 'true' && (
-          <span>
-            Do you wish to report a bug?{' '}
-            <span class="top-wallets-learn-more" onClick={() => props.onClickLearnMore()}>
-              Click here
-            </span>
-          </span>
-        )}
-        {enableBugReport !== 'true' && (
-          <span>
-            If you don't have a wallet, you can select a provider and create one now.{' '}
-            <span class="top-wallets-learn-more" onClick={() => props.onClickLearnMore()}>
-              Learn more
-            </span>
+    <Grid2 container justifyContent={'center'} alignItems={'center'} flexDirection={'column'}>
+      <h3>Connect Wallet</h3>
+      {enableBugReport === 'true' ? (
+        <span>
+          Do you wish to report a bug?{' '}
+          <span
+            style={{ color: 'blue', textDecoration: 'underline', cursor: 'pointer' }}
+            onClick={props.onClickLearnMore}
+          >
+            Click here
           </span>
-        )}
-      </div>
-      <div class="top-wallets-wallets-main">
-        <For each={props.wallets}>
-          {(wallet) => (
-            <Wallet
-              disabled={props.disabled}
-              mobile={props.isMobile}
-              name={wallet.name}
-              description={wallet.descriptions.join(' & ')}
-              image={wallet.image}
-              onClick={() => props.onClickWallet(wallet.id)}
-              tags={wallet.tags}
-            />
-          )}
-        </For>
+        </span>
+      ) : (
+        <span>
+          If you don't have a wallet, you can select a provider and create one now.{' '}
+          <span onClick={props.onClickLearnMore}>Learn more</span>
+        </span>
+      )}
+      <Grid2
+        container
+        justifyContent={'center'}
+        alignItems={'center'}
+        rowSpacing={1}
+        gap={0}
+        columnSpacing={1}
+      >
+        {props.wallets.map((wallet) => (
+          <Wallet
+            key={wallet.id}
+            disabled={props.disabled}
+            name={wallet.name}
+            description={wallet.descriptions.join(' & ')}
+            image={wallet.image}
+            onClick={() => props.onClickWallet(wallet.id)}
+          />
+        ))}
         {props.otherWallets && (
-          <div
-            class="top-wallets-other-wallets"
-            onClick={() => {
-              if (props.otherWallets) props.otherWallets.onClick()
-            }}
-          >
-            <div class="top-wallets-other-wallets-left">
+          <Grid2 container onClick={props.otherWallets.onClick}>
+            <Grid2 container>
               <h3>Other Wallets</h3>
               <p>See other wallets you can use to connect</p>
-            </div>
-            <div class="top-wallets-other-wallets-right">
-              <img src={props.otherWallets.images[0]} />
-              <img
-                class="top-wallets-other-wallets-center-wallet"
-                src={props.otherWallets.images[1]}
-              />
-              <img src={props.otherWallets.images[2]} />
-            </div>
-          </div>
+            </Grid2>
+            <Grid2 container>
+              <img src={props.otherWallets.images[0]} alt="Other Wallet 1" />
+              <img src={props.otherWallets.images[1]} alt="Other Wallet 2" />
+              <img src={props.otherWallets.images[2]} alt="Other Wallet 3" />
+            </Grid2>
+          </Grid2>
         )}
-      </div>
-    </div>
+      </Grid2>
+    </Grid2>
   )
 }
 
-export { styles }
 export default TopWallets
diff --git a/packages/beacon-ui/src/components/top-wallets/styles.css b/packages/beacon-ui/src/components/top-wallets/styles.css
deleted file mode 100644
index bb9f796f0..000000000
--- a/packages/beacon-ui/src/components/top-wallets/styles.css
+++ /dev/null
@@ -1,141 +0,0 @@
-.top-wallets-wrapper {
-  margin-bottom: 1.8em;
-}
-
-.top-wallets-info {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.theme__dark .top-wallets-info h3 {
-  color: white;
-}
-
-.theme__dark .top-wallets-info span {
-  color: #b5b8be;
-}
-
-.theme__dark .top-wallets-other-wallets-left h3 {
-  color: white;
-}
-
-.top-wallets-info h3 {
-  text-align: center;
-  color: #334155;
-  margin: 0px;
-  font-size: 0.938rem;
-}
-
-.top-wallets-info span {
-  text-align: center;
-  max-width: 300px;
-  font-size: 0.8em;
-  font-weight: 300;
-  color: #7c828b;
-  line-height: 1.35em;
-  margin: 6px 0px 12px 0px;
-}
-
-.top-wallets-learn-more {
-  text-decoration: underline;
-  cursor: pointer;
-  font-size: 0.95em !important;
-}
-
-.top-wallets-wallets-main {
-  margin-top: 1em;
-  grid-template-columns: repeat(2, 1fr);
-  display: grid;
-  gap: 1em;
-}
-
-.top-wallets-other-wallets {
-  display: flex;
-  gap: 1.25em;
-  justify-content: space-between;
-  border-radius: 12px;
-  padding: 1.25em;
-  cursor: pointer;
-  transition: all ease 0.2s;
-
-  -webkit-box-shadow: 0px 0px 12px -4px rgb(0 0 0 / 30%);
-  -moz-box-shadow: 0px 0px 12px -4px rgb(0 0 0 / 30%);
-  box-shadow: 0px 0px 12px -4px rgb(0 0 0 / 30%);
-}
-
-.top-wallets-other-wallets-left {
-  max-width: 148px;
-}
-
-.top-wallets-other-wallets-left h3 {
-  color: #334155;
-  margin: 0px;
-  font-size: 1em;
-}
-
-.top-wallets-other-wallets-left p {
-  max-width: 400px;
-  font-size: 0.85em;
-  font-weight: 300;
-  color: #94a3b8;
-  line-height: 1.35em;
-  margin: 0px;
-  font-size: 0.75em;
-}
-
-.top-wallets-other-wallets-right {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.top-wallets-other-wallets-right img {
-  border-radius: 8px;
-  width: 2.4em;
-  height: 2.4em;
-  -webkit-box-shadow: 0px 0px 12px -4px rgb(0 0 0 / 30%);
-  -moz-box-shadow: 0px 0px 12px -4px rgb(0 0 0 / 30%);
-  box-shadow: 0px 0px 12px -4px rgb(0 0 0 / 30%);
-}
-
-.top-wallets-other-wallets-center-wallet {
-  transform: perspective(500px) translateZ(100px);
-}
-
-@media only screen and (max-width: 800px) {
-  .top-wallets-info h3 {
-    font-size: 1em;
-  }
-
-  .top-wallets-info p {
-    font-size: 0.75em;
-  }
-
-  .top-wallets-other-wallets {
-    flex-direction: column;
-    text-align: center;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .top-wallets-other-wallets-left {
-    order: 1;
-  }
-
-  .top-wallets-other-wallets-left h3 {
-    font-size: 0.85em;
-  }
-
-  .top-wallets-other-wallets-left p {
-    font-size: 0.65em;
-  }
-}
-
-@media only screen and (max-width: 400px) {
-  .top-wallets-other-wallets-right {
-    max-width: 50px;
-    transform: scale(0.8);
-  }
-}
diff --git a/packages/beacon-ui/src/components/wallet/index.tsx b/packages/beacon-ui/src/components/wallet/index.tsx
index 9324e8b00..2441129fb 100644
--- a/packages/beacon-ui/src/components/wallet/index.tsx
+++ b/packages/beacon-ui/src/components/wallet/index.tsx
@@ -1,5 +1,5 @@
-import { Component, For } from 'solid-js'
-import styles from './styles.css'
+import { Button, Grid2 } from '@mui/material'
+import React from 'react'
 
 interface WalletProps {
   name: string
@@ -12,37 +12,31 @@ interface WalletProps {
   disabled?: boolean
 }
 
-const Wallet: Component<WalletProps> = (props: WalletProps) => {
+const Wallet: React.FC<WalletProps> = (props: WalletProps) => {
   return (
-    <div class={props.disabled ? 'wallet-disabled' : ''}>
-      {!props.small && (
-        <div
-          class={`wallet-main ${props.mobile ? 'wallet-main-mobile' : ''}`}
-          onClick={props.onClick}
-        >
-          <div class={`wallet-main-left ${props.mobile ? 'wallet-main-left-mobile' : ''}`}>
-            <h3>{props.name}</h3>
-            {props.description && <p>{props.description}</p>}
-            {props.tags && props.tags.length > 0 && (
-              <div class="wallet-main-tags">
-                <For each={props.tags}>{(tag) => <span class="wallet-main-tag">{tag}</span>}</For>
-              </div>
+    <Grid2 size={props.small ? undefined : 6} alignSelf={'baseline'} padding={'5px'}>
+      <Button
+        variant="outlined"
+        onClick={props.onClick}
+        style={props.small ? undefined : { minHeight: '80px', maxHeight: '80px' }}
+      >
+        {!props.small && (
+          <Grid2 container>
+            <h3 style={{ margin: 0 }}>{props.name}</h3>
+            {props.description && (
+              <p style={{ fontSize: '10px', margin: 0 }}>{props.description}</p>
             )}
-          </div>
-          <div class="wallet-main-right">
-            <img src={props.image} />
-          </div>
-        </div>
-      )}
-      {props.small && (
-        <div class="wallet-small" onClick={props.onClick}>
-          <img src={props.image} />
-          <h3>{props.name}</h3>
-        </div>
-      )}
-    </div>
+          </Grid2>
+        )}
+        <img
+          src={props.image}
+          alt={`${props.name} logo`}
+          width={props.small ? 25 : 50}
+          height={props.small ? 25 : 50}
+        />
+      </Button>
+    </Grid2>
   )
 }
 
-export { styles }
 export default Wallet
diff --git a/packages/beacon-ui/src/components/wallet/styles.css b/packages/beacon-ui/src/components/wallet/styles.css
deleted file mode 100644
index 1cf994007..000000000
--- a/packages/beacon-ui/src/components/wallet/styles.css
+++ /dev/null
@@ -1,166 +0,0 @@
-.wallet-main {
-  display: flex;
-  gap: 1.25em;
-  justify-content: space-between;
-  border-radius: 12px;
-  padding: 15px;
-  cursor: pointer;
-  transition: all ease 0.2s;
-
-  -webkit-box-shadow: 0px 0px 12px -4px rgb(0 0 0 / 30%);
-  -moz-box-shadow: 0px 0px 12px -4px rgb(0 0 0 / 30%);
-  box-shadow: 0px 0px 12px -4px rgb(0 0 0 / 30%);
-}
-
-.wallet-disabled {
-  opacity: 0.5;
-}
-
-.wallet-main:hover {
-  transform: scale(1.01);
-}
-
-.wallet-main:active {
-  transform: scale(0.99);
-}
-
-.wallet-main-left {
-  max-width: 148px;
-  flex: 1;
-}
-
-.theme__dark .wallet-main-left h3 {
-  color: white;
-}
-
-.theme__dark .top-wallets-info p {
-  color: #b5b8be;
-}
-
-.theme__dark .wallet-main-right {
-  -webkit-box-shadow: 0px 0px 12px -4px rgb(0 0 0 / 63%);
-  -moz-box-shadow: 0px 0px 12px -4px rgb(0 0 0 / 63%);
-  box-shadow: 0px 0px 12px -4px rgb(0 0 0 / 63%);
-}
-
-.theme__dark .wallet-small img {
-  -webkit-box-shadow: 0px 0px 12px -4px rgb(0 0 0 / 63%);
-  -moz-box-shadow: 0px 0px 12px -4px rgb(0 0 0 / 63%);
-  box-shadow: 0px 0px 12px -4px rgb(0 0 0 / 63%);
-}
-
-.theme__dark .wallet-small h3 {
-  color: white;
-}
-
-.wallet-main-left h3 {
-  color: #1c1e21;
-  margin: 0px;
-  font-size: 1em;
-}
-
-.wallet-main-left p {
-  max-width: 400px;
-  font-weight: 300;
-  color: #7c828b;
-  line-height: 1.35em;
-  margin: 0px;
-  font-size: 0.65em;
-}
-
-.wallet-main-right {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 8px;
-  overflow: hidden;
-  -webkit-box-shadow: 0px 0px 12px -4px rgb(0 0 0 / 30%);
-  -moz-box-shadow: 0px 0px 12px -4px rgb(0 0 0 / 30%);
-  box-shadow: 0px 0px 12px -4px rgb(0 0 0 / 30%);
-}
-
-.wallet-main-right img {
-  width: 3.2em;
-  height: 3.2em;
-}
-
-.wallet-main-tags {
-  display: flex;
-  gap: 6px;
-}
-
-.wallet-main-tag {
-  color: #3880ff;
-  margin: 0px;
-  font-size: 0.75em;
-  font-weight: 600;
-  margin-top: 6px;
-  text-transform: uppercase;
-}
-
-.wallet-small {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  gap: 0.5em;
-}
-
-.wallet-small img {
-  padding: 0.4em;
-  border-radius: 10px;
-  width: 2.5em;
-  height: 2.5em;
-  cursor: pointer;
-  transition: all ease 0.2s;
-
-  -webkit-box-shadow: 0px 0px 12px -4px rgb(0 0 0 / 30%);
-  -moz-box-shadow: 0px 0px 12px -4px rgb(0 0 0 / 30%);
-  box-shadow: 0px 0px 12px -4px rgb(0 0 0 / 30%);
-}
-
-.wallet-small img:hover {
-  transform: scale(1.01);
-}
-
-.wallet-small img:active {
-  transform: scale(0.99);
-}
-
-.wallet-small h3 {
-  color: #334155;
-  margin: 0px;
-  font-size: 0.8em;
-  text-align: center;
-}
-
-.wallet-main-mobile {
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 1em;
-}
-
-.wallet-main-left-mobile {
-  order: 1;
-}
-
-.wallet-main-left-mobile h3 {
-  font-size: 0.9em;
-  text-align: center;
-}
-
-.wallet-main-left-mobile p {
-  font-size: 0.65em;
-  text-align: center;
-}
-
-@media only screen and (max-width: 800px) {
-  .wallet-main {
-    padding: 0.65em 15px;
-  }
-
-  .wallet-main-mobile {
-    padding: 1.25em;
-  }
-}
diff --git a/packages/beacon-ui/src/components/wallets/index.tsx b/packages/beacon-ui/src/components/wallets/index.tsx
index 3045798dd..d1d517ce4 100644
--- a/packages/beacon-ui/src/components/wallets/index.tsx
+++ b/packages/beacon-ui/src/components/wallets/index.tsx
@@ -1,7 +1,7 @@
-import { Component, For } from 'solid-js'
+import React from 'react'
 import { MergedWallet } from '../../utils/wallets'
 import Wallet from '../wallet'
-import styles from './styles.css'
+import { Button, Grid2 } from '@mui/material'
 
 interface WalletProps {
   wallets: MergedWallet[]
@@ -12,33 +12,33 @@ interface WalletProps {
   disabled?: boolean
 }
 
-const Wallets: Component<WalletProps> = (props: WalletProps) => {
+const Wallets: React.FC<WalletProps> = (props: WalletProps) => {
   return (
-    <div class="wallets-list-main-wrapper">
-      <div class="wallets-list-wrapper">
-        <For each={props.wallets}>
-          {(wallet) => (
-            <Wallet
-              disabled={props.disabled}
-              name={wallet.name}
-              description={wallet.descriptions.join(' & ')}
-              image={wallet.image}
-              small={props.small}
-              onClick={() => {
-                if (props.onClickWallet) {
-                  props.onClickWallet(wallet.id)
-                }
-              }}
-            />
-          )}
-        </For>
-      </div>
-      <button class="wallets-button" onClick={() => props.onClickOther()}>
+    <Grid2
+      container
+      rowSpacing={1}
+      columnSpacing={{ xs: 1, sm: 2, md: 3 }}
+      justifyContent={'center'}
+      padding={'10px'}
+    >
+      {props.wallets.map((wallet) => (
+        <Wallet
+          key={wallet.id}
+          disabled={props.disabled}
+          name={wallet.name}
+          description={wallet.descriptions.join(' & ')}
+          image={wallet.image}
+          small={props.small}
+          onClick={() => {
+            props.onClickWallet(wallet.id)
+          }}
+        />
+      ))}
+      <Button onClick={props.onClickOther} variant='contained' size='large'>
         {props.isMobile ? 'Pair wallet on another device' : 'Show QR code'}
-      </button>
-    </div>
+      </Button>
+    </Grid2>
   )
 }
 
-export { styles }
 export default Wallets
diff --git a/packages/beacon-ui/src/components/wallets/styles.css b/packages/beacon-ui/src/components/wallets/styles.css
deleted file mode 100644
index 564708587..000000000
--- a/packages/beacon-ui/src/components/wallets/styles.css
+++ /dev/null
@@ -1,55 +0,0 @@
-.wallets-button {
-  border-radius: 6px;
-  background-color: transparent;
-  border: 1px solid #3880ff;
-  color: #3880ff;
-  width: 100%;
-  padding: 12px 0px;
-  margin-bottom: 1.8em;
-  transition: all ease 0.2s;
-  cursor: pointer;
-  font-size: 0.9em;
-}
-
-.wallets-button:hover {
-  color: white;
-  background-color: #3880ff;
-}
-
-.wallets-list-main-wrapper {
-  position: relative;
-}
-
-.wallets-list-wrapper {
-  display: grid;
-  overflow-y: auto;
-  grid-template-columns: repeat(4, 1fr);
-  padding: 1.8em 0px;
-  gap: 1.2em 0em;
-  max-height: 180px;
-}
-
-@media only screen and (max-width: 800px) {
-  .wallets-list-wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    max-height: 300px;
-    padding: 1.6em 0.6em;
-    margin-top: 0px;
-  }
-
-  .wallets-list-main-wrapper::before {
-    position: absolute;
-    top: 0px;
-    content: '';
-    left: -24px;
-    width: calc(100% + 48px);
-    background: radial-gradient(
-      circle,
-      rgba(171, 171, 171, 0.7329525560224089) 0%,
-      rgba(193, 193, 193, 0.1279105392156863) 100%
-    );
-    height: 1px;
-  }
-}
diff --git a/packages/beacon-ui/src/index.ts b/packages/beacon-ui/src/index.ts
index 0c0d230b5..f2ff4199b 100644
--- a/packages/beacon-ui/src/index.ts
+++ b/packages/beacon-ui/src/index.ts
@@ -1,5 +1,5 @@
-export { openAlert, closeAlerts } from './ui/alert'
-export type { AlertButton, AlertConfig } from './ui/alert'
+export { openAlert, closeAlert, closeAlerts } from './ui/alert'
+export type { AlertButton, AlertConfig } from './ui/alert/common'
 
 export {
   Pairing,
diff --git a/packages/beacon-ui/src/ui/alert/common.ts b/packages/beacon-ui/src/ui/alert/common.ts
new file mode 100644
index 000000000..b84d9acd1
--- /dev/null
+++ b/packages/beacon-ui/src/ui/alert/common.ts
@@ -0,0 +1,43 @@
+import { NetworkType, AnalyticsInterface } from '@airgap/beacon-types'
+import { MergedWallet } from '../../utils/wallets'
+
+export interface AlertButton {
+  text: string
+  style?: 'solid' | 'outline'
+  actionCallback?(): Promise<void>
+}
+
+export interface AlertConfig {
+  title: string
+  body?: string
+  data?: string
+  timer?: number
+  buttons?: AlertButton[]
+  pairingPayload?: {
+    p2pSyncCode: string
+    postmessageSyncCode: string
+    walletConnectSyncCode: string
+    networkType: NetworkType
+  }
+  closeButtonCallback?: () => void
+  disclaimerText?: string
+  analytics?: AnalyticsInterface
+  featuredWallets?: string[]
+}
+
+export interface AlertProps {
+  open: boolean
+  showMore?: boolean
+  extraContent?: any
+  loading?: boolean
+  onCloseClick: () => void
+  onClickShowMore?: () => void
+  onBackClick?: () => void
+}
+
+export interface PairOtherProps {
+  walletList: MergedWallet[]
+  p2pPayload: string
+  wcPayload: string
+  onClickLearnMore: () => void
+}
diff --git a/packages/beacon-ui/src/ui/alert/components/alert-content/index.tsx b/packages/beacon-ui/src/ui/alert/components/alert-content/index.tsx
new file mode 100644
index 000000000..ea7626a22
--- /dev/null
+++ b/packages/beacon-ui/src/ui/alert/components/alert-content/index.tsx
@@ -0,0 +1,8 @@
+import { AlertConfig } from '../../common'
+import PairingAlert from '../pairing-alert'
+
+const AlertContent = (props: AlertConfig) => {
+  return <PairingAlert {...props} />
+}
+
+export default AlertContent
diff --git a/packages/beacon-ui/src/ui/alert/components/info-alert/index.tsx b/packages/beacon-ui/src/ui/alert/components/info-alert/index.tsx
new file mode 100644
index 000000000..579b6f944
--- /dev/null
+++ b/packages/beacon-ui/src/ui/alert/components/info-alert/index.tsx
@@ -0,0 +1,50 @@
+import Info from '../../../../components/info'
+
+const InfoAlert = ({ title, body, data }: any) => {
+  return (
+    <Info
+      bigIcon
+      icon={
+        <svg
+          fill="currentColor"
+          strokeWidth="0"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+          height="1em"
+          width="1em"
+          style={{ overflow: 'hidden' }}
+          color="#494949"
+        >
+          <path
+            d="M85.57 446.25h340.86a32 32 0 0 0 28.17-47.17L284.18 82.58c-12.09-22.44-44.27-22.44-56.36 0L57.4 399.08a32 32 0 0 0 28.17 47.17Z"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="32px"
+          ></path>
+          <path
+            d="m250.26 195.39 5.74 122 5.73-121.95a5.74 5.74 0 0 0-5.79-6h0a5.74 5.74 0 0 0-5.68 5.95Z"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="32px"
+          ></path>
+          <path d="M256 397.25a20 20 0 1 1 20-20 20 20 0 0 1-20 20Z"></path>
+        </svg>
+      }
+      title={title || 'No title'}
+      description={body || 'No description'}
+      data={data}
+      buttons={[
+        {
+          label: 'Close',
+          type: 'primary',
+          onClick: () => console.log('todo')
+        }
+      ]}
+    />
+  )
+}
+export default InfoAlert
diff --git a/packages/beacon-ui/src/ui/alert/components/pairing-alert/index.tsx b/packages/beacon-ui/src/ui/alert/components/pairing-alert/index.tsx
new file mode 100644
index 000000000..b9ef2575e
--- /dev/null
+++ b/packages/beacon-ui/src/ui/alert/components/pairing-alert/index.tsx
@@ -0,0 +1,441 @@
+import Alert from 'src/components/alert'
+import useConnect from '../../hooks/useConnect'
+import BugReportForm from 'src/components/bug-report-form'
+import Info from 'src/components/info'
+import PairOther from 'src/components/pair-other/pair-other'
+import TopWallets from 'src/components/top-wallets'
+import Wallets from 'src/components/wallets'
+import { isIOS } from 'src/utils/platform'
+import { StorageKey } from '@airgap/beacon-types'
+import QR from 'src/components/qr'
+import useWallets from '../../hooks/useWallets'
+import { AlertConfig } from '../../common'
+import { Grid2 } from '@mui/material'
+
+const PairingAlert: React.FC<React.PropsWithChildren<AlertConfig>> = (props) => {
+  const {
+    walletConnectSyncCode: wcPayload,
+    p2pSyncCode: p2pPayload,
+    postmessageSyncCode: postPayload
+  } = props.pairingPayload!
+  const wallets = useWallets(props.pairingPayload?.networkType, props.featuredWallets)
+  const [
+    wallet,
+    isMobile,
+    isLoading,
+    qrCode,
+    state,
+    displayQRExtra,
+    showMoreContent,
+    isWCWorking,
+    handleClickWallet,
+    handleNewTab,
+    handleDeepLinking,
+    handleClickOther,
+    handleClickConnectExtension,
+    handleClickInstallExtension,
+    handleClickOpenDesktopApp,
+    handleClickDownloadDesktopApp,
+    handleUpdateState,
+    handleUpdateQRCode,
+    handleShowMoreContent
+  ] = useConnect(
+    wcPayload,
+    p2pPayload,
+    postPayload,
+    wallets,
+    props.closeButtonCallback ?? (() => {})
+  )
+  const isOnline = navigator.onLine
+  const walletList = Array.from(wallets.values())
+  const areMetricsEnabled = localStorage
+    ? localStorage.getItem(StorageKey.ENABLE_METRICS) === 'true'
+    : false
+
+  const generateWCError = (title: string) => {
+    const errorMessage = localStorage ? localStorage.getItem(StorageKey.WC_INIT_ERROR) : undefined
+    const description: any = (
+      <>
+        <h3 style={{ color: '#FF4136', margin: '0.6px' }}>A network error occurred.</h3>
+        <h4>
+          This issue does not concern your wallet or dApp. If the problem persists, please report it
+          to the Beacon team{' '}
+          <span
+            style={{ textDecoration: 'underline', color: '#007bff', cursor: 'pointer' }}
+            onClick={() => handleUpdateState('help')}
+          >
+            here
+          </span>
+        </h4>
+        {errorMessage && <span>{errorMessage}</span>}
+      </>
+    )
+    return <Info title={title} description={description} border />
+  }
+
+  const QRCode = ({ isMobile }: any) => {
+    localStorage.setItem(
+      StorageKey.LAST_SELECTED_WALLET,
+      JSON.stringify({
+        key: wallet?.key,
+        name: wallet?.name,
+        type: 'mobile',
+        icon: wallet?.image
+      })
+    )
+    const isConnected =
+      !wallet?.supportedInteractionStandards?.includes('wallet_connect') || isWCWorking
+    return (
+      <>
+        {isConnected ? (
+          <QR
+            isWalletConnect={
+              wallet?.supportedInteractionStandards?.includes('wallet_connect') || false
+            }
+            isMobile={isMobile}
+            walletName={wallet?.name || 'AirGap'}
+            code={qrCode ?? ''}
+            onClickLearnMore={() => {}}
+            onClickQrCode={() => {}}
+          />
+        ) : (
+          generateWCError(`Connect with ${wallet?.name} Mobile`)
+        )}
+      </>
+    )
+  }
+
+  return (
+    <Alert
+      loading={isLoading}
+      onCloseClick={props.closeButtonCallback ?? (() => {})}
+      open={true}
+      showMore={showMoreContent}
+      extraContent={
+        state !== 'top-wallets' || isMobile ? undefined : (
+          <Wallets
+            small
+            wallets={walletList.slice(-(walletList.length - 4))}
+            isMobile={isMobile}
+            onClickWallet={(id) => handleClickWallet(id, props)}
+            onClickOther={handleClickOther}
+          />
+        )
+      }
+      onClickShowMore={handleShowMoreContent}
+      onBackClick={
+        state === 'install' ||
+        state === 'qr' ||
+        (state === 'wallets' && isMobile) ||
+        state === 'help'
+          ? () => handleUpdateState('top-wallets')
+          : undefined
+      }
+    >
+      <Grid2 container>
+        {state === 'install' && (
+          <Grid2 container justifyContent={'center'} spacing={2}>
+            {isOnline && wallet?.types.includes('web') && (
+              <Info
+                border
+                title={`Connect with ${wallet?.name} Web`}
+                description={`(It will open the wallet in a new tab)`}
+                buttons={[
+                  {
+                    label: 'Use Browser',
+                    type: 'primary',
+                    onClick: () => handleNewTab(props, wallet)
+                  }
+                ]}
+              />
+            )}
+            {!isMobile && wallet?.types.includes('extension') && (
+              <Info
+                border
+                title={
+                  wallet.firefoxId
+                    ? `Connect with ${wallet?.name} Browser Extension`
+                    : `Install ${wallet?.name} Wallet`
+                }
+                description={
+                  wallet.firefoxId
+                    ? `Please connect below to use your ${wallet?.name} Wallet browser extension.`
+                    : `To connect your ${wallet?.name} Wallet, install the browser extension.`
+                }
+                buttons={
+                  wallet.firefoxId
+                    ? [
+                        {
+                          label: 'Use Extension',
+                          type: 'primary',
+                          onClick: () => handleClickConnectExtension()
+                        }
+                      ]
+                    : [
+                        {
+                          label: 'Install extension',
+                          type: 'primary',
+                          onClick: () => handleClickInstallExtension()
+                        }
+                      ]
+                }
+              />
+            )}
+            {!isMobile && wallet?.types.includes('desktop') && (
+              <Info
+                border
+                title={`Connect with ${wallet?.name} Desktop App`}
+                description={`If you don't have the desktop app installed, click below to download it.`}
+                buttons={[
+                  {
+                    label: 'Open desktop app',
+                    type: 'primary',
+                    onClick: () => handleClickOpenDesktopApp()
+                  },
+                  {
+                    label: 'Download desktop app',
+                    type: 'secondary',
+                    onClick: () => handleClickDownloadDesktopApp()
+                  }
+                ]}
+              />
+            )}
+            {!isMobile &&
+              (qrCode?.length ?? 0) &&
+              wallet?.types.includes('ios') &&
+              (wallet?.types.length as number) > 1 && <QRCode isMobile={false} />}
+            {!isMobile &&
+              (qrCode?.length ?? 0) &&
+              wallet?.types.includes('ios') &&
+              (wallet?.types.length as number) <= 1 && <QRCode isMobile={true} />}
+            {isMobile &&
+              wallet?.types.includes('ios') &&
+              (!wallet?.supportedInteractionStandards?.includes('wallet_connect') || isWCWorking ? (
+                <Info
+                  border
+                  title={`Connect with ${wallet?.name} Mobile`}
+                  description={''}
+                  buttons={[
+                    {
+                      label: 'Use App',
+                      type: 'primary',
+                      onClick: async () => {
+                        if (!wallet) {
+                          return
+                        }
+
+                        handleDeepLinking(
+                          wallet.supportedInteractionStandards?.includes('wallet_connect')
+                            ? wcPayload
+                            : p2pPayload
+                        )
+                      }
+                    }
+                  ]}
+                  downloadLink={
+                    wallet?.name.toLowerCase().includes('kukai') && isIOS(window)
+                      ? {
+                          label: 'Get Kukai Mobile >',
+                          url: 'https://ios.kukai.app'
+                        }
+                      : undefined
+                  }
+                  onShowQRCodeClick={async () => {
+                    const syncCode = wallet?.supportedInteractionStandards?.includes(
+                      'wallet_connect'
+                    )
+                      ? wcPayload
+                      : p2pPayload
+
+                    if (!syncCode.length || !wallet) {
+                      props.closeButtonCallback && props.closeButtonCallback()
+                      return
+                    }
+
+                    if (isMobile && wallet.types.includes('ios') && wallet.types.length === 1) {
+                      handleDeepLinking(syncCode)
+                    } else {
+                      handleUpdateQRCode(syncCode)
+                    }
+
+                    handleUpdateState('qr')
+                    // todo setDisplayQrExtra(true)
+                  }}
+                />
+              ) : (
+                generateWCError(`Connect with ${wallet?.name} Mobile`)
+              ))}
+          </Grid2>
+        )}
+        {state === 'qr' && (
+          <Grid2
+            container
+            style={{
+              opacity: 1,
+              height: 'unset',
+              overflow: 'unset',
+              transform: 'scale(1)',
+              transition: 'all ease 0.3s',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '0.9em'
+            }}
+          >
+            {!displayQRExtra ? (
+              <PairOther
+                walletList={walletList}
+                onClickLearnMore={() => {}}
+                p2pPayload={p2pPayload}
+                wcPayload={wcPayload}
+              ></PairOther>
+            ) : (
+              <QRCode isMobile={true} />
+            )}
+          </Grid2>
+        )}
+        <Grid2
+          container
+          style={
+            state === 'wallets'
+              ? {
+                  opacity: 1,
+                  height: 'unset',
+                  overflow: 'unset',
+                  transform: 'scale(1)',
+                  transition: 'all ease 0.3s'
+                }
+              : {
+                  opacity: 0,
+                  height: 0,
+                  overflow: 'hidden',
+                  transform: 'scale(1.1)',
+                  transition: 'all ease 0.3s'
+                }
+          }
+        >
+          <Wallets
+            wallets={walletList.slice(-(walletList.length - (isMobile ? 3 : 4)))}
+            isMobile={isMobile}
+            onClickWallet={(id) => handleClickWallet(id, props)}
+            onClickOther={handleClickOther}
+          />
+        </Grid2>
+        <Grid2
+          container
+          style={
+            state === 'help'
+              ? {
+                  opacity: 1,
+                  height: 'unset',
+                  overflow: 'unset',
+                  transform: 'scale(1)',
+                  transition: 'all ease 0.3s',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: '0.9em'
+                }
+              : {
+                  opacity: 0,
+                  height: 0,
+                  overflow: 'hidden',
+                  transform: 'scale(1.1)',
+                  transition: 'all ease 0.3s',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: '0.9em'
+                }
+          }
+        >
+          {areMetricsEnabled && (
+            <BugReportForm onSubmit={props.closeButtonCallback ?? (() => {})} />
+          )}
+          {!areMetricsEnabled && (
+            <>
+              <Info
+                iconBadge
+                icon={
+                  <svg
+                    fill="currentColor"
+                    stroke-width="0"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    height="1em"
+                    width="1em"
+                    style={{ overflow: 'visible' }}
+                    color="white"
+                  >
+                    <path d="M16 12h2v4h-2z"></path>
+                    <path d="M20 7V5c0-1.103-.897-2-2-2H5C3.346 3 2 4.346 2 6v12c0 2.201 1.794 3 3 3h15c1.103 0 2-.897 2-2V9c0-1.103-.897-2-2-2zM5 5h13v2H5a1.001 1.001 0 0 1 0-2zm15 14H5.012C4.55 18.988 4 18.805 4 18V8.815c.314.113.647.185 1 .185h15v10z"></path>
+                  </svg>
+                }
+                title="What is a wallet?"
+                description="Wallets let you send, receive, store and interact with digital assets. Your wallet can be used as an easy way to login, instead of having to remember a password."
+              />
+              <Info
+                iconBadge
+                icon={
+                  <svg
+                    fill="none"
+                    stroke-width="2"
+                    xmlns="http://www.w3.org/2000/svg"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    viewBox="0 0 24 24"
+                    height="1em"
+                    width="1em"
+                    style={{ overflow: 'visible' }}
+                    color="white"
+                  >
+                    <path stroke="none" d="M0 0h24v24H0z"></path>
+                    <rect width="16" height="16" x="4" y="4" rx="2"></rect>
+                    <path d="M9 12h6M12 9v6"></path>
+                  </svg>
+                }
+                title="Not sure where to start?"
+                description="If you are new to the Web3, we recommend that you start by creating a Kukai wallet. Kukai is a fast way of creating your first wallet using your preferred social account."
+              />
+            </>
+          )}
+        </Grid2>
+        <Grid2
+          container
+          style={
+            state !== 'install' && state !== 'qr' && state !== 'wallets' && state !== 'help'
+              ? {
+                  opacity: 1,
+                  height: 'unset',
+                  overflow: 'unset',
+                  transform: 'scale(1)',
+                  transition: 'all ease 0.3s'
+                }
+              : {
+                  opacity: 0,
+                  height: 0,
+                  overflow: 'hidden',
+                  transform: 'scale(1.1)',
+                  transition: 'all ease 0.3s'
+                }
+          }
+        >
+          <TopWallets
+            wallets={isMobile ? walletList.slice(0, 3) : walletList.slice(0, 4)}
+            isMobile={isMobile}
+            onClickWallet={(id) => handleClickWallet(id, props)}
+            onClickLearnMore={() => handleUpdateState('help')}
+            otherWallets={
+              isMobile
+                ? {
+                    images: [walletList[3].image, walletList[4].image, walletList[5].image],
+                    onClick: () => handleUpdateState('wallets')
+                  }
+                : undefined
+            }
+          />
+        </Grid2>
+      </Grid2>
+    </Alert>
+  )
+}
+
+export default PairingAlert
diff --git a/packages/beacon-ui/src/ui/alert/hooks/useConnect.tsx b/packages/beacon-ui/src/ui/alert/hooks/useConnect.tsx
new file mode 100644
index 000000000..6fa4988d4
--- /dev/null
+++ b/packages/beacon-ui/src/ui/alert/hooks/useConnect.tsx
@@ -0,0 +1,340 @@
+import { Logger, windowRef } from '@airgap/beacon-core'
+import { StorageKey, ExtensionMessage, ExtensionMessageTarget } from '@airgap/beacon-types'
+import { useCallback, useState } from 'react'
+import { getTzip10Link } from 'src/utils/get-tzip10-link'
+import { isTwBrowser, isAndroid, isMobileOS, isIOS } from 'src/utils/platform'
+import { MergedWallet, OSLink } from 'src/utils/wallets'
+import getDefaultLogo from '../getDefautlLogo'
+import { parseUri } from '@walletconnect/utils'
+import { AlertConfig } from '../common'
+import useIsMobile from './useIsMobile'
+
+const logger = new Logger('useConnect')
+
+const useConnect = (
+  wcPayload: string,
+  p2pPayload: string,
+  postPayload: string,
+  wallets: Map<string, MergedWallet>,
+  onCloseHandler: Function
+) => {
+  const [wallet, setWallet] = useState<MergedWallet>()
+  const [isLoading, setIsLoading] = useState(false)
+  const [qrCode, setQRCode] = useState<string>()
+  const [state, setState] = useState<'top-wallets' | 'wallets' | 'install' | 'help' | 'qr'>(
+    'top-wallets'
+  )
+  const [displayQRExtra, setDisplayQRExtra] = useState(false)
+  const [showMoreContent, setShowMoreContent] = useState(false)
+  const [isWCWorking, setIsWCWorking] = useState(true)
+  const isMobile = isMobileOS(window) || useIsMobile()
+
+  const setInstallState = (wallet?: MergedWallet) => {
+    if (
+      !wallet ||
+      (wallet.types.length <= 1 &&
+        !wallet.types.includes('ios') &&
+        !wallet.types.includes('desktop')) ||
+      (isMobileOS(window) && wallet.types.length === 1 && wallet.types.includes('desktop'))
+    ) {
+      return
+    }
+
+    setState('install')
+  }
+
+  const handleClickWallet = async (id: string, config: AlertConfig) => {
+    setIsLoading(true)
+    setShowMoreContent(false)
+    const wallet = wallets.get(id)
+    setWallet(wallet)
+
+    localStorage.setItem(
+      StorageKey.LAST_SELECTED_WALLET,
+      JSON.stringify({
+        key: wallet?.key,
+        type: 'mobile',
+        icon: wallet?.image
+      })
+    )
+
+    if (
+      (wallet?.types.includes('web') && wallet?.types.length === 1) ||
+      (isAndroid(window) && wallet?.name.toLowerCase().includes('kukai'))
+    ) {
+      handleNewTab(config, wallet)
+      return
+    }
+
+    if (wallet && wallet.supportedInteractionStandards?.includes('wallet_connect')) {
+      const isValid = !!parseUri(wcPayload).symKey
+      setIsWCWorking(isValid)
+
+      if (!isValid && wallet?.name.toLowerCase().includes('kukai')) {
+        setQRCode('error')
+        setInstallState(wallet)
+        setIsLoading(false)
+        return
+      }
+
+      if (isValid) {
+        if (isMobile && wallet.types.includes('ios') && wallet.types.length === 1) {
+          handleDeepLinking(wcPayload)
+        } else {
+          setQRCode(wcPayload)
+          setInstallState(wallet)
+        }
+      }
+      setIsLoading(false)
+    } else if (wallet?.types.includes('ios') && isMobile) {
+      setQRCode('')
+
+      if (config.pairingPayload) {
+        const link = getTzip10Link(
+          isIOS(window) && wallet.deepLink
+            ? wallet.deepLink
+            : isAndroid(window)
+            ? wallet.links[OSLink.IOS]
+            : 'tezos://',
+          p2pPayload
+        )
+
+        updateSelectedWalletWithURL(link)
+
+        if (isAndroid(window)) window.open(link, '_blank', 'noopener')
+        else if (isIOS(window)) {
+          const a = document.createElement('a')
+          a.setAttribute('href', link)
+          a.setAttribute('rel', 'noopener')
+          a.dispatchEvent(
+            new MouseEvent('click', { view: window, bubbles: true, cancelable: true })
+          )
+        }
+      }
+
+      setIsLoading(false)
+    } else {
+      setIsLoading(false)
+      setInstallState(wallet)
+      config.pairingPayload && setQRCode(p2pPayload)
+    }
+  }
+
+  const updateSelectedWalletWithURL = useCallback((url: string) => {
+    let wallet = JSON.parse(localStorage.getItem(StorageKey.LAST_SELECTED_WALLET) ?? '{}')
+
+    if (!wallet.key) {
+      return
+    }
+
+    wallet = {
+      ...wallet,
+      url
+    }
+
+    localStorage.setItem(StorageKey.LAST_SELECTED_WALLET, JSON.stringify(wallet))
+  }, [])
+
+  const handleNewTab = useCallback(async (config: AlertConfig, wallet?: MergedWallet) => {
+    if (!wallet) {
+      return
+    }
+
+    if (!config.pairingPayload) {
+      return
+    }
+
+    setIsLoading(true)
+    // Noopener feature parameter cannot be used, because Chrome will open
+    // about:blank#blocked instead and it will no longer work.
+    const newTab = window.open('', '_blank')
+
+    if (newTab) {
+      newTab.opener = null
+    }
+
+    let link = ''
+
+    if (
+      wallet.supportedInteractionStandards?.includes('wallet_connect') &&
+      !wallet.name.toLowerCase().includes('kukai')
+    ) {
+      const isValid = !!parseUri(wcPayload).symKey
+      setIsWCWorking(isValid)
+
+      if (!isValid) {
+        return
+      }
+
+      link = `${wallet.links[OSLink.WEB]}/wc?uri=${encodeURIComponent(wcPayload)}`
+    } else {
+      link = getTzip10Link(wallet.links[OSLink.WEB], p2pPayload)
+    }
+
+    if (newTab) {
+      newTab.location.href = link
+    } else {
+      window.open(link, '_blank', 'noopener')
+    }
+
+    localStorage.setItem(
+      StorageKey.LAST_SELECTED_WALLET,
+      JSON.stringify({
+        key: wallet.key,
+        name: wallet.name,
+        type: 'web',
+        icon: wallet?.image
+      })
+    )
+  }, [])
+
+  const handleDeepLinking = useCallback(async (uri: string) => {
+    localStorage.setItem(
+      StorageKey.LAST_SELECTED_WALLET,
+      JSON.stringify({
+        key: wallet?.key,
+        type: 'mobile',
+        icon: wallet?.image
+      })
+    )
+
+    if (!wallet?.links[OSLink.IOS].length) {
+      const syncCode = wallet?.supportedInteractionStandards?.includes('wallet_connect')
+        ? wcPayload
+        : p2pPayload
+
+      if (!syncCode.length) {
+        onCloseHandler()
+        return
+      }
+
+      setQRCode(syncCode)
+      setState('qr')
+      setDisplayQRExtra(true)
+
+      return
+    }
+
+    const link = `${wallet.links[OSLink.IOS]}wc?uri=${encodeURIComponent(uri)}`
+    updateSelectedWalletWithURL(`${wallet.links[OSLink.IOS]}wc?uri=`)
+    logger.log('DO DEEPLINK WITH ' + link)
+
+    if (isTwBrowser(window) && isAndroid(window)) {
+      window.location.href = `${uri}`
+    }
+    if (isAndroid(window)) {
+      window.open(link, '_blank', 'noopener')
+    } else {
+      const a = document.createElement('a')
+      a.setAttribute('href', link)
+      a.setAttribute('rel', 'noopener')
+      a.dispatchEvent(new MouseEvent('click', { view: window, bubbles: true, cancelable: true }))
+    }
+  }, [])
+
+  const handleClickOther = useCallback(() => {
+    localStorage.setItem(
+      StorageKey.LAST_SELECTED_WALLET,
+      JSON.stringify({
+        key: 'wallet',
+        name: 'wallet',
+        type: 'mobile',
+        icon: getDefaultLogo()
+      })
+    )
+    setState('qr')
+  }, [])
+
+  const handleClickConnectExtension = useCallback(async () => {
+    setShowMoreContent(false)
+    const message: ExtensionMessage<string> = {
+      target: ExtensionMessageTarget.EXTENSION,
+      payload: postPayload,
+      targetId: wallet?.id
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    windowRef.postMessage(message as any, windowRef.location.origin)
+
+    if (wallet?.firefoxId) {
+      const message: ExtensionMessage<string> = {
+        target: ExtensionMessageTarget.EXTENSION,
+        payload: postPayload,
+        targetId: wallet?.firefoxId
+      }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      windowRef.postMessage(message as any, windowRef.location.origin)
+    }
+
+    localStorage.setItem(
+      StorageKey.LAST_SELECTED_WALLET,
+      JSON.stringify({
+        key: wallet?.key,
+        name: wallet?.name,
+        type: 'extension',
+        icon: wallet?.image
+      })
+    )
+  }, [])
+
+  const handleClickInstallExtension = useCallback(() => {
+    setShowMoreContent(false)
+    window.open(wallet?.links[OSLink.EXTENSION] || '', '_blank', 'noopener')
+  }, [])
+
+  const handleClickOpenDesktopApp = useCallback(async () => {
+    setShowMoreContent(false)
+
+    if (p2pPayload) {
+      const link = getTzip10Link(wallet?.deepLink || '', p2pPayload)
+      window.open(link, '_blank', 'noopener')
+    }
+
+    localStorage.setItem(
+      StorageKey.LAST_SELECTED_WALLET,
+      JSON.stringify({
+        key: wallet?.key,
+        name: wallet?.name,
+        type: 'desktop',
+        icon: wallet?.image
+      })
+    )
+  }, [])
+
+  const handleClickDownloadDesktopApp = useCallback(() => {
+    setShowMoreContent(false)
+    window.open(wallet?.links[OSLink.DESKTOP] || '', '_blank', 'noopener')
+  }, [])
+
+  const handleUpdateState = useCallback(
+    (newState: 'top-wallets' | 'wallets' | 'install' | 'help' | 'qr') => setState(newState),
+    []
+  )
+
+  const handleUpdateQRCode = useCallback((uri: string) => setQRCode(uri), [])
+
+  const handleShowMoreContent = useCallback(() => setShowMoreContent((prev) => !prev), [])
+
+  return [
+    wallet,
+    isMobile,
+    isLoading,
+    qrCode,
+    state,
+    displayQRExtra,
+    showMoreContent,
+    isWCWorking,
+    handleClickWallet,
+    handleNewTab,
+    handleDeepLinking,
+    handleClickOther,
+    handleClickConnectExtension,
+    handleClickInstallExtension,
+    handleClickOpenDesktopApp,
+    handleClickDownloadDesktopApp,
+    handleUpdateState,
+    handleUpdateQRCode,
+    handleShowMoreContent
+  ] as const
+}
+
+export default useConnect
diff --git a/packages/beacon-ui/src/ui/alert/hooks/useIsMobile.tsx b/packages/beacon-ui/src/ui/alert/hooks/useIsMobile.tsx
new file mode 100644
index 000000000..e4d8e82ae
--- /dev/null
+++ b/packages/beacon-ui/src/ui/alert/hooks/useIsMobile.tsx
@@ -0,0 +1,22 @@
+import { useState, useEffect } from 'react'
+
+const useIsMobile = (breakpoint = 768) => {
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= breakpoint)
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= breakpoint)
+    }
+
+    window.addEventListener('resize', handleResize)
+
+    // Cleanup the event listener when the component unmounts
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [breakpoint])
+
+  return isMobile
+}
+
+export default useIsMobile
diff --git a/packages/beacon-ui/src/ui/alert/hooks/useWallets.tsx b/packages/beacon-ui/src/ui/alert/hooks/useWallets.tsx
new file mode 100644
index 000000000..232a9b669
--- /dev/null
+++ b/packages/beacon-ui/src/ui/alert/hooks/useWallets.tsx
@@ -0,0 +1,125 @@
+import { useCallback, useEffect, useState } from 'react'
+import { PostMessageTransport } from '@airgap/beacon-transport-postmessage'
+import {
+  arrangeTopWallets,
+  MergedWallet,
+  mergeWallets,
+  parseWallets,
+  Wallet
+} from 'src/utils/wallets'
+import { Extension, NetworkType } from '@airgap/beacon-types'
+import { desktopList, extensionList, iOSList, webList } from '../wallet-lists'
+import { windowRef } from '@airgap/beacon-core'
+
+const useWallets = (networkType?: NetworkType, featuredWallets?: string[]) => {
+  const [wallets, setWallets] = useState<MergedWallet[]>([])
+
+  useEffect(() => {
+    PostMessageTransport.getAvailableExtensions().then((extensions) =>
+      setWallets(createWallets(extensions))
+    )
+    const handler = async (event: any): Promise<void> => {
+      if (event.data === 'extensionsUpdated') {
+        setWallets(createWallets(await PostMessageTransport.getAvailableExtensions()))
+      }
+    }
+    windowRef.addEventListener('message', handler)
+    return () => {
+      windowRef.removeEventListener('message', handler)
+    }
+  }, [])
+
+  const createWallets = useCallback((availableExtensions: Extension[]) => {
+    const wallets: Wallet[] = [
+      ...desktopList
+        // This is used for a special case where desktop wallets have inApp browsers.
+        // In this case, the wallet will act like an extension. This means we have to remove
+        // the desktop app from the list to make the user experience better. One example of this
+        // is Infinity Wallet.
+        .filter(
+          (wallet) => !availableExtensions.some((extWallet) => wallet.name === extWallet.name)
+        )
+        .map((wallet) => {
+          return {
+            id: wallet.key,
+            key: wallet.key,
+            name: wallet.shortName,
+            image: wallet.logo,
+            description: 'Desktop App',
+            supportedInteractionStandards: wallet.supportedInteractionStandards,
+            type: 'desktop',
+            link: wallet.downloadLink,
+            deepLink: wallet.deepLink
+          }
+        }),
+      ...extensionList.map((wallet) => {
+        return {
+          id: wallet.id,
+          key: wallet.key,
+          name: wallet.shortName,
+          image: wallet.logo,
+          description: 'Browser Extension',
+          supportedInteractionStandards: wallet.supportedInteractionStandards,
+          type: 'extension',
+          link: wallet.link
+        }
+      }),
+      ...iOSList.map((wallet) => {
+        return {
+          id: wallet.key,
+          key: wallet.key,
+          name: wallet.shortName,
+          image: wallet.logo,
+          description: 'Mobile App',
+          supportedInteractionStandards: wallet.supportedInteractionStandards,
+          type: 'ios',
+          link: wallet.universalLink,
+          deepLink: wallet.deepLink
+        }
+      }),
+      ...webList.map((wallet) => {
+        const link = wallet.links[networkType ?? NetworkType.MAINNET]
+        return {
+          id: wallet.key,
+          key: wallet.key,
+          name: wallet.shortName,
+          image: wallet.logo,
+          description: 'Web App',
+          supportedInteractionStandards: wallet.supportedInteractionStandards,
+          type: 'web',
+          link: link ?? wallet.links.mainnet
+        }
+      }),
+      ...availableExtensions
+        .filter((newExt) => !extensionList.some((ext) => ext.id === newExt.id))
+        .map((wallet) => {
+          return {
+            id: wallet.id,
+            key: wallet.id,
+            name: wallet.shortName ?? wallet.name ?? '',
+            image: wallet.iconUrl ?? '',
+            description: 'Browser Extension',
+            type: 'extension',
+            link: (wallet as any).link ?? ''
+          }
+        })
+    ]
+
+    // Parse wallet names
+    const parsedWallets = parseWallets(wallets)
+
+    // Merge wallets by name
+    const mergedWallets = mergeWallets(parsedWallets)
+
+    // Default selection of featured wallets
+    const defaultWalletList = ['kukai', 'temple', 'plenty', 'umami']
+
+    // Sort wallets by top 4
+    const arrangedWallets = arrangeTopWallets(mergedWallets, featuredWallets ?? defaultWalletList)
+
+    return arrangedWallets
+  }, [])
+
+  return new Map(wallets.map((wallet) => [wallet.id, wallet]))
+}
+export default useWallets
diff --git a/packages/beacon-ui/src/ui/alert/index.tsx b/packages/beacon-ui/src/ui/alert/index.tsx
index 345bb3355..5daf442a7 100644
--- a/packages/beacon-ui/src/ui/alert/index.tsx
+++ b/packages/beacon-ui/src/ui/alert/index.tsx
@@ -1,1266 +1,38 @@
-import { createEffect, createSignal, onCleanup } from 'solid-js'
-import {
-  AnalyticsInterface,
-  ExtensionMessage,
-  ExtensionMessageTarget,
-  NetworkType,
-  P2PPairingRequest,
-  PostMessagePairingRequest,
-  StorageKey,
-  WalletConnectPairingRequest
-} from '@airgap/beacon-types'
-import { isServer, render } from 'solid-js/web'
-import { desktopList, extensionList, iOSList, webList } from './wallet-lists'
-
-import Alert from '../../components/alert'
-import TopWallets from '../../components/top-wallets'
-import Wallets from '../../components/wallets'
-import Info from '../../components/info'
-import QR from '../../components/qr'
-
-import * as alertStyles from '../../components/alert/styles.css'
-import * as topWalletsStyles from '../../components/top-wallets/styles.css'
-import * as walletsStyles from '../../components/wallets/styles.css'
-import * as walletStyles from '../../components/wallet/styles.css'
-import * as infoStyles from '../../components/info/styles.css'
-import * as qrStyles from '../../components/qr/styles.css'
-import * as loaderStyles from '../../components/loader/styles.css'
-import * as pairOtherStyles from '../../components/pair-other/styles.css'
-import * as bugReportFormStyles from '../../components/bug-report-form/styles.css'
-
-import { Logger, Serializer, windowRef } from '@airgap/beacon-core'
-import { PostMessageTransport } from '@airgap/beacon-transport-postmessage'
-import {
-  arrangeTopWallets,
-  MergedWallet,
-  mergeWallets,
-  OSLink,
-  parseWallets,
-  Wallet
-} from '../../utils/wallets'
-import { getTzip10Link } from '../../utils/get-tzip10-link'
-import { isAndroid, isIOS, isMobileOS, isTwBrowser } from '../../utils/platform'
-import { getColorMode } from '../../utils/colorMode'
-import PairOther from '../../components/pair-other/pair-other'
-import getDefaultLogo from './getDefautlLogo'
-import { parseUri } from '@walletconnect/utils'
-import BugReportForm from '../../components/bug-report-form'
-
-const logger = new Logger('Alert')
-
-// Interfaces
-export interface AlertButton {
-  text: string
-  style?: 'solid' | 'outline'
-  actionCallback?(): Promise<void>
+import { createRoot } from 'react-dom/client'
+import { useEffect, useState } from 'react'
+import { Subject } from '../../utils/subject'
+import { AlertConfig } from './common'
+import PairingAlert from './components/pairing-alert'
+
+let initDone: boolean = false
+const show$ = new Subject<boolean>()
+
+const createAlert = (config: AlertConfig) => {
+  const el = document.createElement('beacon-modal')
+  document.body.prepend(el)
+  setTimeout(() => createRoot(el).render(<AlertRoot {...config} />), 50)
+  initDone = true
 }
 
-export interface AlertConfig {
-  title: string
-  body?: string
-  data?: string
-  timer?: number
-  buttons?: AlertButton[]
-  pairingPayload?: {
-    p2pSyncCode: () => Promise<P2PPairingRequest>
-    postmessageSyncCode: () => Promise<PostMessagePairingRequest>
-    walletConnectSyncCode: () => Promise<WalletConnectPairingRequest>
-    networkType: NetworkType
-  }
-  closeButtonCallback?(): void
-  disclaimerText?: string
-  analytics?: AnalyticsInterface
-  featuredWallets?: string[]
+const openAlert = (config: AlertConfig) => {
+  !initDone && createAlert(config)
+  show$.next(true)
 }
 
-// State variables
-const [isOpen, setIsOpen] = createSignal<boolean>(false)
-const [isLoading, setIsLoading] = createSignal<boolean>(false)
-const [showMoreContent, setShowMoreContent] = createSignal<boolean>(false)
-const [codeQR, setCodeQR] = createSignal<string>('')
-const [walletList, setWalletList] = createSignal<MergedWallet[]>([])
-const [currentWallet, setCurrentWallet] = createSignal<MergedWallet | undefined>(undefined)
-const [previousInfo, setPreviousInfo] = createSignal<
-  'top-wallets' | 'wallets' | 'install' | 'help' | 'qr'
->('top-wallets')
-const [currentInfo, setCurrentInfo] = createSignal<
-  'top-wallets' | 'wallets' | 'install' | 'help' | 'qr'
->('top-wallets')
-const [analytics, setAnalytics] = createSignal<AnalyticsInterface | undefined>(undefined)
-const [displayQrExtra, setDisplayQrExtra] = createSignal<boolean>(false)
-const [pairingExpired, setPairingExpired] = createSignal(false)
-const [isWCWorking, setIsWCWorking] = createSignal(true)
-type VoidFunction = () => void
-let dispose: null | VoidFunction = null
-
-/**
- * Close an alert by ID
- *
- * @param id ID of alert
- */
-const closeAlert = (_: string): Promise<void> => {
-  return new Promise(async (resolve) => {
-    if (isServer) {
-      console.log('DO NOT RUN ON SERVER')
-      resolve()
-    }
-
-    if (dispose && isOpen()) {
-      setIsOpen(false)
-      setTimeout(() => {
-        if (dispose) dispose()
-        if (document.getElementById('beacon-alert-wrapper'))
-          (document.getElementById('beacon-alert-wrapper') as HTMLElement).remove()
-      }, 500)
-    }
-    resolve()
-  })
+const closeAlert = () => {
+  show$.next(false)
 }
 
-/**
- * Close all alerts
- */
-const closeAlerts = async (): Promise<void> => {
-  if (currentInfo() === 'help') {
-    console.log('setting status as pairing expired.')
-    setPairingExpired(true)
-    return
-  }
-  return new Promise(async (resolve) => {
-    if (isServer) {
-      console.log('DO NOT RUN ON SERVER')
-      resolve()
-    }
-
-    if (dispose && isOpen()) {
-      setIsOpen(false)
-      setTimeout(() => {
-        if (dispose) dispose()
-        if (document.getElementById('beacon-alert-wrapper'))
-          (document.getElementById('beacon-alert-wrapper') as HTMLElement).remove()
-      }, 500)
-    }
-    resolve()
-  })
+const closeAlerts = () => {
+  closeAlert()
 }
 
-/**
- * Show an alert
- *
- * @param alertConfig The configuration of the alert
- */
-// eslint-disable-next-line complexity
-const openAlert = async (config: AlertConfig): Promise<string> => {
-  setIsLoading(false)
-  const p2pPayload = config.pairingPayload?.p2pSyncCode()
-  const wcPayload = config.pairingPayload?.walletConnectSyncCode()
-  const isOnline = navigator.onLine
-  const areMetricsEnabled = localStorage
-    ? localStorage.getItem(StorageKey.ENABLE_METRICS) === 'true'
-    : false
-
-  setAnalytics(config.analytics)
-
-  if (isServer) {
-    console.log('DO NOT RUN ON SERVER')
-    return ''
-  }
-
-  if (!isOpen()) {
-    let availableExtensions = await PostMessageTransport.getAvailableExtensions()
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const extensionsUpdatedFn = async (event: any): Promise<void> => {
-      if (event.data === 'extensionsUpdated') {
-        availableExtensions = await PostMessageTransport.getAvailableExtensions()
-        setWalletList(createWalletList())
-      }
-    }
-
-    windowRef.addEventListener('message', extensionsUpdatedFn)
-
-    const setDefaultPayload = async () => {
-      if (config.pairingPayload) {
-        const serializer = new Serializer()
-        try {
-          const codeQR = await serializer.serialize(await p2pPayload)
-          setCodeQR(codeQR)
-        } catch (error: any) {
-          console.error('Cannot connect to network: ', error.message)
-        }
-      }
-    }
-
-    setCurrentInfo('top-wallets')
-    setCurrentWallet(undefined)
-
-    !config.title.toLowerCase().includes('error') &&
-      localStorage.removeItem(StorageKey.LAST_SELECTED_WALLET)
-
-    // Shadow root
-    const shadowRootEl = document.createElement('div')
-    if (document.getElementById('beacon-alert-wrapper')) {
-      ;(document.getElementById('beacon-alert-wrapper') as HTMLElement).remove()
-    }
-    shadowRootEl.setAttribute('id', 'beacon-alert-wrapper')
-    shadowRootEl.style.height = '0px'
-    const shadowRoot = shadowRootEl.attachShadow({ mode: 'open' })
-
-    // Alert styles
-    const style = document.createElement('style')
-    style.textContent = alertStyles.default
-    shadowRoot.appendChild(style)
-
-    // Top Wallets styles
-    const style2 = document.createElement('style')
-    style2.textContent = topWalletsStyles.default
-    shadowRoot.appendChild(style2)
-
-    // Wallets styles
-    const style3 = document.createElement('style')
-    style3.textContent = walletsStyles.default
-    shadowRoot.appendChild(style3)
-
-    // Wallet styles
-    const style4 = document.createElement('style')
-    style4.textContent = walletStyles.default
-    shadowRoot.appendChild(style4)
-
-    // Info styles
-    const style5 = document.createElement('style')
-    style5.textContent = infoStyles.default
-    shadowRoot.appendChild(style5)
-
-    // QR styles
-    const style6 = document.createElement('style')
-    style6.textContent = qrStyles.default
-    shadowRoot.appendChild(style6)
-
-    // Loader styles
-    const style7 = document.createElement('style')
-    style7.textContent = loaderStyles.default
-    shadowRoot.appendChild(style7)
-
-    // PairOther styles
-    const style8 = document.createElement('style')
-    style8.textContent = pairOtherStyles.default
-    shadowRoot.appendChild(style8)
-
-    // Bug report styles
-    const style9 = document.createElement('style')
-    style8.textContent = bugReportFormStyles.default
-    shadowRoot.appendChild(style9)
-
-    // Inject font styles
-    const styleFonts = document.createElement('style')
-    styleFonts.textContent =
-      "* { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;}"
-    shadowRoot.appendChild(styleFonts)
-
-    const createWalletList = () => {
-      const wallets: Wallet[] = [
-        ...desktopList
-          // This is used for a special case where desktop wallets have inApp browsers.
-          // In this case, the wallet will act like an extension. This means we have to remove
-          // the desktop app from the list to make the user experience better. One example of this
-          // is Infinity Wallet.
-          .filter(
-            (wallet) => !availableExtensions.some((extWallet) => wallet.name === extWallet.name)
-          )
-          .map((wallet) => {
-            return {
-              id: wallet.key,
-              key: wallet.key,
-              name: wallet.shortName,
-              image: wallet.logo,
-              description: 'Desktop App',
-              supportedInteractionStandards: wallet.supportedInteractionStandards,
-              type: 'desktop',
-              link: wallet.downloadLink,
-              deepLink: wallet.deepLink
-            }
-          }),
-        ...extensionList.map((wallet) => {
-          return {
-            id: wallet.id,
-            key: wallet.key,
-            name: wallet.shortName,
-            image: wallet.logo,
-            description: 'Browser Extension',
-            supportedInteractionStandards: wallet.supportedInteractionStandards,
-            type: 'extension',
-            link: wallet.link
-          }
-        }),
-        ...iOSList.map((wallet) => {
-          return {
-            id: wallet.key,
-            key: wallet.key,
-            name: wallet.shortName,
-            image: wallet.logo,
-            description: 'Mobile App',
-            supportedInteractionStandards: wallet.supportedInteractionStandards,
-            type: 'ios',
-            link: wallet.universalLink,
-            deepLink: wallet.deepLink
-          }
-        }),
-        ...webList.map((wallet) => {
-          const link = wallet.links[config.pairingPayload?.networkType ?? NetworkType.MAINNET]
-          return {
-            id: wallet.key,
-            key: wallet.key,
-            name: wallet.shortName,
-            image: wallet.logo,
-            description: 'Web App',
-            supportedInteractionStandards: wallet.supportedInteractionStandards,
-            type: 'web',
-            link: link ?? wallet.links.mainnet
-          }
-        }),
-        ...availableExtensions
-          .filter((newExt) => !extensionList.some((ext) => ext.id === newExt.id))
-          .map((wallet) => {
-            return {
-              id: wallet.id,
-              key: wallet.id,
-              name: wallet.shortName ?? wallet.name ?? '',
-              image: wallet.iconUrl ?? '',
-              description: 'Browser Extension',
-              type: 'extension',
-              link: (wallet as any).link ?? ''
-            }
-          })
-      ]
-
-      // Parse wallet names
-      const parsedWallets = parseWallets(wallets)
-
-      // Merge wallets by name
-      const mergedWallets = mergeWallets(parsedWallets)
-
-      // Default selection of featured wallets
-      const defaultWalletList = ['kukai', 'temple', 'plenty', 'umami']
-
-      // Sort wallets by top4
-      const arrangedWallets = arrangeTopWallets(
-        mergedWallets,
-        config.featuredWallets ?? defaultWalletList
-      )
-
-      return arrangedWallets
-    }
-
-    setWalletList(createWalletList())
-
-    const _isMobileOS = isMobileOS(window)
-    const [isMobile, setIsMobile] = createSignal(_isMobileOS)
-    const [windowWidth, setWindowWidth] = createSignal(window.innerWidth)
-
-    const AlertResize = () => {
-      const debounce = (fun: Function, delay: number) => {
-        let timerId: NodeJS.Timeout
-
-        return (...args: any[]) => {
-          clearTimeout(timerId)
-          timerId = setTimeout(() => fun(...args), delay)
-        }
-      }
-
-      const debouncedSetWindowWidth = debounce(setWindowWidth, 200)
-
-      const updateIsMobile = (isMobileWidth: boolean) => {
-        // to avoid unwanted side effects (because of the OR condition), I always reset the value without checking the previous state
-        setWalletList(createWalletList())
-        setIsMobile(isMobileWidth || _isMobileOS)
-      }
-
-      createEffect(() => {
-        updateIsMobile(windowWidth() <= 800)
-      })
-
-      // Update the windowWidth signal when the window resizes
-      createEffect(() => {
-        const handleResize = () => {
-          debouncedSetWindowWidth(window.innerWidth)
-        }
-
-        window.addEventListener('resize', handleResize)
-
-        // Unsubscribe from the event when the component unmounts
-        onCleanup(() => {
-          window.removeEventListener('resize', handleResize)
-        })
-      })
-
-      return <></>
-    }
-
-    const setInstallState = (wallet?: MergedWallet) => {
-      if (
-        !wallet ||
-        (wallet.types.length <= 1 &&
-          !wallet.types.includes('ios') &&
-          !wallet.types.includes('desktop')) ||
-        (_isMobileOS && wallet.types.length === 1 && wallet.types.includes('desktop'))
-      ) {
-        return
-      }
-
-      setCurrentInfo('install')
-    }
-
-    const handleClickShowMoreContent = () => {
-      analytics()?.track('click', 'ui', 'show more wallets')
-      setShowMoreContent(!showMoreContent())
-    }
-
-    const handleClickLearnMore = () => {
-      analytics()?.track('click', 'ui', 'learn more')
-      setPreviousInfo(currentInfo())
-      setCurrentInfo('help')
-      setShowMoreContent(false)
-    }
-
-    const handleClickQrCode = () => {
-      analytics()?.track('click', 'ui', 'copy QR code to clipboard')
-    }
-
-    const handleCloseAlert = () => {
-      closeAlert('')
-      windowRef.removeEventListener('message', extensionsUpdatedFn)
-      if (config.closeButtonCallback) config.closeButtonCallback()
-    }
-
-    const updateSelectedWalletWithURL = (url: string) => {
-      let wallet = JSON.parse(localStorage.getItem(StorageKey.LAST_SELECTED_WALLET) ?? '{}')
-
-      if (!wallet.key) {
-        return
-      }
-
-      wallet = {
-        ...wallet,
-        url
-      }
-
-      localStorage.setItem(StorageKey.LAST_SELECTED_WALLET, JSON.stringify(wallet))
-    }
-
-    const generateLink = async () => {
-      const uri = (await wcPayload)?.uri ?? ''
-
-      // check whether the uri contains a valid symmetric key or not
-      if (!parseUri(uri).symKey) {
-        setIsWCWorking(false)
-      }
-
-      return uri
-    }
-
-    const generateWCError = (title: string) => {
-      const errorMessage = localStorage ? localStorage.getItem(StorageKey.WC_INIT_ERROR) : undefined
-      const description: any = (
-        <>
-          <h3 style={{ color: '#FF4136', margin: '0.6px' }}>A network error occurred.</h3>
-          <h4>
-            This issue does not concern your wallet or dApp. If the problem persists, please report
-            it to the Beacon team{' '}
-            <span
-              style={{ 'text-decoration': 'underline', color: '#007bff', cursor: 'pointer' }}
-              onClick={() => setCurrentInfo('help')}
-            >
-              here
-            </span>
-          </h4>
-          {errorMessage && <span>{errorMessage}</span>}
-        </>
-      )
-      return <Info title={title} description={description} border />
-    }
-
-    const handleNewTab = async (config: AlertConfig, wallet?: MergedWallet) => {
-      if (!wallet) {
-        return
-      }
-
-      if (!config.pairingPayload) {
-        return
-      }
-
-      setIsLoading(true)
-      // Noopener feature parameter cannot be used, because Chrome will open
-      // about:blank#blocked instead and it will no longer work.
-      const newTab = window.open('', '_blank')
-
-      if (newTab) {
-        newTab.opener = null
-      }
-
-      let link = ''
-
-      if (
-        wallet.supportedInteractionStandards?.includes('wallet_connect') &&
-        !wallet.name.toLowerCase().includes('kukai')
-      ) {
-        const uri = await generateLink()
-
-        if (!uri) {
-          return
-        }
-
-        link = `${wallet.links[OSLink.WEB]}/wc?uri=${encodeURIComponent(uri)}`
-      } else {
-        const serializer = new Serializer()
-        const code = await serializer.serialize(await p2pPayload)
-        link = getTzip10Link(wallet.links[OSLink.WEB], code)
-      }
-
-      if (newTab) {
-        newTab.location.href = link
-      } else {
-        window.open(link, '_blank', 'noopener')
-      }
-
-      localStorage.setItem(
-        StorageKey.LAST_SELECTED_WALLET,
-        JSON.stringify({
-          key: wallet.key,
-          name: wallet.name,
-          type: 'web',
-          icon: currentWallet()?.image
-        })
-      )
-    }
-
-    const handleDeepLinking = async (wallet: MergedWallet, uri: string) => {
-      localStorage.setItem(
-        StorageKey.LAST_SELECTED_WALLET,
-        JSON.stringify({
-          key: wallet.key,
-          type: 'mobile',
-          icon: wallet.image
-        })
-      )
-
-      if (!wallet.links[OSLink.IOS].length) {
-        const syncCode = currentWallet()?.supportedInteractionStandards?.includes('wallet_connect')
-          ? (await wcPayload)?.uri ?? ''
-          : await new Serializer().serialize(await p2pPayload)
-
-        if (!syncCode.length) {
-          handleCloseAlert()
-          return
-        }
-
-        setCodeQR(syncCode)
-        setCurrentInfo('qr')
-        setDisplayQrExtra(true)
-
-        return
-      }
-
-      const link = `${wallet.links[OSLink.IOS]}wc?uri=${encodeURIComponent(uri)}`
-      updateSelectedWalletWithURL(`${wallet.links[OSLink.IOS]}wc?uri=`)
-      logger.log('DO DEEPLINK WITH ' + link)
-
-      if (isTwBrowser(window) && isAndroid(window)) {
-        window.location.href = `${uri}`
-      }
-      if (isAndroid(window)) {
-        window.open(link, '_blank', 'noopener')
-      } else {
-        const a = document.createElement('a')
-        a.setAttribute('href', link)
-        a.setAttribute('rel', 'noopener')
-        a.dispatchEvent(new MouseEvent('click', { view: window, bubbles: true, cancelable: true }))
-      }
-    }
-
-    const handleClickWallet = async (id: string) => {
-      setIsLoading(true)
-      setShowMoreContent(false)
-      const wallet = walletList().find((wallet) => wallet.id === id)
-      setCurrentWallet(wallet)
-
-      if (wallet?.key) {
-        analytics()?.track('click', 'ui', 'opened wallet', { key: wallet.key })
-      }
-
-      localStorage.setItem(
-        StorageKey.LAST_SELECTED_WALLET,
-        JSON.stringify({
-          key: wallet?.key,
-          type: 'mobile',
-          icon: currentWallet()?.image
-        })
-      )
-
-      if (
-        (wallet?.types.includes('web') && wallet?.types.length === 1) ||
-        (isAndroid(window) && wallet?.name.toLowerCase().includes('kukai'))
-      ) {
-        handleNewTab(config, wallet)
-        return
-      }
-
-      if (wallet && wallet.supportedInteractionStandards?.includes('wallet_connect')) {
-        const uri = await generateLink()
-
-        if (!uri && wallet?.name.toLowerCase().includes('kukai')) {
-          setCodeQR('error')
-          setInstallState(wallet)
-          setIsLoading(false)
-          return
-        }
-
-        if (uri) {
-          if (_isMobileOS && wallet.types.includes('ios') && wallet.types.length === 1) {
-            handleDeepLinking(wallet, uri)
-          } else {
-            setCodeQR(uri)
-            setInstallState(wallet)
-          }
-        }
-        setIsLoading(false)
-      } else if (wallet?.types.includes('ios') && _isMobileOS) {
-        setCodeQR('')
-
-        if (config.pairingPayload) {
-          const serializer = new Serializer()
-          const code = await serializer.serialize(await p2pPayload)
-
-          const link = getTzip10Link(
-            isIOS(window) && wallet.deepLink
-              ? wallet.deepLink
-              : isAndroid(window)
-              ? wallet.links[OSLink.IOS]
-              : 'tezos://',
-            code
-          )
-
-          updateSelectedWalletWithURL(link)
-
-          if (isAndroid(window)) window.open(link, '_blank', 'noopener')
-          else if (isIOS(window)) {
-            const a = document.createElement('a')
-            a.setAttribute('href', link)
-            a.setAttribute('rel', 'noopener')
-            a.dispatchEvent(
-              new MouseEvent('click', { view: window, bubbles: true, cancelable: true })
-            )
-          }
-        }
-
-        setIsLoading(false)
-      } else {
-        setIsLoading(false)
-        setInstallState(wallet)
-        await setDefaultPayload()
-      }
-    }
-
-    const handleClickOther = async () => {
-      analytics()?.track('click', 'ui', 'other wallet')
-      localStorage.setItem(
-        StorageKey.LAST_SELECTED_WALLET,
-        JSON.stringify({
-          key: 'wallet',
-          name: 'wallet',
-          type: 'mobile',
-          icon: getDefaultLogo()
-        })
-      )
-      setCurrentInfo('qr')
-    }
-
-    const handleClickConnectExtension = async () => {
-      analytics()?.track('click', 'ui', 'open extension', { key: currentWallet()?.key })
-
-      setShowMoreContent(false)
-      if (config.pairingPayload?.postmessageSyncCode) {
-        const serializer = new Serializer()
-        const postmessageCode = await serializer.serialize(
-          await config.pairingPayload.postmessageSyncCode()
-        )
-
-        const message: ExtensionMessage<string> = {
-          target: ExtensionMessageTarget.EXTENSION,
-          payload: postmessageCode,
-          targetId: currentWallet()?.id
-        }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        windowRef.postMessage(message as any, windowRef.location.origin)
-
-        if (currentWallet()?.firefoxId) {
-          const message: ExtensionMessage<string> = {
-            target: ExtensionMessageTarget.EXTENSION,
-            payload: postmessageCode,
-            targetId: currentWallet()?.firefoxId
-          }
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          windowRef.postMessage(message as any, windowRef.location.origin)
-        }
-      }
-
-      localStorage.setItem(
-        StorageKey.LAST_SELECTED_WALLET,
-        JSON.stringify({
-          key: currentWallet()?.key,
-          name: currentWallet()?.name,
-          type: 'extension',
-          icon: currentWallet()?.image
-        })
-      )
-    }
-
-    const handleClickInstallExtension = async () => {
-      analytics()?.track('click', 'ui', 'install extension', { key: currentWallet()?.key })
-
-      setShowMoreContent(false)
-      window.open(currentWallet()?.links[OSLink.EXTENSION] || '', '_blank', 'noopener')
-    }
-
-    const handleClickOpenDesktopApp = async () => {
-      setShowMoreContent(false)
-      analytics()?.track('click', 'ui', 'open desktop', { key: currentWallet()?.key })
-
-      if (await p2pPayload) {
-        const serializer = new Serializer()
-        const code = await serializer.serialize(await p2pPayload)
-        const link = getTzip10Link(currentWallet()?.deepLink || '', code)
-        window.open(link, '_blank', 'noopener')
-      }
-
-      localStorage.setItem(
-        StorageKey.LAST_SELECTED_WALLET,
-        JSON.stringify({
-          key: currentWallet()?.key,
-          name: currentWallet()?.name,
-          type: 'desktop',
-          icon: currentWallet()?.image
-        })
-      )
-    }
-
-    const handleClickDownloadDesktopApp = async () => {
-      analytics()?.track('click', 'ui', 'download desktop', { key: currentWallet()?.key })
-
-      setShowMoreContent(false)
-      window.open(currentWallet()?.links[OSLink.DESKTOP] || '', '_blank', 'noopener')
-    }
-
-    const hasExtension = () =>
-      availableExtensions
-        .map((extension) => extension.id)
-        .includes(currentWallet()?.firefoxId || '') ||
-      availableExtensions.map((extension) => extension.id).includes(currentWallet()?.id || '')
-
-    const QRCode = ({ isMobile }: any) => {
-      localStorage.setItem(
-        StorageKey.LAST_SELECTED_WALLET,
-        JSON.stringify({
-          key: currentWallet()?.key,
-          name: currentWallet()?.name,
-          type: 'mobile',
-          icon: currentWallet()?.image
-        })
-      )
-      const isConnected =
-        !currentWallet()?.supportedInteractionStandards?.includes('wallet_connect') || isWCWorking()
-      return (
-        <>
-          {isConnected ? (
-            <QR
-              isWalletConnect={
-                currentWallet()?.supportedInteractionStandards?.includes('wallet_connect') || false
-              }
-              isMobile={isMobile}
-              walletName={currentWallet()?.name || 'AirGap'}
-              code={codeQR()}
-              onClickLearnMore={handleClickLearnMore}
-              onClickQrCode={handleClickQrCode}
-            />
-          ) : (
-            generateWCError(`Connect with ${currentWallet()?.name} Mobile`)
-          )}
-        </>
-      )
-    }
-
-    const colorMode = getColorMode()
-
-    dispose = render(
-      () => (
-        <div class={`theme__${colorMode}`}>
-          <AlertResize />
-          {config.pairingPayload && (
-            <Alert
-              loading={isLoading()}
-              open={isOpen()}
-              showMore={showMoreContent()}
-              content={
-                <div>
-                  {currentInfo() === 'install' && (
-                    <div
-                      style={
-                        currentInfo() === 'install' || currentInfo() === 'qr'
-                          ? {
-                              opacity: 1,
-                              height: 'unset',
-                              overflow: 'unset',
-                              transform: 'scale(1)',
-                              transition: 'all ease 0.3s',
-                              display: 'flex',
-                              'flex-direction': 'column',
-                              gap: '0.9em'
-                            }
-                          : {
-                              opacity: 0,
-                              height: 0,
-                              overflow: 'hidden',
-                              transform: 'scale(1.1)',
-                              transition: 'all ease 0.3s',
-                              display: 'flex',
-                              'flex-direction': 'column',
-                              gap: '0.9em'
-                            }
-                      }
-                    >
-                      {isOnline && currentWallet()?.types.includes('web') && (
-                        <Info
-                          border
-                          title={`Connect with ${currentWallet()?.name} Web`}
-                          description={`(It will open the wallet in a new tab)`}
-                          buttons={[
-                            {
-                              label: 'Use Browser',
-                              type: 'primary',
-                              onClick: () => handleNewTab(config, currentWallet())
-                            }
-                          ]}
-                        />
-                      )}
-                      {!isMobile() && currentWallet()?.types.includes('extension') && (
-                        <Info
-                          border
-                          title={
-                            hasExtension()
-                              ? `Connect with ${currentWallet()?.name} Browser Extension`
-                              : `Install ${currentWallet()?.name} Wallet`
-                          }
-                          description={
-                            hasExtension()
-                              ? `Please connect below to use your ${currentWallet()
-                                  ?.name} Wallet browser extension.`
-                              : `To connect your ${currentWallet()
-                                  ?.name} Wallet, install the browser extension.`
-                          }
-                          buttons={
-                            hasExtension()
-                              ? [
-                                  {
-                                    label: 'Use Extension',
-                                    type: 'primary',
-                                    onClick: () => handleClickConnectExtension()
-                                  }
-                                ]
-                              : [
-                                  {
-                                    label: 'Install extension',
-                                    type: 'primary',
-                                    onClick: () => handleClickInstallExtension()
-                                  }
-                                ]
-                          }
-                        />
-                      )}
-                      {!isMobile() && currentWallet()?.types.includes('desktop') && (
-                        <Info
-                          border
-                          title={`Connect with ${currentWallet()?.name} Desktop App`}
-                          description={`If you don't have the desktop app installed, click below to download it.`}
-                          buttons={[
-                            {
-                              label: 'Open desktop app',
-                              type: 'primary',
-                              onClick: () => handleClickOpenDesktopApp()
-                            },
-                            {
-                              label: 'Download desktop app',
-                              type: 'secondary',
-                              onClick: () => handleClickDownloadDesktopApp()
-                            }
-                          ]}
-                        />
-                      )}
-                      {!isMobile() &&
-                        codeQR().length > 0 &&
-                        currentWallet()?.types.includes('ios') &&
-                        (currentWallet()?.types.length as number) > 1 && (
-                          <QRCode isMobile={false} />
-                        )}
-                      {!isMobile() &&
-                        codeQR().length > 0 &&
-                        currentWallet()?.types.includes('ios') &&
-                        (currentWallet()?.types.length as number) <= 1 && (
-                          <QRCode isMobile={true} />
-                        )}
-                      {isMobile() &&
-                        currentWallet()?.types.includes('ios') &&
-                        (!currentWallet()?.supportedInteractionStandards?.includes(
-                          'wallet_connect'
-                        ) || isWCWorking() ? (
-                          <Info
-                            border
-                            title={`Connect with ${currentWallet()?.name} Mobile`}
-                            description={''}
-                            buttons={[
-                              {
-                                label: 'Use App',
-                                type: 'primary',
-                                onClick: async () => {
-                                  const wallet = currentWallet()
-
-                                  if (!wallet) {
-                                    return
-                                  }
-
-                                  let syncCode = ''
-                                  if (
-                                    wallet.supportedInteractionStandards?.includes('wallet_connect')
-                                  ) {
-                                    syncCode = (await wcPayload)?.uri ?? ''
-                                  } else {
-                                    syncCode = await new Serializer().serialize(await p2pPayload)
-                                  }
-                                  handleDeepLinking(wallet, syncCode)
-                                }
-                              }
-                            ]}
-                            downloadLink={
-                              currentWallet()?.name.toLowerCase().includes('kukai') && isIOS(window)
-                                ? {
-                                    label: 'Get Kukai Mobile >',
-                                    url: 'https://ios.kukai.app'
-                                  }
-                                : undefined
-                            }
-                            onShowQRCodeClick={async () => {
-                              const syncCode =
-                                currentWallet()?.supportedInteractionStandards?.includes(
-                                  'wallet_connect'
-                                )
-                                  ? (await wcPayload)?.uri ?? ''
-                                  : await new Serializer().serialize(await p2pPayload)
-
-                              const wallet = currentWallet()
-
-                              if (!syncCode.length || !wallet) {
-                                handleCloseAlert()
-                                return
-                              }
-
-                              if (
-                                _isMobileOS &&
-                                wallet.types.includes('ios') &&
-                                wallet.types.length === 1
-                              ) {
-                                handleDeepLinking(wallet, syncCode)
-                              } else {
-                                setCodeQR(syncCode)
-                              }
-
-                              setCurrentInfo('qr')
-                              setDisplayQrExtra(true)
-                            }}
-                          />
-                        ) : (
-                          generateWCError(`Connect with ${currentWallet()?.name} Mobile`)
-                        ))}
-                    </div>
-                  )}
-                  {currentInfo() === 'qr' && (
-                    <div
-                      style={
-                        currentInfo() === 'install' || currentInfo() === 'qr'
-                          ? {
-                              opacity: 1,
-                              height: 'unset',
-                              overflow: 'unset',
-                              transform: 'scale(1)',
-                              transition: 'all ease 0.3s',
-                              display: 'flex',
-                              'flex-direction': 'column',
-                              gap: '0.9em'
-                            }
-                          : {
-                              opacity: 0,
-                              height: 0,
-                              overflow: 'hidden',
-                              transform: 'scale(1.1)',
-                              transition: 'all ease 0.3s',
-                              display: 'flex',
-                              'flex-direction': 'column',
-                              gap: '0.9em'
-                            }
-                      }
-                    >
-                      {!displayQrExtra() ? (
-                        <PairOther
-                          walletList={walletList()}
-                          onClickLearnMore={handleClickLearnMore}
-                          p2pPayload={p2pPayload}
-                          wcPayload={wcPayload}
-                        ></PairOther>
-                      ) : (
-                        <QRCode isMobile={true} />
-                      )}
-                    </div>
-                  )}
-                  <div
-                    style={
-                      currentInfo() === 'wallets'
-                        ? {
-                            opacity: 1,
-                            height: 'unset',
-                            overflow: 'unset',
-                            transform: 'scale(1)',
-                            transition: 'all ease 0.3s'
-                          }
-                        : {
-                            opacity: 0,
-                            height: 0,
-                            overflow: 'hidden',
-                            transform: 'scale(1.1)',
-                            transition: 'all ease 0.3s'
-                          }
-                    }
-                  >
-                    <Wallets
-                      wallets={walletList().slice(-(walletList().length - (isMobile() ? 3 : 4)))}
-                      isMobile={isMobile()}
-                      onClickWallet={handleClickWallet}
-                      onClickOther={handleClickOther}
-                    />
-                  </div>
-                  <div
-                    style={
-                      currentInfo() === 'help'
-                        ? {
-                            opacity: 1,
-                            height: 'unset',
-                            overflow: 'unset',
-                            transform: 'scale(1)',
-                            transition: 'all ease 0.3s',
-                            display: 'flex',
-                            'flex-direction': 'column',
-                            gap: '0.9em'
-                          }
-                        : {
-                            opacity: 0,
-                            height: 0,
-                            overflow: 'hidden',
-                            transform: 'scale(1.1)',
-                            transition: 'all ease 0.3s',
-                            display: 'flex',
-                            'flex-direction': 'column',
-                            gap: '0.9em'
-                          }
-                    }
-                  >
-                    {areMetricsEnabled && (
-                      <BugReportForm
-                        onSubmit={() => {
-                          handleCloseAlert()
-                        }}
-                      />
-                    )}
-                    {!areMetricsEnabled && (
-                      <>
-                        <Info
-                          iconBadge
-                          icon={
-                            <svg
-                              fill="currentColor"
-                              stroke-width="0"
-                              xmlns="http://www.w3.org/2000/svg"
-                              viewBox="0 0 24 24"
-                              height="1em"
-                              width="1em"
-                              style="overflow: visible;"
-                              color="white"
-                            >
-                              <path d="M16 12h2v4h-2z"></path>
-                              <path d="M20 7V5c0-1.103-.897-2-2-2H5C3.346 3 2 4.346 2 6v12c0 2.201 1.794 3 3 3h15c1.103 0 2-.897 2-2V9c0-1.103-.897-2-2-2zM5 5h13v2H5a1.001 1.001 0 0 1 0-2zm15 14H5.012C4.55 18.988 4 18.805 4 18V8.815c.314.113.647.185 1 .185h15v10z"></path>
-                            </svg>
-                          }
-                          title="What is a wallet?"
-                          description="Wallets let you send, receive, store and interact with digital assets. Your wallet can be used as an easy way to login, instead of having to remember a password."
-                        />
-                        <Info
-                          iconBadge
-                          icon={
-                            <svg
-                              fill="none"
-                              stroke-width="2"
-                              xmlns="http://www.w3.org/2000/svg"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              viewBox="0 0 24 24"
-                              height="1em"
-                              width="1em"
-                              style="overflow: visible;"
-                              color="white"
-                            >
-                              <path stroke="none" d="M0 0h24v24H0z"></path>
-                              <rect width="16" height="16" x="4" y="4" rx="2"></rect>
-                              <path d="M9 12h6M12 9v6"></path>
-                            </svg>
-                          }
-                          title="Not sure where to start?"
-                          description="If you are new to the Web3, we recommend that you start by creating a Kukai wallet. Kukai is a fast way of creating your first wallet using your preferred social account."
-                        />
-                      </>
-                    )}
-                  </div>
-                  <div
-                    style={
-                      currentInfo() !== 'install' &&
-                      currentInfo() !== 'qr' &&
-                      currentInfo() !== 'wallets' &&
-                      currentInfo() !== 'help'
-                        ? {
-                            opacity: 1,
-                            height: 'unset',
-                            overflow: 'unset',
-                            transform: 'scale(1)',
-                            transition: 'all ease 0.3s'
-                          }
-                        : {
-                            opacity: 0,
-                            height: 0,
-                            overflow: 'hidden',
-                            transform: 'scale(1.1)',
-                            transition: 'all ease 0.3s'
-                          }
-                    }
-                  >
-                    <TopWallets
-                      wallets={isMobile() ? walletList().slice(0, 3) : walletList().slice(0, 4)}
-                      isMobile={isMobile()}
-                      onClickWallet={handleClickWallet}
-                      onClickLearnMore={handleClickLearnMore}
-                      otherWallets={
-                        isMobile()
-                          ? {
-                              images: [
-                                walletList()[3].image,
-                                walletList()[4].image,
-                                walletList()[5].image
-                              ],
-                              onClick: () => setCurrentInfo('wallets')
-                            }
-                          : undefined
-                      }
-                    />
-                  </div>
-                </div>
-              }
-              extraContent={
-                currentInfo() !== 'top-wallets' || isMobile() ? undefined : (
-                  <Wallets
-                    small
-                    wallets={walletList().slice(-(walletList().length - 4))}
-                    isMobile={isMobile()}
-                    onClickWallet={handleClickWallet}
-                    onClickOther={handleClickOther}
-                  />
-                )
-              }
-              onClickShowMore={handleClickShowMoreContent}
-              onCloseClick={() => handleCloseAlert()}
-              onBackClick={
-                currentInfo() === 'install'
-                  ? () => setCurrentInfo('top-wallets')
-                  : currentInfo() === 'qr'
-                  ? () => setCurrentInfo('top-wallets')
-                  : currentInfo() === 'wallets' && isMobile()
-                  ? () => setCurrentInfo('top-wallets')
-                  : currentInfo() === 'help'
-                  ? () => {
-                      if (pairingExpired()) {
-                        handleCloseAlert()
-                        return
-                      }
-                      return setCurrentInfo(previousInfo())
-                    }
-                  : undefined
-              }
-            />
-          )}
-          {!config.pairingPayload && (
-            <Alert
-              open={isOpen()}
-              content={
-                <Info
-                  bigIcon
-                  icon={
-                    <svg
-                      fill="currentColor"
-                      stroke-width="0"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 512 512"
-                      height="1em"
-                      width="1em"
-                      style="overflow: visible;"
-                      color="#494949"
-                    >
-                      <path
-                        d="M85.57 446.25h340.86a32 32 0 0 0 28.17-47.17L284.18 82.58c-12.09-22.44-44.27-22.44-56.36 0L57.4 399.08a32 32 0 0 0 28.17 47.17Z"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="32px"
-                      ></path>
-                      <path
-                        d="m250.26 195.39 5.74 122 5.73-121.95a5.74 5.74 0 0 0-5.79-6h0a5.74 5.74 0 0 0-5.68 5.95Z"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="32px"
-                      ></path>
-                      <path d="M256 397.25a20 20 0 1 1 20-20 20 20 0 0 1-20 20Z"></path>
-                    </svg>
-                  }
-                  title={config.title || 'No title'}
-                  description={config.body || 'No description'}
-                  data={config.data}
-                  buttons={[
-                    {
-                      label: 'Close',
-                      type: 'primary',
-                      onClick: () => handleCloseAlert()
-                    }
-                  ]}
-                />
-              }
-              onCloseClick={() => handleCloseAlert()}
-            />
-          )}
-        </div>
-      ),
-      shadowRoot
-    )
-    document.body.prepend(shadowRootEl)
-    setTimeout(() => {
-      setIsOpen(true)
-    }, 50)
-  }
-  return ''
+const AlertRoot = (props: AlertConfig) => {
+  const [isAlertVisible, setIsAlertVisible] = useState(true)
+  useEffect(() => {
+    show$.subscribe((value) => setIsAlertVisible(value))
+  }, [])
+  return <>{isAlertVisible && <PairingAlert {...props} closeButtonCallback={closeAlert} />}</>
 }
 
-export { closeAlert, closeAlerts, openAlert }
+export { openAlert, closeAlert, closeAlerts }
diff --git a/packages/beacon-ui/src/ui/toast/index.tsx b/packages/beacon-ui/src/ui/toast/index.tsx
index f2f185a1c..57726e7c9 100644
--- a/packages/beacon-ui/src/ui/toast/index.tsx
+++ b/packages/beacon-ui/src/ui/toast/index.tsx
@@ -1,13 +1,10 @@
-import { createSignal } from 'solid-js'
-import { isServer, render } from 'solid-js/web'
+import { useState } from 'react'
+import { createRoot } from 'react-dom/client'
 import { WalletInfo } from '@airgap/beacon-types'
 import { generateGUID } from '@airgap/beacon-utils'
 
 import Toast from '../../components/toast'
 
-import * as toastStyles from '../../components/toast/styles.css'
-import * as loaderStyles from '../../components/loader/styles.css'
-
 // INTERFACES
 export interface ToastAction {
   text: string
@@ -27,54 +24,42 @@ export interface ToastConfig {
   openWalletAction?(): Promise<void>
 }
 
-// GLOBAL VARIABLES
-type VoidFunction = () => void
-let dispose: null | VoidFunction = null
-const [isOpen, setIsOpen] = createSignal<boolean>(false)
-const [renderLast, setRenderLast] = createSignal<string>('')
+const useToastState = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(false)
+  const [renderLast, setRenderLast] = useState<string>('')
+
+  return {
+    isOpen,
+    setIsOpen,
+    renderLast,
+    setRenderLast
+  }
+}
 
 const ANIMATION_TIME = 300
 let globalTimeout: NodeJS.Timeout
 
 const createToast = (config: ToastConfig) => {
+  const { isOpen, setIsOpen } = useToastState()
+
   const shadowRootEl = document.createElement('div')
   if (document.getElementById('beacon-toast-wrapper')) {
     ;(document.getElementById('beacon-toast-wrapper') as HTMLElement).remove()
   }
   shadowRootEl.setAttribute('id', 'beacon-toast-wrapper')
   shadowRootEl.style.height = '0px'
-  const shadowRoot = shadowRootEl.attachShadow({ mode: 'open' })
-
-  // Toast styles
-  const style = document.createElement('style')
-  style.textContent = toastStyles.default
-  shadowRoot.appendChild(style)
-
-  // Loader styles
-  const style2 = document.createElement('style')
-  style2.textContent = loaderStyles.default
-  shadowRoot.appendChild(style2)
-
-  // Inject font styles
-  const styleFonts = document.createElement('style')
-  styleFonts.textContent =
-    "* { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;}"
-  shadowRoot.appendChild(styleFonts)
-
-  dispose = render(
-    () => (
-      <Toast
-        label={config.body}
-        open={isOpen()}
-        onClickClose={() => {
-          closeToast()
-        }}
-        actions={config.actions}
-        walletInfo={config.walletInfo}
-        openWalletAction={config.openWalletAction}
-      />
-    ),
-    shadowRoot
+
+  createRoot(shadowRootEl).render(
+    <Toast
+      label={config.body}
+      open={isOpen}
+      onClickClose={() => {
+        closeToast()
+      }}
+      actions={config.actions}
+      walletInfo={config.walletInfo}
+      openWalletAction={config.openWalletAction}
+    />
   )
 
   // Create toast
@@ -97,13 +82,14 @@ const createToast = (config: ToastConfig) => {
  */
 const closeToast = (): Promise<void> =>
   new Promise((resolve) => {
-    if (isServer) {
+    const { setIsOpen } = useToastState()
+
+    if (typeof window === 'undefined') {
       console.log('DO NOT RUN ON SERVER')
       resolve()
     }
     setIsOpen(false)
     setTimeout(() => {
-      if (dispose) dispose()
       if (document.getElementById('beacon-toast-wrapper'))
         (document.getElementById('beacon-toast-wrapper') as HTMLElement).remove()
       resolve()
@@ -116,7 +102,8 @@ const closeToast = (): Promise<void> =>
  * @param toastConfig Configuration of the toast
  */
 const openToast = async (config: ToastConfig): Promise<void> => {
-  if (isServer) {
+  const { renderLast, setRenderLast } = useToastState()
+  if (typeof window === 'undefined') {
     console.log('DO NOT RUN ON SERVER')
     return
   }
@@ -125,7 +112,7 @@ const openToast = async (config: ToastConfig): Promise<void> => {
   setRenderLast(id)
 
   await closeToast()
-  if (id === renderLast()) createToast(config)
+  if (id === renderLast) createToast(config)
 }
 
 export { closeToast, openToast }
diff --git a/packages/beacon-ui/src/utils/subject.ts b/packages/beacon-ui/src/utils/subject.ts
new file mode 100644
index 000000000..d9954e609
--- /dev/null
+++ b/packages/beacon-ui/src/utils/subject.ts
@@ -0,0 +1,11 @@
+export class Subject<T> {
+  private subscribers: ((value: T) => void)[] = []
+
+  subscribe(callback: (value: T) => void): void {
+    this.subscribers.push(callback)
+  }
+
+  next(value: T): void {
+    this.subscribers.forEach((callback) => setTimeout(() => callback(value), 50))
+  }
+}
diff --git a/packages/beacon-ui/tsconfig.json b/packages/beacon-ui/tsconfig.json
index f4d834c05..0b579d7c1 100644
--- a/packages/beacon-ui/tsconfig.json
+++ b/packages/beacon-ui/tsconfig.json
@@ -8,7 +8,7 @@
     // "allowSyntheticDefaultImports": true,
     // "esModuleInterop": true,
     "jsx": "preserve",
-    "jsxImportSource": "solid-js",
+    "jsxImportSource": "react",
     "types": ["vite/client", "node"],
     "noEmit": true,
     "baseUrl": ".",
@@ -17,4 +17,4 @@
     }
   },
   "include": ["src/**/*", "rollup.config.ts"]
-}
\ No newline at end of file
+}
diff --git a/packages/beacon-ui/vite.config.ts b/packages/beacon-ui/vite.config.ts
index c7a27868e..d3cc61052 100644
--- a/packages/beacon-ui/vite.config.ts
+++ b/packages/beacon-ui/vite.config.ts
@@ -1,8 +1,8 @@
 import { defineConfig } from 'vite'
-import solidPlugin from 'vite-plugin-solid'
+import react from '@vitejs/plugin-react'
 
 export default defineConfig({
-  plugins: [solidPlugin()],
+  plugins: [react()],
   server: {
     port: 3000
   },