# This is a combination of 2 commits.

# This is the 1st commit message: Started Apple Watch Otp Process. # This is the commit message polymorpher#2: Started Apple Watch Otp Process.
HYDEAI · Aug 29, 2021 · 46385dd · 46385dd
1 parent cf76254
commit 46385dd
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>