diff --git a/public/images/common/mercuryo_logo.svg b/public/images/common/mercuryo_logo.svg
index 9e84e741df..ebea5e79ec 100644
--- a/public/images/common/mercuryo_logo.svg
+++ b/public/images/common/mercuryo_logo.svg
@@ -1,3 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/public/images/common/moonpay_logo.svg b/public/images/common/moonpay_logo.svg
index 36fb5426d6..882e8185a9 100644
--- a/public/images/common/moonpay_logo.svg
+++ b/public/images/common/moonpay_logo.svg
@@ -1,3 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/public/images/common/ramp_logo.svg b/public/images/common/ramp_logo.svg
index 95e0aff35a..63d9d73893 100644
--- a/public/images/common/ramp_logo.svg
+++ b/public/images/common/ramp_logo.svg
@@ -1,9 +1 @@
-
+
\ No newline at end of file
diff --git a/src/components/common/BuyCryptoButton/index.tsx b/src/components/common/BuyCryptoButton/index.tsx
index dfd037e564..2f23384ea9 100644
--- a/src/components/common/BuyCryptoButton/index.tsx
+++ b/src/components/common/BuyCryptoButton/index.tsx
@@ -9,7 +9,7 @@ import { MERCURYO_URL, MOONPAY_URL, SafeAppsTag } from '@/config/constants'
import { AppRoutes } from '@/config/routes'
import { useRemoteSafeApps } from '@/hooks/safe-apps/useRemoteSafeApps'
import madProps from '@/utils/mad-props'
-import { useMemo, useState } from 'react'
+import { ReactNode, useMemo, useState } from 'react'
import Track from '../Track'
import { OVERVIEW_EVENTS } from '@/services/analytics'
import RampLogo from '@/public/images/common/ramp_logo.svg'
@@ -38,6 +38,18 @@ const buttonStyles = {
minHeight: '40px',
}
+const BuyCryptoOption = ({ name, children }: { name: string; children: ReactNode }) => {
+ return (
+
+
+ {children}
+ {name}
+
+
+
+ )
+}
+
const _BuyCryptoButton = ({ href, pagePath }: { href?: LinkProps['href']; pagePath: string }) => {
const [open, setOpen] = useState(false)
const { safeAddress } = useSafeInfo()
@@ -57,54 +69,47 @@ const _BuyCryptoButton = ({ href, pagePath }: { href?: LinkProps['href']; pagePa
-
-
- {href && (
-
-
-
Safe integrated app
-
- )}
-
-
-
-
-
-
-
-
- Make sure to use your correct account address when interacting with these apps:
-
-
-
-
+
+ Choose one of the available options
+ {href && (
+
+
+
Safe integrated app
+ )}
+
+
+
+
+
+
+
+
+ Make sure to use your correct account address when interacting with these apps:
+
+
+
+
-
+
>
)
diff --git a/src/components/common/BuyCryptoButton/styles.module.css b/src/components/common/BuyCryptoButton/styles.module.css
index 43e2033969..96bf5ca7dc 100644
--- a/src/components/common/BuyCryptoButton/styles.module.css
+++ b/src/components/common/BuyCryptoButton/styles.module.css
@@ -1,5 +1,4 @@
.button {
- text-indent: -9999px;
justify-content: space-between;
padding: var(--space-2);
border-radius: 6px;
@@ -9,6 +8,10 @@
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);