From d395fceb80ee0f80581eb9c4f4e9b990c130018b Mon Sep 17 00:00:00 2001
From: blacktoast <dbstjd100@naver.com>
Date: Thu, 11 Dec 2025 10:41:37 +0900
Subject: [PATCH 01/25] [embed] add getSIWEMessage and add condition to show
 siwe ui

---
 .../modal_variants/eth/make_sig_eth_modal.tsx | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/embed/oko_attached/src/components/modal_variants/eth/make_sig_eth_modal.tsx b/embed/oko_attached/src/components/modal_variants/eth/make_sig_eth_modal.tsx
index 24d99c541..e710d41f5 100644
--- a/embed/oko_attached/src/components/modal_variants/eth/make_sig_eth_modal.tsx
+++ b/embed/oko_attached/src/components/modal_variants/eth/make_sig_eth_modal.tsx
@@ -1,10 +1,35 @@
 import { type FC } from "react";
 import type { MakeEthereumSigData } from "@oko-wallet/oko-sdk-core";
+import { parseSiweMessage, type SiweMessage } from "viem/siwe";
+import type { SignableMessage } from "viem";
 
 import { MakeArbitrarySigModal } from "./arbitrary_sig/make_arbitrary_sig_modal";
 import { MakeTxSigModal } from "./tx_sig/make_tx_sig_modal";
 import { MakeEIP712SigModal } from "./eip712_sig/make_eip712_sig_modal";
 
