add mobile support (#361)

* add mobile support * address feedback * fix issue with dropdown * nit * address feedback * try to remove upload email * rm icon from current order * rm icon from orders * use column on mobile devices for intent rows * fix color in bg * row to col * center * revert * center pt2 * Revert "try to remove upload email" This reverts commit 7f1b355. * rm email upload on mobile * fix padding * Increase font size on liquidity page --------- Co-authored-by: 0xSachinK <0xsachink@gmail.com>
zkp2p · May 9, 2024 · da6c6af · da6c6af
1 parent 73ce493
commit da6c6af
Show file tree

Hide file tree

Showing 37 changed files with 29,438 additions and 21,440 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -18,7 +18,6 @@ import { Privacy } from "./pages/Privacy";
 import { Tos } from "./pages/Tos";
 import Modals from "./pages/Modals";
 import { TopNav } from "@components/layouts/TopNav";
-import { MobileLandingPage } from "@components/MobileLandingPage";
 import { EnvironmentBanner } from '@components/layouts/EnvironmentBanner';
 
 // Common Contexts
@@ -69,64 +68,34 @@ import RevolutRegistrationProvider from './contexts/revolut/Registration/Registr
 
 import "./App.css";
 import "./styles.css";
-import useMediaQuery from '@hooks/useMediaQuery';
-
 
 const App = () => {
-  const currentDeviceSize = useMediaQuery();
-
-  if (currentDeviceSize === 'mobile') {
-    return (
-      <Router>
-        <Providers>
-          <div className="app-container">
-            <TopNav withoutLinks />
-            <div className="app-content">
-              <Routes>
-                <Route path="/" element={<Landing />} />
-                <Route path="/swap" element={<MobileLandingPage />} />
-                <Route path="/liquidity" element={<MobileLandingPage />} />
-                <Route path="/deposits" element={<MobileLandingPage />} />
-                <Route path="/register" element={<MobileLandingPage />} />
-                <Route path="/permissions" element={<MobileLandingPage />} />
-                <Route path="/withdraw" element={<MobileLandingPage />} />
-                <Route path="/send" element={<MobileLandingPage />} />
-                <Route path="/pp" element={<Privacy />} />
-                <Route path="/tos" element={<Tos />} />
-              </Routes>
-            </div>
-          </div>
-        </Providers>
-      </Router>
-    )
-  } else {
-    return (
-      <Router>
-        <Providers>
-          <div className="app-container">
-            <EnvironmentBanner />
-            <TopNav />
-            <Modals />
-            <div className="app-content">
-              <Routes>
-                <Route path="/" element={<Landing />} />
-                <Route path="/swap" element={<Swap />} />
-                <Route path="/liquidity" element={<Liquidity />} />
-                <Route path="/deposits" element={<Deposit />} />
-                <Route path="/register" element={<Registration />} />
-                <Route path="/permissions" element={<Permissions />} />
-                <Route path="/withdraw" element={<Withdraw />} />
-                <Route path="/send" element={<Send />} />
-                <Route path="/pp" element={<Privacy />} />
-                <Route path="/tos" element={<Tos />} />
-                <Route element={<>Not found</>} />
-              </Routes>
-            </div>
+  return (
+    <Router>
+      <Providers>
+        <div className="app-container">
+          <EnvironmentBanner />
+          <TopNav />
+          <Modals />
+          <div className="app-content">
+            <Routes>
+              <Route path="/" element={<Landing />} />
+              <Route path="/swap" element={<Swap />} />
+              <Route path="/liquidity" element={<Liquidity />} />
+              <Route path="/deposits" element={<Deposit />} />
+              <Route path="/register" element={<Registration />} />
+              <Route path="/permissions" element={<Permissions />} />
+              <Route path="/withdraw" element={<Withdraw />} />
+              <Route path="/send" element={<Send />} />
+              <Route path="/pp" element={<Privacy />} />
+              <Route path="/tos" element={<Tos />} />
+              <Route element={<>Not found</>} />
+            </Routes>
           </div>
-        </Providers>
-      </Router>
-    );
-  }
+        </div>
+      </Providers>
+    </Router>
+  );
 };
 
 type ProvidersType = [React.ElementType, Record<string, unknown>];

diff --git a/client/src/components/Account/AccountDropdown.tsx b/client/src/components/Account/AccountDropdown.tsx
@@ -228,14 +228,16 @@ const Wrapper = styled.div`
 
 const NavDropdown = styled.div`
   display: flex;
-  min-width: 300px;
   flex-direction: column;
   border-radius: 12px;
   border: 1px solid rgba(255, 255, 255, 0.2);
   background: #1B1B1B;
   position: absolute;
   top: calc(100% + 20px);
   right: 0;
+  @media (max-width: 600px) {
+      right: calc(100% - 45px);
+  }
   z-index: 20;
   color: #FFFFFF;
 `;

diff --git a/client/src/components/Account/AccountLogin.tsx b/client/src/components/Account/AccountLogin.tsx
@@ -132,7 +132,8 @@ const ModalAndOverlayContainer = styled.div`
 `;
 
 const ModalContainer = styled.div`
-  width: 320px;
+  width: 80vw;
+  max-width: 320px;
   display: flex;
   flex-direction: column;
   border-radius: 16px;

diff --git a/client/src/components/Account/ReceiveModal.tsx b/client/src/components/Account/ReceiveModal.tsx
@@ -140,7 +140,8 @@ const ModalAndOverlayContainer = styled.div`
 `;
 
 const ModalContainer = styled.div`
-  width: 440px;
+  width: 80vw;
+  max-width: 440px;
   display: flex;
   flex-direction: column;
   border-radius: 16px;

diff --git a/client/src/components/Deposit/DepositRow.tsx b/client/src/components/Deposit/DepositRow.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import { SVGIconThemed } from '@components/SVGIcon/SVGIconThemed';
 import { AccessoryButton } from '@components/common/AccessoryButton';
+import useMediaQuery from "@hooks/useMediaQuery";
 
 
 interface PositionRowProps {
@@ -31,52 +32,67 @@ export const PositionRow: React.FC<PositionRowProps> = ({
   const depositRemainingLabel = `${availableDepositAmount} USDC`;
   const intentAmountLabel = `${intentCount} (${outstandingIntentAmount} USDC)`;
   const originalAmountLabel = `${totalDepositAmount} USDC`
+  const isMobile = useMediaQuery() === 'mobile'
 
   return (
     <Container>
-      <PositionDetailsContainer>
-        <SummaryLabelsAndIconContainer>
-          <SVGIconThemed icon={'usdc'} width={'24'} height={'24'}/>
-          <SummaryLabelsContainer>
-            <SummaryLabel>
-              <SummaryLabelTitle>Available USDC:&nbsp;</SummaryLabelTitle>
-              <SummaryLabelValue>{depositRemainingLabel}</SummaryLabelValue>
-            </SummaryLabel>
-
-            <SummaryLabel>
-              <SummaryLabelTitle>Outstanding Orders:&nbsp;</SummaryLabelTitle>
-              <SummaryLabelValue>{intentAmountLabel}</SummaryLabelValue>
-            </SummaryLabel>
-
-            <PercentageLabel>
-              <Label>Conversion Rate:</Label>
-              <Value>{conversionRate}</Value>
-            </PercentageLabel>
-
-            <SummaryLabel>
-              <SummaryLabelTitle>Deposit Amount:&nbsp;</SummaryLabelTitle>
-              <SummaryLabelValue>{originalAmountLabel}</SummaryLabelValue>
-            </SummaryLabel>
-          </SummaryLabelsContainer>
-        </SummaryLabelsAndIconContainer>
-      </PositionDetailsContainer>
-
-      <ActionsContainer>
-        <AccessoryButton
-          onClick={handleWithdrawClick}
-          height={36}
-          loading={isCancelDepositLoading}
-          title={'Withdraw'}
-          icon={'logout'}/>
-      </ActionsContainer>
+      <IntentDetailsContainer isMobile={isMobile}>
+        <PositionDetailsContainer>
+          <SummaryLabelsAndIconContainer>
+            {
+              !isMobile &&
+                <SVGIconThemed icon={'usdc'} width={'24'} height={'24'}/>
+            }
+            <SummaryLabelsContainer>
+              <SummaryLabel>
+                <SummaryLabelTitle>Available USDC:&nbsp;</SummaryLabelTitle>
+                <SummaryLabelValue>{depositRemainingLabel}</SummaryLabelValue>
+              </SummaryLabel>
+
+              <SummaryLabel>
+                <SummaryLabelTitle>Outstanding Orders:&nbsp;</SummaryLabelTitle>
+                <SummaryLabelValue>{intentAmountLabel}</SummaryLabelValue>
+              </SummaryLabel>
+
+              <PercentageLabel>
+                <Label>Conversion Rate:</Label>
+                <Value>{conversionRate}</Value>
+              </PercentageLabel>
+
+              <SummaryLabel>
+                <SummaryLabelTitle>Deposit Amount:&nbsp;</SummaryLabelTitle>
+                <SummaryLabelValue>{originalAmountLabel}</SummaryLabelValue>
+              </SummaryLabel>
+            </SummaryLabelsContainer>
+          </SummaryLabelsAndIconContainer>
+        </PositionDetailsContainer>
+
+        <ActionsContainer>
+          <AccessoryButton
+            onClick={handleWithdrawClick}
+            height={36}
+            loading={isCancelDepositLoading}
+            title={'Withdraw'}
+            icon={'logout'}/>
+        </ActionsContainer>
+      </IntentDetailsContainer>
     </Container>
   );
 };
 
 const Container = styled.div`
+    display: flex;
+    flex-direction: row;
+`;
+
+const IntentDetailsContainer = styled.div<{isMobile?: boolean}>`
+  width: 100%; 
   display: flex;
-  flex-direction: row;
-  height: 100%;
+  flex-direction: ${({ isMobile }) => isMobile ? 'column' : 'row'};
+  align-items: center;
+  padding: 1.25rem 1.5rem;
+  gap: 1.25rem;
+  line-height: 24px;
 `;
 
 const PositionDetailsContainer = styled.div`
@@ -91,7 +107,6 @@ const ActionsContainer = styled.div`
   flex-direction: row;
   align-items: center;
   justify-content: flex-end;
-  padding-right 1.5rem;
   flex-grow: 1;
 `;
 

diff --git a/client/src/components/Deposit/OffRamperIntentRow.tsx b/client/src/components/Deposit/OffRamperIntentRow.tsx
@@ -9,6 +9,7 @@ import { SVGIconThemed } from '@components/SVGIcon/SVGIconThemed';
 import { alchemyMainnetEthersProvider } from "index";
 import { AccessoryButton } from '@components/common/AccessoryButton';
 import { PaymentPlatformType } from "@helpers/types";
+import useMediaQuery from "@hooks/useMediaQuery";
 
 
 interface IntentRowProps {
@@ -37,6 +38,7 @@ export const IntentRow: React.FC<IntentRowProps> = ({
    */
 
   const { blockscanUrl } = useSmartContracts();
+  const isMobile = useMediaQuery() == 'mobile'
 
   const {
     PaymentPlatform,
@@ -97,8 +99,10 @@ export const IntentRow: React.FC<IntentRowProps> = ({
 
   return (
     <Container>
-      <IntentDetailsContainer>
-        <SVGIconThemed icon={'usdc'} width={'24'} height={'24'}/>
+      <IntentDetailsContainer isMobile={isMobile}>
+        {
+          !isMobile && <SVGIconThemed icon={'usdc'} width={'24'} height={'24'}/>
+        }
         <AmountLabelsContainer>
           <AmountContainer>
             <Label>Requesting:&nbsp;</Label>
@@ -144,10 +148,10 @@ const Container = styled.div`
   flex-direction: row;
 `;
 
-const IntentDetailsContainer = styled.div`
+const IntentDetailsContainer = styled.div<{isMobile?: boolean}>`
   width: 100%; 
   display: flex;
-  flex-direction: row;
+  flex-direction: ${({ isMobile }) => isMobile ? 'column' : 'row'};
   align-items: center;
   padding: 1.25rem 1.5rem;
   gap: 1.25rem;

diff --git a/client/src/components/Deposit/garanti/NewPosition.tsx b/client/src/components/Deposit/garanti/NewPosition.tsx
@@ -522,7 +522,6 @@ const Body = styled.div`
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  background-color: ${colors.container};
 `;
 
 const InputsContainer = styled.div`

diff --git a/client/src/components/Deposit/hdfc/NewPosition.tsx b/client/src/components/Deposit/hdfc/NewPosition.tsx
@@ -508,7 +508,6 @@ const Body = styled.div`
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  background-color: ${colors.container};
 `;
 
 const InputsContainer = styled.div`

diff --git a/client/src/components/Deposit/revolut/NewPosition.tsx b/client/src/components/Deposit/revolut/NewPosition.tsx
@@ -546,7 +546,6 @@ const Body = styled.div`
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  background-color: ${colors.container};
 `;
 
 const InputsContainer = styled.div`

diff --git a/client/src/components/Deposit/venmo/NewPosition.tsx b/client/src/components/Deposit/venmo/NewPosition.tsx
@@ -512,7 +512,6 @@ const Body = styled.div`
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  background-color: ${colors.container};
 `;
 
 const InputsContainer = styled.div`

diff --git a/client/src/components/Liquidity/DepositsRow.tsx b/client/src/components/Liquidity/DepositsRow.tsx
@@ -7,6 +7,7 @@ import { SVGIconThemed } from '@components/SVGIcon/SVGIconThemed';
 import useSmartContracts from "@hooks/useSmartContracts";
 import { alchemyMainnetEthersProvider } from "index";
 import { PaymentPlatformType, paymentPlatformInfo } from "@helpers/types";
+import useMediaQuery from "@hooks/useMediaQuery";
 
 
 interface DepositsRowProps {
@@ -40,6 +41,8 @@ export const DepositsRow: React.FC<DepositsRowProps> = ({
 
   const depositRemainingLabel = `${availableDepositAmount}`;
   const depositorEtherscanLink = `${blockscanUrl}/address/${depositorAddress}`;
+  const isMobile = useMediaQuery() === 'mobile'
+  const svgSize = isMobile ? '20' : '28'
 
   /*
    * Component
@@ -51,10 +54,14 @@ export const DepositsRow: React.FC<DepositsRowProps> = ({
         {rowIndex + 1}
       </div>
 
-      <IconAndTokenNameContainer>
-        <SVGIconThemed icon={'usdc'} width={'28'} height={'28'} />
-        USD Coin
-      </IconAndTokenNameContainer>
+
+          <IconAndTokenNameContainer>
+            { !isMobile &&
+              <SVGIconThemed icon={'usdc'} width={svgSize} height={svgSize} />
+            }
+            USD Coin
+          </IconAndTokenNameContainer>
+
 
       <TitleAndValueContainer>
         <Value>{paymentPlatformInfo[paymentPlatform].platformName}</Value>
@@ -102,6 +109,9 @@ const IconAndTokenNameContainer = styled.div`
   align-items: center;
   gap: 12px;
   color: #FFFFFF;
+  @media (max-width: 600px) {
+    font-size: 13px;
+};
 `;
 
 const TitleAndValueContainer = styled.label`
@@ -118,6 +128,9 @@ const PercentageLabel = styled.div`
 const Value = styled.span`
   color: #FFFFFF;
   font-size: 15px;
+  @media (max-width: 600px) {
+      font-size: 13px;
+  };
 `;
 
 const ENSNameWrapper = styled.div`