Skip to content

Commit

Permalink
fix: Remove on-ramp provider options and use a generic text instead
Browse files Browse the repository at this point in the history
  • Loading branch information
@usame-algan
usame-algan committed Feb 14, 2024
1 parent bca511c commit 97619ce
Show file tree
Hide file tree
Showing 8 changed files with 77 additions and 135 deletions.
1 change: 0 additions & 1 deletion public/images/common/mercuryo_logo.svg
View file

This file was deleted.

1 change: 0 additions & 1 deletion public/images/common/moonpay_logo.svg
View file

This file was deleted.

109 changes: 33 additions & 76 deletions src/components/common/BuyCryptoButton/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,15 @@
import EthHashInfo from '@/components/common/EthHashInfo'
import ModalDialog from '@/components/common/ModalDialog'
import useSafeInfo from '@/hooks/useSafeInfo'
import { usePathname, useSearchParams } from 'next/navigation'
import Link, { type LinkProps } from 'next/link'
import { Box, Button, ButtonBase, Divider, Typography } from '@mui/material'
import { Alert, Box, Button, ButtonBase, Typography } from '@mui/material'
import AddIcon from '@mui/icons-material/Add'
import { MERCURYO_URL, MOONPAY_URL, SafeAppsTag } from '@/config/constants'
import { SafeAppsTag } from '@/config/constants'
import { AppRoutes } from '@/config/routes'
import { useRemoteSafeApps } from '@/hooks/safe-apps/useRemoteSafeApps'
import madProps from '@/utils/mad-props'
import { type ReactNode, useMemo, useState } from 'react'
import { type ReactNode, useMemo } from 'react'
import Track from '../Track'
import { OVERVIEW_EVENTS } from '@/services/analytics'
import RampLogo from '@/public/images/common/ramp_logo.svg'
import MercuryoLogo from '@/public/images/common/mercuryo_logo.svg'
import MoonPayLogo from '@/public/images/common/moonpay_logo.svg'
import css from './styles.module.css'
import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded'

