oko 372

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

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>
+  );
 };

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;

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);
+  }
 }

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,28 +77,16 @@ 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")}
           />
         </div>
       );
   }
 };
-
-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>
-  );
-};

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,16 +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,
+  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_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,
   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,
@@ -30,6 +43,18 @@ export const MakeArbitrarySigModal: React.FC<MakeArbitrarySigModalProps> = ({
     data,
     modalId,
   });
+  const isApproveEnabled = useMemo(() => {
+    if (siweMessage && !isValidSiweMessage) {
+      return isApproveEnabledOriginal && isSiweRiskWarningChecked;
+    }
+
+    return isApproveEnabledOriginal;
+  }, [
+    isApproveEnabledOriginal,
+    isSiweRiskWarningChecked,
+    siweMessage,
+    isValidSiweMessage,
+  ]);
 
   return (
     <div className={styles.container}>
@@ -39,13 +64,30 @@ export const MakeArbitrarySigModal: React.FC<MakeArbitrarySigModalProps> = ({
         </div>
 
         <div className={styles.modalInnerContentContainer}>
-          <EthereumArbitrarySignatureContent payload={data.payload} />
+          {!!siweMessage ? (
+            <EthereumSiweSignatureContent
+              payload={data.payload}
+              theme={theme}
+            />
+          ) : (
+            <EthereumArbitrarySignatureContent payload={data.payload} />
+          )}
         </div>
 
-        <Spacing height={20} />
+        <Spacing height={!!siweMessage ? 12 : 20} />
         {!hasOnChainSchema && <ArbitrarySignatureDesc />}
 
-        <Spacing height={20} />
+        <Spacing height={8} />
+
+        {siweMessage && !isValidSiweMessage && (
+          <>
+            <SiweRiskWarningCheckBox
+              checked={isSiweRiskWarningChecked}
+              onChange={setIsSiweRiskWarningChecked}
+            />
+            <Spacing height={12} />
+          </>
+        )}
 
         <div className={styles.buttonContainer}>
           <Button

embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/ethereum_siwe_signature_content.module.scss

@@ -0,0 +1,49 @@
+.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;
+
+    .chainInfoRowContent {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+  }
+}
+
+.originRow {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  padding: 0px 20px;
+
+  word-break: break-all;
+  text-align: center;
+
+  .originFavicon {
+    width: 20px;
+    height: 20px;
+  }
+}