multiversx · radumojic · Nov 23, 2023 · Sep 12, 2023 · Sep 20, 2023 · Nov 1, 2023
diff --git a/.env.development b/.env.development
@@ -1,2 +1,3 @@
 VITE_APP_SHARE_PREFIX=
-VITE_APP_GA_ID=
+VITE_APP_GA_ID=
+VITE_APP_WALLETCONNECT_ID=
diff --git a/.github/workflows/deploy-devnet-old.yml b/.github/workflows/deploy-devnet-old.yml
@@ -29,6 +29,7 @@ jobs:
           CI: false
           VITE_APP_MARKERS_API_URL: ${{ secrets.MARKERS_API_URL }}
           VITE_APP_VERSION_URL: ${{ secrets.APP_VERSION_URL }}
+          VITE_APP_WALLETCONNECT_ID: ${{ secrets.WALLETCONNECT_ID }}
       - name: Configure AWS Credentials
         uses: aws-actions/configure-aws-credentials@v1
         with:

diff --git a/.github/workflows/deploy-devnet.yml b/.github/workflows/deploy-devnet.yml
@@ -29,6 +29,7 @@ jobs:
           CI: false
           VITE_APP_MARKERS_API_URL: ${{ secrets.MARKERS_API_URL }}
           VITE_APP_VERSION_URL: ${{ secrets.APP_VERSION_URL }}
+          VITE_APP_WALLETCONNECT_ID: ${{ secrets.WALLETCONNECT_ID }}
       - name: Configure AWS Credentials
         uses: aws-actions/configure-aws-credentials@v1
         with:

diff --git a/.github/workflows/deploy-internal.yml b/.github/workflows/deploy-internal.yml
@@ -30,6 +30,7 @@ jobs:
           VITE_APP_INTERNAL_NETWORKS: ${{ secrets.INTERNAL_NETWORK_LIST }}
           VITE_APP_MARKERS_API_URL: ${{ secrets.MARKERS_API_URL }}
           VITE_APP_VERSION_URL: ${{ secrets.APP_VERSION_URL }}
+          VITE_APP_WALLETCONNECT_ID: ${{ secrets.WALLETCONNECT_ID }}
       - name: Configure AWS Credentials
         uses: aws-actions/configure-aws-credentials@v1
         with:

diff --git a/.github/workflows/deploy-next.yml b/.github/workflows/deploy-next.yml
@@ -23,12 +23,14 @@ jobs:
         run: npm install -g yarn
       - run: npm config set '//npm.fontawesome.com/:_authToken' "${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}"
       - run: yarn install
+      - run: yarn run prepare-pro-icons
       - run: yarn run build-next
         env:
           CI: false
           VITE_APP_INTERNAL_NETWORKS: ${{ secrets.INTERNAL_NETWORK_LIST }}
           VITE_APP_MARKERS_API_URL: ${{ secrets.MARKERS_API_URL }}
           VITE_APP_VERSION_URL: ${{ secrets.APP_VERSION_URL }}
+          VITE_APP_WALLETCONNECT_ID: ${{ secrets.WALLETCONNECT_ID }}
       - name: Configure AWS Credentials
         uses: aws-actions/configure-aws-credentials@v1
         with:

diff --git a/.github/workflows/deploy-staging.yml b/.github/workflows/deploy-staging.yml
@@ -29,6 +29,7 @@ jobs:
           CI: false
           VITE_APP_MARKERS_API_URL: ${{ secrets.MARKERS_API_URL }}
           VITE_APP_VERSION_URL: ${{ secrets.APP_VERSION_URL }}
+          VITE_APP_WALLETCONNECT_ID: ${{ secrets.WALLETCONNECT_ID }}
       - name: Configure AWS Credentials
         uses: aws-actions/configure-aws-credentials@v1
         with:

