diff --git a/cspell.json b/cspell.json index 52c87c7ab5f..409710d0e12 100644 --- a/cspell.json +++ b/cspell.json @@ -255,6 +255,7 @@ "cashtags", "celo", "endregion", + "frameable", "Hrefs", "linkedin", "luma", diff --git a/packages/plugins/Transak/src/SiteAdaptor/BuyTokenDialog.tsx b/packages/plugins/Transak/src/SiteAdaptor/BuyTokenDialog.tsx index 3e66d74e180..df0ab09d37d 100644 --- a/packages/plugins/Transak/src/SiteAdaptor/BuyTokenDialog.tsx +++ b/packages/plugins/Transak/src/SiteAdaptor/BuyTokenDialog.tsx @@ -1,8 +1,8 @@ import { InjectedDialog } from '@masknet/shared' -import { DialogContent, IconButton } from '@mui/material' -import { makeStyles } from '@masknet/theme' import { Close as CloseIcon } from '@mui/icons-material' -import { useTransakURL } from '../hooks/useTransakURL.js' +import { DialogContent, IconButton, Stack, Typography } from '@mui/material' +import { LoadingBase, makeStyles } from '@masknet/theme' +import { useTransakWidgetURL } from '../hooks/useTransakWidgetURL.js' const useStyles = makeStyles()((theme) => ({ dialogPaper: { @@ -37,6 +37,11 @@ const useStyles = makeStyles()((theme) => ({ border: 0, borderRadius: 12, }, + status: { + height: 630, + padding: theme.spacing(2), + boxSizing: 'border-box', + }, })) interface BuyTokenDialogProps extends withClasses<'root'> { @@ -50,7 +55,11 @@ export function BuyTokenDialog(props: BuyTokenDialogProps) { const { classes } = useStyles(undefined, { props }) const { code, address, open, onClose } = props - const transakURL = useTransakURL({ + const { + data: widgetUrl, + isLoading: loading, + error, + } = useTransakWidgetURL({ defaultCryptoCurrency: code, walletAddress: address, }) @@ -69,10 +78,18 @@ export function BuyTokenDialog(props: BuyTokenDialogProps) { - {transakURL ? + {loading ? + + + + : error || !widgetUrl ? + + + Transak is temporarily unavailable. Please try again later. + + // eslint-disable-next-line react/dom/no-missing-iframe-sandbox -