diff --git a/public/images/common/mercuryo_logo.svg b/public/images/common/mercuryo_logo.svg
deleted file mode 100644
index ebea5e79ec..0000000000
--- a/public/images/common/mercuryo_logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/public/images/common/moonpay_logo.svg b/public/images/common/moonpay_logo.svg
deleted file mode 100644
index 882e8185a9..0000000000
--- a/public/images/common/moonpay_logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/components/common/BuyCryptoButton/index.tsx b/src/components/common/BuyCryptoButton/index.tsx
index 4719d9b27c..1c2f77a4c2 100644
--- a/src/components/common/BuyCryptoButton/index.tsx
+++ b/src/components/common/BuyCryptoButton/index.tsx
@@ -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'
@@ -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 (
+
+
+
+ )
+ }
return (
- <>
- {rampLink && (
-
-
- Safe integrated app
-
- )}
-
-
-
-
-
+
+ Find an on-ramp provider that supports your region and on-ramp funds to your Safe Account address.
+
)
}
-const _BuyCryptoButton = ({ pagePath }: { pagePath: string }) => {
- const [open, setOpen] = useState(false)
- const { safeAddress } = useSafeInfo()
-
- const toggleDialog = () => {
- setOpen((prev) => !prev)
- }
+const _BuyCryptoButton = ({ href, pagePath }: { href?: LinkProps['href']; pagePath: string }) => {
+ if (!href) return null
return (
<>
-
-
- Choose one of the available options
-
-
-
-
-
-
- Make sure to use your correct account address when interacting with these apps:
-
-
-
-
-
-
-
)
}
const BuyCryptoButton = madProps(_BuyCryptoButton, {
+ href: useBuyCryptoHref,
pagePath: usePathname,
})
diff --git a/src/components/common/BuyCryptoButton/styles.module.css b/src/components/common/BuyCryptoButton/styles.module.css
index 8f8f43f99e..a2b9784f41 100644
--- a/src/components/common/BuyCryptoButton/styles.module.css
+++ b/src/components/common/BuyCryptoButton/styles.module.css
@@ -4,7 +4,6 @@
border-radius: 6px;
border: 1px solid var(--color-border-light);
width: 100%;
- margin-top: var(--space-2);
color: var(--color-text-primary);
}
@@ -12,16 +11,6 @@
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%;
diff --git a/src/components/dashboard/FirstSteps/index.tsx b/src/components/dashboard/FirstSteps/index.tsx
index 1263f5c6cc..4ceb947b7e 100644
--- a/src/components/dashboard/FirstSteps/index.tsx
+++ b/src/components/dashboard/FirstSteps/index.tsx
@@ -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'
@@ -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[]) => {
@@ -87,19 +86,37 @@ const AddFundsWidget = ({ completed }: { completed: boolean }) => {
hideChainIndicator
>
-
- Add funds directly from your bank account or copy your address to send tokens from a different account.
-
-
-
- Account address
-
-
-
-
+
+
+
+
+
+
+
+
+ Add funds directly from your bank account or copy your address to send tokens from a different
+ account.
+
+
+
+
+
+
+
+
+
+ or
+
- Buy crypto with fiat:
+ Buy crypto with fiat:
@@ -130,10 +147,10 @@ const FirstTransactionWidget = ({ completed }: { completed: boolean }) => {
)
}
-const AccountReadyWidget = ({ completed }: { completed: boolean }) => {
+const AccountReadyWidget = () => {
return (
-
-
+
+
@@ -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
@@ -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 (
@@ -204,13 +216,6 @@ const FirstSteps = () => {
Finish the next steps to start using all Safe Account features:
- {safe.deployed && (
-
-
-
-
-
- )}
@@ -222,7 +227,7 @@ const FirstSteps = () => {
-
+
diff --git a/src/components/dashboard/FirstSteps/styles.module.css b/src/components/dashboard/FirstSteps/styles.module.css
index 9ef4a86ab6..7db5ddf202 100644
--- a/src/components/dashboard/FirstSteps/styles.module.css
+++ b/src/components/dashboard/FirstSteps/styles.module.css
@@ -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;
+}
diff --git a/src/components/dashboard/FirstSteps/useDismissFirstSteps.ts b/src/components/dashboard/FirstSteps/useDismissFirstSteps.ts
deleted file mode 100644
index 8c72ba329e..0000000000
--- a/src/components/dashboard/FirstSteps/useDismissFirstSteps.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import useLocalStorage from '@/services/local-storage/useLocalStorage'
-
-const DISMISS_FIRST_STEPS_KEY = 'dismissFirstSteps'
-
-const useDismissFirstSteps = () => {
- const [dismissFirstSteps, setDismissFirstSteps] = useLocalStorage(DISMISS_FIRST_STEPS_KEY)
-
- return { dismissFirstSteps, setDismissFirstSteps }
-}
-
-export default useDismissFirstSteps
diff --git a/src/config/constants.ts b/src/config/constants.ts
index 7960d467c9..7742697469 100644
--- a/src/config/constants.ts
+++ b/src/config/constants.ts
@@ -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'