New theme

.github/workflows/azure-static-web-apps-icy-pebble-0baf5bd03.yml

@@ -0,0 +1,52 @@
+name: Azure Static Web Apps CI/CD
+
+on:
+  push:
+    branches:
+      - update/wallet
+  pull_request:
+    types: [opened, synchronize, reopened, closed]
+    branches:
+      - update/wallet
+
+jobs:
+  build_and_deploy_job:
+    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
+    runs-on: ubuntu-latest
+    name: Build and Deploy Job
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          submodules: true
+          lfs: false
+
+      - name: Setup Node.js environment
+        uses: actions/[email protected]
+        with:    
+          node-version: 18.x
+
+      - name: Build And Deploy
+        id: builddeploy
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ICY_PEBBLE_0BAF5BD03 }}          
+          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
+          action: "upload"
+          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
+          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
+          app_location: "/" # App source code path
+          api_location: "" # Api source code path - optional
+          output_location: "build" # Built app content directory - optional
+          ###### End of Repository/Build Configurations ######
+
+  close_pull_request_job:
+    if: github.event_name == 'pull_request' && github.event.action == 'closed'
+    runs-on: ubuntu-latest
+    name: Close Pull Request Job
+    steps:
+      - name: Close Pull Request
+        id: closepullrequest
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ICY_PEBBLE_0BAF5BD03 }}
+          action: "close"

package.json

@@ -2,7 +2,10 @@
   "name": "masternode-dapp",
   "version": "0.1.0",
   "private": true,
