Feat: add native interface

src/components/CtaLargeBtn.tsx

@@ -3,6 +3,7 @@ import { pageKey } from "@/types/pageKey";
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
 import styled from "styled-components";
+import Script from "next/script";
 
 interface Props {
   //   key: pageKey;
@@ -13,15 +14,22 @@ interface Props {
 const CtaLargeBtn = (props: Props) => {
   const { title, key } = props;
   const router = useRouter();
+
+  const [isClicked, setIsClicked] = useState(false);
+
   return (
-    <Button
-      onClick={() => {
-        // TODO: 얼굴인식 화면으로
-        router.push(`/main`);
-      }}
-    >
-      <Title>{title}</Title>
-    </Button>
+    <>
+      <Button
+        onClick={() => {
+          // TODO: 얼굴인식 화면으로
+          // router.push(`/main`);
+          setIsClicked(!isClicked);
+        }}
+      >
+        <Title>{title}</Title>
+      </Button>
+      { isClicked && <Script id="foo">{'window.webkit.messageHandlers.bridge.postMessage("onClickImportYourWallet");'}</Script> }
+    </>
   );
 };
 

src/components/CtaSmallBtn.tsx

@@ -1,6 +1,8 @@
 import { colors } from "@/constant/colors";
 import { useRouter } from "next/navigation";
 import styled from "styled-components";
+import {useState} from "react";
+import Script from "next/script";
 
 interface SmallProps {
   key: string;
@@ -10,15 +12,23 @@ interface SmallProps {
 const CtaSmallBtn = (props: SmallProps) => {
   const { title, key } = props;
   const router = useRouter();
+
+  const [isClicked, setIsClicked] = useState(false);
+
   return (
-    <Button
-      onClick={() => {
-        // TODO: 얼굴인식 화면으로
-        router.push(`/send`);
-      }}
-    >
-      <Title>{title}</Title>
-    </Button>
+    <>
+      <Button
+        onClick={() => {
+          // TODO: 얼굴인식 화면으로
+          // router.push(`/send`);
+
+          setIsClicked(!isClicked);
+        }}
+      >
+        <Title>{title}</Title>
+      </Button>
+      { isClicked && <Script id="foo">{'window.webkit.messageHandlers.bridge.postMessage("onClickSend");'}</Script> }
+    </>
   );
 };
 

src/pages/confirm.tsx

@@ -3,9 +3,12 @@ import { colors } from "@/constant/colors";
 import { GlobalStyle } from "@/styles/global.style";
 import { useState } from "react";
 import styled from "styled-components";
+import Script from "next/script";
 
 const Confirm = () => {
   const [balance, setBalance] = useState(0);
+  const [isClicked, setIsClicked] = useState(false);
+
   return (
     <Container>
       <GlobalStyle />
@@ -18,6 +21,7 @@ const Confirm = () => {
       <ToAddressContainer>{"TO"}</ToAddressContainer>
       <TotalFeeContainer>{"Total Gas Fee"}</TotalFeeContainer>
       {/* <Footer /> */}
+      { isClicked && <Script id="foo">{'window.webkit.messageHandlers.bridge.postMessage("onClickConfirm");'}</Script> }
     </Container>
   );
 };

src/pages/index.tsx

@@ -4,10 +4,13 @@ import { GlobalStyle } from "@/styles/global.style";
 import { pageKey } from "@/types/pageKey";
 import Link from "next/link";
 import styled from "styled-components";
+import Script from "next/script";
+import {useEffect} from "react";
 
 export default function Home() {
   const SettingWalletTitle = "Setting Wallet";
   const WalletTitle = "Import your wallet or create a new wallet";
+
   return (
     <>
       <GlobalStyle />
@@ -23,6 +26,7 @@ export default function Home() {
           <CtaLargeBtn key={"create"} title={"Create a new wallet"} />
         </BtnContainer>
       </Container>
+      <Script id="my-script">{`function test() { alert("오예"); }`}</Script>
     </>
   );
 }

src/pages/send.tsx

@@ -12,11 +12,14 @@ import MaticIcon from "../../public/svgs/Matic.svg";
 import UpArrow from "../../public/svgs/UpArrow.svg";
 import DownArrow from "../../public/svgs/DownArrow.svg";
 import { useRouter } from "next/navigation";
+import Script from "next/script";
 
 const Send = () => {
   const [value, setValue] = useState(0);
   const [gasFee, setGasFee] = useState("");
   const router = useRouter();
+
+  const [isClicked, setIsClicked] = useState(false);
   // TODO: swap contract call
   // const provider = new ethers.JsonRpcApiProvider("", 1);
   // const signer = new ethers.Wallet("WALLET_PRIVATE_KEY", provider);
@@ -80,11 +83,14 @@ const Send = () => {
       <SubmitBtn
         onClick={() => {
           router.push("/status");
+          setIsClicked(!isClicked);
         }}
+
       >
         {"Next"}
       </SubmitBtn>
       {/* <Footer /> */}
+      { isClicked && <Script id="foo">{'window.webkit.messageHandlers.bridge.postMessage("onClickNext");'}</Script> }
     </Container>
   );
 };