From dd5df800cdfeb41b9083b3c1774d3527357b02b7 Mon Sep 17 00:00:00 2001 From: Artur Sapek Date: Fri, 20 Sep 2024 11:56:52 -0400 Subject: [PATCH 1/7] optional supportUrl & error log copy button --- wormhole-connect/src/config/ui.ts | 3 + .../v2/Bridge/ReviewTransaction/SendError.tsx | 72 +++++++++++++++++++ .../v2/Bridge/ReviewTransaction/index.tsx | 20 +++--- 3 files changed, 85 insertions(+), 10 deletions(-) create mode 100644 wormhole-connect/src/views/v2/Bridge/ReviewTransaction/SendError.tsx diff --git a/wormhole-connect/src/config/ui.ts b/wormhole-connect/src/config/ui.ts index e45b4ded2..e79e09bc4 100644 --- a/wormhole-connect/src/config/ui.ts +++ b/wormhole-connect/src/config/ui.ts @@ -20,6 +20,8 @@ export type UiConfig = { walletConnectProjectId?: string; showHamburgerMenu: boolean; previewMode?: boolean; // Disables making transfers + + supportUrl?: string; }; export interface DefaultInputs { @@ -85,6 +87,7 @@ export function createUiConfig(customConfig: Partial): UiConfig { pageHeader: customConfig?.pageHeader, pageSubHeader: customConfig?.pageSubHeader, menu: customConfig?.menu ?? [], + supportUrl: customConfig?.supportUrl, searchTx: customConfig?.searchTx, moreTokens: customConfig?.moreTokens, moreChains: customConfig?.moreChains, diff --git a/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/SendError.tsx b/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/SendError.tsx new file mode 100644 index 000000000..3b30e568e --- /dev/null +++ b/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/SendError.tsx @@ -0,0 +1,72 @@ +import React, { useState } from 'react'; +import { makeStyles } from 'tss-react/mui'; +import config from 'config'; +import AlertBannerV2 from 'components/v2/AlertBanner'; +import { copyTextToClipboard } from 'utils'; +import { Box, Typography } from '@mui/material'; +import CopyIcon from '@mui/icons-material/ContentCopy'; +import DoneIcon from '@mui/icons-material/Done'; + +type Props = { + humanError?: string; + internalError?: any; +}; + +const useStyles = makeStyles()((theme: any) => ({ + copyIcon: { + fontSize: '14px', + }, + doneIcon: { + fontSize: '14px', + color: theme.palette.success.main, + }, +})); + +export default ({ humanError, internalError }: Props) => { + const { classes } = useStyles(); + + if (humanError === undefined) { + return null; + } + + const [justCopied, setJustCopied] = useState(false); + + const getHelp = + internalError && internalError.message && config.ui.supportUrl ? ( + + Need help?{' '} + { + copyTextToClipboard(internalError.message); + setJustCopied(true); + setTimeout(() => setJustCopied(false), 3000); + }} + > + Copy error logs{' '} + {justCopied ? ( + + ) : ( + + )} + + {' and '} + + reach out to support + + . + + ) : null; + + return ( + + + {getHelp} + + ); +}; diff --git a/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/index.tsx b/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/index.tsx index c624e9204..49dfdf3c4 100644 --- a/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/index.tsx +++ b/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/index.tsx @@ -11,7 +11,6 @@ import IconButton from '@mui/material/IconButton'; import { getTokenDetails } from 'telemetry'; import { Context } from 'sdklegacy'; -import AlertBannerV2 from 'components/v2/AlertBanner'; import Button from 'components/v2/Button'; import config from 'config'; import { RoutesConfig } from 'config/routes'; @@ -42,6 +41,7 @@ import { RelayerFee } from 'store/relay'; import { amount as sdkAmount } from '@wormhole-foundation/sdk'; import { toDecimals } from 'utils/balance'; import { useUSDamountGetter } from 'hooks/useUSDamountGetter'; +import SendError from './SendError'; const useStyles = makeStyles()((theme) => ({ container: { @@ -71,7 +71,10 @@ const ReviewTransaction = (props: Props) => { const mobile = useMediaQuery(theme.breakpoints.down('sm')); - const [sendError, setSendError] = useState(''); + const [sendError, setSendError] = useState(undefined); + const [sendErrorInternal, setSendErrorInternal] = useState( + undefined, + ); const routeContext = useContext(RouteContext); @@ -112,7 +115,7 @@ const ReviewTransaction = (props: Props) => { : undefined; const send = async () => { - setSendError(''); + setSendError(undefined); // Pre-check of required values if ( @@ -160,6 +163,7 @@ const ReviewTransaction = (props: Props) => { } } catch (e) { setSendError('Error validating transfer'); + setSendErrorInternal(e); console.error(e); return; } @@ -276,7 +280,7 @@ const ReviewTransaction = (props: Props) => { dispatch(setSendTx(txId)); dispatch(setRedeemRoute(route)); dispatch(setAppRoute('redeem')); - setSendError(''); + setSendError(undefined); } catch (e: any) { console.error('Wormhole Connect: error completing transfer', e); @@ -284,6 +288,7 @@ const ReviewTransaction = (props: Props) => { // Show error in UI setSendError(uiError); + setSendErrorInternal(e); // Trigger transfer error event to integrator config.triggerEvent({ @@ -383,12 +388,7 @@ const ReviewTransaction = (props: Props) => { disabled={isGasSliderDisabled} /> - + {confirmTransactionButton} ); From 5b175a25e1803741b6648279b86bd8d258c3323b Mon Sep 17 00:00:00 2001 From: Artur Sapek Date: Fri, 20 Sep 2024 12:07:01 -0400 Subject: [PATCH 2/7] dont freak out when user rejects in their wallet --- wormhole-connect/src/utils/errors.ts | 6 ++-- .../v2/Bridge/ReviewTransaction/SendError.tsx | 4 +-- .../v2/Bridge/ReviewTransaction/index.tsx | 28 +++++++++++-------- 3 files changed, 23 insertions(+), 15 deletions(-) diff --git a/wormhole-connect/src/utils/errors.ts b/wormhole-connect/src/utils/errors.ts index f24cce770..804a59469 100644 --- a/wormhole-connect/src/utils/errors.ts +++ b/wormhole-connect/src/utils/errors.ts @@ -15,8 +15,10 @@ import { Chain } from '@wormhole-foundation/sdk'; // attempt to capture errors using regex export const INSUFFICIENT_ALLOWANCE_REGEX = /[I|i]nsufficient token allowance/gm; -export const USER_REJECTED_REGEX = - /rejected the request|[R|r]ejected from user|user cancel|aborted by user/gm; +export const USER_REJECTED_REGEX = new RegExp( + 'user rejected|rejected the request|rejected from user|user cancel|aborted by user', + 'gmi', +); export function interpretTransferError( e: any, diff --git a/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/SendError.tsx b/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/SendError.tsx index 3b30e568e..20fbce1a0 100644 --- a/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/SendError.tsx +++ b/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/SendError.tsx @@ -25,12 +25,12 @@ const useStyles = makeStyles()((theme: any) => ({ export default ({ humanError, internalError }: Props) => { const { classes } = useStyles(); + const [justCopied, setJustCopied] = useState(false); + if (humanError === undefined) { return null; } - const [justCopied, setJustCopied] = useState(false); - const getHelp = internalError && internalError.message && config.ui.supportUrl ? ( diff --git a/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/index.tsx b/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/index.tsx index 49dfdf3c4..4c620a209 100644 --- a/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/index.tsx +++ b/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/index.tsx @@ -42,6 +42,7 @@ import { amount as sdkAmount } from '@wormhole-foundation/sdk'; import { toDecimals } from 'utils/balance'; import { useUSDamountGetter } from 'hooks/useUSDamountGetter'; import SendError from './SendError'; +import { ERR_USER_REJECTED } from 'telemetry/types'; const useStyles = makeStyles()((theme) => ({ container: { @@ -282,20 +283,25 @@ const ReviewTransaction = (props: Props) => { dispatch(setAppRoute('redeem')); setSendError(undefined); } catch (e: any) { - console.error('Wormhole Connect: error completing transfer', e); - const [uiError, transferError] = interpretTransferError(e, sourceChain); - // Show error in UI - setSendError(uiError); - setSendErrorInternal(e); + if (transferError.type === ERR_USER_REJECTED) { + // User intentionally rejected in their wallet. This is not an error in the sense + // that something went wrong. + } else { + console.error('Wormhole Connect: error completing transfer', e); - // Trigger transfer error event to integrator - config.triggerEvent({ - type: 'transfer.error', - error: transferError, - details: transferDetails, - }); + // Show error in UI + setSendError(uiError); + setSendErrorInternal(e); + + // Trigger transfer error event to integrator + config.triggerEvent({ + type: 'transfer.error', + error: transferError, + details: transferDetails, + }); + } } finally { dispatch(setIsTransactionInProgress(false)); } From 5011de859e5de40dd58e99bd2c6beaefbec3b584 Mon Sep 17 00:00:00 2001 From: Artur Sapek Date: Fri, 20 Sep 2024 12:31:44 -0400 Subject: [PATCH 3/7] remove g flag because it behaves funny --- wormhole-connect/src/utils/errors.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/wormhole-connect/src/utils/errors.ts b/wormhole-connect/src/utils/errors.ts index 804a59469..b7cefa00b 100644 --- a/wormhole-connect/src/utils/errors.ts +++ b/wormhole-connect/src/utils/errors.ts @@ -13,11 +13,10 @@ import { Chain } from '@wormhole-foundation/sdk'; // TODO SDKV2 // attempt to capture errors using regex -export const INSUFFICIENT_ALLOWANCE_REGEX = - /[I|i]nsufficient token allowance/gm; +export const INSUFFICIENT_ALLOWANCE_REGEX = /insufficient token allowance/im; export const USER_REJECTED_REGEX = new RegExp( 'user rejected|rejected the request|rejected from user|user cancel|aborted by user', - 'gmi', + 'mi', ); export function interpretTransferError( From d73acd19cdcce9cb22832e552ac2e32926520d68 Mon Sep 17 00:00:00 2001 From: Artur Sapek Date: Fri, 20 Sep 2024 12:41:43 -0400 Subject: [PATCH 4/7] get help bro --- .../src/views/v2/Bridge/ReviewTransaction/SendError.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/SendError.tsx b/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/SendError.tsx index 20fbce1a0..4200ed768 100644 --- a/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/SendError.tsx +++ b/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/SendError.tsx @@ -52,7 +52,7 @@ export default ({ humanError, internalError }: Props) => { {' and '} - reach out to support + ask for help . From 982261ff8974208d6bbf4d82e04dff5d4ada32ba Mon Sep 17 00:00:00 2001 From: Artur Sapek Date: Fri, 20 Sep 2024 12:43:47 -0400 Subject: [PATCH 5/7] the --- .../src/views/v2/Bridge/ReviewTransaction/SendError.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/SendError.tsx b/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/SendError.tsx index 4200ed768..7a05f7eef 100644 --- a/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/SendError.tsx +++ b/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/SendError.tsx @@ -43,7 +43,7 @@ export default ({ humanError, internalError }: Props) => { setTimeout(() => setJustCopied(false), 3000); }} > - Copy error logs{' '} + Copy the error logs{' '} {justCopied ? ( ) : ( From 2b415dab8d522220a887f4c09c67b57fc5bc7487 Mon Sep 17 00:00:00 2001 From: Artur Sapek Date: Fri, 20 Sep 2024 12:44:55 -0400 Subject: [PATCH 6/7] more generic property name --- wormhole-connect/src/config/ui.ts | 4 ++-- .../src/views/v2/Bridge/ReviewTransaction/SendError.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/wormhole-connect/src/config/ui.ts b/wormhole-connect/src/config/ui.ts index e79e09bc4..11c81ce03 100644 --- a/wormhole-connect/src/config/ui.ts +++ b/wormhole-connect/src/config/ui.ts @@ -21,7 +21,7 @@ export type UiConfig = { showHamburgerMenu: boolean; previewMode?: boolean; // Disables making transfers - supportUrl?: string; + getHelpUrl?: string; }; export interface DefaultInputs { @@ -87,7 +87,7 @@ export function createUiConfig(customConfig: Partial): UiConfig { pageHeader: customConfig?.pageHeader, pageSubHeader: customConfig?.pageSubHeader, menu: customConfig?.menu ?? [], - supportUrl: customConfig?.supportUrl, + getHelpUrl: customConfig?.getHelpUrl, searchTx: customConfig?.searchTx, moreTokens: customConfig?.moreTokens, moreChains: customConfig?.moreChains, diff --git a/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/SendError.tsx b/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/SendError.tsx index 7a05f7eef..d2787135a 100644 --- a/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/SendError.tsx +++ b/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/SendError.tsx @@ -32,7 +32,7 @@ export default ({ humanError, internalError }: Props) => { } const getHelp = - internalError && internalError.message && config.ui.supportUrl ? ( + internalError && internalError.message && config.ui.getHelpUrl ? ( Need help?{' '} { )} {' and '} - + ask for help . From de3710e7b7b2cf2a06ae28c14114352ecb71f3d6 Mon Sep 17 00:00:00 2001 From: Artur Sapek Date: Fri, 20 Sep 2024 12:47:43 -0400 Subject: [PATCH 7/7] dont say help twice --- .../src/views/v2/Bridge/ReviewTransaction/SendError.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/SendError.tsx b/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/SendError.tsx index d2787135a..e8fa87036 100644 --- a/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/SendError.tsx +++ b/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/SendError.tsx @@ -34,7 +34,7 @@ export default ({ humanError, internalError }: Props) => { const getHelp = internalError && internalError.message && config.ui.getHelpUrl ? ( - Need help?{' '} + Having trouble?{' '} {