+function getSiweMessage(message: SignableMessage): SiweMessage | undefined {
+  if (typeof message !== "string") {
+    return undefined;
+  }
+  const siweMsg = parseSiweMessage(message);
+
+  //NOTE - If any required field in SiweMessage is empty,
+  //  it is determined not to be Siwe.
+  if (
+    siweMsg.address &&
+    siweMsg.chainId &&
+    siweMsg.domain &&
+    siweMsg.version &&
+    siweMsg.nonce &&
+    siweMsg.uri &&
+    siweMsg.address.startsWith("0x")
+  ) {
+    return siweMsg as SiweMessage;
+  }
+
+  return undefined;
+}
+
 export const MakeSignatureEthModal: FC<MakeSignatureEthModalProps> = ({
   getIsAborted,
   data,
@@ -21,6 +46,12 @@ export const MakeSignatureEthModal: FC<MakeSignatureEthModalProps> = ({
       );
     }
     case "arbitrary": {
+      const siweMessage = getSiweMessage(data.payload.data.message);
+      const isSiweMessage = !!siweMessage;
+      if (isSiweMessage) {
+        return <>{siweMessage}</>;
+      }
+
       return (
         <MakeArbitrarySigModal
           getIsAborted={getIsAborted}

From 8ca9c56839a18d375c96b9f55ae961b754d40346 Mon Sep 17 00:00:00 2001
From: blacktoast <dbstjd100@naver.com>
Date: Thu, 11 Dec 2025 10:55:11 +0900
Subject: [PATCH 02/25] [embed] separate getSiweMessage func and make relative
 path import to absolute path

---
 .../modal_variants/eth/get_siwe_message.ts    | 27 +++++++++++++++
 .../modal_variants/eth/make_sig_eth_modal.tsx | 33 +++----------------
 2 files changed, 32 insertions(+), 28 deletions(-)
 create mode 100644 embed/oko_attached/src/components/modal_variants/eth/get_siwe_message.ts

diff --git a/embed/oko_attached/src/components/modal_variants/eth/get_siwe_message.ts b/embed/oko_attached/src/components/modal_variants/eth/get_siwe_message.ts
new file mode 100644
index 000000000..62d421691
--- /dev/null
+++ b/embed/oko_attached/src/components/modal_variants/eth/get_siwe_message.ts
@@ -0,0 +1,27 @@
+import type { SignableMessage } from "viem";
+import { parseSiweMessage, type SiweMessage } from "viem/siwe";
+
+export function getSiweMessage(
+  message: SignableMessage,
+): SiweMessage | undefined {
+  if (typeof message !== "string") {
+    return undefined;
+  }
+  const siweMsg = parseSiweMessage(message);
+
+  //NOTE - If any required field in SiweMessage is empty,
+  //  it is determined not to be Siwe.
+  if (
+    siweMsg.address &&
+    siweMsg.chainId &&
+    siweMsg.domain &&
+    siweMsg.version &&
+    siweMsg.nonce &&
+    siweMsg.uri &&
+    siweMsg.address.startsWith("0x")
+  ) {
+    return siweMsg as SiweMessage;
+  }
+
+  return undefined;
+}
diff --git a/embed/oko_attached/src/components/modal_variants/eth/make_sig_eth_modal.tsx b/embed/oko_attached/src/components/modal_variants/eth/make_sig_eth_modal.tsx
index e710d41f5..fcbca3afb 100644
--- a/embed/oko_attached/src/components/modal_variants/eth/make_sig_eth_modal.tsx
+++ b/embed/oko_attached/src/components/modal_variants/eth/make_sig_eth_modal.tsx
@@ -1,34 +1,11 @@
 import { type FC } from "react";
 import type { MakeEthereumSigData } from "@oko-wallet/oko-sdk-core";
-import { parseSiweMessage, type SiweMessage } from "viem/siwe";
-import type { SignableMessage } from "viem";
 
-import { MakeArbitrarySigModal } from "./arbitrary_sig/make_arbitrary_sig_modal";
-import { MakeTxSigModal } from "./tx_sig/make_tx_sig_modal";
-import { MakeEIP712SigModal } from "./eip712_sig/make_eip712_sig_modal";
-
-function getSiweMessage(message: SignableMessage): SiweMessage | undefined {
-  if (typeof message !== "string") {
-    return undefined;
-  }
-  const siweMsg = parseSiweMessage(message);
-
-  //NOTE - If any required field in SiweMessage is empty,
-  //  it is determined not to be Siwe.
-  if (
-    siweMsg.address &&
-    siweMsg.chainId &&
-    siweMsg.domain &&
-    siweMsg.version &&
-    siweMsg.nonce &&
-    siweMsg.uri &&
-    siweMsg.address.startsWith("0x")
-  ) {
-    return siweMsg as SiweMessage;
-  }
-
-  return undefined;
-}
+import { MakeArbitrarySigModal } from "@oko-wallet-attached/components/modal_variants/eth/arbitrary_sig/make_arbitrary_sig_modal";
+import { MakeTxSigModal } from "@oko-wallet-attached/components/modal_variants/eth/tx_sig/make_tx_sig_modal";
+import { MakeEIP712SigModal } from "@oko-wallet-attached/components/modal_variants/eth/eip712_sig/make_eip712_sig_modal";
+import { MakeSiweSigModal } from "@oko-wallet-attached/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_arbitrary_sig_modal";
+import { getSiweMessage } from "@oko-wallet-attached/components/modal_variants/eth/get_siwe_message";
 
 export const MakeSignatureEthModal: FC<MakeSignatureEthModalProps> = ({
   getIsAborted,

From e74e854a69827a94f1cd22ae058b6ed1a7f2662b Mon Sep 17 00:00:00 2001
From: blacktoast <dbstjd100@naver.com>
Date: Thu, 11 Dec 2025 11:53:34 +0900
Subject: [PATCH 03/25] [embed] add VITE_PUBLIC_S3_BUCKET_URL in env

---
 embed/oko_attached/oko_attached.env.example  | 1 +
 embed/oko_attached/src/global.d.ts           | 1 +
 embed/oko_attached/src/requests/endpoints.ts | 3 +++
 3 files changed, 5 insertions(+)

diff --git a/embed/oko_attached/oko_attached.env.example b/embed/oko_attached/oko_attached.env.example
index ed4b9fc1a..ef524b885 100644
--- a/embed/oko_attached/oko_attached.env.example
+++ b/embed/oko_attached/oko_attached.env.example
@@ -7,3 +7,4 @@ VITE_TX_INTERPRETER_API_ENDPOINT=https://tx-interpreter.keplr.app
 VITE_AMPLITUDE_API_KEY=
 VITE_IPFS_GATEWAY_URL=
 VITE_TELEGRAM_BOT_NAME=telegram_bot_name
+VITE_PUBLIC_S3_BUCKET_URL=https://oko-wallet.s3.ap-northeast-2.amazonaws.com
diff --git a/embed/oko_attached/src/global.d.ts b/embed/oko_attached/src/global.d.ts
index 9069b3ce8..3fe598ea1 100644
--- a/embed/oko_attached/src/global.d.ts
+++ b/embed/oko_attached/src/global.d.ts
@@ -22,6 +22,7 @@ declare global {
     VITE_AMPLITUDE_API_KEY: string;
     VITE_IPFS_GATEWAY_URL: string;
     VITE_TELEGRAM_BOT_NAME: string;
+    VITE_PUBLIC_S3_BUCKET_URL: string;
   }
 }
 
diff --git a/embed/oko_attached/src/requests/endpoints.ts b/embed/oko_attached/src/requests/endpoints.ts
index 1ac5144a5..61ae0aa4b 100644
--- a/embed/oko_attached/src/requests/endpoints.ts
+++ b/embed/oko_attached/src/requests/endpoints.ts
@@ -6,3 +6,6 @@ export const TX_INTERPRETER_API_ENDPOINT = import.meta.env
 export const DEMO_WEB_ORIGIN = import.meta.env.VITE_DEMO_WEB_ORIGIN;
 
 export const OKO_API_ENDPOINT = import.meta.env.VITE_OKO_API_ENDPOINT;
+
+export const OKO_PUBLIC_S3_BUCKET_URL = import.meta.env
+  .VITE_PUBLIC_S3_BUCKET_URL;

From a8185aa87cb0f47c28d5fb09ffc84d9dfebce595 Mon Sep 17 00:00:00 2001
From: blacktoast <dbstjd100@naver.com>
Date: Thu, 11 Dec 2025 15:39:54 +0900
Subject: [PATCH 04/25] [embed] make inner comp of SignerAddressOrEmail
 exported to share

- and add SignerAddressOrEmailForSiwe to be applied other style
---
 .../signer_address_or_email.tsx               | 78 +++++++++++++------
 .../index.tsx                                 | 56 +++++++++++++
 .../styles.module.scss                        | 23 ++++++
 3 files changed, 133 insertions(+), 24 deletions(-)
 create mode 100644 embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/signer_address_or_email_for_siwe/index.tsx
 create mode 100644 embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/signer_address_or_email_for_siwe/styles.module.scss

diff --git a/embed/oko_attached/src/components/modal_variants/common/metadata_content/signer_address_or_email/signer_address_or_email.tsx b/embed/oko_attached/src/components/modal_variants/common/metadata_content/signer_address_or_email/signer_address_or_email.tsx
index 8752ac10e..d5fdbfb47 100644
--- a/embed/oko_attached/src/components/modal_variants/common/metadata_content/signer_address_or_email/signer_address_or_email.tsx
+++ b/embed/oko_attached/src/components/modal_variants/common/metadata_content/signer_address_or_email/signer_address_or_email.tsx
@@ -8,25 +8,67 @@ import styles from "./signer_address_or_email.module.scss";
 interface SignerAddressOrEmailProps {
   signer: string;
   origin: string;
+  initialViewType?: "View Address" | "Login Info";
 }
 
+interface ViewProps {
+  value: string;
+  origin: string;
+  type: "address" | "email";
+  prefix?: string;
+}
+
+export const SignerAddressOrEmailView: FC<ViewProps> = ({
+  value,
+  type,
+  origin,
+  prefix,
+}) => {
+  const email = useAppState((state) => state.getWallet(origin)?.email);
+  const displayValue =
+    type === "address" ? `${value.slice(0, 9)}...${value.slice(-9)}` : email;
+
+  return (
+    <Typography size="sm" color="brand-tertiary" weight="medium">
+      {prefix && `${prefix} `}
+      {displayValue}
+    </Typography>
+  );
+};
+
+export const SignerAddressOrEmailChangeViewTypeButton: FC<{
+  viewType: "View Address" | "Login Info";
+  onClick: () => void;
+}> = ({ viewType, onClick }) => {
+  return (
+    <div onClick={onClick} className={styles.changeViewTypeButton}>
+      <EyeIcon size={12} color="var(--fg-quaternary)" />
+      <Typography size="xs" color="quaternary" weight="semibold">
+        {viewType}
+      </Typography>
+    </div>
+  );
+};
+
 export const SignerAddressOrEmail: FC<SignerAddressOrEmailProps> = ({
   signer,
   origin,
+  initialViewType = "View Address",
 }) => {
   const [viewType, setViewType] = useState<"View Address" | "Login Info">(
-    "View Address",
+    initialViewType,
   );
-  const email = useAppState((state) => state.getWallet(origin)?.email);
 
   switch (viewType) {
     case "View Address":
       return (
         <div className={styles.wrapper}>
-          <Typography size="sm" color="brand-tertiary" weight="medium">
-            {signer.slice(0, 9)}...{signer.slice(-9)}
-          </Typography>
-          <ChangeViewTypeButton
+          <SignerAddressOrEmailView
+            value={signer}
+            type="address"
+            origin={origin}
+          />
+          <SignerAddressOrEmailChangeViewTypeButton
             viewType="Login Info"
             onClick={() => setViewType("Login Info")}
           />
@@ -35,10 +77,12 @@ export const SignerAddressOrEmail: FC<SignerAddressOrEmailProps> = ({
     case "Login Info":
       return (
         <div className={styles.wrapper}>
-          <Typography size="sm" color="brand-tertiary" weight="medium">
-            {email}
-          </Typography>
-          <ChangeViewTypeButton
+          <SignerAddressOrEmailView
+            value={signer}
+            type="email"
+            origin={origin}
+          />
+          <SignerAddressOrEmailChangeViewTypeButton
             viewType="View Address"
             onClick={() => setViewType("View Address")}
           />
@@ -46,17 +90,3 @@ export const SignerAddressOrEmail: FC<SignerAddressOrEmailProps> = ({
       );
   }
 };
-
-const ChangeViewTypeButton: FC<{
-  viewType: "View Address" | "Login Info";
-  onClick: () => void;
-}> = ({ viewType, onClick }) => {
-  return (
-    <div onClick={onClick} className={styles.changeViewTypeButton}>
-      <EyeIcon size={12} color="var(--fg-quaternary)" />
-      <Typography size="xs" color="quaternary" weight="semibold">
-        {viewType}
-      </Typography>
-    </div>
-  );
-};
diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/signer_address_or_email_for_siwe/index.tsx b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/signer_address_or_email_for_siwe/index.tsx
new file mode 100644
index 000000000..263b2cd6f
--- /dev/null
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/signer_address_or_email_for_siwe/index.tsx
@@ -0,0 +1,56 @@
+import { useState, type FC } from "react";
+
+import styles from "./styles.module.scss";
+import {
+  SignerAddressOrEmailChangeViewTypeButton,
+  SignerAddressOrEmailView,
+} from "@oko-wallet-attached/components/modal_variants/common/metadata_content/signer_address_or_email/signer_address_or_email";
+
+interface SignerAddressOrEmailProps {
+  signer: string;
+  origin: string;
+  initialViewType?: "View Address" | "Login Info";
+}
+
+export const SignerAddressOrEmailForSiwe: FC<SignerAddressOrEmailProps> = ({
+  signer,
+  origin,
+  initialViewType = "View Address",
+}) => {
+  const [viewType, setViewType] = useState<"View Address" | "Login Info">(
+    initialViewType,
+  );
+
+  switch (viewType) {
+    case "View Address":
+      return (
+        <div className={styles.wrapper}>
+          <SignerAddressOrEmailView
+            value={signer}
+            type="address"
+            origin={origin}
+            prefix="with "
+          />
+          <SignerAddressOrEmailChangeViewTypeButton
+            viewType="Login Info"
+            onClick={() => setViewType("Login Info")}
+          />
+        </div>
+      );
+    case "Login Info":
+      return (
+        <div className={styles.wrapper}>
+          <SignerAddressOrEmailView
+            value={signer}
+            type="email"
+            origin={origin}
+            prefix="with "
+          />
+          <SignerAddressOrEmailChangeViewTypeButton
+            viewType="View Address"
+            onClick={() => setViewType("View Address")}
+          />
+        </div>
+      );
+  }
+};
diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/signer_address_or_email_for_siwe/styles.module.scss b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/signer_address_or_email_for_siwe/styles.module.scss
new file mode 100644
index 000000000..3c83eb1f3
--- /dev/null
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/signer_address_or_email_for_siwe/styles.module.scss
@@ -0,0 +1,23 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  word-break: break-all;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.changeViewTypeButton {
+  display: flex;
+  padding: 4px 8px;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+
+  cursor: pointer;
+  border-radius: 12px;
+  background: var(--bg-secondary);
+  width: fit-content;
+}

From 20da61e19f4d4f251f7dbe08fca95a271892d83a Mon Sep 17 00:00:00 2001
From: blacktoast <dbstjd100@naver.com>
Date: Thu, 11 Dec 2025 17:37:21 +0900
Subject: [PATCH 05/25] [sandbox] add Sign SIWE Message (with wrong URI) button
 for testing

---
 .../playground/_components/SiweSignWidget.tsx | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/sandbox/sandbox_evm/src/app/playground/_components/SiweSignWidget.tsx b/sandbox/sandbox_evm/src/app/playground/_components/SiweSignWidget.tsx
index 077a0609a..52af94408 100644
--- a/sandbox/sandbox_evm/src/app/playground/_components/SiweSignWidget.tsx
+++ b/sandbox/sandbox_evm/src/app/playground/_components/SiweSignWidget.tsx
@@ -14,14 +14,23 @@ export function SiweSignWidget() {
 
   const [signedMessage, setSignedMessage] = useState("");
 
-  const handleSiweSign = async () => {
+  const handleSiweSign = async (isWrongUriTest: boolean = false) => {
     if (!walletClient || !address || !chainId) {
       return;
     }
 
+    const localDomain =
+      typeof window !== "undefined" ? window.location.host : "localhost:3000";
+    const localUri =
+      typeof window !== "undefined"
+        ? window.location.href
+        : "http://localhost:3000";
+    const wrongDomain = "demo.oko.app";
+    const wrongUri = "https://demo.oko.app/test";
+
     const siweMessage = createSiweMessage({
-      domain: "oko-wallet-sandbox.vercel.app",
-      uri: "https://oko-wallet-sandbox.vercel.app",
+      domain: isWrongUriTest ? wrongDomain : localDomain,
+      uri: isWrongUriTest ? wrongUri : localUri,
       address,
       chainId,
       nonce: generateSiweNonce(),
@@ -63,13 +72,21 @@ export function SiweSignWidget() {
         </p>
 
         <button
-          onClick={handleSiweSign}
+          onClick={() => handleSiweSign(false)}
           disabled={!walletClient || !address || !chainId || isLoading}
           className="btn btn-primary w-full mt-4"
         >
           {isLoading ? "Signing..." : "Sign SIWE Message"}
         </button>
 
+        <button
+          onClick={() => handleSiweSign(true)}
+          disabled={!walletClient || !address || !chainId || isLoading}
+          className="btn btn-primary w-full mt-4"
+        >
+          {isLoading ? "Signing..." : "Sign SIWE Message (with wrong URI)"}
+        </button>
+
         {error && (
           <div className="alert alert-error mt-4">
             <span className="text-sm">{error?.message}</span>

From ba73e8679b3dbb3ccb157141f27e9f4ff1479b33 Mon Sep 17 00:00:00 2001
From: blacktoast <dbstjd100@naver.com>
Date: Thu, 11 Dec 2025 17:40:34 +0900
Subject: [PATCH 06/25] [embed] add className props

---
 .../make_sig_modal_code_block_container.tsx               | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/embed/oko_attached/src/components/modal_variants/common/make_signature/make_sig_modal_code_block_container.tsx b/embed/oko_attached/src/components/modal_variants/common/make_signature/make_sig_modal_code_block_container.tsx
index 9c752676f..72f14ef53 100644
--- a/embed/oko_attached/src/components/modal_variants/common/make_signature/make_sig_modal_code_block_container.tsx
+++ b/embed/oko_attached/src/components/modal_variants/common/make_signature/make_sig_modal_code_block_container.tsx
@@ -1,13 +1,17 @@
 import type { FC, ReactNode } from "react";
+import cn from "classnames";
 
 import styles from "./make_sig_modal_code_block_container.module.scss";
 
 export interface MakeSignatureRawCodeBlockContainerProps {
   children: ReactNode;
+  className?: string;
 }
 
 export const MakeSignatureRawCodeBlockContainer: FC<
   MakeSignatureRawCodeBlockContainerProps
-> = ({ children }) => {
-  return <div className={styles.codeBlockContainer}>{children}</div>;
+> = ({ children, className }) => {
+  return (
+    <div className={cn(styles.codeBlockContainer, className)}>{children}</div>
+  );
 };

From fcde32cbfa387b71ba78531313f2247bfd78a0c4 Mon Sep 17 00:00:00 2001
From: blacktoast <dbstjd100@naver.com>
Date: Thu, 11 Dec 2025 17:47:02 +0900
Subject: [PATCH 07/25] [embed] add SiweSigTitleBadge

---
 .../siwe_sig/siwe_sig_title_badge/index.tsx   | 27 +++++++++++++++++++
 .../siwe_sig_title_badge/styles.module.scss   | 17 ++++++++++++
 2 files changed, 44 insertions(+)
 create mode 100644 embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_sig_title_badge/index.tsx
 create mode 100644 embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_sig_title_badge/styles.module.scss

diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_sig_title_badge/index.tsx b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_sig_title_badge/index.tsx
new file mode 100644
index 000000000..c1e6602bf
--- /dev/null
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_sig_title_badge/index.tsx
@@ -0,0 +1,27 @@
+import { OKO_PUBLIC_S3_BUCKET_URL } from "@oko-wallet-attached/requests/endpoints";
+
+import styles from "./styles.module.scss";
+
+export const SiweSigTitleBadge = ({ isDarkMode }: { isDarkMode: boolean }) => {
+  const imageUrl = {
+    png: isDarkMode
+      ? `${OKO_PUBLIC_S3_BUCKET_URL}/assets/oko_siwe_sign_badge_dark.png`
+      : `${OKO_PUBLIC_S3_BUCKET_URL}/assets/oko_siwe_sign_badge_light.png`,
+    webp: isDarkMode
+      ? `${OKO_PUBLIC_S3_BUCKET_URL}/assets/oko_siwe_sign_badge_dark.webp`
+      : `${OKO_PUBLIC_S3_BUCKET_URL}/assets/oko_siwe_sign_badge_light.webp`,
+  };
+
+  return (
+    <div className={styles.imageContainer}>
+      <picture>
+        <source srcSet={imageUrl.webp} type="image/webp" />
+        <img
+          className={styles.image}
+          src={imageUrl.png}
+          alt="sign siwe title image"
+        />
+      </picture>
+    </div>
+  );
+};
diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_sig_title_badge/styles.module.scss b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_sig_title_badge/styles.module.scss
new file mode 100644
index 000000000..3ce9dd31e
--- /dev/null
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_sig_title_badge/styles.module.scss
@@ -0,0 +1,17 @@
+picture {
+  margin: 0;
+  padding: 0;
+  width: 8.1875rem;
+  height: 3.75rem;
+}
+
+.imageContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .image {
+    width: 8.1875rem;
+    height: 3.75rem;
+  }
+}

From a7a07fb00699da77629767c471d821e90aee56fb Mon Sep 17 00:00:00 2001
From: blacktoast <dbstjd100@naver.com>
Date: Thu, 11 Dec 2025 17:48:19 +0900
Subject: [PATCH 08/25] [embed] change file name and add verifySiweMessage

---
 .../modal_variants/eth/get_siwe_message.ts    | 27 --------
 .../modal_variants/eth/siwe_message.ts        | 65 +++++++++++++++++++
 2 files changed, 65 insertions(+), 27 deletions(-)
 delete mode 100644 embed/oko_attached/src/components/modal_variants/eth/get_siwe_message.ts
 create mode 100644 embed/oko_attached/src/components/modal_variants/eth/siwe_message.ts

diff --git a/embed/oko_attached/src/components/modal_variants/eth/get_siwe_message.ts b/embed/oko_attached/src/components/modal_variants/eth/get_siwe_message.ts
deleted file mode 100644
index 62d421691..000000000
--- a/embed/oko_attached/src/components/modal_variants/eth/get_siwe_message.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import type { SignableMessage } from "viem";
-import { parseSiweMessage, type SiweMessage } from "viem/siwe";
-
-export function getSiweMessage(
-  message: SignableMessage,
-): SiweMessage | undefined {
-  if (typeof message !== "string") {
-    return undefined;
-  }
-  const siweMsg = parseSiweMessage(message);
-
-  //NOTE - If any required field in SiweMessage is empty,
-  //  it is determined not to be Siwe.
-  if (
-    siweMsg.address &&
-    siweMsg.chainId &&
-    siweMsg.domain &&
-    siweMsg.version &&
-    siweMsg.nonce &&
-    siweMsg.uri &&
-    siweMsg.address.startsWith("0x")
-  ) {
-    return siweMsg as SiweMessage;
-  }
-
-  return undefined;
-}
diff --git a/embed/oko_attached/src/components/modal_variants/eth/siwe_message.ts b/embed/oko_attached/src/components/modal_variants/eth/siwe_message.ts
new file mode 100644
index 000000000..224857abe
--- /dev/null
+++ b/embed/oko_attached/src/components/modal_variants/eth/siwe_message.ts
@@ -0,0 +1,65 @@
+import type { SignableMessage } from "viem";
+import { parseSiweMessage, type SiweMessage } from "viem/siwe";
+
+const ALLOW_PROTOCOLS = ["https:"];
+const BYPASS_HOSTS = ["localhost"];
+
+export function getSiweMessage(
+  message: SignableMessage,
+): SiweMessage | undefined {
+  if (typeof message !== "string") {
+    return undefined;
+  }
+  const siweMsg = parseSiweMessage(message);
+
+  //NOTE - If any required field in SiweMessage is empty,
+  //  it is determined not to be Siwe.
+  if (
+    siweMsg.address &&
+    siweMsg.chainId &&
+    siweMsg.domain &&
+    siweMsg.version &&
+    siweMsg.nonce &&
+    siweMsg.uri &&
+    siweMsg.address.startsWith("0x")
+  ) {
+    return siweMsg as SiweMessage;
+  }
+
+  return undefined;
+}
+
+export function verifySiweMessage(
+  message: SiweMessage,
+  origin: string,
+): boolean {
+  try {
+    const {
+      origin: originByPayload,
+      protocol: protocolByPayload,
+      host: hostByPayload,
+    } = new URL(origin);
+    const { origin: originByTxUri, protocol: protocolByTxUri } = new URL(
+      message.uri,
+    );
+
+    if (originByPayload !== originByTxUri || hostByPayload !== message.domain) {
+      console.log("originByPayload", originByPayload);
+      return false;
+    }
+
+    // If scheme is not HTTPS, return false (when hostname is not localhost)
+    if (
+      !BYPASS_HOSTS.includes(hostByPayload.split(":")[0]) &&
+      (!ALLOW_PROTOCOLS.includes(protocolByPayload) ||
+        !ALLOW_PROTOCOLS.includes(protocolByTxUri))
+    ) {
+      return false;
+    }
+  } catch (error) {
+    console.error(error);
+    return false;
+  }
+
+  return true;
+}

From 1f40373163d03ada18921b0ef99236357bcf3a1b Mon Sep 17 00:00:00 2001
From: blacktoast <dbstjd100@naver.com>
Date: Thu, 11 Dec 2025 17:48:48 +0900
Subject: [PATCH 09/25] [embed] add EthereumSiweSignatureContent and apply

---
 .../make_arbitrary_sig_modal.tsx              | 12 ++-
 ...thereum_siwe_signature_content.module.scss | 27 +++++
 .../siwe_sig/make_siwe-siganature_content.tsx | 99 +++++++++++++++++++
 .../modal_variants/eth/make_sig_eth_modal.tsx |  8 --
 4 files changed, 136 insertions(+), 10 deletions(-)
 create mode 100644 embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/ethereum_siwe_signature_content.module.scss
 create mode 100644 embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe-siganature_content.tsx

diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/make_arbitrary_sig_modal.tsx b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/make_arbitrary_sig_modal.tsx
index 2973a1de1..214b1f07f 100644
--- a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/make_arbitrary_sig_modal.tsx
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/make_arbitrary_sig_modal.tsx
@@ -11,6 +11,8 @@ import { useArbitrarySigModal } from "./hooks/use_arbitrary_sig_modal";
 import { ArbitrarySignatureDesc } from "@oko-wallet-attached/components/modal_variants/common/arbitrary_sig_desc/arbitrary_signature_desc";
 import { EthereumArbitrarySignatureContent } from "./ethereum_arbitrary_signature_content";
 import { SignWithOkoBox } from "@oko-wallet-attached/components/sign_with_oko_box/sign_with_oko_box";
+import { getSiweMessage } from "@oko-wallet-attached/components/modal_variants/eth/siwe_message";
+import { EthereumSiweSignatureContent } from "@oko-wallet-attached/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe-siganature_content";
 
 export const MakeArbitrarySigModal: React.FC<MakeArbitrarySigModalProps> = ({
   getIsAborted,
@@ -31,6 +33,8 @@ export const MakeArbitrarySigModal: React.FC<MakeArbitrarySigModalProps> = ({
     modalId,
   });
 
+  const siweMessage = getSiweMessage(data.payload.data.message);
+
   return (
     <div className={styles.container}>
       <CommonModal className={styles.modal}>
@@ -39,10 +43,14 @@ export const MakeArbitrarySigModal: React.FC<MakeArbitrarySigModalProps> = ({
         </div>
 
         <div className={styles.modalInnerContentContainer}>
-          <EthereumArbitrarySignatureContent payload={data.payload} />
+          {!!siweMessage ? (
+            <EthereumSiweSignatureContent payload={data.payload} />
+          ) : (
+            <EthereumArbitrarySignatureContent payload={data.payload} />
+          )}
         </div>
 
-        <Spacing height={20} />
+        <Spacing height={!!siweMessage ? 12 : 20} />
         {!hasOnChainSchema && <ArbitrarySignatureDesc />}
 
         <Spacing height={20} />
diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/ethereum_siwe_signature_content.module.scss b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/ethereum_siwe_signature_content.module.scss
new file mode 100644
index 000000000..12e659b2e
--- /dev/null
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/ethereum_siwe_signature_content.module.scss
@@ -0,0 +1,27 @@
+.messageContainer {
+  padding: 0.75rem 1rem;
+
+  .messageContent {
+    padding: 0;
+    min-height: 0;
+  }
+}
+
+.metadataContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.chainInfoContainer {
+  padding: 0.75rem 1rem;
+  border-radius: 0.75rem;
+  background-color: var(--bg-secondary);
+
+  .chainInfoRow {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe-siganature_content.tsx b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe-siganature_content.tsx
new file mode 100644
index 000000000..81ffd11d0
--- /dev/null
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe-siganature_content.tsx
@@ -0,0 +1,99 @@
+import React from "react";
+import type { EthereumArbitrarySignPayload } from "@oko-wallet/oko-sdk-core";
+import { Spacing } from "@oko-wallet/oko-common-ui/spacing";
+import { Typography } from "@oko-wallet/oko-common-ui/typography";
+
+import styles from "./ethereum_siwe_signature_content.module.scss";
+import {
+  getSiweMessage,
+  verifySiweMessage,
+} from "@oko-wallet-attached/components/modal_variants/eth/siwe_message";
+import { SiweSigTitleBadge } from "@oko-wallet-attached/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_sig_title_badge";
+import { SignerAddressOrEmailForSiwe } from "@oko-wallet-attached/components/modal_variants/eth/arbitrary_sig/siwe_sig/signer_address_or_email_for_siwe";
+import { MakeSignatureRawCodeBlockContainer } from "@oko-wallet-attached/components/modal_variants/common/make_signature/make_sig_modal_code_block_container";
+import { MakeSignatureRawCodeBlock } from "@oko-wallet-attached/components/modal_variants/common/make_signature/make_sig_modal_code_block";
+
+interface EthereumSiweSignatureContentProps {
+  payload: EthereumArbitrarySignPayload;
+}
+
+export const EthereumSiweSignatureContent: React.FC<
+  EthereumSiweSignatureContentProps
+> = ({ payload }) => {
+  const message = getSiweMessage(payload.data.message);
+
+  if (!message) {
+    // @unreachable
+    throw new Error("unreachable");
+  }
+
+  const isValidSiweMessage = verifySiweMessage(message, payload.origin);
+  if (!isValidSiweMessage) {
+    throw new Error("Invalid SIWE message");
+  }
+
+  return (
+    <div>
+      <SiweSigTitleBadge isDarkMode={true} />
+      <div className={styles.metadataContainer}>
+        <Spacing height={8} />
+        <Typography size="lg" color="primary" weight="semibold">
+          Sign in to
+        </Typography>
+
+        <Spacing height={4} />
+        <Typography size="lg" color="primary" weight="semibold">
+          {payload.origin.replace(/^https?:\/\//, "")}
+        </Typography>
+
+        <Spacing height={8} />
+        <SignerAddressOrEmailForSiwe
+          origin={payload.origin}
+          signer={payload.signer}
+          initialViewType="Login Info"
+        />
+      </div>
+
+      <Spacing height={20} />
+
+      <div className={styles.chainInfoContainer}>
+        <div className={styles.chainInfoRow}>
+          <Typography size="xs" color="secondary" weight="semibold">
+            Estimated in balance
+          </Typography>
+          <Typography size="sm" color="secondary" weight="medium">
+            No changes
+          </Typography>
+        </div>
+
+        <Spacing height={8} />
+        <div className={styles.chainInfoRow}>
+          <Typography size="xs" color="secondary" weight="semibold">
+            Network
+          </Typography>
+          <Typography size="sm" color="secondary" weight="medium">
+            {payload.chain_info.chain_name}
+          </Typography>
+        </div>
+      </div>
+      {/* <MetadataContent
+        origin={payload.origin}
+        chainInfo={payload.chain_info}
+        signer={payload.signer}
+      /> */}
+
+      <Spacing height={16} />
+      <MakeSignatureRawCodeBlockContainer className={styles.messageContainer}>
+        <Typography color="tertiary" size="xs" weight="semibold">
+          Message
+        </Typography>
+
+        <Spacing height={16} />
+        <MakeSignatureRawCodeBlock
+          code={message.statement ?? ""}
+          className={styles.messageContent}
+        />
+      </MakeSignatureRawCodeBlockContainer>
+    </div>
+  );
+};
diff --git a/embed/oko_attached/src/components/modal_variants/eth/make_sig_eth_modal.tsx b/embed/oko_attached/src/components/modal_variants/eth/make_sig_eth_modal.tsx
index fcbca3afb..f0d78447c 100644
--- a/embed/oko_attached/src/components/modal_variants/eth/make_sig_eth_modal.tsx
+++ b/embed/oko_attached/src/components/modal_variants/eth/make_sig_eth_modal.tsx
@@ -4,8 +4,6 @@ import type { MakeEthereumSigData } from "@oko-wallet/oko-sdk-core";
 import { MakeArbitrarySigModal } from "@oko-wallet-attached/components/modal_variants/eth/arbitrary_sig/make_arbitrary_sig_modal";
 import { MakeTxSigModal } from "@oko-wallet-attached/components/modal_variants/eth/tx_sig/make_tx_sig_modal";
 import { MakeEIP712SigModal } from "@oko-wallet-attached/components/modal_variants/eth/eip712_sig/make_eip712_sig_modal";
-import { MakeSiweSigModal } from "@oko-wallet-attached/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_arbitrary_sig_modal";
-import { getSiweMessage } from "@oko-wallet-attached/components/modal_variants/eth/get_siwe_message";
 
 export const MakeSignatureEthModal: FC<MakeSignatureEthModalProps> = ({
   getIsAborted,
@@ -23,12 +21,6 @@ export const MakeSignatureEthModal: FC<MakeSignatureEthModalProps> = ({
       );
     }
     case "arbitrary": {
-      const siweMessage = getSiweMessage(data.payload.data.message);
-      const isSiweMessage = !!siweMessage;
-      if (isSiweMessage) {
-        return <>{siweMessage}</>;
-      }
-
       return (
         <MakeArbitrarySigModal
           getIsAborted={getIsAborted}

From a03f6c966b5317df5f14401c21fa349a472d438a Mon Sep 17 00:00:00 2001
From: blacktoast <dbstjd100@naver.com>
Date: Thu, 11 Dec 2025 18:00:27 +0900
Subject: [PATCH 10/25] [embed] add theme in SiweSigTitleBadge

---
 .../make_arbitrary_sig_modal.tsx              |  5 +++-
 .../siwe_sig/make_siwe-siganature_content.tsx |  6 +++--
 .../siwe_sig/siwe_sig_title_badge/index.tsx   | 24 ++++++++++++-------
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/make_arbitrary_sig_modal.tsx b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/make_arbitrary_sig_modal.tsx
index 214b1f07f..781c00e58 100644
--- a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/make_arbitrary_sig_modal.tsx
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/make_arbitrary_sig_modal.tsx
@@ -44,7 +44,10 @@ export const MakeArbitrarySigModal: React.FC<MakeArbitrarySigModalProps> = ({
 
         <div className={styles.modalInnerContentContainer}>
           {!!siweMessage ? (
-            <EthereumSiweSignatureContent payload={data.payload} />
+            <EthereumSiweSignatureContent
+              payload={data.payload}
+              theme={theme}
+            />
           ) : (
             <EthereumArbitrarySignatureContent payload={data.payload} />
           )}
diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe-siganature_content.tsx b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe-siganature_content.tsx
index 81ffd11d0..e2e9183c0 100644
--- a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe-siganature_content.tsx
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe-siganature_content.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import type { EthereumArbitrarySignPayload } from "@oko-wallet/oko-sdk-core";
 import { Spacing } from "@oko-wallet/oko-common-ui/spacing";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
+import type { Theme } from "@oko-wallet/oko-common-ui/theme";
 
 import styles from "./ethereum_siwe_signature_content.module.scss";
 import {
@@ -15,11 +16,12 @@ import { MakeSignatureRawCodeBlock } from "@oko-wallet-attached/components/modal
 
 interface EthereumSiweSignatureContentProps {
   payload: EthereumArbitrarySignPayload;
+  theme: Theme | null;
 }
 
 export const EthereumSiweSignatureContent: React.FC<
   EthereumSiweSignatureContentProps
-> = ({ payload }) => {
+> = ({ payload, theme }) => {
   const message = getSiweMessage(payload.data.message);
 
   if (!message) {
@@ -34,7 +36,7 @@ export const EthereumSiweSignatureContent: React.FC<
 
   return (
     <div>
-      <SiweSigTitleBadge isDarkMode={true} />
+      <SiweSigTitleBadge theme={theme} />
       <div className={styles.metadataContainer}>
         <Spacing height={8} />
         <Typography size="lg" color="primary" weight="semibold">
diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_sig_title_badge/index.tsx b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_sig_title_badge/index.tsx
index c1e6602bf..100fed16d 100644
--- a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_sig_title_badge/index.tsx
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_sig_title_badge/index.tsx
@@ -1,15 +1,23 @@
-import { OKO_PUBLIC_S3_BUCKET_URL } from "@oko-wallet-attached/requests/endpoints";
+import type { Theme } from "@oko-wallet/oko-common-ui/theme";
 
+import { OKO_PUBLIC_S3_BUCKET_URL } from "@oko-wallet-attached/requests/endpoints";
 import styles from "./styles.module.scss";
 
-export const SiweSigTitleBadge = ({ isDarkMode }: { isDarkMode: boolean }) => {
+interface SiweSigTitleBadgeProps {
+  theme: Theme | null;
+}
+export const SiweSigTitleBadge: React.FC<SiweSigTitleBadgeProps> = ({
+  theme,
+}) => {
   const imageUrl = {
-    png: isDarkMode
-      ? `${OKO_PUBLIC_S3_BUCKET_URL}/assets/oko_siwe_sign_badge_dark.png`
-      : `${OKO_PUBLIC_S3_BUCKET_URL}/assets/oko_siwe_sign_badge_light.png`,
-    webp: isDarkMode
-      ? `${OKO_PUBLIC_S3_BUCKET_URL}/assets/oko_siwe_sign_badge_dark.webp`
-      : `${OKO_PUBLIC_S3_BUCKET_URL}/assets/oko_siwe_sign_badge_light.webp`,
+    png:
+      theme === "dark"
+        ? `${OKO_PUBLIC_S3_BUCKET_URL}/assets/oko_siwe_sign_badge_dark.png`
+        : `${OKO_PUBLIC_S3_BUCKET_URL}/assets/oko_siwe_sign_badge_light.png`,
+    webp:
+      theme === "dark"
+        ? `${OKO_PUBLIC_S3_BUCKET_URL}/assets/oko_siwe_sign_badge_dark.webp`
+        : `${OKO_PUBLIC_S3_BUCKET_URL}/assets/oko_siwe_sign_badge_light.webp`,
   };
 
   return (

From b7db0d2f3ac4c9c804d87832aaf6eef9def4bb7d Mon Sep 17 00:00:00 2001
From: blacktoast <dbstjd100@naver.com>
Date: Tue, 23 Dec 2025 17:47:22 +0900
Subject: [PATCH 11/25] [embed] make getFaviconUrl utils func

---
 .../common/metadata_content/metadata_content.tsx   | 14 +-------------
 embed/oko_attached/src/utils/favicon.ts            | 12 ++++++++++++
 2 files changed, 13 insertions(+), 13 deletions(-)
 create mode 100644 embed/oko_attached/src/utils/favicon.ts

diff --git a/embed/oko_attached/src/components/modal_variants/common/metadata_content/metadata_content.tsx b/embed/oko_attached/src/components/modal_variants/common/metadata_content/metadata_content.tsx
index 78807c69a..6bf5d5d84 100644
--- a/embed/oko_attached/src/components/modal_variants/common/metadata_content/metadata_content.tsx
+++ b/embed/oko_attached/src/components/modal_variants/common/metadata_content/metadata_content.tsx
@@ -6,19 +6,7 @@ import { Typography } from "@oko-wallet/oko-common-ui/typography";
 import styles from "./metadata_content.module.scss";
 import { SignerAddressOrEmail } from "./signer_address_or_email/signer_address_or_email";
 import { Avatar } from "@oko-wallet-attached/components/avatar/avatar";
-
-function getFaviconUrl(origin: string): string {
-  if (!origin) return "";
-
-  try {
-    const parsed = new URL(origin);
-    return `https://www.google.com/s2/favicons?domain_url=${encodeURIComponent(
-      parsed.origin,
-    )}`;
-  } catch (error) {
-    return "";
-  }
-}
+import { getFaviconUrl } from "@oko-wallet-attached/utils/favicon";
 
 interface MakeSignatureModalMetadataContentProps {
   origin: string;
diff --git a/embed/oko_attached/src/utils/favicon.ts b/embed/oko_attached/src/utils/favicon.ts
new file mode 100644
index 000000000..dc91aa124
--- /dev/null
+++ b/embed/oko_attached/src/utils/favicon.ts
@@ -0,0 +1,12 @@
+export function getFaviconUrl(origin: string): string {
+  if (!origin) return "";
+
+  try {
+    const parsed = new URL(origin);
+    return `https://www.google.com/s2/favicons?domain_url=${encodeURIComponent(
+      parsed.origin,
+    )}`;
+  } catch (error) {
+    return "";
+  }
+}

From 892198ba928060330d47a67b62e2f94e3e416ba7 Mon Sep 17 00:00:00 2001
From: blacktoast <dbstjd100@naver.com>
Date: Tue, 23 Dec 2025 17:50:41 +0900
Subject: [PATCH 12/25] [embed] add inValidOrigin warning box design

---
 .../make_arbitrary_sig_modal.tsx              | 39 ++++++++++++++++--
 ...thereum_siwe_signature_content.module.scss | 11 +++++
 .../siwe_sig/make_siwe-siganature_content.tsx | 36 ++++++++++++----
 .../siwe-risk-warning-box.module.scss         | 20 +++++++++
 .../siwe_sig/siwe-risk-warning-box.tsx        | 41 +++++++++++++++++++
 5 files changed, 134 insertions(+), 13 deletions(-)
 create mode 100644 embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe-risk-warning-box.module.scss
 create mode 100644 embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe-risk-warning-box.tsx

diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/make_arbitrary_sig_modal.tsx b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/make_arbitrary_sig_modal.tsx
index 781c00e58..f75829a8c 100644
--- a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/make_arbitrary_sig_modal.tsx
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/make_arbitrary_sig_modal.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo, useState } from "react";
 import type { MakeArbitrarySigData } from "@oko-wallet/oko-sdk-core";
 import { XCloseIcon } from "@oko-wallet/oko-common-ui/icons/x_close";
 import { Spacing } from "@oko-wallet/oko-common-ui/spacing";
@@ -11,18 +11,29 @@ import { useArbitrarySigModal } from "./hooks/use_arbitrary_sig_modal";
 import { ArbitrarySignatureDesc } from "@oko-wallet-attached/components/modal_variants/common/arbitrary_sig_desc/arbitrary_signature_desc";
 import { EthereumArbitrarySignatureContent } from "./ethereum_arbitrary_signature_content";
 import { SignWithOkoBox } from "@oko-wallet-attached/components/sign_with_oko_box/sign_with_oko_box";
-import { getSiweMessage } from "@oko-wallet-attached/components/modal_variants/eth/siwe_message";
+import {
+  getSiweMessage,
+  verifySiweMessage,
+} from "@oko-wallet-attached/components/modal_variants/eth/siwe_message";
 import { EthereumSiweSignatureContent } from "@oko-wallet-attached/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe-siganature_content";
+import { SiweRiskWarningCheckBox } from "@oko-wallet-attached/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe-risk-warning-box";
 
 export const MakeArbitrarySigModal: React.FC<MakeArbitrarySigModalProps> = ({
   getIsAborted,
   data,
   modalId,
 }) => {
+  const siweMessage = getSiweMessage(data.payload.data.message);
+  const isValidSiweMessage = siweMessage
+    ? verifySiweMessage(siweMessage, data.payload.origin)
+    : false;
+  const [isSiweRiskWarningChecked, setIsSiweRiskWarningChecked] =
+    useState(false);
+
   const {
     onReject,
     onApprove,
-    isApproveEnabled,
+    isApproveEnabled: isApproveEnabledOriginal,
     isLoading,
     isDemo,
     theme,
@@ -32,8 +43,18 @@ export const MakeArbitrarySigModal: React.FC<MakeArbitrarySigModalProps> = ({
     data,
     modalId,
   });
+  const isApproveEnabled = useMemo(() => {
+    if (siweMessage && !isValidSiweMessage) {
+      return isApproveEnabledOriginal && isSiweRiskWarningChecked;
+    }
 
-  const siweMessage = getSiweMessage(data.payload.data.message);
+    return isApproveEnabledOriginal;
+  }, [
+    isApproveEnabledOriginal,
+    isSiweRiskWarningChecked,
+    siweMessage,
+    isValidSiweMessage,
+  ]);
 
   return (
     <div className={styles.container}>
@@ -58,6 +79,16 @@ export const MakeArbitrarySigModal: React.FC<MakeArbitrarySigModalProps> = ({
 
         <Spacing height={20} />
 
+        {siweMessage && !isValidSiweMessage && (
+          <>
+            <SiweRiskWarningCheckBox
+              checked={isSiweRiskWarningChecked}
+              onChange={setIsSiweRiskWarningChecked}
+            />
+            <Spacing height={12} />
+          </>
+        )}
+
         <div className={styles.buttonContainer}>
           <Button
             variant="secondary"
diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/ethereum_siwe_signature_content.module.scss b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/ethereum_siwe_signature_content.module.scss
index 12e659b2e..bc5741236 100644
--- a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/ethereum_siwe_signature_content.module.scss
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/ethereum_siwe_signature_content.module.scss
@@ -25,3 +25,14 @@
     justify-content: space-between;
   }
 }
+
+.originRow {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  .originFavicon {
+    width: 20px;
+    height: 20px;
+  }
+}
diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe-siganature_content.tsx b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe-siganature_content.tsx
index e2e9183c0..b9eee8296 100644
--- a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe-siganature_content.tsx
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe-siganature_content.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import type { EthereumArbitrarySignPayload } from "@oko-wallet/oko-sdk-core";
 import { Spacing } from "@oko-wallet/oko-common-ui/spacing";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
@@ -13,6 +13,8 @@ import { SiweSigTitleBadge } from "@oko-wallet-attached/components/modal_variant
 import { SignerAddressOrEmailForSiwe } from "@oko-wallet-attached/components/modal_variants/eth/arbitrary_sig/siwe_sig/signer_address_or_email_for_siwe";
 import { MakeSignatureRawCodeBlockContainer } from "@oko-wallet-attached/components/modal_variants/common/make_signature/make_sig_modal_code_block_container";
 import { MakeSignatureRawCodeBlock } from "@oko-wallet-attached/components/modal_variants/common/make_signature/make_sig_modal_code_block";
+import { SiweRiskWarningBox } from "@oko-wallet-attached/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe-risk-warning-box";
+import { getFaviconUrl } from "@oko-wallet-attached/utils/favicon";
 
 interface EthereumSiweSignatureContentProps {
   payload: EthereumArbitrarySignPayload;
@@ -23,6 +25,7 @@ export const EthereumSiweSignatureContent: React.FC<
   EthereumSiweSignatureContentProps
 > = ({ payload, theme }) => {
   const message = getSiweMessage(payload.data.message);
+  const faviconUrl = getFaviconUrl(payload.origin);
 
   if (!message) {
     // @unreachable
@@ -30,23 +33,38 @@ export const EthereumSiweSignatureContent: React.FC<
   }
 
   const isValidSiweMessage = verifySiweMessage(message, payload.origin);
-  if (!isValidSiweMessage) {
-    throw new Error("Invalid SIWE message");
-  }
 
   return (
     <div>
-      <SiweSigTitleBadge theme={theme} />
+      {isValidSiweMessage ? (
+        <SiweSigTitleBadge theme={theme} />
+      ) : (
+        <SiweRiskWarningBox />
+      )}
+
       <div className={styles.metadataContainer}>
-        <Spacing height={8} />
+        <Spacing height={isValidSiweMessage ? 8 : 12} />
         <Typography size="lg" color="primary" weight="semibold">
           Sign in to
         </Typography>
 
         <Spacing height={4} />
-        <Typography size="lg" color="primary" weight="semibold">
-          {payload.origin.replace(/^https?:\/\//, "")}
-        </Typography>
+        <div className={styles.originRow}>
+          {faviconUrl && faviconUrl.length > 0 && (
+            <img
+              src={faviconUrl}
+              alt="favicon"
+              className={styles.originFavicon}
+            />
+          )}
+          <Typography
+            size="lg"
+            color={isValidSiweMessage ? "primary" : "warning-primary"}
+            weight="semibold"
+          >
+            {payload.origin.replace(/^https?:\/\//, "")}
+          </Typography>
+        </div>
 
         <Spacing height={8} />
         <SignerAddressOrEmailForSiwe
diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe-risk-warning-box.module.scss b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe-risk-warning-box.module.scss
new file mode 100644
index 000000000..b93f57963
--- /dev/null
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe-risk-warning-box.module.scss
@@ -0,0 +1,20 @@
+.siweRiskWarningContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.siweRiskWarningBox {
+  display: flex;
+  padding: 6px 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  flex: 1 0 0;
+
+  border-radius: 12px;
+
+  text-align: center;
+
+  background-color: var(--bg-warning-primary);
+}
diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe-risk-warning-box.tsx b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe-risk-warning-box.tsx
new file mode 100644
index 000000000..b4e0ddbfa
--- /dev/null
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe-risk-warning-box.tsx
@@ -0,0 +1,41 @@
+import type { FC } from "react";
+import { Checkbox } from "@oko-wallet/oko-common-ui/checkbox";
+import { Typography } from "@oko-wallet/oko-common-ui/typography";
+
+import styles from "./siwe-risk-warning-box.module.scss";
+
+interface SiweRiskWarningCheckBoxProps {
+  checked: boolean;
+  onChange: (isValidSiweMessage: boolean) => void;
+}
+export const SiweRiskWarningCheckBox: FC<SiweRiskWarningCheckBoxProps> = ({
+  checked,
+  onChange,
+}) => {
+  return (
+    <div className={styles.siweRiskWarningContainer}>
+      <Checkbox
+        id="siwe-message-checkbox"
+        checked={checked}
+        onChange={onChange}
+        label="I understand the risk and would like to proceed."
+        labelStyle={{
+          color: "secondary",
+          size: "xs",
+          weight: "medium",
+        }}
+      />
+    </div>
+  );
+};
+
+export const SiweRiskWarningBox = () => {
+  return (
+    <div className={styles.siweRiskWarningBox}>
+      <Typography size="xs" color="warning-primary" weight="medium">
+        The URL requesting your signature differs from the current website. This
+        may indicate a potential security risk.
+      </Typography>
+    </div>
+  );
+};

From 85cd4b67ff23cc2d2f7c26f21b8f79b98e523a2b Mon Sep 17 00:00:00 2001
From: blacktoast <dbstjd100@naver.com>
Date: Tue, 23 Dec 2025 18:56:02 +0900
Subject: [PATCH 13/25] [ui] when it is dark-mode, change check icon color

---
 ui/oko_common_ui/src/checkbox/check_icon.tsx       | 10 ++++++++--
 ui/oko_common_ui/src/checkbox/checkbox.module.scss | 10 ++++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/ui/oko_common_ui/src/checkbox/check_icon.tsx b/ui/oko_common_ui/src/checkbox/check_icon.tsx
index 519b7f5a2..3a6f878da 100644
--- a/ui/oko_common_ui/src/checkbox/check_icon.tsx
+++ b/ui/oko_common_ui/src/checkbox/check_icon.tsx
@@ -1,4 +1,10 @@
-export const CheckIcon = ({ size = 14 }: { size?: number }) => {
+export const CheckIcon = ({
+  size = 14,
+  color,
+}: {
+  size?: number;
+  color?: string;
+}) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -9,7 +15,7 @@ export const CheckIcon = ({ size = 14 }: { size?: number }) => {
     >
       <path
         d="M12.1666 3.5L5.74998 9.91667L2.83331 7"
-        stroke="white"
+        stroke={color || "currentColor"}
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
diff --git a/ui/oko_common_ui/src/checkbox/checkbox.module.scss b/ui/oko_common_ui/src/checkbox/checkbox.module.scss
index 518ffa2e8..9dd1f2903 100644
--- a/ui/oko_common_ui/src/checkbox/checkbox.module.scss
+++ b/ui/oko_common_ui/src/checkbox/checkbox.module.scss
@@ -16,6 +16,16 @@
   align-items: center;
 }
 
+[data-theme="light"] {
+  .checkboxInput {
+    color: var(--white);
+  }
+}
+[data-theme="dark"] {
+  .checkboxInput {
+    color: var(--gray-700);
+  }
+}
 .checkboxInput {
   display: flex;
 

From c99798dfb6897bc2bb9cf0a8727d5e892e0b9800 Mon Sep 17 00:00:00 2001
From: blacktoast <dbstjd100@naver.com>
Date: Tue, 23 Dec 2025 19:02:01 +0900
Subject: [PATCH 14/25] [embed] add chain icon

---
 ...thereum_siwe_signature_content.module.scss |  6 +++++
 .../siwe_sig/make_siwe-siganature_content.tsx | 23 +++++++++++--------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/ethereum_siwe_signature_content.module.scss b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/ethereum_siwe_signature_content.module.scss
index bc5741236..f233f877a 100644
--- a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/ethereum_siwe_signature_content.module.scss
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/ethereum_siwe_signature_content.module.scss
@@ -23,6 +23,12 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+
+    .chainInfoRowContent {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
   }
 }
 
diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe-siganature_content.tsx b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe-siganature_content.tsx
index b9eee8296..13a429f18 100644
--- a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe-siganature_content.tsx
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe-siganature_content.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import type { EthereumArbitrarySignPayload } from "@oko-wallet/oko-sdk-core";
 import { Spacing } from "@oko-wallet/oko-common-ui/spacing";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
@@ -15,6 +15,7 @@ import { MakeSignatureRawCodeBlockContainer } from "@oko-wallet-attached/compone
 import { MakeSignatureRawCodeBlock } from "@oko-wallet-attached/components/modal_variants/common/make_signature/make_sig_modal_code_block";
 import { SiweRiskWarningBox } from "@oko-wallet-attached/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe-risk-warning-box";
 import { getFaviconUrl } from "@oko-wallet-attached/utils/favicon";
+import { Avatar } from "@oko-wallet-attached/components/avatar/avatar";
 
 interface EthereumSiweSignatureContentProps {
   payload: EthereumArbitrarySignPayload;
@@ -91,16 +92,20 @@ export const EthereumSiweSignatureContent: React.FC<
           <Typography size="xs" color="secondary" weight="semibold">
             Network
           </Typography>
-          <Typography size="sm" color="secondary" weight="medium">
-            {payload.chain_info.chain_name}
-          </Typography>
+
+          <div className={styles.chainInfoRowContent}>
+            <Avatar
+              src={payload.chain_info.chain_symbol_image_url}
+              alt="chain icon"
+              size="sm"
+              variant="rounded"
+            />
+            <Typography size="sm" color="secondary" weight="medium">
+              {payload.chain_info.chain_name}
+            </Typography>
+          </div>
         </div>
       </div>
-      {/* <MetadataContent
-        origin={payload.origin}
-        chainInfo={payload.chain_info}
-        signer={payload.signer}
-      /> */}
 
       <Spacing height={16} />
       <MakeSignatureRawCodeBlockContainer className={styles.messageContainer}>

From c967ba0bbaf2ee9ab626830eb3fc2fecfff0947e Mon Sep 17 00:00:00 2001
From: blacktoast <dbstjd100@naver.com>
Date: Tue, 23 Dec 2025 19:12:48 +0900
Subject: [PATCH 15/25] [ci] add deploy oko-sandbox-evm command

---
 internals/ci/src/cmds/deploy.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/internals/ci/src/cmds/deploy.ts b/internals/ci/src/cmds/deploy.ts
index c5b75e347..6ea5c9de8 100644
--- a/internals/ci/src/cmds/deploy.ts
+++ b/internals/ci/src/cmds/deploy.ts
@@ -27,6 +27,9 @@ const APP_CONFIGS = {
   "oko-user-dashboard": {
     path: path.join(paths.root, "apps/user_dashboard"),
   },
+  "oko-sandbox-evm": {
+    path: path.join(paths.root, "sandbox/sandbox_evm"),
+  },
 };
 
 function listDeployableApps(): void {

From 1b2ab33eeaa1876d9baca62c0886f54c19891796 Mon Sep 17 00:00:00 2001
From: blacktoast <dbstjd100@naver.com>
Date: Tue, 23 Dec 2025 20:28:16 +0900
Subject: [PATCH 16/25] [embed] change text

---
 .../arbitrary_sig/siwe_sig/make_siwe-siganature_content.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe-siganature_content.tsx b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe-siganature_content.tsx
index 13a429f18..ed6ec1a3c 100644
--- a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe-siganature_content.tsx
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe-siganature_content.tsx
@@ -80,10 +80,10 @@ export const EthereumSiweSignatureContent: React.FC<
       <div className={styles.chainInfoContainer}>
         <div className={styles.chainInfoRow}>
           <Typography size="xs" color="secondary" weight="semibold">
-            Estimated in balance
+            Impact on balance
           </Typography>
           <Typography size="sm" color="secondary" weight="medium">
-            No changes
+            None
           </Typography>
         </div>
 

From 817d5eb166b9e40daa80269d19ea6746937e89ab Mon Sep 17 00:00:00 2001
From: blacktoast <dbstjd100@naver.com>
Date: Wed, 24 Dec 2025 16:31:41 +0900
Subject: [PATCH 17/25] [embed] add hoverColor

- oko 504
---
 .../signer_address_or_email.module.scss                   | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/embed/oko_attached/src/components/modal_variants/common/metadata_content/signer_address_or_email/signer_address_or_email.module.scss b/embed/oko_attached/src/components/modal_variants/common/metadata_content/signer_address_or_email/signer_address_or_email.module.scss
index dead07476..0541e90ea 100644
--- a/embed/oko_attached/src/components/modal_variants/common/metadata_content/signer_address_or_email/signer_address_or_email.module.scss
+++ b/embed/oko_attached/src/components/modal_variants/common/metadata_content/signer_address_or_email/signer_address_or_email.module.scss
@@ -17,6 +17,12 @@
 
   cursor: pointer;
   border-radius: 12px;
-  background: var(--bg-secondary);
+  background-color: var(--bg-secondary);
   width: fit-content;
+
+  transition: background-color 0.15s ease-in-out;
+
+  &:hover {
+    background-color: var(--bg-secondary-hover);
+  }
 }

From 3cd2596c4d5a79e1625a78cf17f4135bf0e59e6e Mon Sep 17 00:00:00 2001
From: blacktoast <dbstjd100@naver.com>
Date: Wed, 24 Dec 2025 16:32:58 +0900
Subject: [PATCH 18/25] [embed] adjust gap

- oko-503
---
 .../eth/arbitrary_sig/make_arbitrary_sig_modal.tsx              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/make_arbitrary_sig_modal.tsx b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/make_arbitrary_sig_modal.tsx
index f75829a8c..39dfb5b30 100644
--- a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/make_arbitrary_sig_modal.tsx
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/make_arbitrary_sig_modal.tsx
@@ -77,7 +77,7 @@ export const MakeArbitrarySigModal: React.FC<MakeArbitrarySigModalProps> = ({
         <Spacing height={!!siweMessage ? 12 : 20} />
         {!hasOnChainSchema && <ArbitrarySignatureDesc />}
 
-        <Spacing height={20} />
+        <Spacing height={8} />
 
         {siweMessage && !isValidSiweMessage && (
           <>

From 8f761e0025be59ff362994402d183cdc7e950a7c Mon Sep 17 00:00:00 2001
From: blacktoast <dbstjd100@naver.com>
Date: Wed, 24 Dec 2025 16:36:50 +0900
Subject: [PATCH 19/25] [embed] remove favicon and adjust style

 - oko-502
---
 .../ethereum_siwe_signature_content.module.scss        |  5 +++++
 .../siwe_sig/make_siwe-siganature_content.tsx          | 10 ----------
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/ethereum_siwe_signature_content.module.scss b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/ethereum_siwe_signature_content.module.scss
index f233f877a..d101672ee 100644
--- a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/ethereum_siwe_signature_content.module.scss
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/ethereum_siwe_signature_content.module.scss
@@ -37,6 +37,11 @@
   align-items: center;
   gap: 4px;
 
+  padding: 0px 20px;
+
+  word-break: break-all;
+  text-align: center;
+
   .originFavicon {
     width: 20px;
     height: 20px;
diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe-siganature_content.tsx b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe-siganature_content.tsx
index ed6ec1a3c..3f37bcf2d 100644
--- a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe-siganature_content.tsx
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe-siganature_content.tsx
@@ -14,7 +14,6 @@ import { SignerAddressOrEmailForSiwe } from "@oko-wallet-attached/components/mod
 import { MakeSignatureRawCodeBlockContainer } from "@oko-wallet-attached/components/modal_variants/common/make_signature/make_sig_modal_code_block_container";
 import { MakeSignatureRawCodeBlock } from "@oko-wallet-attached/components/modal_variants/common/make_signature/make_sig_modal_code_block";
 import { SiweRiskWarningBox } from "@oko-wallet-attached/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe-risk-warning-box";
-import { getFaviconUrl } from "@oko-wallet-attached/utils/favicon";
 import { Avatar } from "@oko-wallet-attached/components/avatar/avatar";
 
 interface EthereumSiweSignatureContentProps {
@@ -26,8 +25,6 @@ export const EthereumSiweSignatureContent: React.FC<
   EthereumSiweSignatureContentProps
 > = ({ payload, theme }) => {
   const message = getSiweMessage(payload.data.message);
-  const faviconUrl = getFaviconUrl(payload.origin);
-
   if (!message) {
     // @unreachable
     throw new Error("unreachable");
@@ -51,13 +48,6 @@ export const EthereumSiweSignatureContent: React.FC<
 
         <Spacing height={4} />
         <div className={styles.originRow}>
-          {faviconUrl && faviconUrl.length > 0 && (
-            <img
-              src={faviconUrl}
-              alt="favicon"
-              className={styles.originFavicon}
-            />
-          )}
           <Typography
             size="lg"
             color={isValidSiweMessage ? "primary" : "warning-primary"}

From 7de57b06d0270c806d392c42f335e903adfdb7ea Mon Sep 17 00:00:00 2001
From: blacktoast <dbstjd100@naver.com>
Date: Wed, 24 Dec 2025 17:27:43 +0900
Subject: [PATCH 20/25] [ui] add custom classname props

---
 ui/oko_common_ui/src/checkbox/checkbox.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/ui/oko_common_ui/src/checkbox/checkbox.tsx b/ui/oko_common_ui/src/checkbox/checkbox.tsx
index fc06460c8..a9679a620 100644
--- a/ui/oko_common_ui/src/checkbox/checkbox.tsx
+++ b/ui/oko_common_ui/src/checkbox/checkbox.tsx
@@ -13,6 +13,9 @@ interface CheckboxProps {
   size?: "sm" | "md";
   checked: boolean;
   onChange: (checked: boolean) => void;
+  checkBoxInputContainerClassName?: string;
+  checkboxContainerClassName?: string;
+
   label: string;
   labelStyle?: {
     color?: BaseTypographyProps["color"];
@@ -28,6 +31,8 @@ export const Checkbox: React.FC<CheckboxProps> = ({
   onChange,
   label,
   labelStyle,
+  checkBoxInputContainerClassName,
+  checkboxContainerClassName,
 }) => {
   const iconSize = size === "sm" ? 12 : 14;
   const checkBoxInputStyle = cn(
@@ -38,6 +43,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
   const checkboxContainerStyle = cn(
     styles.checkboxContainer,
     styles[`checkboxContainer-${size}`],
+    checkboxContainerClassName,
   );
 
   return (
@@ -50,7 +56,12 @@ export const Checkbox: React.FC<CheckboxProps> = ({
         onChange={(e) => onChange(e.target.checked)}
       />
       <label htmlFor={id} className={checkboxContainerStyle}>
-        <div className={styles.checkboxInputContainer}>
+        <div
+          className={cn(
+            styles.checkboxInputContainer,
+            checkBoxInputContainerClassName,
+          )}
+        >
           <span className={checkBoxInputStyle}>
             {/* NOTE: For animate processing, it adjust the display by adjusting the opacity of the corresponding icon in the css @retto*/}
             <CheckIcon size={iconSize} />

From 1dea141e85f697f9f91a8800513231c2b2e1db74 Mon Sep 17 00:00:00 2001
From: blacktoast <dbstjd100@naver.com>
Date: Wed, 24 Dec 2025 17:27:59 +0900
Subject: [PATCH 21/25] [embed] adjust style

---
 .../siwe_sig/siwe-risk-warning-box.module.scss            | 8 ++++++++
 .../eth/arbitrary_sig/siwe_sig/siwe-risk-warning-box.tsx  | 4 ++++
 2 files changed, 12 insertions(+)

diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe-risk-warning-box.module.scss b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe-risk-warning-box.module.scss
index b93f57963..410605751 100644
--- a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe-risk-warning-box.module.scss
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe-risk-warning-box.module.scss
@@ -18,3 +18,11 @@
 
   background-color: var(--bg-warning-primary);
 }
+
+.siweRiskWarningCheckBoxContainer {
+  gap: 6px;
+}
+
+.siweRiskWarningCheckBoxInputContainerClassName {
+  padding-top: 0px;
+}
diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe-risk-warning-box.tsx b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe-risk-warning-box.tsx
index b4e0ddbfa..5305aaf99 100644
--- a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe-risk-warning-box.tsx
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe-risk-warning-box.tsx
@@ -24,6 +24,10 @@ export const SiweRiskWarningCheckBox: FC<SiweRiskWarningCheckBoxProps> = ({
           size: "xs",
           weight: "medium",
         }}
+        checkboxContainerClassName={styles.siweRiskWarningCheckBoxContainer}
+        checkBoxInputContainerClassName={
+          styles.siweRiskWarningCheckBoxInputContainerClassName
+        }
       />
     </div>
   );

From 38124be0d99bd205619e2bac24dc22f80ba6173a Mon Sep 17 00:00:00 2001
From: devmosis <ryzond6728@gmail.com>
Date: Tue, 30 Dec 2025 10:27:01 +0900
Subject: [PATCH 22/25] oko_attached: fix typo

---
 .../eth/arbitrary_sig/make_arbitrary_sig_modal.tsx            | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/make_arbitrary_sig_modal.tsx b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/make_arbitrary_sig_modal.tsx
index 39dfb5b30..33a15d143 100644
--- a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/make_arbitrary_sig_modal.tsx
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/make_arbitrary_sig_modal.tsx
@@ -15,8 +15,8 @@ import {
   getSiweMessage,
   verifySiweMessage,
 } from "@oko-wallet-attached/components/modal_variants/eth/siwe_message";
-import { EthereumSiweSignatureContent } from "@oko-wallet-attached/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe-siganature_content";
-import { SiweRiskWarningCheckBox } from "@oko-wallet-attached/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe-risk-warning-box";
+import { EthereumSiweSignatureContent } from "@oko-wallet-attached/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe_signature_content";
+import { SiweRiskWarningCheckBox } from "@oko-wallet-attached/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_risk_warning_box";
 
 export const MakeArbitrarySigModal: React.FC<MakeArbitrarySigModalProps> = ({
   getIsAborted,

From ad614a0c764e9c6ce5e61ef79b6bce66ff82df9c Mon Sep 17 00:00:00 2001
From: devmosis <ryzond6728@gmail.com>
Date: Tue, 30 Dec 2025 10:27:19 +0900
Subject: [PATCH 23/25] oko_attached: unify file naming to underscore
 convention

---
 ...e-siganature_content.tsx => make_siwe_signature_content.tsx} | 2 +-
 ...arning-box.module.scss => siwe_risk_warning_box.module.scss} | 0
 .../{siwe-risk-warning-box.tsx => siwe_risk_warning_box.tsx}    | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/{make_siwe-siganature_content.tsx => make_siwe_signature_content.tsx} (98%)
 rename embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/{siwe-risk-warning-box.module.scss => siwe_risk_warning_box.module.scss} (100%)
 rename embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/{siwe-risk-warning-box.tsx => siwe_risk_warning_box.tsx} (95%)

diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe-siganature_content.tsx b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe_signature_content.tsx
similarity index 98%
rename from embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe-siganature_content.tsx
rename to embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe_signature_content.tsx
index 3f37bcf2d..d8e2d66f9 100644
--- a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe-siganature_content.tsx
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe_signature_content.tsx
@@ -13,7 +13,7 @@ import { SiweSigTitleBadge } from "@oko-wallet-attached/components/modal_variant
 import { SignerAddressOrEmailForSiwe } from "@oko-wallet-attached/components/modal_variants/eth/arbitrary_sig/siwe_sig/signer_address_or_email_for_siwe";
 import { MakeSignatureRawCodeBlockContainer } from "@oko-wallet-attached/components/modal_variants/common/make_signature/make_sig_modal_code_block_container";
 import { MakeSignatureRawCodeBlock } from "@oko-wallet-attached/components/modal_variants/common/make_signature/make_sig_modal_code_block";
-import { SiweRiskWarningBox } from "@oko-wallet-attached/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe-risk-warning-box";
+import { SiweRiskWarningBox } from "@oko-wallet-attached/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_risk_warning_box";
 import { Avatar } from "@oko-wallet-attached/components/avatar/avatar";
 
 interface EthereumSiweSignatureContentProps {
diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe-risk-warning-box.module.scss b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_risk_warning_box.module.scss
similarity index 100%
rename from embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe-risk-warning-box.module.scss
rename to embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_risk_warning_box.module.scss
diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe-risk-warning-box.tsx b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_risk_warning_box.tsx
similarity index 95%
rename from embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe-risk-warning-box.tsx
rename to embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_risk_warning_box.tsx
index 5305aaf99..4180841a0 100644
--- a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe-risk-warning-box.tsx
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_risk_warning_box.tsx
@@ -2,7 +2,7 @@ import type { FC } from "react";
 import { Checkbox } from "@oko-wallet/oko-common-ui/checkbox";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
 
-import styles from "./siwe-risk-warning-box.module.scss";
+import styles from "./siwe_risk_warning_box.module.scss";
 
 interface SiweRiskWarningCheckBoxProps {
   checked: boolean;

From a4dd6e5f47d5b0fbbdf6ac9cf49084e1adbb28ed Mon Sep 17 00:00:00 2001
From: devmosis <ryzond6728@gmail.com>
Date: Tue, 30 Dec 2025 10:27:30 +0900
Subject: [PATCH 24/25] oko_attached: remove console

---
 .../src/components/modal_variants/eth/siwe_message.ts            | 1 -
 1 file changed, 1 deletion(-)

diff --git a/embed/oko_attached/src/components/modal_variants/eth/siwe_message.ts b/embed/oko_attached/src/components/modal_variants/eth/siwe_message.ts
index 224857abe..082e81146 100644
--- a/embed/oko_attached/src/components/modal_variants/eth/siwe_message.ts
+++ b/embed/oko_attached/src/components/modal_variants/eth/siwe_message.ts
@@ -44,7 +44,6 @@ export function verifySiweMessage(
     );
 
     if (originByPayload !== originByTxUri || hostByPayload !== message.domain) {
-      console.log("originByPayload", originByPayload);
       return false;
     }
 

From 8431c624fb2acd343b01e8d1d3ec70fa792caa44 Mon Sep 17 00:00:00 2001
From: blacktoast <dbstjd100@naver.com>
Date: Wed, 31 Dec 2025 11:08:54 +0900
Subject: [PATCH 25/25] [attahced] apply ImageWithAlt

---
 .../siwe_sig/siwe_sig_title_badge/index.tsx       | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_sig_title_badge/index.tsx b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_sig_title_badge/index.tsx
index 100fed16d..3b460523f 100644
--- a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_sig_title_badge/index.tsx
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_sig_title_badge/index.tsx
@@ -1,4 +1,5 @@
 import type { Theme } from "@oko-wallet/oko-common-ui/theme";
+import { ImageWithAlt } from "@oko-wallet/oko-common-ui/image_with_alt";
 
 import { OKO_PUBLIC_S3_BUCKET_URL } from "@oko-wallet-attached/requests/endpoints";
 import styles from "./styles.module.scss";
@@ -22,14 +23,12 @@ export const SiweSigTitleBadge: React.FC<SiweSigTitleBadgeProps> = ({
 
   return (
     <div className={styles.imageContainer}>
-      <picture>
-        <source srcSet={imageUrl.webp} type="image/webp" />
-        <img
-          className={styles.image}
-          src={imageUrl.png}
-          alt="sign siwe title image"
-        />
-      </picture>
+      <ImageWithAlt
+        srcSet={imageUrl.webp}
+        srcAlt={imageUrl.png}
+        alt="sign siwe title image"
+        className={styles.image}
+      />
     </div>
   );
 };