From e5ff210946d95cce37e4b4d4186d0c57966c3000 Mon Sep 17 00:00:00 2001
From: Max Behzadi <69126271+MaxTheGeeek@users.noreply.github.com>
Date: Fri, 5 Apr 2024 12:04:02 +0200
Subject: [PATCH 1/2] ADD: wagmi & web3modal
---
launcher/package.json | 21 ++--
launcher/public/output.css | 108 ++++++++++--------
launcher/src/App.vue | 4 +-
.../base-header/components/menu/MenuBody.vue | 6 +-
.../components/UI/node-page/NodeScreen.vue | 58 +++++++---
.../components/modals/IpScanner.vue | 0
launcher/src/composables/useWeb3.js | 47 ++++++++
launcher/src/shims-vue.d.ts | 6 +
launcher/src/store/nodeHeader.js | 5 +
launcher/tsconfig.json | 43 +++++++
10 files changed, 225 insertions(+), 73 deletions(-)
delete mode 100644 launcher/src/components/UI/server-management/components/modals/IpScanner.vue
create mode 100644 launcher/src/composables/useWeb3.js
create mode 100644 launcher/src/shims-vue.d.ts
create mode 100644 launcher/tsconfig.json
diff --git a/launcher/package.json b/launcher/package.json
index a4b5cffc1b..2ea3c99180 100755
--- a/launcher/package.json
+++ b/launcher/package.json
@@ -7,21 +7,21 @@
"scripts": {
"serve": "vue-cli-service serve --port 8081",
"build": "vue-cli-service build",
+ "test:unit": "jest '(\\.test|\\.spec)\\.js' --coverage",
"lint": "vue-cli-service lint",
+ "backend:watch": "nodemon --watch 'src/backend' --exec 'npm run electron:serve'",
"build-themes": "node-sass src/styles/themes -o public/themes",
"electron:build": "vue-cli-service electron:build",
"electron:serve": "vue-cli-service electron:serve",
+ "format": "prettier . --write",
+ "lint:fix": "eslint --ext .js,.vue --ignore-path ../.gitignore --fix src",
"postinstall": "electron-builder install-app-deps",
"postuninstall": "electron-builder install-app-deps",
- "test:unit": "jest '(\\.test|\\.spec)\\.js' --coverage",
- "test:int": "jest '\\.int\\.js'",
+ "stereum": "concurrently \"npm:electron:serve\" \"npm:watch:css\"",
"test": "jest",
"test:coverage": "jest --coverage",
- "watch:css": "npx tailwindcss -i ./src/main.css -o ./public/output.css --watch",
- "lint:fix": "eslint --ext .js,.vue --ignore-path ../.gitignore --fix src",
- "stereum": "concurrently \"npm:electron:serve\" \"npm:watch:css\"",
- "backend:watch": "nodemon --watch 'src/backend' --exec 'npm run electron:serve'",
- "format": "prettier . --write"
+ "test:int": "jest '\\.int\\.js'",
+ "watch:css": "npx tailwindcss -i ./src/main.css -o ./public/output.css --watch"
},
"dependencies": {
"@headlessui/vue": "^1.7.16",
@@ -32,6 +32,9 @@
"@vue/cli": "^5.0.8",
"@vue/cli-service": "^5.0.8",
"@vue/compiler-sfc": "^3.2.33",
+ "@wagmi/connectors": "^4.1.24",
+ "@wagmi/core": "^2.6.15",
+ "@web3modal/wagmi": "^4.1.5",
"animate.css": "^4.1.1",
"axios": "^1.3.4",
"electron-builder": "^23.0.3",
@@ -48,7 +51,9 @@
"semver": "^7.6.0",
"ssh2": "^1.1.0",
"swiper": "^11.0.6",
+ "viem": "^2.9.9",
"vue": "^3.2.33",
+ "vue-class-component": "^8.0.0-0",
"vue-i18n": "9.2.2",
"vue-router": "^4.0.15",
"vue3-carousel": "^0.3.1",
@@ -63,7 +68,6 @@
"@tailwindcss/forms": "^0.5.2",
"@tailwindcss/typography": "^0.5.2",
"@types/xterm": "^3.0.0",
- "@vue/cli-plugin-babel": "~5.0.4",
"@vue/test-utils": "^2.3.1",
"@vue/vue3-jest": "^29.2.3",
"@vueuse/core": "^10.2.1",
@@ -83,6 +87,7 @@
"prettier": "^2.8.4",
"tailwind-scrollbar": "^3.0.4",
"tailwindcss": "^3.2.7",
+ "typescript": "^5.0.4",
"vue-cli-plugin-electron-builder": "^3.0.0-alpha.4",
"vue-loader": "^17.0.1",
"vue-template-compiler": "^2.6.14"
diff --git a/launcher/public/output.css b/launcher/public/output.css
index cbcfa20a02..2aef81c4fe 100755
--- a/launcher/public/output.css
+++ b/launcher/public/output.css
@@ -1,7 +1,7 @@
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap");
/*
-! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
*/
/*
@@ -217,6 +217,8 @@ textarea {
/* 1 */
line-height: inherit;
/* 1 */
+ letter-spacing: inherit;
+ /* 1 */
color: inherit;
/* 1 */
margin: 0;
@@ -240,9 +242,9 @@ select {
*/
button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
-webkit-appearance: button;
/* 1 */
background-color: transparent;
@@ -524,6 +526,10 @@ video {
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
+ --tw-contain-size: ;
+ --tw-contain-layout: ;
+ --tw-contain-paint: ;
+ --tw-contain-style: ;
}
::-ms-backdrop{
@@ -574,6 +580,10 @@ video {
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
+ --tw-contain-size: ;
+ --tw-contain-layout: ;
+ --tw-contain-paint: ;
+ --tw-contain-style: ;
}
::backdrop{
@@ -624,6 +634,10 @@ video {
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
+ --tw-contain-size: ;
+ --tw-contain-layout: ;
+ --tw-contain-paint: ;
+ --tw-contain-style: ;
}
::-webkit-scrollbar {
@@ -757,6 +771,10 @@ video {
bottom: -2rem;
}
+.-left-12{
+ left: -3rem;
+}
+
.-left-\[1px\]{
left: -1px;
}
@@ -789,6 +807,10 @@ video {
top: -5rem;
}
+.-top-7{
+ top: -1.75rem;
+}
+
.-top-8{
top: -2rem;
}
@@ -873,6 +895,10 @@ video {
left: 8rem;
}
+.left-4{
+ left: 1rem;
+}
+
.left-\[1\.3rem\]{
left: 1.3rem;
}
@@ -981,18 +1007,6 @@ video {
top: 7rem;
}
-.-left-12{
- left: -3rem;
-}
-
-.-top-7{
- top: -1.75rem;
-}
-
-.left-4{
- left: 1rem;
-}
-
.-z-10{
z-index: -10;
}
@@ -1892,6 +1906,10 @@ video {
max-height: 450px;
}
+.max-h-\[491px\]{
+ max-height: 491px;
+}
+
.max-h-\[503px\]{
max-height: 503px;
}
@@ -1904,10 +1922,6 @@ video {
max-height: 100%;
}
-.max-h-\[491px\]{
- max-height: 491px;
-}
-
.min-h-11{
min-height: 2.75rem;
}
@@ -2088,6 +2102,10 @@ video {
width: 75%;
}
+.w-96{
+ width: 24rem;
+}
+
.w-\[100px\]{
width: 100px;
}
@@ -3308,6 +3326,11 @@ video {
background-color: rgb(22 23 23 / var(--tw-bg-opacity));
}
+.bg-\[\#16181b\]{
+ --tw-bg-opacity: 1;
+ background-color: rgb(22 24 27 / var(--tw-bg-opacity));
+}
+
.bg-\[\#171D22\]{
--tw-bg-opacity: 1;
background-color: rgb(23 29 34 / var(--tw-bg-opacity));
@@ -3368,6 +3391,11 @@ video {
background-color: rgb(27 29 31 / var(--tw-bg-opacity));
}
+.bg-\[\#1b1d20\]{
+ --tw-bg-opacity: 1;
+ background-color: rgb(27 29 32 / var(--tw-bg-opacity));
+}
+
.bg-\[\#1b3231\]{
--tw-bg-opacity: 1;
background-color: rgb(27 50 49 / var(--tw-bg-opacity));
@@ -3403,6 +3431,11 @@ video {
background-color: rgb(31 33 35 / var(--tw-bg-opacity));
}
+.bg-\[\#1f2226\]{
+ --tw-bg-opacity: 1;
+ background-color: rgb(31 34 38 / var(--tw-bg-opacity));
+}
+
.bg-\[\#202123\]{
--tw-bg-opacity: 1;
background-color: rgb(32 33 35 / var(--tw-bg-opacity));
@@ -3812,21 +3845,6 @@ video {
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
-.bg-\[\#16181b\]{
- --tw-bg-opacity: 1;
- background-color: rgb(22 24 27 / var(--tw-bg-opacity));
-}
-
-.bg-\[\#1b1d20\]{
- --tw-bg-opacity: 1;
- background-color: rgb(27 29 32 / var(--tw-bg-opacity));
-}
-
-.bg-\[\#1f2226\]{
- --tw-bg-opacity: 1;
- background-color: rgb(31 34 38 / var(--tw-bg-opacity));
-}
-
.bg-opacity-80{
--tw-bg-opacity: 0.8;
}
@@ -5481,6 +5499,11 @@ html body {
--tw-shadow: var(--tw-shadow-colored);
}
+.hover\:shadow-\[\#1b1d20\]:hover{
+ --tw-shadow-color: #1b1d20;
+ --tw-shadow: var(--tw-shadow-colored);
+}
+
.hover\:shadow-\[\#1e2a29\]:hover{
--tw-shadow-color: #1e2a29;
--tw-shadow: var(--tw-shadow-colored);
@@ -5501,6 +5524,11 @@ html body {
--tw-shadow: var(--tw-shadow-colored);
}
+.hover\:shadow-gray-800:hover{
+ --tw-shadow-color: #1f2937;
+ --tw-shadow: var(--tw-shadow-colored);
+}
+
.hover\:shadow-gray-900:hover{
--tw-shadow-color: #111827;
--tw-shadow: var(--tw-shadow-colored);
@@ -5511,16 +5539,6 @@ html body {
--tw-shadow: var(--tw-shadow-colored);
}
-.hover\:shadow-\[\#1b1d20\]:hover{
- --tw-shadow-color: #1b1d20;
- --tw-shadow: var(--tw-shadow-colored);
-}
-
-.hover\:shadow-gray-800:hover{
- --tw-shadow-color: #1f2937;
- --tw-shadow: var(--tw-shadow-colored);
-}
-
.hover\:brightness-110:hover{
--tw-brightness: brightness(1.1);
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
diff --git a/launcher/src/App.vue b/launcher/src/App.vue
index 30232dbf9b..ecc021e2b5 100755
--- a/launcher/src/App.vue
+++ b/launcher/src/App.vue
@@ -3,9 +3,7 @@
-
+
diff --git a/launcher/src/components/UI/server-management/components/modals/IpScanner.vue b/launcher/src/components/UI/server-management/components/modals/IpScanner.vue
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/launcher/src/composables/useWeb3.js b/launcher/src/composables/useWeb3.js
new file mode 100644
index 0000000000..b5a025a9ef
--- /dev/null
+++ b/launcher/src/composables/useWeb3.js
@@ -0,0 +1,47 @@
+import { ref } from "vue";
+import { createWeb3Modal, defaultWagmiConfig } from "@web3modal/wagmi";
+import { mainnet, arbitrum } from "viem/chains";
+import { reconnect } from "@wagmi/core";
+
+export function useWeb3() {
+ // Configuration details
+ const projectId = "51f595d21a6e919111f612da72d5ed09";
+ const metadata = {
+ name: "Web3Modal",
+ description: "Web3Modal Example",
+ url: "https://web3modal.com", // origin must match your domain & subdomain
+ icons: ["https://avatars.githubusercontent.com/u/37784886"],
+ };
+
+ // Define reactive properties if needed
+ const chains = ref([mainnet, arbitrum]);
+ const wagmiConfig = ref(
+ defaultWagmiConfig({
+ chains: chains.value,
+ projectId,
+ metadata,
+ })
+ );
+
+ // Methods
+ const setupWeb3Modal = () => {
+ reconnect(wagmiConfig.value);
+
+ createWeb3Modal({
+ wagmiConfig: wagmiConfig.value,
+ projectId,
+ enableAnalytics: true, // Optional - defaults to your Cloud configuration
+ enableOnramp: true, // Optional - false as default
+ });
+ };
+
+ // Run setupWeb3Modal or expose it so it can be run from a component
+ // setupWeb3Modal();
+
+ // Return reactive properties and methods
+ return {
+ chains,
+ wagmiConfig,
+ setupWeb3Modal,
+ };
+}
diff --git a/launcher/src/shims-vue.d.ts b/launcher/src/shims-vue.d.ts
new file mode 100644
index 0000000000..3804a43e2f
--- /dev/null
+++ b/launcher/src/shims-vue.d.ts
@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+ import type { DefineComponent } from 'vue'
+ const component: DefineComponent<{}, {}, any>
+ export default component
+}
diff --git a/launcher/src/store/nodeHeader.js b/launcher/src/store/nodeHeader.js
index dd11409c9d..f376894621 100755
--- a/launcher/src/store/nodeHeader.js
+++ b/launcher/src/store/nodeHeader.js
@@ -20,6 +20,7 @@ export const useNodeHeader = defineStore("nodeHeader", {
notificationModalIsActive: false,
isStakeGuideActive: false,
isTutorialActive: false,
+ displayWalletConnectModal: false,
//Menu Modals end
importBoxModel: "",
passwordBoxModel: "",
@@ -100,6 +101,9 @@ export const useNodeHeader = defineStore("nodeHeader", {
},
setMenuModal(name) {
switch (name) {
+ case "Wallet":
+ this.displayWalletConnectModal = true;
+ break;
case "Available Update":
this.displayUpdatePanel = true;
break;
@@ -129,6 +133,7 @@ export const useNodeHeader = defineStore("nodeHeader", {
this.notificationModalIsActive = false;
this.isStakeGuideActive = false;
this.isTutorialActive = false;
+ this.displayWalletConnectModal = false;
break;
default:
console.error("No modal");
diff --git a/launcher/tsconfig.json b/launcher/tsconfig.json
new file mode 100644
index 0000000000..1a88af5967
--- /dev/null
+++ b/launcher/tsconfig.json
@@ -0,0 +1,43 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "module": "esnext",
+ "strict": true,
+ "jsx": "preserve",
+ "importHelpers": true,
+ "moduleResolution": "node",
+ "experimentalDecorators": true,
+ "allowJs": true,
+ "skipLibCheck": true,
+ "esModuleInterop": true,
+ "allowSyntheticDefaultImports": true,
+ "forceConsistentCasingInFileNames": true,
+ "useDefineForClassFields": true,
+ "sourceMap": true,
+ "baseUrl": ".",
+ "types": [
+ "webpack-env"
+ ],
+ "paths": {
+ "@/*": [
+ "src/*"
+ ]
+ },
+ "lib": [
+ "esnext",
+ "dom",
+ "dom.iterable",
+ "scripthost"
+ ]
+ },
+ "include": [
+ "src/**/*.ts",
+ "src/**/*.tsx",
+ "src/**/*.vue",
+ "tests/**/*.ts",
+ "tests/**/*.tsx"
+ ],
+ "exclude": [
+ "node_modules"
+ ]
+}
From a027068dd267959597f8a0c3e37f1cc89d080fc6 Mon Sep 17 00:00:00 2001
From: Max Behzadi <69126271+MaxTheGeeek@users.noreply.github.com>
Date: Mon, 8 Apr 2024 16:03:56 +0200
Subject: [PATCH 2/2] REMOVE: composables
---
launcher/public/output.css | 6 ++
.../components/UI/node-page/NodeScreen.vue | 68 +++++++++++--------
.../components/wallet/WalletBody.vue | 61 +++++++++++++++++
.../UI/node-page/sections/WalletSection.vue | 7 ++
launcher/src/composables/useWeb3.js | 13 ++--
5 files changed, 123 insertions(+), 32 deletions(-)
create mode 100644 launcher/src/components/UI/node-page/components/wallet/WalletBody.vue
create mode 100644 launcher/src/components/UI/node-page/sections/WalletSection.vue
diff --git a/launcher/public/output.css b/launcher/public/output.css
index 2aef81c4fe..6ccb98cfd5 100755
--- a/launcher/public/output.css
+++ b/launcher/public/output.css
@@ -2305,6 +2305,12 @@ video {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
+.translate-x-full{
+ --tw-translate-x: 100%;
+ -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
.-rotate-90{
--tw-rotate: -90deg;
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
diff --git a/launcher/src/components/UI/node-page/NodeScreen.vue b/launcher/src/components/UI/node-page/NodeScreen.vue
index 12202a3f41..2cd242aa84 100755
--- a/launcher/src/components/UI/node-page/NodeScreen.vue
+++ b/launcher/src/components/UI/node-page/NodeScreen.vue
@@ -12,39 +12,34 @@
-
-
-
-
-
-
-
+
+
+
+
-
+
+
+
+
+
+