D kent

package.json

@@ -8,13 +8,14 @@
     "@fortawesome/fontawesome-svg-core": "6.1.0",
     "@fortawesome/free-solid-svg-icons": "6.1.0",
     "@fortawesome/react-fontawesome": "0.1.18",
-    "@itheum/sdk-mx-data-nft": "^0.0.3",
-    "@multiversx/sdk-core": "^12.1.1",
+    "@itheum/sdk-mx-data-nft": "0.0.4",
+    "@multiversx/sdk-core": "12.2.1",
     "@multiversx/sdk-dapp": "2.10.17",
-    "@multiversx/sdk-network-providers": "^1.3.0",
+    "@multiversx/sdk-network-providers": "^1.4.0",
     "@types/react-modal": "^3.16.0",
     "axios": "0.24.0",
     "bootstrap": "4.6.2",
+    "d3": "^7.8.5",
     "moment": "2.29.4",
     "moment-timezone": "^0.5.43",
     "react": "18.2.0",
@@ -52,6 +53,7 @@
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
+    "@types/d3": "^7.4.0",
     "@types/jest": "26.0.15",
     "@types/node": "12.0.0",
     "@types/react": "18.0.24",

public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "VestaX Finance",
+  "name": "VestaX Finance Liquid Staking Platform",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

src/assets/sass/theme.scss

@@ -389,3 +389,11 @@ $font-poppins: "Poppins", sans-serif;
 .custom-control-input:checked ~ .custom-control-label::before {
   background-color: red;
 }
+
+@media screen and (max-width: 564px) {
+  .ReactModal__Content.ReactModal__Content--after-open {
+    margin-right: 5px !important;
+    width: 100% !important;
+    height: 100% !important;
+  }
+}

src/components/ElrondAddressLink.tsx

@@ -19,7 +19,7 @@ export const ElrondAddressLink: FC<ElrondAddressLinkPropsType> = ({
       href={`${explorerAddress}/accounts/${address}`}
       target="blank"
     >
-      {address.slice(0, precision) + " ... " + address.slice(-precision)}
+      {precision > 0 ? address.slice(0, precision) + " ... " + address.slice(-precision) : address}
       <FontAwesomeIcon icon={faLink} className="ml-2" />
     </a>
   );

src/components/Layout/Navbar.tsx

@@ -69,6 +69,12 @@ export const Navbar = () => {
                   Itheum Trailblazer
                 </Link>
               </NavDropdown.Item>
+
+              <NavDropdown.Item as="div">
+                <Link to={routeNames.esdtBubble} className="nav-link">
+                  ESDT Bubble
+                </Link>
+              </NavDropdown.Item>
             </NavDropdown>
 
             {isLoggedIn ? (

src/config.tsx

@@ -21,6 +21,8 @@ export const TRAILBLAZER_NONCES = [407];
 export const CC_SHOW_SIZE = 10;
 export const GAMER_PASSPORT_GAMER_NONCES = [12];
 export const PLAYSTATION_GAMER_PASSPORT_NONCES = [379, 380];
+export const ESDT_BUBBLE_NONCES = [417];
+export const EB_SHOW_SIZE = 10;
 
 export const MARKETPLACE_DETAILS_PAGE =
   process.env.REACT_APP_ENV_NETWORK &&

src/libs/ui.ts

@@ -11,6 +11,6 @@ export const modalStyles = {
     bottom: "auto",
     marginRight: "-50%",
     transform: "translate(-50%, -50%)",
-    backgroundColor: 'var(--light)'
+    backgroundColor: 'var(--light)',
   },
 };

src/libs/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './bignum';
 export * from './constant';
+export * from './misc';
 export * from './ui';

src/libs/utils/misc.ts

@@ -0,0 +1,3 @@
+export function shortenAddress(value: string, length: number = 6): string {
+  return value.slice(0, length) + ' ... ' + value.slice(-length);
+}

src/pages/CantinaCorner.tsx

@@ -193,10 +193,12 @@ export const CantinaCorner = () => {
         messageToBeSigned,
         signedMessage as any as SignableMessage
       );
+      res.data = await (res.data as Blob).text();
+      res.data = JSON.parse(res.data);
       console.log("viewData", res);
-      setDataMarshalRes(JSON.stringify(res, null, 4));
+      setDataMarshalRes(JSON.stringify(res.data, null, 4));
 
-      const players = res.sort((pa: any, pb: any) => pa.rank - pb.rank);
+      const players = res.data.sort((pa: any, pb: any) => pa.rank - pb.rank);
 
       const datasets = [];
       for (let i = 0; i < CC_SHOW_SIZE; i++) {