From 3665d8a9196cc43061ffc9ba22991e038874b61b Mon Sep 17 00:00:00 2001
From: Pierre <128218103+PierreTrehet@users.noreply.github.com>
Date: Fri, 13 Jun 2025 18:33:11 +0200
Subject: [PATCH 1/7] Update signing UI with modal summary

---
 src/popup/Signing/Extrinsic.tsx | 27 ++++++++++++++++++++++++---
 src/popup/Signing/index.tsx     |  2 +-
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/popup/Signing/Extrinsic.tsx b/src/popup/Signing/Extrinsic.tsx
index 6dbc925..4da69ba 100644
--- a/src/popup/Signing/Extrinsic.tsx
+++ b/src/popup/Signing/Extrinsic.tsx
@@ -17,6 +17,7 @@ import { PORT_EXTENSION } from "../../extension-base/defaults";
 import { useTheme } from "../context/ThemeContext";
 import { transactionUtils } from "@reef-chain/util-lib";
 import { ProviderContext } from "../contexts";
+import Uik from "@reef-chain/ui-kit";
 
 interface Decoded {
   args: AnyJson | null;
@@ -160,9 +161,27 @@ function Extrinsic({
   }, [provider])
 
   const { isDarkMode } = useTheme();
+  const [showDetails, setShowDetails] = useState(false);
+
   return (
-    <table className={`flex overflow-x-scroll ${isDarkMode ? "" : "text-black"} extrinsic-data-table`}>
-      <tbody>
+    <div>
+      <div className="uik-modal__popup">
+        {signatureResponse?.methodName && (
+          <div className="font-bold">
+            {signatureResponse.methodName.split("(")[0]}
+          </div>
+        )}
+        {signatureResponse?.info && <div>{signatureResponse.info}</div>}
+        <Uik.Button
+          text={showDetails ? "Hide details" : "Show details"}
+          size="small"
+          onClick={() => setShowDetails(!showDetails)}
+          className="mt-2"
+        />
+      </div>
+      {showDetails && (
+        <table className={`flex overflow-x-scroll ${isDarkMode ? "" : "text-black"} extrinsic-data-table`}>
+          <tbody>
         {url !== PORT_EXTENSION && (
           <tr>
             <td className="extrinsic-table-label">From</td>
@@ -218,7 +237,9 @@ function Extrinsic({
           <td className="pl-4">{mortalityAsString(era, blockNumber)}</td>
         </tr>
       </tbody>
-    </table>
+        </table>
+      )}
+    </div>
   );
 }
 
diff --git a/src/popup/Signing/index.tsx b/src/popup/Signing/index.tsx
index f27d6b4..56bd15a 100644
--- a/src/popup/Signing/index.tsx
+++ b/src/popup/Signing/index.tsx
@@ -65,7 +65,7 @@ export const Signing = ({ requests }: Props): JSX.Element => {
           />
         )}
       </div>
-      <div className="flex flex-col align-middle justify-center request-page">
+      <div className="uik-modal__popup request-page">
         <Account
           account={requests[requestIndex].account}
           showCopyAddress={true}

From 8ef9b32f80a341a13048e57a2792ed1a324922ea Mon Sep 17 00:00:00 2001
From: Pierre <128218103+PierreTrehet@users.noreply.github.com>
Date: Fri, 13 Jun 2025 18:49:34 +0200
Subject: [PATCH 2/7] Adjust signing modal layout

---
 src/popup/Signing/Extrinsic.tsx |  4 ++--
 src/popup/Signing/index.tsx     | 12 ++----------
 2 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/src/popup/Signing/Extrinsic.tsx b/src/popup/Signing/Extrinsic.tsx
index 4da69ba..b5b8660 100644
--- a/src/popup/Signing/Extrinsic.tsx
+++ b/src/popup/Signing/Extrinsic.tsx
@@ -165,7 +165,7 @@ function Extrinsic({
 
   return (
     <div>
-      <div className="uik-modal__popup">
+      <div className="uik-modal__body mx-4">
         {signatureResponse?.methodName && (
           <div className="font-bold">
             {signatureResponse.methodName.split("(")[0]}
@@ -176,7 +176,7 @@ function Extrinsic({
           text={showDetails ? "Hide details" : "Show details"}
           size="small"
           onClick={() => setShowDetails(!showDetails)}
-          className="mt-2"
+          className="uik-button--small mt-2"
         />
       </div>
       {showDetails && (
diff --git a/src/popup/Signing/index.tsx b/src/popup/Signing/index.tsx
index 56bd15a..1aee800 100644
--- a/src/popup/Signing/index.tsx
+++ b/src/popup/Signing/index.tsx
@@ -7,16 +7,13 @@ import type { SignerPayloadJSON } from "@polkadot/types/types";
 import { SigningRequest } from "../../extension-base/background/types";
 import Request from "./Request";
 import RequestIndex from "../RequestIndex";
-import Account from "../Accounts/Account";
 import { Loading } from "../components/Loading";
-import { useTheme } from "../context/ThemeContext";
 
 interface Props {
   requests: SigningRequest[];
 }
 
 export const Signing = ({ requests }: Props): JSX.Element => {
-  const { isDarkMode } = useTheme();
   const [requestIndex, setRequestIndex] = useState(0);
   const [isTransaction, setIsTransaction] = useState(false);
 
@@ -54,7 +51,7 @@ export const Signing = ({ requests }: Props): JSX.Element => {
 
   return requests.length && requests[requestIndex] ? (
     <>
-      <div className={`text-center text-lg font-bold ${isDarkMode ? "text--dark-mode" : "text-black"}`}>
+      <div className="text-center text-lg font-bold text-black">
         <span>{isTransaction ? "Transaction" : "Sign message"}</span>
         {requests.length > 1 && (
           <RequestIndex
@@ -65,12 +62,7 @@ export const Signing = ({ requests }: Props): JSX.Element => {
           />
         )}
       </div>
-      <div className="uik-modal__popup request-page">
-        <Account
-          account={requests[requestIndex].account}
-          showCopyAddress={true}
-          className="account-box-padding"
-        />
+      <div className="uik-modal__body request-page">
         <Request
           account={requests[requestIndex].account}
           buttonText={isTransaction ? "Sign transaction" : "Sign message"}

From f07a7206cb07beb81e5796c6e52b2c8d2c7283c8 Mon Sep 17 00:00:00 2001
From: Pierre <128218103+PierreTrehet@users.noreply.github.com>
Date: Fri, 13 Jun 2025 18:56:38 +0200
Subject: [PATCH 3/7] Remove mx-4 from modal body

---
 src/popup/Signing/Extrinsic.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/popup/Signing/Extrinsic.tsx b/src/popup/Signing/Extrinsic.tsx
index b5b8660..da39370 100644
--- a/src/popup/Signing/Extrinsic.tsx
+++ b/src/popup/Signing/Extrinsic.tsx
@@ -165,7 +165,7 @@ function Extrinsic({
 
   return (
     <div>
-      <div className="uik-modal__body mx-4">
+      <div className="uik-modal__body">
         {signatureResponse?.methodName && (
           <div className="font-bold">
             {signatureResponse.methodName.split("(")[0]}

From e5b175402f3374a07585182e2b74481d7e3b4164 Mon Sep 17 00:00:00 2001
From: Pierre <128218103+PierreTrehet@users.noreply.github.com>
Date: Fri, 13 Jun 2025 19:08:04 +0200
Subject: [PATCH 4/7] Use confirm popup container

---
 src/popup/Signing/Extrinsic.tsx | 2 +-
 src/popup/Signing/index.tsx     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/popup/Signing/Extrinsic.tsx b/src/popup/Signing/Extrinsic.tsx
index da39370..94adccc 100644
--- a/src/popup/Signing/Extrinsic.tsx
+++ b/src/popup/Signing/Extrinsic.tsx
@@ -165,7 +165,7 @@ function Extrinsic({
 
   return (
     <div>
-      <div className="uik-modal__body">
+      <div className="confirm-popup__container">
         {signatureResponse?.methodName && (
           <div className="font-bold">
             {signatureResponse.methodName.split("(")[0]}
diff --git a/src/popup/Signing/index.tsx b/src/popup/Signing/index.tsx
index 1aee800..747c4b4 100644
--- a/src/popup/Signing/index.tsx
+++ b/src/popup/Signing/index.tsx
@@ -62,7 +62,7 @@ export const Signing = ({ requests }: Props): JSX.Element => {
           />
         )}
       </div>
-      <div className="uik-modal__body request-page">
+      <div className="confirm-popup__container request-page">
         <Request
           account={requests[requestIndex].account}
           buttonText={isTransaction ? "Sign transaction" : "Sign message"}

From a54993d47e80ef579d50a888b66b41532b064e18 Mon Sep 17 00:00:00 2001
From: Pierre <128218103+PierreTrehet@users.noreply.github.com>
Date: Fri, 13 Jun 2025 19:27:30 +0200
Subject: [PATCH 5/7] Show transaction summary without confirm container

---
 src/popup/Signing/Extrinsic.tsx | 2 +-
 src/popup/Signing/index.tsx     | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/popup/Signing/Extrinsic.tsx b/src/popup/Signing/Extrinsic.tsx
index 94adccc..a247aa4 100644
--- a/src/popup/Signing/Extrinsic.tsx
+++ b/src/popup/Signing/Extrinsic.tsx
@@ -165,7 +165,7 @@ function Extrinsic({
 
   return (
     <div>
-      <div className="confirm-popup__container">
+      <div className="mx-4">
         {signatureResponse?.methodName && (
           <div className="font-bold">
             {signatureResponse.methodName.split("(")[0]}
diff --git a/src/popup/Signing/index.tsx b/src/popup/Signing/index.tsx
index 747c4b4..62902f1 100644
--- a/src/popup/Signing/index.tsx
+++ b/src/popup/Signing/index.tsx
@@ -7,6 +7,7 @@ import type { SignerPayloadJSON } from "@polkadot/types/types";
 import { SigningRequest } from "../../extension-base/background/types";
 import Request from "./Request";
 import RequestIndex from "../RequestIndex";
+import Account from "../Accounts/Account";
 import { Loading } from "../components/Loading";
 
 interface Props {
@@ -62,7 +63,12 @@ export const Signing = ({ requests }: Props): JSX.Element => {
           />
         )}
       </div>
-      <div className="confirm-popup__container request-page">
+      <div className="flex flex-col align-middle justify-center request-page">
+        <Account
+          account={requests[requestIndex].account}
+          showCopyAddress={true}
+          className="account-box-padding"
+        />
         <Request
           account={requests[requestIndex].account}
           buttonText={isTransaction ? "Sign transaction" : "Sign message"}

From edc49653534ec689f0e35e9c3067e7c87ecbb4a4 Mon Sep 17 00:00:00 2001
From: Pierre <128218103+PierreTrehet@users.noreply.github.com>
Date: Fri, 13 Jun 2025 19:34:52 +0200
Subject: [PATCH 6/7] Remove remaining mx-4 classes

---
 src/popup/RequestIndex.tsx      | 2 +-
 src/popup/Signing/Extrinsic.tsx | 2 +-
 src/popup/Signing/Request.tsx   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/popup/RequestIndex.tsx b/src/popup/RequestIndex.tsx
index bf4274e..531b01c 100644
--- a/src/popup/RequestIndex.tsx
+++ b/src/popup/RequestIndex.tsx
@@ -46,7 +46,7 @@ function RequestIndex({
           icon={faArrowAltCircleLeft as IconProp}
           onClick={prevClick}
         />
-        <div className="mx-4">
+        <div>
           <span>{index + 1}</span>
           <span>/{totalItems}</span>
         </div>
diff --git a/src/popup/Signing/Extrinsic.tsx b/src/popup/Signing/Extrinsic.tsx
index a247aa4..e31a564 100644
--- a/src/popup/Signing/Extrinsic.tsx
+++ b/src/popup/Signing/Extrinsic.tsx
@@ -165,7 +165,7 @@ function Extrinsic({
 
   return (
     <div>
-      <div className="mx-4">
+      <div>
         {signatureResponse?.methodName && (
           <div className="font-bold">
             {signatureResponse.methodName.split("(")[0]}
diff --git a/src/popup/Signing/Request.tsx b/src/popup/Signing/Request.tsx
index 6cb0d1d..3cf69e5 100644
--- a/src/popup/Signing/Request.tsx
+++ b/src/popup/Signing/Request.tsx
@@ -145,7 +145,7 @@ export default function Request({
       ) : hexBytes !== null ? (
         <Bytes bytes={hexBytes} url={url} />
       ) : null}
-      <div className="mx-4">
+      <div>
         {isFirst && isLocked && (
           <div className="mt-2 request-password-field">
             <div className="flex flex-col items-start my-3">

From 90569f4aa9cf6bfae02cf1e8b8ade0ddac6da0c0 Mon Sep 17 00:00:00 2001
From: Pierre <128218103+PierreTrehet@users.noreply.github.com>
Date: Fri, 13 Jun 2025 19:44:11 +0200
Subject: [PATCH 7/7] Adjust signing popup layout

---
 src/popup/Signing/Request.tsx | 2 +-
 src/popup/Signing/index.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/popup/Signing/Request.tsx b/src/popup/Signing/Request.tsx
index 3cf69e5..6cb0d1d 100644
--- a/src/popup/Signing/Request.tsx
+++ b/src/popup/Signing/Request.tsx
@@ -145,7 +145,7 @@ export default function Request({
       ) : hexBytes !== null ? (
         <Bytes bytes={hexBytes} url={url} />
       ) : null}
-      <div>
+      <div className="mx-4">
         {isFirst && isLocked && (
           <div className="mt-2 request-password-field">
             <div className="flex flex-col items-start my-3">
diff --git a/src/popup/Signing/index.tsx b/src/popup/Signing/index.tsx
index 62902f1..cc9f126 100644
--- a/src/popup/Signing/index.tsx
+++ b/src/popup/Signing/index.tsx
@@ -63,7 +63,7 @@ export const Signing = ({ requests }: Props): JSX.Element => {
           />
         )}
       </div>
-      <div className="flex flex-col align-middle justify-center request-page">
+      <div className="uik-modal__popup mx-4">
         <Account
           account={requests[requestIndex].account}
           showCopyAddress={true}