refactor: use PSDK methods to show nonce

package.json

@@ -44,13 +44,13 @@
 	},
 	"dependencies": {
 		"@ardenthq/arkvault-url": "^1.2.0",
-		"@ardenthq/sdk": "^2.1.2",
-		"@ardenthq/sdk-ark": "^2.1.2",
-		"@ardenthq/sdk-cryptography": "^2.1.2",
-		"@ardenthq/sdk-helpers": "^2.1.2",
-		"@ardenthq/sdk-intl": "^2.1.2",
-		"@ardenthq/sdk-ledger": "^2.1.2",
-		"@ardenthq/sdk-profiles": "^2.1.2",
+		"@ardenthq/sdk": "^2.2.0",
+		"@ardenthq/sdk-ark": "^2.2.0",
+		"@ardenthq/sdk-cryptography": "^2.2.0",
+		"@ardenthq/sdk-helpers": "^2.2.0",
+		"@ardenthq/sdk-intl": "^2.2.0",
+		"@ardenthq/sdk-ledger": "^2.2.0",
+		"@ardenthq/sdk-profiles": "^2.2.0",
 		"@emotion/cache": "^11.11.0",
 		"@emotion/react": "^11.11.4",
 		"@emotion/styled": "^11.11.5",

src/domains/transaction/components/MultiSignatureDetail/__snapshots__/SentStep.test.tsx.snap

@@ -756,11 +756,11 @@ exports[`Multisignature Detail Sent Step > should render sent step %s 1`] = `
                     >
                       Nonce
                     </div>
-                    <p
-                      class="text-sm leading-[17px] text-theme-secondary-500 sm:text-base sm:leading-5"
+                    <div
+                      class="text-sm font-semibold leading-[17px] sm:text-base sm:leading-5"
                     >
-                      N/A
-                    </p>
+                      1
+                    </div>
                   </div>
                 </div>
               </div>

src/domains/transaction/components/TransactionDetail/TransactionDetails/TransactionDetails.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useCallback } from "react";
+import React, { ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 import { DTO } from "@ardenthq/sdk";
 import { DetailDivider, DetailLabelText, DetailWrapper } from "@/app/components/DetailWrapper";
@@ -22,17 +22,6 @@ export const TransactionDetails = ({
 		network: transaction.wallet().network(),
 	});
 
-	const nonce = useCallback(() => {
-		try {
-			const data = transaction.data().data;
-			const nonceValue = typeof data === "function" ? transaction.data().data().nonce : data?.nonce;
-
-			return typeof nonceValue === "string" ? nonceValue : "";
-		} catch {
-			return "";
-		}
-	}, [transaction]);
-
 	return (
 		<DetailWrapper label={t("TRANSACTION.TRANSACTION_DETAILS")}>
 			<div className="space-y-3 sm:space-y-0">
@@ -68,13 +57,9 @@ export const TransactionDetails = ({
 
 				<div className="flex w-full justify-between sm:justify-start">
 					<DetailLabelText className={labelClassName}>{t("COMMON.NONCE")}</DetailLabelText>
-					{nonce() ? (
-						<div className="text-sm font-semibold leading-[17px] sm:text-base sm:leading-5">{nonce()}</div>
-					) : (
-						<p className="text-sm leading-[17px] text-theme-secondary-500 sm:text-base sm:leading-5">
-							{t("COMMON.NOT_AVAILABLE")}
-						</p>
-					)}
+					<div className="text-sm font-semibold leading-[17px] sm:text-base sm:leading-5">
+						{transaction.nonce().toString()}
+					</div>
 				</div>
 			</div>
 		</DetailWrapper>