From b0b9c464c87b7fa0a289b7185a21b21de7ccbffb Mon Sep 17 00:00:00 2001 From: Nathan Richards Date: Mon, 2 Sep 2024 13:12:49 +0200 Subject: [PATCH 1/4] feat: add explorer link to the support card --- .../src/defaultWidgetConfig.ts | 1 + .../widgetConfig/utils/getConfigOutput.ts | 1 + .../TransactionDetailsPage/SupportIdCard.tsx | 70 +++++++++++++++++++ .../TransactionDetailsPage.tsx | 34 +-------- packages/widget/src/types/widget.ts | 2 +- 5 files changed, 75 insertions(+), 33 deletions(-) create mode 100644 packages/widget/src/pages/TransactionDetailsPage/SupportIdCard.tsx diff --git a/packages/widget-playground/src/defaultWidgetConfig.ts b/packages/widget-playground/src/defaultWidgetConfig.ts index 16442500d..8c64e6074 100644 --- a/packages/widget-playground/src/defaultWidgetConfig.ts +++ b/packages/widget-playground/src/defaultWidgetConfig.ts @@ -206,6 +206,7 @@ export const widgetBaseConfig: WidgetConfig = { export const defaultWidgetConfig: Partial = { ...widgetBaseConfig, appearance: 'auto', + explorerUrl: 'https://scan.li.fi/tx/', theme: { palette: { primary: { diff --git a/packages/widget-playground/src/store/widgetConfig/utils/getConfigOutput.ts b/packages/widget-playground/src/store/widgetConfig/utils/getConfigOutput.ts index b309fbbd2..0ca6aafbb 100644 --- a/packages/widget-playground/src/store/widgetConfig/utils/getConfigOutput.ts +++ b/packages/widget-playground/src/store/widgetConfig/utils/getConfigOutput.ts @@ -10,6 +10,7 @@ export const getConfigOutput = ( ...(config.variant ? { variant: config.variant } : {}), ...(config.subvariant ? { subvariant: config.subvariant } : {}), ...(config.appearance ? { appearance: config.appearance } : {}), + ...(config.explorerUrl ? { explorerUrl: config.explorerUrl } : {}), ...(theme ? { theme: { diff --git a/packages/widget/src/pages/TransactionDetailsPage/SupportIdCard.tsx b/packages/widget/src/pages/TransactionDetailsPage/SupportIdCard.tsx new file mode 100644 index 000000000..03802e467 --- /dev/null +++ b/packages/widget/src/pages/TransactionDetailsPage/SupportIdCard.tsx @@ -0,0 +1,70 @@ +import { ContentCopyRounded, OpenInNew } from '@mui/icons-material'; +import { Box, Typography } from '@mui/material'; +import { useTranslation } from 'react-i18next'; +import { Card } from '../../components/Card/Card.js'; +import { CardIconButton } from '../../components/Card/CardIconButton.js'; +import { CardTitle } from '../../components/Card/CardTitle.js'; +import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; + +interface SupportIdCardProps { + supportId: string; +} + +const getTxHash = (supportId: string) => + supportId.indexOf('_') !== -1 + ? supportId.substring(0, supportId.indexOf('_')) + : supportId; + +export const SupportIdCard = ({ supportId }: SupportIdCardProps) => { + const { t } = useTranslation(); + + const { explorerUrl } = useWidgetConfig(); + + const copySupportId = async () => { + await navigator.clipboard.writeText(supportId); + }; + + const openSupportIdInExplorer = () => { + const txHash = getTxHash(supportId); + window.open(`${explorerUrl}${txHash}`, '_blank'); + }; + + return ( + + + {t('main.supportId')} + + + + + {explorerUrl ? ( + + + + ) : null} + + + + {supportId} + + + ); +}; diff --git a/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx b/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx index bfdd548e8..d90e15836 100644 --- a/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx +++ b/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx @@ -1,12 +1,8 @@ import type { FullStatusData } from '@lifi/sdk'; -import { ContentCopyRounded } from '@mui/icons-material'; import { Box, Typography } from '@mui/material'; import { useEffect, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { useLocation } from 'react-router-dom'; -import { Card } from '../../components/Card/Card.js'; -import { CardIconButton } from '../../components/Card/CardIconButton.js'; -import { CardTitle } from '../../components/Card/CardTitle.js'; import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'; import { PageContainer } from '../../components/PageContainer.js'; import { getStepList } from '../../components/Step/StepList.js'; @@ -15,6 +11,7 @@ import { useHeader } from '../../hooks/useHeader.js'; import { useNavigateBack } from '../../hooks/useNavigateBack.js'; import { useTools } from '../../hooks/useTools.js'; import { useTransactionDetails } from '../../hooks/useTransactionDetails.js'; +import { SupportIdCard } from '../../pages/TransactionDetailsPage/SupportIdCard.js'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; import { useRouteExecutionStore } from '../../stores/routes/RouteExecutionStore.js'; import { getSourceTxHash } from '../../stores/routes/utils.js'; @@ -66,10 +63,6 @@ export const TransactionDetailsPage: React.FC = () => { } }, [isLoading, navigate, routeExecution]); - const copySupportId = async () => { - await navigator.clipboard.writeText(supportId); - }; - const sourceTxHash = getSourceTxHash(routeExecution?.route); let supportId = sourceTxHash ?? routeExecution?.route.id ?? ''; @@ -117,30 +110,7 @@ export const TransactionDetailsPage: React.FC = () => { sx={{ marginTop: 2 }} /> ) : null} - - - {t('main.supportId')} - - - - - - - - {supportId} - - + diff --git a/packages/widget/src/types/widget.ts b/packages/widget/src/types/widget.ts index 1701ad1a4..78aed3e52 100644 --- a/packages/widget/src/types/widget.ts +++ b/packages/widget/src/types/widget.ts @@ -188,7 +188,6 @@ export interface WidgetConfig { contractSecondaryComponent?: ReactNode; contractCompactComponent?: ReactNode; contractTool?: WidgetContractTool; - integrator: string; apiKey?: string; /** @@ -225,6 +224,7 @@ export interface WidgetConfig { tokens?: WidgetTokens; languages?: WidgetLanguages; languageResources?: LanguageResources; + explorerUrl?: string; } export interface WidgetConfigProps { From 3ba2e1a94375dccf08a853674134561bd94dac43 Mon Sep 17 00:00:00 2001 From: Nathan Richards Date: Tue, 3 Sep 2024 11:28:22 +0200 Subject: [PATCH 2/4] feat: fallback to lifi scan --- .../widget-playground/src/defaultWidgetConfig.ts | 1 - .../pages/TransactionDetailsPage/SupportIdCard.tsx | 13 +++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/widget-playground/src/defaultWidgetConfig.ts b/packages/widget-playground/src/defaultWidgetConfig.ts index 8c64e6074..16442500d 100644 --- a/packages/widget-playground/src/defaultWidgetConfig.ts +++ b/packages/widget-playground/src/defaultWidgetConfig.ts @@ -206,7 +206,6 @@ export const widgetBaseConfig: WidgetConfig = { export const defaultWidgetConfig: Partial = { ...widgetBaseConfig, appearance: 'auto', - explorerUrl: 'https://scan.li.fi/tx/', theme: { palette: { primary: { diff --git a/packages/widget/src/pages/TransactionDetailsPage/SupportIdCard.tsx b/packages/widget/src/pages/TransactionDetailsPage/SupportIdCard.tsx index 03802e467..9ffdf934e 100644 --- a/packages/widget/src/pages/TransactionDetailsPage/SupportIdCard.tsx +++ b/packages/widget/src/pages/TransactionDetailsPage/SupportIdCard.tsx @@ -6,6 +6,8 @@ import { CardIconButton } from '../../components/Card/CardIconButton.js'; import { CardTitle } from '../../components/Card/CardTitle.js'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; +const lifiExplorerUrl = 'https://scan.li.fi'; + interface SupportIdCardProps { supportId: string; } @@ -26,7 +28,8 @@ export const SupportIdCard = ({ supportId }: SupportIdCardProps) => { const openSupportIdInExplorer = () => { const txHash = getTxHash(supportId); - window.open(`${explorerUrl}${txHash}`, '_blank'); + const urlBase = explorerUrl ?? lifiExplorerUrl; + window.open(`${urlBase}/tx/${txHash}`, '_blank'); }; return ( @@ -49,11 +52,9 @@ export const SupportIdCard = ({ supportId }: SupportIdCardProps) => { - {explorerUrl ? ( - - - - ) : null} + + + Date: Tue, 3 Sep 2024 11:43:09 +0200 Subject: [PATCH 3/4] refactor: move lifi explore url to constants file --- packages/widget/src/config/constants.ts | 2 ++ .../widget/src/pages/TransactionDetailsPage/SupportIdCard.tsx | 3 +-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/widget/src/config/constants.ts b/packages/widget/src/config/constants.ts index 31f2e7cd8..ac8d8674c 100644 --- a/packages/widget/src/config/constants.ts +++ b/packages/widget/src/config/constants.ts @@ -1 +1,3 @@ export const defaultMaxHeight = 686; + +export const lifiExplorerUrl = 'https://scan.li.fi'; diff --git a/packages/widget/src/pages/TransactionDetailsPage/SupportIdCard.tsx b/packages/widget/src/pages/TransactionDetailsPage/SupportIdCard.tsx index 9ffdf934e..de5bdee77 100644 --- a/packages/widget/src/pages/TransactionDetailsPage/SupportIdCard.tsx +++ b/packages/widget/src/pages/TransactionDetailsPage/SupportIdCard.tsx @@ -4,10 +4,9 @@ import { useTranslation } from 'react-i18next'; import { Card } from '../../components/Card/Card.js'; import { CardIconButton } from '../../components/Card/CardIconButton.js'; import { CardTitle } from '../../components/Card/CardTitle.js'; +import { lifiExplorerUrl } from '../../config/constants.js'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; -const lifiExplorerUrl = 'https://scan.li.fi'; - interface SupportIdCardProps { supportId: string; } From 05c1383ddea59225d947e4135b9fc165ee4a7f8b Mon Sep 17 00:00:00 2001 From: Nathan Richards Date: Tue, 3 Sep 2024 12:06:50 +0200 Subject: [PATCH 4/4] chore: chnage naming from support to transfer --- packages/widget/src/i18n/en.json | 2 +- .../TransactionDetailsPage.tsx | 4 +-- .../{SupportIdCard.tsx => TransferIdCard.tsx} | 30 +++++++++---------- 3 files changed, 18 insertions(+), 18 deletions(-) rename packages/widget/src/pages/TransactionDetailsPage/{SupportIdCard.tsx => TransferIdCard.tsx} (66%) diff --git a/packages/widget/src/i18n/en.json b/packages/widget/src/i18n/en.json index da2d4f3bb..7dd9a7272 100644 --- a/packages/widget/src/i18n/en.json +++ b/packages/widget/src/i18n/en.json @@ -265,7 +265,7 @@ "stepSwapAndBridge": "Swap and bridge", "stepSwapAndBuy": "Swap and buy", "stepSwapAndDeposit": "Swap and deposit", - "supportId": "Support ID", + "transferId": "Transfer ID", "swapStepDetails": "Swap on {{chain}} via {{tool}}", "tags": { "cheapest": "Best Return", diff --git a/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx b/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx index d90e15836..f8615bfcc 100644 --- a/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx +++ b/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx @@ -11,7 +11,6 @@ import { useHeader } from '../../hooks/useHeader.js'; import { useNavigateBack } from '../../hooks/useNavigateBack.js'; import { useTools } from '../../hooks/useTools.js'; import { useTransactionDetails } from '../../hooks/useTransactionDetails.js'; -import { SupportIdCard } from '../../pages/TransactionDetailsPage/SupportIdCard.js'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; import { useRouteExecutionStore } from '../../stores/routes/RouteExecutionStore.js'; import { getSourceTxHash } from '../../stores/routes/utils.js'; @@ -19,6 +18,7 @@ import { buildRouteFromTxHistory } from '../../utils/converters.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { ContactSupportButton } from './ContactSupportButton.js'; import { TransactionDetailsSkeleton } from './TransactionDetailsSkeleton.js'; +import { TransferIdCard } from './TransferIdCard.js'; export const TransactionDetailsPage: React.FC = () => { const { t, i18n } = useTranslation(); @@ -110,7 +110,7 @@ export const TransactionDetailsPage: React.FC = () => { sx={{ marginTop: 2 }} /> ) : null} - + diff --git a/packages/widget/src/pages/TransactionDetailsPage/SupportIdCard.tsx b/packages/widget/src/pages/TransactionDetailsPage/TransferIdCard.tsx similarity index 66% rename from packages/widget/src/pages/TransactionDetailsPage/SupportIdCard.tsx rename to packages/widget/src/pages/TransactionDetailsPage/TransferIdCard.tsx index de5bdee77..fd4824416 100644 --- a/packages/widget/src/pages/TransactionDetailsPage/SupportIdCard.tsx +++ b/packages/widget/src/pages/TransactionDetailsPage/TransferIdCard.tsx @@ -7,26 +7,26 @@ import { CardTitle } from '../../components/Card/CardTitle.js'; import { lifiExplorerUrl } from '../../config/constants.js'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; -interface SupportIdCardProps { - supportId: string; +interface TransferIdCardProps { + transferId: string; } -const getTxHash = (supportId: string) => - supportId.indexOf('_') !== -1 - ? supportId.substring(0, supportId.indexOf('_')) - : supportId; +const getTxHash = (transferId: string) => + transferId.indexOf('_') !== -1 + ? transferId.substring(0, transferId.indexOf('_')) + : transferId; -export const SupportIdCard = ({ supportId }: SupportIdCardProps) => { +export const TransferIdCard = ({ transferId }: TransferIdCardProps) => { const { t } = useTranslation(); const { explorerUrl } = useWidgetConfig(); - const copySupportId = async () => { - await navigator.clipboard.writeText(supportId); + const copyTransferId = async () => { + await navigator.clipboard.writeText(transferId); }; - const openSupportIdInExplorer = () => { - const txHash = getTxHash(supportId); + const openTransferIdInExplorer = () => { + const txHash = getTxHash(transferId); const urlBase = explorerUrl ?? lifiExplorerUrl; window.open(`${urlBase}/tx/${txHash}`, '_blank'); }; @@ -39,7 +39,7 @@ export const SupportIdCard = ({ supportId }: SupportIdCardProps) => { flex: 1, }} > - {t('main.supportId')} + {t('main.transferId')} { marginTop: 1, }} > - + - + @@ -63,7 +63,7 @@ export const SupportIdCard = ({ supportId }: SupportIdCardProps) => { px={2} sx={{ wordBreak: 'break-all' }} > - {supportId} + {transferId} );