diff --git a/.github/workflows/deploy-testnet.yml b/.github/workflows/deploy-testnet.yml
@@ -29,6 +29,7 @@ jobs:
           CI: false
           VITE_APP_MARKERS_API_URL: ${{ secrets.MARKERS_API_URL }}
           VITE_APP_VERSION_URL: ${{ secrets.APP_VERSION_URL }}
+          VITE_APP_WALLETCONNECT_ID: ${{ secrets.WALLETCONNECT_ID }}
       - name: Configure AWS Credentials
         uses: aws-actions/configure-aws-credentials@v1
         with:

diff --git a/.gitignore b/.gitignore
@@ -10,6 +10,8 @@ pnpm-debug.log*
 lerna-debug.log*
 
 # Dependencies
+.yalc
+yalc.lock
 /node_modules
 /.pnp
 .pnp.js

diff --git a/index.html b/index.html
@@ -92,7 +92,7 @@
       gtag('config', '%VITE_APP_GA_ID%');
     </script>
   </head>
-  <body class="scrollbar">
+  <body class="scrollbar explorer">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <script type="module" src="/src/index.tsx"></script>

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mx-explorer-dapp",
   "description": "MultiversX Blockchain Explorer",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "author": "MultiversX",
   "license": "GPL-3.0-or-later",
   "repository": "multiversx/mx-explorer-dapp",
@@ -15,11 +15,12 @@
     "@fortawesome/free-regular-svg-icons": "6.4.2",
     "@fortawesome/free-solid-svg-icons": "6.4.2",
     "@fortawesome/react-fontawesome": "0.2.0",
-    "@multiversx/sdk-dapp": "2.19.7",
+    "@multiversx/sdk-dapp": "2.23.0",
+    "@multiversx/sdk-dapp-sc-explorer": "0.0.1-beta.1",
     "@react-three/fiber": "8.13.6",
     "@reduxjs/toolkit": "1.9.5",
     "anchorme": "2.1.2",
-    "axios": "0.24.0",
+    "axios": "1.6.2",
     "bech32": "2.0.0",
     "bignumber.js": "9.1.1",
     "bootstrap": "5.2.3",
@@ -92,10 +93,10 @@
     "@types/file-saver": "2.0.5",
     "@types/lodash.clonedeep": "4.5.7",
     "@types/numeral": "2.0.2",
-    "@types/react": "18.2.20",
+    "@types/react": "18.2.33",
     "@types/react-bootstrap": "0.32.32",
     "@types/react-datepicker": "4.15.0",
-    "@types/react-dom": "18.2.7",
+    "@types/react-dom": "18.2.14",
     "@types/react-helmet": "6.1.6",
     "@types/react-simple-maps": "3.0.0",
     "@types/react-syntax-highlighter": "15.5.7",

diff --git a/src/assets/scss/_bootstrap-overrides.scss b/src/assets/scss/_bootstrap-overrides.scss
@@ -53,7 +53,7 @@
   --#{$prefix}btn-hover-bg: var(--#{$prefix}black);
   --#{$prefix}btn-active-bg: var(--#{$prefix}black);
 }
-
+.form-select,
 .form-control {
   background-color: var(--#{$prefix}neutral-800);
   color: var(--#{$prefix}neutral-500);

diff --git a/src/assets/scss/_custom-components.scss b/src/assets/scss/_custom-components.scss
@@ -3,6 +3,8 @@
 
 @import './plugins/react-datepicker';
 @import './plugins/react-select';
+@import './plugins/sdk-dapp-overrides';
+@import './plugins/sdk-sc-explorer';
 
 /* Elements
 -------------------------------------------------- */

diff --git a/src/assets/scss/_shared-styles.scss b/src/assets/scss/_shared-styles.scss
@@ -20,6 +20,12 @@
       display: none;
     }
   }
+  &.has-validation {
+    .input-group-text:first-of-type:not(:last-of-type) {
+      right: 0;
+      top: 0;
+    }
+  }
   &.input-group-lg {
     .form-control {
       border-top-right-radius: $input-border-radius-lg !important;
@@ -34,7 +40,6 @@
   }
   &.has-validation {
     .input-group-text {
-      top: 10%;
       bottom: unset;
     }
   }
@@ -52,7 +57,8 @@
     & > .card-header,
     & > .card-body,
     & > .card-footer {
-      padding: 1.5rem 1rem;
+      --card-cap-padding-y: 1.5rem;
+      --card-cap-padding-x: 1rem;
     }
   }
   &.card-sm {
@@ -117,16 +123,8 @@
   }
 }
 