-  "homepage": "/dapp",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "homepage": "/",
   "scripts": {
     "contracts:compile:abi": "typechain --target ethers-v5 --out-dir src/constants/abis/types \"./src/constants/abis/**/*.json\"",
     "prestart": "yarn contracts:compile:abi",
@@ -14,6 +17,9 @@
   },
   "dependencies": {
     "@coinbase/wallet-sdk": "^3.7.2",
+    "@headlessui/react": "^1.7.18",
+    "@heroicons/react": "^2.1.1",
+    "@metamask/sdk-react": "^0.15.0",
     "@reduxjs/toolkit": "^2.0.1",
     "@typechain/ethers-v5": "^11.1.2",
     "@web3-react/coinbase-wallet": "^8.2.3",
@@ -24,22 +30,27 @@
     "@web3-react/types": "^8.2.3",
     "@web3-react/walletconnect": "^8.2.3",
     "@web3-react/walletconnect-v2": "^8.5.1",
+    "aos": "^2.3.4",
     "classnames": "^2.5.1",
     "ethers": "^5.7.2",
     "jotai": "^2.6.2",
     "lodash": "^4.17.21",
-    "node-sass": "^9.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-modal": "^3.16.1",
     "react-redux": "^9.1.0",
     "react-scripts": "5.0.1",
+    "react-social-icons": "^6.10.0",
     "redux-persist": "^6.0.0",
+    "sass": "^1.70.0",
     "typechain": "^8.3.2",
     "ua-parser-js": "^1.0.37",
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {
+    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/typography": "^0.5.10",
+    "@types/aos": "^3.0.7",
     "@types/jest": "^27.5.2",
     "@types/lodash": "^4.14.202",
     "@types/node": "^16.18.74",
@@ -58,6 +69,7 @@
     "react-app-rewired": "^2.2.1",
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
+    "tailwindcss": "^3.4.1",
     "typescript": "^4.9.5",
     "url": "^0.11.3"
   },
@@ -73,4 +85,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

public/css/additional-styles/theme.css

@@ -0,0 +1,180 @@
+.form-input:focus,
+.form-textarea:focus,
+.form-multiselect:focus,
+.form-select:focus,
+.form-checkbox:focus,
+.form-radio:focus {
+    @apply ring-0;
+}
+
+/* Hamburger button */
+.hamburger svg>*:nth-child(1),
+.hamburger svg>*:nth-child(2),
+.hamburger svg>*:nth-child(3) {
+    transform-origin: center;
+    transform: rotate(0deg);
+}
+
+.hamburger svg>*:nth-child(1) {
+    transition: y 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), opacity 0.1s ease-in;
+}
+
+.hamburger svg>*:nth-child(2) {
+    transition: transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+}
+
+.hamburger svg>*:nth-child(3) {
+    transition: y 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), width 0.1s 0.25s ease-in;
+}
+
+.hamburger.active svg>*:nth-child(1) {
+    opacity: 0;
+    y: 9;
+    transform: rotate(225deg);
+    transition: y 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.1s 0.12s ease-out;
+}
+
+.hamburger.active svg>*:nth-child(2) {
+    transform: rotate(225deg);
+    transition: transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.hamburger.active svg>*:nth-child(3) {
+    y: 9;
+    transform: rotate(135deg);
+    transition: y 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.1s ease-out;
+}
+
+/* Custom Swiper styles */
+.swiper-button-disabled {
+    @apply opacity-50 cursor-default pointer-events-none;
+}
+
+.stellar-carousel .swiper-slide {
+    @apply opacity-80;
+}
+
+.stellar-carousel .swiper-slide.swiper-slide-active {
+    @apply opacity-100;
+}
+
+/* Pulsing animation */
+@keyframes pulseLoop {
+    0% {
+        opacity: 0;
+        transform: scale(.25) translateZ(0);
+    }
+
+    30% {
+        opacity: .4;
+    }
+
+    70% {
+        opacity: 0;
+    }
+
+    80% {
+        transform: scale(1) translateZ(0);
+    }
+}
+
+.pulse {
+    opacity: 0;
+    transform-origin: center;
+    animation: pulseLoop 12000ms linear infinite;
+}
+
+.pulse-1 {
+    animation-delay: -4000ms;
+}
+
+.pulse-2 {
+    animation-delay: -8000ms;
+}
+
+.translate-z-0 {
+    transform: translateZ(0);
+}
+
+/* Custom AOS distance */
+@media screen {
+    html:not(.no-js) [data-aos=fade-up] {
+        -webkit-transform: translate3d(0, 14px, 0);
+        transform: translate3d(0, 14px, 0);
+    }
+
+    html:not(.no-js) [data-aos=fade-down] {
+        -webkit-transform: translate3d(0, -14px, 0);
+        transform: translate3d(0, -14px, 0);
+    }
+
+    html:not(.no-js) [data-aos=fade-right] {
+        -webkit-transform: translate3d(-14px, 0, 0);
+        transform: translate3d(-14px, 0, 0);
+    }
+
+    html:not(.no-js) [data-aos=fade-left] {
+        -webkit-transform: translate3d(14px, 0, 0);
+        transform: translate3d(14px, 0, 0);
+    }
+
+    html:not(.no-js) [data-aos=fade-up-right] {
+        -webkit-transform: translate3d(-14px, 14px, 0);
+        transform: translate3d(-14px, 14px, 0);
+    }
+
+    html:not(.no-js) [data-aos=fade-up-left] {
+        -webkit-transform: translate3d(14px, 14px, 0);
+        transform: translate3d(14px, 14px, 0);
+    }
+
+    html:not(.no-js) [data-aos=fade-down-right] {
+        -webkit-transform: translate3d(-14px, -14px, 0);
+        transform: translate3d(-14px, -14px, 0);
+    }
+
+    html:not(.no-js) [data-aos=fade-down-left] {
+        -webkit-transform: translate3d(14px, -14px, 0);
+        transform: translate3d(14px, -14px, 0);
+    }
+
+    html:not(.no-js) [data-aos=zoom-in-up] {
+        -webkit-transform: translate3d(0, 14px, 0) scale(.6);
+        transform: translate3d(0, 14px, 0) scale(.6);
+    }
+
+    html:not(.no-js) [data-aos=zoom-in-down] {
+        -webkit-transform: translate3d(0, -14px, 0) scale(.6);
+        transform: translate3d(0, -14px, 0) scale(.6);
+    }
+
+    html:not(.no-js) [data-aos=zoom-in-right] {
+        -webkit-transform: translate3d(-14px, 0, 0) scale(.6);
+        transform: translate3d(-14px, 0, 0) scale(.6);
+    }
+
+    html:not(.no-js) [data-aos=zoom-in-left] {
+        -webkit-transform: translate3d(14px, 0, 0) scale(.6);
+        transform: translate3d(14px, 0, 0) scale(.6);
+    }
+
+    html:not(.no-js) [data-aos=zoom-out-up] {
+        -webkit-transform: translate3d(0, 14px, 0) scale(1.2);
+        transform: translate3d(0, 14px, 0) scale(1.2);
+    }
+
+    html:not(.no-js) [data-aos=zoom-out-down] {
+        -webkit-transform: translate3d(0, -14px, 0) scale(1.2);
+        transform: translate3d(0, -14px, 0) scale(1.2);
+    }
+
+    html:not(.no-js) [data-aos=zoom-out-right] {
+        -webkit-transform: translate3d(-14px, 0, 0) scale(1.2);
+        transform: translate3d(-14px, 0, 0) scale(1.2);
+    }
+
+    html:not(.no-js) [data-aos=zoom-out-left] {
+        -webkit-transform: translate3d(14px, 0, 0) scale(1.2);
+        transform: translate3d(14px, 0, 0) scale(1.2);
+    }
+}