refactor: improve buy screen UX

leather-io · Apr 21, 2022 · 9a9771e · 9a9771e
1 parent 4d39e0d
commit 9a9771e
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 15 deletions.
diff --git a/config/wallet-config.json b/config/wallet-config.json
@@ -4,8 +4,8 @@
   },
   "activeFiatProviders": {
     "moonpay": { "name": "moonpay", "enabled": true },
-    "okcoin": { "name": "okcoin", "enabled": true },
-    "transak": { "name": "transak", "enabled": true }
+    "transak": { "name": "transak", "enabled": true },
+    "okcoin": { "name": "okcoin", "enabled": true }
   },
   "feeEstimations": {
     "maxValues": [500000, 750000, 2000000],

diff --git a/src/app/pages/buy/buy.layout.tsx b/src/app/pages/buy/buy.layout.tsx
@@ -6,19 +6,26 @@ import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 import { Text } from '@app/components/typography';
 import { Link } from '@app/components/link';
 import { PageTitle } from '@app/components/page-title';
-import AddFunds from '@assets/images/add-funds.png';
 import { CenteredPageContainer } from '@app/components/centered-page-container';
+import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
 import { CENTERED_FULL_PAGE_MAX_WIDTH } from '@app/components/global-styles/full-page-styles';
+import AddFunds from '@assets/images/add-funds.png';
 
 interface BuyLayoutProps {
   onCloseAction: () => void;
   onrampProviders: JSX.Element;
 }
 export const BuyLayout = (props: BuyLayoutProps) => {
   const { onCloseAction, onrampProviders } = props;
+  const analytics = useAnalytics();
 
   useRouteHeader(<Header hideActions title=" " onClose={onCloseAction} />);
 
+  const goToLearnMore = () => {
+    void analytics.track('select_buy_learn_more');
+    openInNewTab('https://hiro.so/questions/wallet-stx-purchases');
+  };
+
   return (
     <CenteredPageContainer>
       <Stack
@@ -27,19 +34,15 @@ export const BuyLayout = (props: BuyLayoutProps) => {
         px={['loose', 'unset']}
         spacing="base"
       >
-        <Box width={['100px', '115px']}>
+        <Box display={['none', 'block']} width={['100px', '115px']}>
           <img src={AddFunds} />
         </Box>
-        <PageTitle mt={['unset', 'base']}>Fund your account</PageTitle>
+        <PageTitle mt={['unset', 'base']}>Buy STX quickly</PageTitle>
         <Text>
-          Fund your account with STX, the native currency of Stacks. You can use your STX to trade,
-          bid in auctions, earn Bitcoin, and much more. Buy some STX on an exchange to get started.
+          Easily purchase Stacks (STX) with your credit card or other method for direct deposit into
+          your Hiro Wallet account.
         </Text>
-        <Link
-          color={color('accent')}
-          fontSize="16px"
-          onClick={() => openInNewTab('https://hiro.so/questions/wallet-stx-purchases')}
-        >
+        <Link color={color('accent')} fontSize="16px" onClick={() => goToLearnMore()}>
           Learn more ↗
         </Link>
         {onrampProviders}

diff --git a/src/app/pages/buy/components/onramp-provider-layout.tsx b/src/app/pages/buy/components/onramp-provider-layout.tsx
@@ -9,19 +9,19 @@ import { BuyTokensSelectors } from '@tests/page-objects/buy-tokens-selectors';
 const providersInfo = {
   moonpay: {
     title: 'MoonPay',
-    body: 'Purchase STX with credit card, debit card, bank transfer, Apple or Google pay.',
+    body: 'Available for residents worldwide',
     cta: 'Buy on MoonPay',
     test_id: 'BtnMoonPay',
   },
   okcoin: {
     title: 'Okcoin',
-    body: 'Purchase STX with credit card, debit card, or bank transfer (except US residents).',
+    body: 'Available for non-US residents',
     cta: 'Buy on Okcoin',
     test_id: 'BtnOkCoin',
   },
   transak: {
     title: 'Transak',
-    body: 'Purchase STX with credit card, debit card, or bank transfer.',
+    body: 'Available for residents worldwide',
     cta: 'Buy on Transak',
     test_id: 'BtnTransak',
   },