Merge branch 'dev' into feat/tx-history/mark-expired-transactions

client/src/app/components/footer/ExplorerVersion.scss

@@ -0,0 +1,25 @@
+@import "../../../scss/fonts";
+@import "../../../scss/media-queries";
+@import "../../../scss/mixins";
+@import "../../../scss/variables";
+
+.explorer-version {
+    display: flex;
+    width: 100%;
+    background-color: $gray-11;
+    justify-content: center;
+    padding-bottom: 12px;
+
+    &.shimmer-version {
+        position: absolute;
+        bottom: 0;
+        background-color: transparent;
+    }
+
+    span {
+        @include font-size(13px);
+
+        font-family: $inter;
+        color: $gray-6;
+    }
+}

client/src/app/components/footer/ExplorerVersion.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import classNames from "classnames";
+import "./ExplorerVersion.scss";
+
+export default function ExplorerVersion({ shimmerTheme }: { shimmerTheme?: boolean }): React.JSX.Element {
+    const explorerVersion = EXPLORER_VERSION ?? "";
+
+    return (
+        <>
+            {explorerVersion && (
+                <section className={classNames("explorer-version", { "shimmer-version": shimmerTheme })}>
+                    <span>v{explorerVersion}</span>
+                </section>
+            )}
+        </>
+    );
+}

client/src/app/components/footer/Footer.scss

@@ -7,7 +7,7 @@ footer {
     .footer--content {
         display: flex;
         justify-content: center;
-        padding: 40px 20px 64px 20px;
+        padding: 40px 20px 0px 20px;
         background-color: $gray-11;
         color: $white;
 

client/src/app/components/footer/Footer.tsx

@@ -11,6 +11,7 @@ import TwitterIcon from "~assets/twitter.svg?react";
 import YoutubeIcon from "~assets/youtube.svg?react";
 import { FoundationDataHelper } from "~helpers/foundationDataHelper";
 import AsyncComponent from "../AsyncComponent";
+import ExplorerVersion from "./ExplorerVersion";
 import "./Footer.scss";
 
 /**
@@ -135,6 +136,7 @@ class Footer extends AsyncComponent<FooterProps, FooterState> {
                         </div>
                     </div>
                 </section>
+                <ExplorerVersion />
                 <section className="social--media__wrapper">
                     {this.SOCIAL_LINKS.map((social, socialID) => (
                         <a

client/src/app/components/footer/ShimmerFooter.scss

@@ -4,6 +4,7 @@
 @import "../../../scss/variables";
 
 footer {
+    position: relative;
     .shimmer-footer--content {
         display: flex;
         justify-content: center;

client/src/app/components/footer/ShimmerFooter.tsx

@@ -6,8 +6,9 @@ import GithubIcon from "~assets/github.svg?react";
 import Logo from "~assets/shimmer-footer-bg.svg?react";
 import TwitterIcon from "~assets/twitter.svg?react";
 import { FoundationDataHelper } from "~helpers/foundationDataHelper";
-import "./ShimmerFooter.scss";
 import AsyncComponent from "../AsyncComponent";
+import ExplorerVersion from "./ExplorerVersion";
+import "./ShimmerFooter.scss";
 
 /**
  * Component which will show the footer.
@@ -114,6 +115,7 @@ class ShimmerFooter extends AsyncComponent<FooterProps, FooterState> {
                             </section>
                         </div>
                     </div>
+                    <ExplorerVersion shimmerTheme />
                 </section>
             </footer>
         );

client/src/app/components/identity/DIDResolver.tsx

@@ -148,8 +148,8 @@ export default IdentityStardustResolver;
 
 async function constructVerifiedDomains(resolvedDID: IDIDResolverResponse): Promise<Map<string, Promise<void>>> {
     const newVerifiedDomains = new Map<string, Promise<void>>();
-
-    await ServiceFactory.get<IdentityService>("identity").initLibrary();
+    const origin = window?.location?.origin ?? "";
+    await ServiceFactory.get<IdentityService>("identity").initLibrary(origin + "/wasm/identity_wasm_bg.wasm");
 
     const didDocument = identity.IotaDocument.fromJSON(resolvedDID.document);
     // Get the Linked Domain Services from the DID Document.

client/src/helpers/hooks/useResolvedDID.ts

@@ -29,7 +29,7 @@ export function useResolvedDID(network: string, bech32Hrp: string, addressHex: s
                             setidentityResponse(response);
                         }
                     })
-                    .then(() => identityService.initLibrary())
+                    .then(() => identityService.initLibrary(window?.location?.origin ?? "" + "/wasm/identity_wasm_bg.wasm"))
                     .finally(() => {
                         setIsLoading(false);
                     });

client/src/index.tsx

@@ -35,7 +35,8 @@ const apiEndpoint = (window as any).env.API_ENDPOINT;
 initialiseServices()
     .then(async () => {
         // load the wasm
-        await initStardustSdk("/wasm/iota_sdk_stardust_wasm_bg.wasm");
+        const origin = window?.location?.origin ?? "";
+        await initStardustSdk(origin + "/wasm/iota_sdk_stardust_wasm_bg.wasm");
 
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const container = document.querySelector("#root")!;

client/vite-env.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-plugin-svgr/client" />
+declare const EXPLORER_VERSION: string;
 

client/vite.config.ts

@@ -23,6 +23,9 @@ export default defineConfig(() => {
             }),
             nodePolyfills()
         ],
+        define: {
+            EXPLORER_VERSION: JSON.stringify(process.env.npm_package_version)
+        },
         test: {
             globals: true,
             teardownTimeout: 100