Merge pull request #1 from arx-research/brian/integrate-card-scan

Get basic flow working to load a card from another account using zkp2p.
arx-research · Nov 16, 2023 · 7de0604 · 7de0604
2 parents 754e529 + 3195cd4
commit 7de0604
Show file tree

Hide file tree

Showing 3 changed files with 19,254 additions and 24,609 deletions.
diff --git a/client/package.json b/client/package.json
@@ -160,6 +160,7 @@
     ]
   },
   "devDependencies": {
+    "@arx-research/libhalo": "^1.2.17",
     "@babel/core": "7.12.3",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
@@ -177,7 +178,8 @@
     "nodemon": "^2.0.19",
     "puppeteer": "18.1",
     "selenium-webdriver": "^4.8.1",
-    "ts-node-dev": "^2.0.0"
+    "ts-node-dev": "^2.0.0",
+    "websocket": "^1.0.34"
   },
   "jest": {
     "roots": [

diff --git a/client/src/components/Swap/index.tsx b/client/src/components/Swap/index.tsx
@@ -7,6 +7,8 @@ import {
 } from 'wagmi'
 import { useNavigate } from 'react-router-dom';
 
+import { ArrowLeft } from 'react-feather';
+
 import { Input } from "@components/Swap/Input";
 import { OnRamperIntentTable } from '@components/Swap/OnRamperIntentTable'
 import { AutoColumn } from '@components/layouts/Column'
@@ -24,6 +26,9 @@ import useSmartContracts from '@hooks/useSmartContracts';
 import useLiquidity from '@hooks/useLiquidity';
 import useRegistration from "@hooks/useRegistration";
 
+import { HaloGateway } from "@arx-research/libhalo/api/desktop.js";
+import websocket from "websocket";
+
 
 export type SwapQuote = {
   requestedUSDC: string;
@@ -54,12 +59,13 @@ const Swap: React.FC<SwapProps> = ({
    * Contexts
    */
 
+
   const { isLoggedIn, loggedInEthereumAddress } = useAccount();
   const { usdcBalance } = useBalances();
   const { isRegistered } = useRegistration();
   const { currentIntentHash, refetchIntentHash, shouldFetchIntentHash, lastOnRampTimestamp, refetchLastOnRampTimestamp } = useOnRamperIntents();
   const { refetchDeposits, getBestDepositForAmount, shouldFetchDeposits } = useLiquidity();
-  const { rampAddress, rampAbi } = useSmartContracts();
+  const { rampAddress, rampAbi, usdcAddress } = useSmartContracts();
   const { refetchDepositCounter, shouldFetchRampState, onRampCooldownPeriod } = useRampState();
 
   /*
@@ -68,6 +74,10 @@ const Swap: React.FC<SwapProps> = ({
 
   const [quoteState, setQuoteState] = useState(QuoteState.DEFAULT);
   const [currentQuote, setCurrentQuote] = useState<SwapQuote>({ requestedUSDC: '', fiatToSend: '' , depositId: ZERO });
+  const [loadCard, setLoadCard] = useState<boolean>(false);
+  const [cardQrCode, setCardQrCode] = useState<string>('');
+  const [cardAddress, setCardAddress] = useState<string>('');
+  const [cardBalance, setCardBalance] = useState<string>('');
 
   const [shouldConfigureSignalIntentWrite, setShouldConfigureSignalIntentWrite] = useState<boolean>(false);
 
@@ -123,6 +133,10 @@ const Swap: React.FC<SwapProps> = ({
     setCurrentQuote({ requestedUSDC: '', fiatToSend: '', depositId: ZERO });
   };
 
+  const handleLoadCard = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    setLoadCard(!loadCard);
+  }
+
   /*
    * Contract Writes
    */
@@ -137,7 +151,7 @@ const Swap: React.FC<SwapProps> = ({
     args: [
       currentQuote.depositId,
       toBigInt(currentQuote.requestedUSDC),
-      loggedInEthereumAddress
+      cardAddress != '' ? cardAddress : loggedInEthereumAddress
     ],
     onError: (error: { message: any }) => {
       console.error(error.message);
@@ -197,6 +211,51 @@ const Swap: React.FC<SwapProps> = ({
     }
   }, [shouldFetchRampState, refetchDepositCounter]);
 
+  useEffect(() => {
+    const getGateway = async () => {
+      let gate = new HaloGateway('wss://s1.halo-gateway.arx.org', {
+        createWebSocket: (url: string) => new websocket.w3cwebsocket(url)
+      });
+      let pairInfo;
+      try {
+        pairInfo = await gate.startPairing();
+      } catch (e) {
+        console.log(e);
+      }
+      return {gate, qrCode: pairInfo.qrCode};
+    }
+
+    const connectGateway = async (gate: HaloGateway) => {
+      console.log('Waiting for smartphone to connect...');
+      await gate.waitConnected();
+
+      return gate;
+    };
+
+    const getCardAddress = async (gate: HaloGateway) => {
+      let cmd = {
+        "name": "get_pkeys",
+      };
+
+      const rawKeys = await gate.execHaloCmd(cmd);
+      return rawKeys.etherAddresses['1'];
+    };
+
+    if (loadCard) {
+      getGateway().then((output) => {
+        console.log(output.qrCode);
+        setCardQrCode(output.qrCode);
+
+        connectGateway(output.gate).then((gate) => {
+          getCardAddress(gate).then((cardAddress) => {
+            setCardAddress(cardAddress);
+            setLoadCard(false);
+          });
+        });
+      });
+    }
+  }, [loadCard]);
+
   useEffect(() => {
     const fetchUsdAmountToSendAndVerifyOrder = async () => {
       const requestedUsdcAmount = currentQuote.requestedUSDC;
@@ -330,61 +389,107 @@ const Swap: React.FC<SwapProps> = ({
   return (
     <Wrapper>
       <SwapModalContainer>
-        <TitleContainer>
-          <ThemedText.HeadlineSmall>
-            Swap
-          </ThemedText.HeadlineSmall>
-        </TitleContainer>
-
-        <MainContentWrapper>
-          <Input
-            label="Requesting"
-            name={`requestedUSDC`}
-            value={currentQuote.requestedUSDC}
-            onChange={event => handleInputChange(event, 'requestedUSDC')}
-            type="number"
-            accessoryLabel={usdcBalanceLabel}
-            placeholder="0"
-          />
-          <Input
-            label="You send"
-            name={`fiatToSend`}
-            value={currentQuote.fiatToSend}
-            onChange={event => handleInputChange(event, 'fiatToSend')}
-            onKeyDown={handleEnterPress}
-            type="number"
-            inputLabel="$"
-            placeholder="0.00"
-            readOnly={true}
-          />
-          {!isLoggedIn ? (
-            <CustomConnectButton
-              fullWidth={true}
-            />
-          ) : (!isRegistered && currentQuote.requestedUSDC) ? (
-            <Button
-              onClick={navigateToRegistrationHandler}
-            >
-              Complete Registration
-            </Button>
-          ) : (
-            <CTAButton
-              disabled={quoteState !== 'success'}
-              loading={isSubmitIntentLoading || isSubmitIntentMining}
-              onClick={async () => {
-                try {
-                  await writeSubmitIntentAsync?.();
-                } catch (error) {
-                  console.log('writeSubmitIntentAsync failed: ', error);
-                }
-              }}
-            >
-              {getButtonText()}
-            </CTAButton>
-          )}
-        </MainContentWrapper>
+        {!loadCard ? (
+          <div>
+            <TitleContainer>
+              <ThemedText.HeadlineSmall>
+                Swap
+              </ThemedText.HeadlineSmall>
+            </TitleContainer>
+            <MainContentWrapper>
+              <Input
+                label="Requesting"
+                name={`requestedUSDC`}
+                value={currentQuote.requestedUSDC}
+                onChange={event => handleInputChange(event, 'requestedUSDC')}
+                type="number"
+                inputLabel="USDC"
+                accessoryLabel={usdcBalanceLabel}
+                placeholder="0"
+              />
+              <Input
+                label="You send"
+                name={`fiatToSend`}
+                value={currentQuote.fiatToSend}
+                onChange={event => handleInputChange(event, 'fiatToSend')}
+                onKeyDown={handleEnterPress}
+                type="number"
+                inputLabel="$"
+                placeholder="0.00"
+                accessoryLabel="via Venmo"
+                readOnly={true}
+              />
+              {!isLoggedIn ? (
+                <CustomConnectButton
+                  fullWidth={true}
+                />
+              ) : (!isRegistered && currentQuote.requestedUSDC) ? (
+                <Button
+                  onClick={navigateToRegistrationHandler}
+                >
+                  Complete Registration
+                </Button>
+              ) : (
+                <CTAButton
+                  disabled={quoteState !== 'success'}
+                  loading={isSubmitIntentLoading || isSubmitIntentMining}
+                  onClick={async () => {
+                    try {
+                      await writeSubmitIntentAsync?.();
+                    } catch (error) {
+                      console.log('writeSubmitIntentAsync failed: ', error);
+                    }
+                  }}
+                >
+                  {getButtonText()}
+                </CTAButton>
+              )}
+            </MainContentWrapper>
+          </div>
+        ) : (
+          <div>
+            <RowBetween>
+              <div style={{ flex: 0.25 }}>
+                <button
+                  onClick={handleLoadCard}
+                  style={{ background: 'none', border: 'none', cursor: 'pointer' }}
+                >
+                  <StyledArrowLeft/>
+                </button>
+              </div>
+              <ThemedText.HeadlineSmall style={{ flex: '1', margin: 'auto', textAlign: 'center' }}>
+                Load Arx Wallet
+              </ThemedText.HeadlineSmall>
+              <div style={{ flex: 0.25 }}></div>
+            </RowBetween>
+            <LoadCardContainer>
+              <p>Step 1: Scan QR code with your phone camera</p>
+              <img
+                id="qr"
+                src={cardQrCode}
+                alt="n/a"
+              />
+            </LoadCardContainer>
+          </div>
+        )
+        }
       </SwapModalContainer>
-
+      {(!loadCard && cardAddress == '') && (
+        <CTAButton
+          // loading={isSubmitIntentLoading || isSubmitIntentMining}
+          onClick={handleLoadCard}
+        >
+          Load Arx Wallet
+        </CTAButton>
+      )}
+      {cardAddress != '' && !currentIntentHash && (
+        <SwapModalContainer>
+          <ThemedText.HeadlineSmall style={{ flex: '1', margin: 'auto', textAlign: 'center', color: '#df2e2d' }}>
+            Loading Card Address
+          </ThemedText.HeadlineSmall>
+          <div style={{textAlign: 'center'}}>{cardAddress}</div>
+        </SwapModalContainer>
+      )}
       {
         currentIntentHash && (
           <>
@@ -399,6 +504,29 @@ const Swap: React.FC<SwapProps> = ({
   );
 };
 
+const StyledArrowLeft = styled(ArrowLeft)`
+  color: #FFF;
+`;
+
+const RowBetween = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1.5rem;
+`;
+
+const LoadCardContainer = styled.div`
+  padding: 1.5rem;
+  display: flex;
+  background-color: #0D111C;
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+`;
+
 const Wrapper = styled.div`
   width: 100%;
   max-width: 484px;