Expand Down Expand Up @@ -51,89 +46,51 @@ const BuyCryptoOption = ({ name, children }: { name: string; children: ReactNode
}

const _BuyCryptoOptions = ({ rampLink }: { rampLink?: LinkProps['href'] }) => {
const { safeAddress } = useSafeInfo()

const moonPayLink = `${MOONPAY_URL}?defaultCurrencyCode=eth&walletAddress=${safeAddress}`
const mercuryoLink = MERCURYO_URL
if (rampLink) {
return (
<Box position="relative">
<Track {...OVERVIEW_EVENTS.SELECT_ONRAMP_APP} label="Ramp">
<Link href={rampLink} passHref>
<BuyCryptoOption name="Ramp">
<RampLogo />
</BuyCryptoOption>
</Link>
</Track>
</Box>
)
}

return (
<>
{rampLink && (
<Box position="relative">
<Track {...OVERVIEW_EVENTS.SELECT_ONRAMP_APP} label="Ramp">
<Link href={rampLink} passHref>
<BuyCryptoOption name="Ramp">
<RampLogo />
</BuyCryptoOption>
</Link>
</Track>
<div className={css.badge}>Safe integrated app</div>
</Box>
)}

<Track {...OVERVIEW_EVENTS.SELECT_ONRAMP_APP} label="MoonPay">
<Link href={moonPayLink} passHref target="_blank">
<BuyCryptoOption name="MoonPay">
<MoonPayLogo />
</BuyCryptoOption>
</Link>
</Track>

<Track {...OVERVIEW_EVENTS.SELECT_ONRAMP_APP} label="Mercuryo">
<Link href={mercuryoLink} passHref target="_blank">
<BuyCryptoOption name="Mercuryo">
<MercuryoLogo />
</BuyCryptoOption>
</Link>
</Track>
</>
<Alert severity="info">
Find an on-ramp provider that supports your region and on-ramp funds to your Safe Account address.
</Alert>
)
}

const _BuyCryptoButton = ({ pagePath }: { pagePath: string }) => {
const [open, setOpen] = useState<boolean>(false)
const { safeAddress } = useSafeInfo()

const toggleDialog = () => {
setOpen((prev) => !prev)
}
const _BuyCryptoButton = ({ href, pagePath }: { href?: LinkProps['href']; pagePath: string }) => {
if (!href) return null

return (
<>
<Track {...OVERVIEW_EVENTS.BUY_CRYPTO_BUTTON} label={pagePath}>
<Button
variant="contained"
size="small"
sx={buttonStyles}
startIcon={<AddIcon />}
onClick={toggleDialog}
className={css.buyCryptoButton}
>
Buy crypto
</Button>
<Link href={href} passHref>
<Button
variant="contained"
size="small"
sx={buttonStyles}
startIcon={<AddIcon />}
className={css.buyCryptoButton}
>
Buy crypto
</Button>
</Link>
</Track>
<ModalDialog open={open} onClose={toggleDialog} dialogTitle="Buy crypto with fiat" hideChainIndicator>
<Box px={4} pb={5} pt={4}>
<Typography>Choose one of the available options</Typography>

<BuyCryptoOptions />

<Divider sx={{ my: 4 }} />

<Typography mb={2}>
Make sure to use your correct account address when interacting with these apps:
</Typography>

<Box bgcolor="background.main" p={2} borderRadius="6px" alignSelf="flex-start">
<EthHashInfo address={safeAddress} shortAddress={false} showCopyButton hasExplorer avatarSize={24} />
</Box>
</Box>
</ModalDialog>
</>
)
}

const BuyCryptoButton = madProps(_BuyCryptoButton, {
href: useBuyCryptoHref,
pagePath: usePathname,
})

Expand Down
11 changes: 0 additions & 11 deletions src/components/common/BuyCryptoButton/styles.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,13 @@
border-radius: 6px;
border: 1px solid var(--color-border-light);
width: 100%;
margin-top: var(--space-2);
color: var(--color-text-primary);
}

.button:hover {
border-color: var(--color-primary-main);
}

.badge {
background-color: var(--color-secondary-light);
color: var(--color-static-main);
display: inline-block;
margin-left: var(--space-2);
margin-top: -1px;
padding: 4px var(--space-1);
border-radius: 0 0 4px 4px;
}

@media (max-width: 400px) {
.buyCryptoButton {
width: 100%;
Expand Down
67 changes: 36 additions & 31 deletions src/components/dashboard/FirstSteps/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { BuyCryptoOptions } from '@/components/common/BuyCryptoButton'
import EthHashInfo from '@/components/common/EthHashInfo'
import ModalDialog from '@/components/common/ModalDialog'
import useDismissFirstSteps from '@/components/dashboard/FirstSteps/useDismissFirstSteps'
import QRCode from '@/components/common/QRCode'
import { TxModalContext } from '@/components/tx-flow'
import { NewTxFlow } from '@/components/tx-flow/flows'
import useBalances from '@/hooks/useBalances'
Expand All @@ -12,11 +12,10 @@ import { selectOutgoingTransactions } from '@/store/txHistorySlice'
import classnames from 'classnames'
import { type ReactNode, useContext, useState } from 'react'
import { Card, WidgetBody, WidgetContainer } from '@/components/dashboard/styled'
import { Box, Button, CircularProgress, Grid, IconButton, Typography } from '@mui/material'
import { Box, Button, CircularProgress, Divider, Grid, Typography } from '@mui/material'
import CircleOutlinedIcon from '@mui/icons-material/CircleOutlined'
import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded'
import CheckCircleOutlineRoundedIcon from '@mui/icons-material/CheckCircleOutlineRounded'
import CloseRoundedIcon from '@mui/icons-material/CloseRounded'
import css from './styles.module.css'

const calculateProgress = (items: boolean[]) => {
Expand Down Expand Up @@ -87,19 +86,37 @@ const AddFundsWidget = ({ completed }: { completed: boolean }) => {
hideChainIndicator
>
<Box px={4} pb={5} pt={4}>
<Typography mb={2}>
Add funds directly from your bank account or copy your address to send tokens from a different account.
</Typography>

<Typography variant="body2" color="text.secondary">
Account address
</Typography>

<Box bgcolor="background.main" p={2} borderRadius="6px" alignSelf="flex-start" mb={4} fontSize="14px">
<EthHashInfo address={safeAddress} shortAddress={false} showCopyButton hasExplorer avatarSize={24} />
<Grid container spacing={2} alignItems="center" mb={4}>
<Grid item>
<Box p={1} border={1} borderRadius="6px" borderColor="border.light" display="inline-flex">
<QRCode value={safeAddress} size={132} />
</Box>
</Grid>
<Grid item xs>
<Typography mb={2}>
Add funds directly from your bank account or copy your address to send tokens from a different
account.
</Typography>

<Box bgcolor="background.main" p={2} borderRadius="6px" alignSelf="flex-start" fontSize="14px">
<EthHashInfo
address={safeAddress}
showName={false}
shortAddress={true}
showCopyButton
hasExplorer
avatarSize={24}
/>
</Box>
</Grid>
</Grid>

<Box mb={4} position="relative" textAlign="center">
<Typography className={css.orDivider}>or</Typography>
<Divider />
</Box>

<Typography>Buy crypto with fiat:</Typography>
<Typography mb={2}>Buy crypto with fiat:</Typography>
<BuyCryptoOptions />
</Box>
</ModalDialog>
Expand Down Expand Up @@ -130,10 +147,10 @@ const FirstTransactionWidget = ({ completed }: { completed: boolean }) => {
)
}

const AccountReadyWidget = ({ completed }: { completed: boolean }) => {
const AccountReadyWidget = () => {
return (
<Card className={classnames(css.card, css.accountReady, { [css.completed]: completed })}>
<div className={classnames(css.checkIcon, { [css.completed]: completed })}>
<Card className={classnames(css.card, css.accountReady)}>
<div className={classnames(css.checkIcon)}>
<CheckCircleOutlineRoundedIcon sx={{ width: '60px', height: '60px' }} />
</div>
<Typography variant="h4" fontWeight="bold" mb={2} mt={2}>
Expand All @@ -148,7 +165,6 @@ const FirstSteps = () => {
const { balances } = useBalances()
const { safe } = useSafeInfo()
const outgoingTransactions = useAppSelector(selectOutgoingTransactions)
const { dismissFirstSteps, setDismissFirstSteps } = useDismissFirstSteps()

const hasNonZeroBalance = balances && (balances.items.length > 1 || BigInt(balances.items[0]?.balance || 0) > 0)
const hasOutgoingTransactions = !!outgoingTransactions && outgoingTransactions.length > 0
Expand All @@ -157,11 +173,7 @@ const FirstSteps = () => {
const progress = calculateProgress(completedItems)
const stepsCompleted = completedItems.filter((item) => item).length

const dismissWidget = () => {
setDismissFirstSteps(true)
}

if (dismissFirstSteps) return null
if (safe.deployed) return null

return (
<WidgetContainer>
Expand Down Expand Up @@ -204,13 +216,6 @@ const FirstSteps = () => {
Finish the next steps to start using all Safe Account features:
</Typography>
</Grid>
{safe.deployed && (
<Grid item marginLeft="auto">
<IconButton size="large" onClick={dismissWidget}>
<CloseRoundedIcon />
</IconButton>
</Grid>
)}
</Grid>
<Grid container spacing={3}>
<Grid item xs={12} md={4}>
Expand All @@ -222,7 +227,7 @@ const FirstSteps = () => {
</Grid>

<Grid item xs={12} md={4}>
<AccountReadyWidget completed={safe.deployed} />
<AccountReadyWidget />
</Grid>
</Grid>
</WidgetBody>
Expand Down
8 changes: 8 additions & 0 deletions src/components/dashboard/FirstSteps/styles.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,3 +58,11 @@
.checkIcon.completed {
color: var(--color-success-main);
}

.orDivider {
display: inline-block;
padding: 0 var(--space-3);
background: var(--color-background-paper);
bottom: -11px;
position: relative;
}
11 changes: 0 additions & 11 deletions src/components/dashboard/FirstSteps/useDismissFirstSteps.ts
View file

This file was deleted.

4 changes: 0 additions & 4 deletions src/config/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,3 @@ export const IS_OFFICIAL_HOST = process.env.NEXT_PUBLIC_IS_OFFICIAL_HOST === 'tr
export const REDEFINE_SIMULATION_URL = 'https://dashboard.redefine.net/reports/'
export const REDEFINE_API = process.env.NEXT_PUBLIC_REDEFINE_API
export const REDEFINE_ARTICLE = 'https://safe.mirror.xyz/rInLWZwD_sf7enjoFerj6FIzCYmVMGrrV8Nhg4THdwI'

// On-ramp providers
export const MOONPAY_URL = 'https://buy.moonpay.com'
export const MERCURYO_URL = 'https://exchange.mercuryo.io'

0 comments on commit 97619ce

Please sign in to comment.