Merge pull request #1469 from oasisprotocol/lw/transak-layout

Restyle Transak: put warning and widget into its own Box
oasisprotocol · May 19, 2023 · 4c998cd · 4c998cd
2 parents b624d0a + 776f4ac
commit 4c998cd
Showing 1 changed file with 63 additions and 52 deletions.
diff --git a/src/app/pages/FiatOnramp/index.tsx b/src/app/pages/FiatOnramp/index.tsx
@@ -14,7 +14,7 @@ import { networkActions } from '../../state/network'
 import { CheckBox } from 'grommet/es6/components/CheckBox'
 import { useState } from 'react'
 
-function Layout(props: { children?: React.ReactNode }) {
+function HeaderLayout(props: { children?: React.ReactNode }) {
   const { t } = useTranslation()
   return (
     <Box
@@ -49,7 +49,7 @@ export function FiatOnramp() {
 
   if (selectedNetwork !== 'mainnet') {
     return (
-      <Layout>
+      <HeaderLayout>
         <AlertBox status="error" icon={<CircleAlert size="24px" color="currentColor" />}>
           {t('fiatOnramp.notMainnet', 'You can only use this feature when your are on the mainnet.')}
         </AlertBox>
@@ -59,71 +59,82 @@ export function FiatOnramp() {
           label={t('fiatOnramp.switchToMainnet', 'Switch to Mainnet')}
           primary
         />
-      </Layout>
+      </HeaderLayout>
     )
   }
   if (accountIsLoading) {
-    return <Layout />
+    return <HeaderLayout />
   }
   if (!walletAddress || !isAddressInWallet) {
     return (
-      <Layout>
+      <HeaderLayout>
         <AlertBox status="error" icon={<CircleAlert size="24px" color="currentColor" />}>
           {t('fiatOnramp.notYourAccount', 'You can only use this feature when your wallet is open.')}
         </AlertBox>
         <ButtonLink to="/" label={t('fiatOnramp.openYourWallet', 'Open your wallet')} primary />
-      </Layout>
+      </HeaderLayout>
     )
   }
 
   return (
-    <Layout>
-      <AlertBox status="error" icon={<CircleAlert size="24px" color="currentColor" />}>
-        {t(
-          'fiatOnramp.thirdPartyDisclaimer',
-          'This service is provided by an external party. Oasis does not carry any responsibility. All fees charged by Transak.',
-        )}
-      </AlertBox>
+    <Box gap="small">
+      <HeaderLayout></HeaderLayout>
+
+      <Box
+        round="5px"
+        border={{ color: 'background-front-border', size: '1px' }}
+        background="background-front"
+        pad="medium"
+        alignSelf="center"
+        width="601px" // Transak threshold for >mobile layout
+        style={{ boxSizing: 'content-box' }}
+      >
+        <AlertBox status="error" icon={<CircleAlert size="24px" color="currentColor" />}>
+          {t(
+            'fiatOnramp.thirdPartyDisclaimer',
+            'This service is provided by an external party. Oasis does not carry any responsibility. All fees charged by Transak.',
+          )}
+        </AlertBox>
 
-      {!thirdPartyAcknowledged ? (
-        <Box style={{ height: 825 }}>
-          <CheckBox
-            label={t(
-              'fiatOnramp.thirdPartyAcknowledge',
-              'I understand that I’m using a third-party solution and Oasis does not carry any responsibility over the usage of this solution.',
-            )}
-            checked={thirdPartyAcknowledged}
-            onChange={event => setThirdPartyAcknowledged(event.target.checked)}
-          />
-        </Box>
-      ) : (
-        <iframe
-          height="825"
-          title="Transak On/Off Ramp Widget"
-          allow="camera;microphone;fullscreen;payment"
-          // TODO: maybe restrict top-navigation with sandbox=""
-          src={`${process.env.REACT_APP_TRANSAK_URL}/?${new URLSearchParams({
-            // https://docs.transak.com/docs/query-parameters
-            apiKey: process.env.REACT_APP_TRANSAK_PARTNER_ID,
-            productsAvailed: 'BUY',
-            cryptoCurrencyCode: 'ROSE',
-            walletAddress: walletAddress,
-            disableWalletAddressForm: 'true',
-            isFeeCalculationHidden: 'false',
+        {!thirdPartyAcknowledged ? (
+          <Box margin={{ top: '20px', bottom: '400px' }}>
+            <CheckBox
+              label={t(
+                'fiatOnramp.thirdPartyAcknowledge',
+                'I understand that I’m using a third-party solution and Oasis does not carry any responsibility over the usage of this solution.',
+              )}
+              checked={thirdPartyAcknowledged}
+              onChange={event => setThirdPartyAcknowledged(event.target.checked)}
+            />
+          </Box>
+        ) : (
+          <iframe
+            height="825"
+            title="Transak On/Off Ramp Widget"
+            allow="camera;microphone;fullscreen;payment"
+            // TODO: maybe restrict top-navigation with sandbox=""
+            src={`${process.env.REACT_APP_TRANSAK_URL}/?${new URLSearchParams({
+              // https://docs.transak.com/docs/query-parameters
+              apiKey: process.env.REACT_APP_TRANSAK_PARTNER_ID,
+              productsAvailed: 'BUY',
+              cryptoCurrencyCode: 'ROSE',
+              walletAddress: walletAddress,
+              disableWalletAddressForm: 'true',
+              isFeeCalculationHidden: 'false',
 
-            exchangeScreenTitle: t('fiatOnramp.headerInWidget', 'Purchase ROSE to your wallet'),
-            themeColor: '#18213c',
-          }).toString()}`}
-          style={{
-            display: 'block',
-            width: '100%',
-            maxHeight: '825px',
-            maxWidth: '500px',
-            borderRadius: '3px',
-            border: 'none',
-          }}
-        ></iframe>
-      )}
-    </Layout>
+              exchangeScreenTitle: t('fiatOnramp.headerInWidget', 'Purchase ROSE to your wallet'),
+              themeColor: '#18213c',
+            }).toString()}`}
+            style={{
+              display: 'block',
+              width: '100%',
+              maxHeight: '825px',
+              borderRadius: '3px',
+              border: 'none',
+            }}
+          ></iframe>
+        )}
+      </Box>
+    </Box>
   )
 }