Development

package.json

@@ -12,19 +12,19 @@
     "preview": "vite preview",
     "test": "vitest",
     "wdio": "wdio run ./wdio.conf.ts",
-    "singleScript" : "wdio run ./wdio.conf.ts --suite single"
+    "singleScript": "wdio run ./wdio.conf.ts --suite single"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.1.0",
-    "@fortawesome/free-solid-svg-icons": "6.1.0",
+    "@fortawesome/fontawesome-svg-core": "6.5.1",
+    "@fortawesome/free-solid-svg-icons": "6.5.1",
     "@fortawesome/react-fontawesome": "0.2.0",
-    "@multiversx/sdk-core": "12.17.0",
-    "@multiversx/sdk-dapp": "2.26.5",
-    "@multiversx/sdk-dapp-sc-explorer": "0.0.1-beta.5",
-    "@multiversx/sdk-native-auth-server": "1.0.11",
-    "@multiversx/sdk-wallet": "4.2.0",
+    "@multiversx/sdk-core": "12.18.0",
+    "@multiversx/sdk-dapp": "2.28.0",
+    "@multiversx/sdk-dapp-sc-explorer": "0.0.1-beta.6",
+    "@multiversx/sdk-native-auth-server": "1.0.12",
+    "@multiversx/sdk-wallet": "4.3.0",
     "@uiw/react-textarea-code-editor": "2.1.9",
-    "axios": "1.2.2",
+    "axios": "1.6.5",
     "bignumber.js": "9.1.0",
     "classnames": "2.3.2",
     "formik": "2.2.9",

src/assets/sass/plugins/sdk-sc-explorer/_badge.scss

@@ -53,6 +53,22 @@
           );
         }
       }
+
+      &-yellow-alt {
+        color: var(--yellow-500);
+        background: linear-gradient(
+          90deg,
+          rgba(240, 77, 25, 0.05),
+          rgba(237, 136, 93, 0.05)
+        );
+        &:before {
+          background: linear-gradient(
+            90deg,
+            rgba(240, 77, 25, 0.4),
+            rgba(237, 136, 93, 0.4)
+          );
+        }
+      }
     }
     &.badge-filled {
       padding: 0 0.25rem;
@@ -64,5 +80,13 @@
       color: var(--white, #fff);
       font-weight: 700;
     }
+    &.badge-rounded {
+      line-height: 1rem;
+      border-radius: 6px;
+      padding: 0.125rem 0.5rem;
+      &:before {
+        border-radius: 6px;
+      }
+    }
   }
 }

src/assets/sass/plugins/sdk-sc-explorer/_card-item.scss

@@ -60,6 +60,17 @@
         margin-left: 0.5rem;
         svg[data-icon='copy'] {
           color: var(--neutral-500);
+          &:hover {
+            color: var(--primary);
+          }
+        }
+      }
+      .dapp-explorer-link {
+        svg[data-icon='arrow-up-right-from-square'] {
+          color: var(--neutral-500);
+          &:hover {
+            color: var(--primary);
+          }
         }
       }
     }

src/assets/sass/plugins/sdk-sc-explorer/_inputs.scss

@@ -51,13 +51,20 @@
     line-height: 1;
     display: inline-block;
   }
+  &-general-warning,
   &-general-error {
     color: var(--danger);
     margin-top: 1rem;
     p {
       margin-bottom: 0;
     }
   }
+  &-general-error {
+    color: var(--danger);
+  }
+  &-general-warning {
+    color: var(--warning);
+  }
 
   &-amount-select-input-group {
     margin-top: 2rem;

src/assets/sass/plugins/sdk-sc-explorer/_panel.scss

@@ -42,6 +42,15 @@
       display: flex;
       align-items: center;
       gap: 1rem;
+      a {
+        text-decoration: none;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        svg {
+          height: 0.75rem;
+        }
+      }
     }
   }
   &-panel-mode {

src/assets/sass/plugins/sdk-sc-explorer/_sections.scss

@@ -4,7 +4,9 @@
 
 .#{$package-name} {
   // Build Info
-  &-contract-build {
+  // Contract Details
+  &-contract-build,
+  &-contract-details {
     display: flex;
     flex-direction: column;
     .#{$package-name}-card-body {
@@ -13,6 +15,32 @@
     }
   }
 
+  // ContractDetails
+  &-contract-details {
+    &-properties-container {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      column-gap: 1rem;
+      row-gap: 0.5rem;
+    }
+    .#{$package-name}-card-item {
+      @media (min-width: 768px) {
+        flex-basis: 48%;
+      }
+      &-value {
+        align-items: center;
+        .dapp-trim {
+          @media (max-width: 767px) {
+            max-width: 10rem;
+          }
+        }
+        svg[data-icon='file-lines'] {
+          color: var(--primary);
+        }
+      }
+    }
+  }
   // Endpoints
   &-endpoint-output {
     .#{$package-name}-panel-content {

src/assets/sass/theme.scss

@@ -34,6 +34,8 @@ body {
   --primary-800: #115e55;
   --primary-900: #134e48;
 
+  --yellow-500: #eab308;
+
   --white: #ffffff;
   --body: #18191a;
   --navigation: #242526;

src/pages/SmartContractInteraction/SmartContractInteraction.tsx

@@ -10,6 +10,9 @@ import styles from './styles.module.scss';
 const customClassNames = {
   badgePrimaryClassName: 'badge-outline badge-outline-primary-alt',
   badgeSecondaryClassName: 'badge-outline badge-outline-grey',
+  badgeActiveClassName: 'badge-outline badge-rounded badge-outline-primary-alt',
+  badgeInactiveClassName:
+    'badge-outline badge-rounded badge-outline-yellow-alt',
   badgeFilledClassName: 'badge-filled',
   buttonClassName: styles?.button,
   buttonSecondaryClassName: styles?.buttonSecondary,
@@ -39,17 +42,18 @@ export const SmartContractInteraction = () => {
   return (
     <div className={styles?.container}>
       <ScExplorerContainer
-        smartContract={{
-          canMutate: true,
-          canLoadAbi: true,
-          canDeploy: true,
-          canUpgrade: true,
-        }}
         accountConsumerHandlers={{
           useGetLoginInfo,
           useGetAccountInfo,
           onLoginClick,
         }}
+        config={{
+          canMutate: true,
+          canLoadAbi: true,
+          canDeploy: true,
+          canUpgrade: true,
+          canDisplayContractDetails: true,
+        }}
         networkConfig={{ environment: dappEnvironment }}
         customClassNames={customClassNames}
         className='mx-sdk-sc'