From 46385dd18447828aa305e7348fa805fbee77b977 Mon Sep 17 00:00:00 2001
From: Hyde Ai <hydeai@protonmail.com>
Date: Sun, 29 Aug 2021 00:12:09 -0400
Subject: [PATCH] # This is a combination of 2 commits. # This is the 1st
 commit message:

Started Apple Watch Otp Process.

# This is the commit message #2:

Started Apple Watch Otp Process.
---
 code/client/src/components/OtpStack.jsx | 10 +++++++++-
 code/client/src/pages/Create.jsx        | 12 ++++++++++++
 code/client/src/pages/Show/About.jsx    |  7 +++++++
 code/client/src/pages/Show/Send.jsx     |  2 +-
 4 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/code/client/src/components/OtpStack.jsx b/code/client/src/components/OtpStack.jsx
index 5c6a0a91e..1d60b480c 100644
--- a/code/client/src/components/OtpStack.jsx
+++ b/code/client/src/components/OtpStack.jsx
@@ -18,7 +18,7 @@ export const useOtpState = () => {
   return { state: { otpRef, otp2Ref, otpInput, otp2Input, setOtpInput, setOtp2Input, resetOtp } }
 }
 
-export const OtpStack = ({ walletName, otpState, doubleOtp }) => {
+export const OtpStack = ({ walletName, otpState, doubleOtp, appleWatchOtp }) => {
   const location = useLocation()
   const { otpRef, otp2Ref, otpInput, otp2Input, setOtpInput, setOtp2Input, resetOtp } = otpState || useOtpState()
   useEffect(() => {
@@ -59,6 +59,14 @@ export const OtpStack = ({ walletName, otpState, doubleOtp }) => {
             <QuestionCircleOutlined />
           </Tooltip>
         </Space>}
+      {appleWatchOtp &&
+        <Space align='baseline' size='large' style={{ marginTop: 16 }}>
+          <Label><Hint>Apple Watch Code</Hint></Label>
+          <Text>0000</Text>
+          <Tooltip title={`You will be prompted to enter a code on your apple watch`}>
+            <QuestionCircleOutlined />
+          </Tooltip>
+        </Space>}
     </>
   )
 }
diff --git a/code/client/src/pages/Create.jsx b/code/client/src/pages/Create.jsx
index 6b0da9283..eb8db73bf 100644
--- a/code/client/src/pages/Create.jsx
+++ b/code/client/src/pages/Create.jsx
@@ -112,6 +112,7 @@ const Create = () => {
   const [address, setAddress] = useState() // '0x12345678901234567890'
   const [effectiveTime, setEffectiveTime] = useState()
   const [doubleOtp, setDoubleOtp] = useState(false)
+  const [appleWatchOtp, setAppleWatchOtp] = useState(false)
 
   const [durationVisible, setDurationVisible] = useState(false)
   const [section, setSection] = useState(sectionViews.setupOtp)
@@ -228,6 +229,7 @@ const Create = () => {
         hseed: ONEUtil.hexView(hseed),
         network,
         doubleOtp,
+        appleWatchOtp,
         ...securityParameters,
       }
       await storeLayers()
@@ -328,6 +330,16 @@ const Create = () => {
                 </Tooltip>
               </Space>
             </Checkbox>
+            <Checkbox onChange={() => setAppleWatchOtp(!appleWatchOtp)}>
+              <Space>
+                <Hint>
+                  Use your apple watch to confirm transactions
+                </Hint>
+                <Tooltip title={<div>In addition to google authentication, you will need your apple watch to enter the code from your wallet</div>}>
+                  <QuestionCircleOutlined />
+                </Tooltip>
+              </Space>
+            </Checkbox>
           </Space>
         </Row>
       </AnimatedSection>
diff --git a/code/client/src/pages/Show/About.jsx b/code/client/src/pages/Show/About.jsx
index 01757be10..49690781a 100644
--- a/code/client/src/pages/Show/About.jsx
+++ b/code/client/src/pages/Show/About.jsx
@@ -63,6 +63,13 @@ const About = ({ address }) => {
             <Text>{wallet.majorVersion}.{wallet.minorVersion}</Text>
           </Col>
         </TallRow>}
+      {wallet.appleWatchOtp &&
+        <TallRow>
+          <Col span={isMobile ? 24 : 12}> <Title level={3}>Apple Watch Otp</Title></Col>
+          <Col>
+              <Text>Enabled</Text>
+          </Col>
+        </TallRow>}
       <>
         {backlinks.map((backlink, i) =>
           <TallRow align='middle' key={`backlink-${i}}`}>
diff --git a/code/client/src/pages/Show/Send.jsx b/code/client/src/pages/Show/Send.jsx
index 25d285830..122974565 100644
--- a/code/client/src/pages/Show/Send.jsx
+++ b/code/client/src/pages/Show/Send.jsx
@@ -175,7 +175,7 @@ const Send = ({
             </Title>
             <Hint>USD</Hint>
           </Space>}
-        <OtpStack walletName={wallet.name} doubleOtp={doubleOtp} otpState={otpState} />
+        <OtpStack walletName={wallet.name} doubleOtp={doubleOtp} otpState={otpState} appleWatchOtp={appleWatchOtp} />
       </Space>
       <Row justify='end' style={{ marginTop: 24 }}>
         <Space>