-.modal-open {
-  .modal {
-    .modal-dialog {
-      @extend .modal-lg;
-
-      .modal-content {
-        background-color: transparent;
-      }
-    }
-  }
+.modal {
+  --modal-bg: transparent;
 }
 
 .table {

diff --git a/src/assets/scss/common/variables/_bootstrap-variables.scss b/src/assets/scss/common/variables/_bootstrap-variables.scss
@@ -49,7 +49,7 @@ $primary: $primary-400;
 $secondary: $neutral-400;
 $success: $green;
 $info: $cyan;
-$warning: $amber-400;
+$warning: $amber-500;
 $danger: $red;
 $light: $neutral-100;
 $dark: $neutral-900;
@@ -180,6 +180,9 @@ $progress-border-radius: $border-radius;
 $list-group-border-radius: $border-radius;
 $alert-border-radius: $border-radius;
 
+$component-active-color: $body-color;
+$component-active-bg: $primary-400;
+
 // Typography
 //
 // Font, line-height, and color for body text, headings, and more.
@@ -220,7 +223,8 @@ $input-btn-padding-y-lg: 0.625rem;
 $input-btn-padding-x-lg: $input-btn-padding-x;
 $input-btn-font-size-lg: $font-size-lg;
 
-$input-btn-border-width: 0;
+$input-btn-focus-box-shadow: none;
+
 // scss-docs-end input-btn-variables
 
 // Buttons
@@ -276,15 +280,21 @@ $input-padding-y-lg: $input-btn-padding-y-lg;
 $input-padding-x-lg: $input-btn-padding-x-lg;
 $input-font-size-lg: $input-btn-font-size-lg;
 
-$input-bg: $body-bg;
-$input-disabled-color: null;
-$input-disabled-bg: $neutral-200;
-$input-disabled-border-color: null;
-
 $input-color: $body-color;
+$input-bg: $body-bg;
+$input-box-shadow: $box-shadow-inset;
 $input-border-color: $neutral-400;
+$input-btn-border-width: 0;
 $input-border-width: $input-btn-border-width;
-$input-box-shadow: $box-shadow-inset;
+
+$input-focus-width: 1px;
+
+$input-disabled-color: $neutral-600;
+$input-disabled-bg: $input-bg;
+$input-disabled-border-color: null;
+$input-focus-color: $body-color;
+$input-focus-bg: $input-bg;
+$input-focus-border-color: $component-active-bg;
 
 // $input-border-radius: $btn-border-radius;
 // $input-border-radius-sm: $btn-border-radius-sm;
@@ -298,13 +308,39 @@ $input-group-addon-padding-x: $input-padding-x;
 $input-group-addon-font-weight: $input-font-weight;
 // scss-docs-end form-input-variables
 
+// scss-docs-start form-check-variables
+
+$form-check-input-bg: $input-bg;
+$form-check-input-border: 1px solid rgba($black, 0.25);
+$form-check-input-focus-border: $input-focus-border-color;
+$form-check-input-focus-box-shadow: $input-btn-focus-box-shadow;
+
+$form-check-input-checked-color: $component-active-color;
+$form-check-input-checked-bg-color: $component-active-bg;
+$form-check-input-checked-border-color: $form-check-input-checked-bg-color;
+$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
+$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>");
+
+$form-check-input-indeterminate-color: $component-active-color;
+$form-check-input-indeterminate-bg-color: $component-active-bg;
+$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color;
+$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");
+
+$form-check-label-disabled-opacity: $form-check-input-disabled-opacity;
+$form-check-btn-check-disabled-opacity: $btn-disabled-opacity;
+
+// scss-docs-end form-check-variables
+
 // scss-docs-start form-select-variables
 $form-select-bg: $neutral-800;
 $form-select-color: $body-color;
 $form-select-indicator-color: $neutral-400;
 $form-select-border-color: $neutral-800;
 $form-select-box-shadow: unset;
 $form-select-focus-box-shadow: unset;
+$form-select-disabled-color: $neutral-600;
+$form-select-disabled-bg: $input-bg;
+$form-select-border-width: 0;
 // scss-docs-end form-select-variables
 
 // Z-index master list
@@ -443,7 +479,7 @@ $badge-color: $body-color;
 
 // scss-docs-start modal-variables
 $modal-content-border-radius: $border-radius-lg;
-$modal-backdrop-opacity: 0.55;
+$modal-backdrop-opacity: 0.75;
 $modal-backdrop-bg: $card-bg;
 $modal-content-border-radius: 0.75rem;
 $modal-content-bg: $black;

diff --git a/src/assets/scss/components/_pages.scss b/src/assets/scss/components/_pages.scss
@@ -1,5 +1,4 @@
 @import '../../../pages/AccountDetails/AccountStaking/accountStaking.styles.scss';
-@import '../../../pages/AccountDetails/AccountVerifiedContract/verifiedContract.styles.scss';
 @import '../../../pages/Analytics/analytics.styles.scss';
 @import '../../../pages/BlockDetails/blockDetails.styles.scss';
 @import '../../../pages/Identities/identities.styles.scss';

diff --git a/src/assets/scss/elements/_badges.scss b/src/assets/scss/elements/_badges.scss
@@ -6,16 +6,25 @@ button.badge {
   }
 }
 
+.badge-primary,
 .badge-green-alt,
 .badge-yellow,
 .badge-orange,
 .badge-grey {
   border: 0;
   line-height: 1rem;
-  color: #fafafa;
+  color: var(--neutral-50);
   min-width: 1.5rem;
 }
 
+.badge-primary-alt {
+  color: var(--primary-200);
+  background: linear-gradient(
+    90deg,
+    rgba(0, 245, 160, 0.4),
+    rgba(0, 217, 245, 0.4)
+  );
+}
 .badge-green-alt {
   background: linear-gradient(
     90deg,
@@ -56,9 +65,12 @@ button.badge {
     inset: 0;
     border-radius: $badge-border-radius;
     padding: 1px;
-    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
-    -webkit-mask: linear-gradient(#fff 0 0) content-box,
+    -webkit-mask:
+      linear-gradient(#fff 0 0) content-box,
       linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
     mask-composite: exclude;
@@ -147,6 +159,16 @@ button.badge {
       background: linear-gradient(90deg, var(--violet-400), #b6a1f3);
     }
   }
+  &-primary-alt {
+    color: var(--primary-200);
+    &:before {
+      background: linear-gradient(
+        90deg,
+        rgba(0, 245, 160, 0.4) 0%,
+        rgba(0, 217, 245, 0.4) 100%
+      );
+    }
+  }
 
   &.badge-rounded {
     line-height: 12px;

diff --git a/...assets/scss/plugins/react-datepicker.scss → ...ssets/scss/plugins/_react-datepicker.scss b/...assets/scss/plugins/react-datepicker.scss → ...ssets/scss/plugins/_react-datepicker.scss
diff --git a/src/assets/scss/plugins/react-select.scss → src/assets/scss/plugins/_react-select.scss b/src/assets/scss/plugins/react-select.scss → src/assets/scss/plugins/_react-select.scss