{
+const WcLogoHeader = ({ errorMessage }: { errorMessage?: string }): ReactElement => {
return (
<>
- {error && }
+ {errorMessage && }
-
- Connect dApps to {`Safe{Wallet}`}
+
+ {errorMessage || 'Connect dApps to Safe{Wallet}'}
)
diff --git a/src/components/walletconnect/WcLogoHeader/styles.module.css b/src/components/walletconnect/WcLogoHeader/styles.module.css
index e80a45b1c5..77caf38081 100644
--- a/src/components/walletconnect/WcLogoHeader/styles.module.css
+++ b/src/components/walletconnect/WcLogoHeader/styles.module.css
@@ -11,3 +11,9 @@
border-radius: 50%;
border: 1px solid var(--color-background-paper);
}
+
+.title {
+ width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
diff --git a/src/components/walletconnect/WcSessionList/WcNoSessions.tsx b/src/components/walletconnect/WcSessionList/WcNoSessions.tsx
index c8bc96eae9..17d7960b07 100644
--- a/src/components/walletconnect/WcSessionList/WcNoSessions.tsx
+++ b/src/components/walletconnect/WcSessionList/WcNoSessions.tsx
@@ -21,12 +21,12 @@ const WcSampleDapps = ({ onUnload }: { onUnload: () => void }) => {
return (
{SAMPLE_DAPPS.map((item) => (
-
- 
-
+
+
+
{item.name}
-
-
+
+
))}
)
diff --git a/src/components/walletconnect/WcSessionList/index.tsx b/src/components/walletconnect/WcSessionList/index.tsx
index ab17a76c00..5d239f26d2 100644
--- a/src/components/walletconnect/WcSessionList/index.tsx
+++ b/src/components/walletconnect/WcSessionList/index.tsx
@@ -12,8 +12,13 @@ type WcSesstionListProps = {
}
const WcSessionListItem = ({ session, onDisconnect }: { session: SessionTypes.Struct; onDisconnect: () => void }) => {
+ const MAX_NAME_LENGTH = 23
const { safeLoaded } = useSafeInfo()
- const name = getPeerName(session.peer) || 'Unknown dApp'
+ let name = getPeerName(session.peer) || 'Unknown dApp'
+
+ if (name.length > MAX_NAME_LENGTH + 1) {
+ name = `${name.slice(0, MAX_NAME_LENGTH)}…`
+ }
return (
diff --git a/src/components/walletconnect/WcSessionMananger/index.tsx b/src/components/walletconnect/WcSessionMananger/index.tsx
index 8426c81045..4db7af84c3 100644
--- a/src/components/walletconnect/WcSessionMananger/index.tsx
+++ b/src/components/walletconnect/WcSessionMananger/index.tsx
@@ -10,13 +10,14 @@ import WcProposalForm from '../WcProposalForm'
import WcConnectionState from '../WcConnectionState'
import { trackEvent } from '@/services/analytics'
import { WALLETCONNECT_EVENTS } from '@/services/analytics/events/walletconnect'
+import { splitError } from '@/services/walletconnect/utils'
type WcSessionManagerProps = {
sessions: SessionTypes.Struct[]
uri: string
}
-const SESSION_INFO_TIMEOUT = 2000
+const SESSION_INFO_TIMEOUT = 1000
const WcSessionManager = ({ sessions, uri }: WcSessionManagerProps) => {
const { safe, safeAddress } = useSafeInfo()
@@ -107,12 +108,8 @@ const WcSessionManager = ({ sessions, uri }: WcSessionManagerProps) => {
setOpen(true)
- let timer = setTimeout(() => {
- setOpen(false)
-
- timer = setTimeout(() => {
- setChangedSession(undefined)
- }, 500)
+ const timer = setTimeout(() => {
+ setChangedSession(undefined)
}, SESSION_INFO_TIMEOUT)
return () => clearTimeout(timer)
@@ -121,7 +118,7 @@ const WcSessionManager = ({ sessions, uri }: WcSessionManagerProps) => {
// Track errors
useEffect(() => {
if (error && open) {
- trackEvent({ ...WALLETCONNECT_EVENTS.SHOW_ERROR, label: error.message })
+ trackEvent({ ...WALLETCONNECT_EVENTS.SHOW_ERROR, label: splitError(error.message || '')[0] })
}
}, [error, open])
diff --git a/src/pages/apps/open.tsx b/src/pages/apps/open.tsx
index 1c83cdd96b..1c669c9ab5 100644
--- a/src/pages/apps/open.tsx
+++ b/src/pages/apps/open.tsx
@@ -1,6 +1,6 @@
import type { NextPage } from 'next'
import { useRouter } from 'next/router'
-import { useCallback } from 'react'
+import { useCallback, useContext } from 'react'
import { Box, CircularProgress } from '@mui/material'
import { useSafeAppUrl } from '@/hooks/safe-apps/useSafeAppUrl'
@@ -15,6 +15,10 @@ import { useBrowserPermissions } from '@/hooks/safe-apps/permissions'
import useChainId from '@/hooks/useChainId'
import { AppRoutes } from '@/config/routes'
import { getOrigin } from '@/components/safe-apps/utils'
+import { WalletConnectContext } from '@/services/walletconnect/WalletConnectContext'
+
+// TODO: Remove this once we properly deprecate the WC app
+const WC_SAFE_APP = /wallet-connect/
const SafeApps: NextPage = () => {
const chainId = useChainId()
@@ -42,6 +46,8 @@ const SafeApps: NextPage = () => {
remoteSafeAppsLoading,
})
+ const { setOpen } = useContext(WalletConnectContext)
+
const goToList = useCallback(() => {
router.push({
pathname: AppRoutes.apps.index,
@@ -52,6 +58,12 @@ const SafeApps: NextPage = () => {
// appUrl is required to be present
if (!appUrl || !router.isReady) return null
+ if (WC_SAFE_APP.test(appUrl)) {
+ setOpen(true)
+ goToList()
+ return null
+ }
+
if (isModalVisible) {
return (
',
+ icon: 'https://app.safe.global/images/safe-logo-green.png',
description: 'Please select a wallet to connect to Safe{Wallet}',
recommendedInjectedWallets: getRecommendedInjectedWallets(),
},
diff --git a/src/services/safe-wallet-provider/index.test.ts b/src/services/safe-wallet-provider/index.test.ts
index 91bd39b066..b40cc1635e 100644
--- a/src/services/safe-wallet-provider/index.test.ts
+++ b/src/services/safe-wallet-provider/index.test.ts
@@ -7,6 +7,7 @@ const safe = {
}
const appInfo = {
+ id: 1,
name: 'test',
description: 'test',
iconUrl: 'test',
diff --git a/src/services/safe-wallet-provider/index.ts b/src/services/safe-wallet-provider/index.ts
index c6f98e4d01..23bfc81c4e 100644
--- a/src/services/safe-wallet-provider/index.ts
+++ b/src/services/safe-wallet-provider/index.ts
@@ -8,6 +8,7 @@ type SafeSettings = {
}
export type AppInfo = {
+ id: number
name: string
description: string
url: string
diff --git a/src/services/safe-wallet-provider/useSafeWalletProvider.test.tsx b/src/services/safe-wallet-provider/useSafeWalletProvider.test.tsx
index a0d52cdcbf..4d4ea0ff51 100644
--- a/src/services/safe-wallet-provider/useSafeWalletProvider.test.tsx
+++ b/src/services/safe-wallet-provider/useSafeWalletProvider.test.tsx
@@ -12,6 +12,7 @@ import * as messages from '@/utils/safe-messages'
import { createStoreHydrator } from '@/store/storeHydrator'
const appInfo = {
+ id: 1,
name: 'test',
description: 'test',
iconUrl: 'test',
@@ -90,6 +91,7 @@ describe('useSafeWalletProvider', () => {
name: appInfo.name,
message: 'message',
requestId: expect.any(String),
+ safeAppId: 1,
})
expect(resp).toBeInstanceOf(Promise)
@@ -131,7 +133,6 @@ describe('useSafeWalletProvider', () => {
// SignMessageOnChainFlow props
expect(mockSetTxFlow.mock.calls[0][0].props).toStrictEqual({
props: {
- appId: undefined,
requestId: expect.any(String),
message: 'message',
method: 'signMessage',
@@ -205,6 +206,7 @@ describe('useSafeWalletProvider', () => {
name: appInfo.name,
message: typedMessage,
requestId: expect.any(String),
+ safeAppId: 1,
})
expect(resp).toBeInstanceOf(Promise)
@@ -252,11 +254,7 @@ describe('useSafeWalletProvider', () => {
expect(mockSetTxFlow.mock.calls[0][0].props).toStrictEqual({
data: {
appId: undefined,
- app: {
- name: appInfo.name,
- url: appInfo.url,
- iconUrl: appInfo.iconUrl,
- },
+ app: appInfo,
requestId: expect.any(String),
txs: [
{
diff --git a/src/services/safe-wallet-provider/useSafeWalletProvider.tsx b/src/services/safe-wallet-provider/useSafeWalletProvider.tsx
index 264115938d..ae04d26073 100644
--- a/src/services/safe-wallet-provider/useSafeWalletProvider.tsx
+++ b/src/services/safe-wallet-provider/useSafeWalletProvider.tsx
@@ -19,18 +19,11 @@ import { getAddress } from 'ethers/lib/utils'
import { AppRoutes } from '@/config/routes'
import useChains, { useCurrentChain } from '@/hooks/useChains'
import { NotificationMessages, showNotification } from './notifications'
-import { SafeAppsTag } from '@/config/constants'
-import { useRemoteSafeApps } from '@/hooks/safe-apps/useRemoteSafeApps'
import SignMessageOnChainFlow from '@/components/tx-flow/flows/SignMessageOnChain'
import { useAppSelector } from '@/store'
import { selectOnChainSigning } from '@/store/settingsSlice'
import { isOffchainEIP1271Supported } from '@/utils/safe-messages'
-const useWalletConnectApp = () => {
- const [matchingApps] = useRemoteSafeApps(SafeAppsTag.WALLET_CONNECT)
- return matchingApps?.[0]
-}
-
export const _useTxFlowApi = (chainId: string, safeAddress: string): WalletSDK | undefined => {
const { safe } = useSafeInfo()
const currentChain = useCurrentChain()
@@ -39,7 +32,6 @@ export const _useTxFlowApi = (chainId: string, safeAddress: string): WalletSDK |
const router = useRouter()
const { configs } = useChains()
const pendingTxs = useRef>({})
- const wcApp = useWalletConnectApp()
const onChainSigning = useAppSelector(selectOnChainSigning)
const [settings, setSettings] = useState({
@@ -95,11 +87,17 @@ export const _useTxFlowApi = (chainId: string, safeAddress: string): WalletSDK |
if (shouldSignOffChain) {
setTxFlow(
- ,
+ ,
onClose,
)
} else {
- setTxFlow(, onClose)
+ setTxFlow(, onClose)
}
})
}
@@ -156,12 +154,7 @@ export const _useTxFlowApi = (chainId: string, safeAddress: string): WalletSDK |
{
diff --git a/src/services/walletconnect/WalletConnectContext.tsx b/src/services/walletconnect/WalletConnectContext.tsx
index fa0fc40bd5..effaa9e879 100644
--- a/src/services/walletconnect/WalletConnectContext.tsx
+++ b/src/services/walletconnect/WalletConnectContext.tsx
@@ -8,6 +8,19 @@ import WalletConnectWallet from './WalletConnectWallet'
import { asError } from '../exceptions/utils'
import { getPeerName, stripEip155Prefix } from './utils'
import { IS_PRODUCTION } from '@/config/constants'
+import { trackEvent } from '../analytics'
+import { WALLETCONNECT_EVENTS } from '../analytics/events/walletconnect'
+import { SafeAppsTag } from '@/config/constants'
+import { useRemoteSafeApps } from '@/hooks/safe-apps/useRemoteSafeApps'
+
+enum Errors {
+ WRONG_CHAIN = '%%dappName%% made a request on a different chain than the one you are connected to',
+}
+
+const getWrongChainError = (dappName: string): Error => {
+ const message = Errors.WRONG_CHAIN.replace('%%dappName%%', dappName)
+ return new Error(message)
+}
const walletConnectSingleton = new WalletConnectWallet()
@@ -25,6 +38,11 @@ export const WalletConnectContext = createContext<{
setOpen: (_open: boolean) => {},
})
+const useWalletConnectApp = () => {
+ const [matchingApps] = useRemoteSafeApps(SafeAppsTag.WALLET_CONNECT)
+ return matchingApps?.[0]
+}
+
export const WalletConnectProvider = ({ children }: { children: ReactNode }) => {
const {
safe: { chainId },
@@ -34,6 +52,7 @@ export const WalletConnectProvider = ({ children }: { children: ReactNode }) =>
const [open, setOpen] = useState(false)
const [error, setError] = useState(null)
const safeWalletProvider = useSafeWalletProvider()
+ const wcApp = useWalletConnectApp()
// Init WalletConnect
useEffect(() => {
@@ -63,18 +82,28 @@ export const WalletConnectProvider = ({ children }: { children: ReactNode }) =>
const session = walletConnect.getActiveSessions().find((s) => s.topic === topic)
const requestChainId = stripEip155Prefix(event.params.chainId)
+ // Track all requests
+ if (session) {
+ trackEvent({ ...WALLETCONNECT_EVENTS.REQUEST, label: session.peer.metadata.url })
+ }
+
const getResponse = () => {
// Get error if wrong chain
if (!session || requestChainId !== chainId) {
+ if (session) {
+ setError(getWrongChainError(getPeerName(session.peer)))
+ }
+
const error = getSdkError('UNSUPPORTED_CHAINS')
return formatJsonRpcError(event.id, error)
}
// Get response from Safe Wallet Provider
return safeWalletProvider.request(event.id, event.params.request, {
+ id: wcApp?.id || -1,
+ url: wcApp?.url || '',
name: getPeerName(session.peer) || 'Unknown dApp',
description: session.peer.metadata.description,
- url: session.peer.metadata.url,
iconUrl: session.peer.metadata.icons[0],
})
}
@@ -88,7 +117,7 @@ export const WalletConnectProvider = ({ children }: { children: ReactNode }) =>
setError(asError(e))
}
})
- }, [walletConnect, chainId, safeWalletProvider])
+ }, [walletConnect, chainId, safeWalletProvider, wcApp])
return (
diff --git a/src/services/walletconnect/WalletConnectWallet.ts b/src/services/walletconnect/WalletConnectWallet.ts
index 20f54d4bad..88b28f45fc 100644
--- a/src/services/walletconnect/WalletConnectWallet.ts
+++ b/src/services/walletconnect/WalletConnectWallet.ts
@@ -11,8 +11,6 @@ import { IS_PRODUCTION, WC_PROJECT_ID } from '@/config/constants'
import { EIP155, SAFE_COMPATIBLE_METHODS, SAFE_WALLET_METADATA } from './constants'
import { invariant } from '@/utils/helpers'
import { getEip155ChainId, stripEip155Prefix } from './utils'
-import { logError } from '../exceptions'
-import ErrorCodes from '../exceptions/ErrorCodes'
const SESSION_ADD_EVENT = 'session_add' as Web3WalletTypes.Event // Workaround: WalletConnect doesn't emit session_add event
const SESSION_REJECT_EVENT = 'session_reject' as Web3WalletTypes.Event // Workaround: WalletConnect doesn't emit session_reject event
@@ -113,19 +111,6 @@ class WalletConnectWallet {
})
}
- /**
- * Switch chain and catch errors.
- * Just log the errors because they happen all the time.
- */
- private async switchChain(topic: string, chainId: string) {
- try {
- // Align the session with the current chainId
- return await this.chainChanged(topic, chainId)
- } catch (e) {
- logError(ErrorCodes._910, e)
- }
- }
-
public async approveSession(proposal: Web3WalletTypes.SessionProposal, currentChainId: string, safeAddress: string) {
assertWeb3Wallet(this.web3Wallet)
@@ -137,7 +122,7 @@ class WalletConnectWallet {
namespaces,
})
- await this.switchChain(session.topic, currentChainId)
+ await this.chainChanged(session.topic, currentChainId)
// Workaround: WalletConnect doesn't have a session_add event
this.web3Wallet?.events.emit(SESSION_ADD_EVENT, session)
@@ -180,7 +165,7 @@ class WalletConnectWallet {
}
// Switch to the new chain
- await this.switchChain(session.topic, chainId)
+ await this.chainChanged(session.topic, chainId)
// Switch to the new Safe
await this.accountsChanged(session.topic, chainId, safeAddress)
diff --git a/src/services/walletconnect/__tests__/WalletConnectContext.test.tsx b/src/services/walletconnect/__tests__/WalletConnectContext.test.tsx
index 38a1fe01a6..e4c157969f 100644
--- a/src/services/walletconnect/__tests__/WalletConnectContext.test.tsx
+++ b/src/services/walletconnect/__tests__/WalletConnectContext.test.tsx
@@ -4,7 +4,7 @@ import type { SafeInfo } from '@safe-global/safe-gateway-typescript-sdk'
import type { Web3WalletTypes } from '@walletconnect/web3wallet'
import type { SessionTypes } from '@walletconnect/types'
-import { fireEvent, render, waitFor } from '@/tests/test-utils'
+import { act, fireEvent, render, waitFor } from '@/tests/test-utils'
import { WalletConnectContext, WalletConnectProvider } from '../WalletConnectContext'
import WalletConnectWallet from '../WalletConnectWallet'
import { safeInfoSlice } from '@/store/safeInfoSlice'
@@ -14,6 +14,22 @@ import * as useSafeWalletProvider from '@/services/safe-wallet-provider/useSafeW
jest.mock('../WalletConnectWallet')
jest.mock('@/services/safe-wallet-provider/useSafeWalletProvider')
+jest.mock('@/hooks/safe-apps/useRemoteSafeApps', () => ({
+ useRemoteSafeApps: () => [
+ [
+ {
+ id: 111,
+ url: 'https://apps-portal.safe.global/wallet-connect',
+ name: 'WC App',
+ iconUrl: 'https://test.com/icon.png',
+ description: 'Test App Description',
+ },
+ ],
+ undefined,
+ false,
+ ],
+}))
+
const TestComponent = () => {
const { walletConnect, error } = useContext(WalletConnectContext)
return (
@@ -285,7 +301,9 @@ describe('WalletConnectProvider', () => {
jest.spyOn(WalletConnectWallet.prototype, 'updateSessions').mockImplementation(() => Promise.resolve())
jest
.spyOn(WalletConnectWallet.prototype, 'getActiveSessions')
- .mockImplementation(() => [{ topic: 'topic' } as unknown as SessionTypes.Struct])
+ .mockImplementation(() => [
+ { topic: 'topic', peer: { metadata: { url: 'https://test.com' } } } as unknown as SessionTypes.Struct,
+ ])
const onRequestSpy = jest.spyOn(WalletConnectWallet.prototype, 'onRequest')
const sendSessionResponseSpy = jest.spyOn(WalletConnectWallet.prototype, 'sendSessionResponse')
@@ -352,7 +370,7 @@ describe('WalletConnectProvider', () => {
metadata: {
name: 'name',
description: 'description',
- url: 'url',
+ url: 'https://apps-portal.safe.global/wallet-connect',
icons: ['iconUrl'],
},
},
@@ -389,6 +407,8 @@ describe('WalletConnectProvider', () => {
},
)
+ await act(() => Promise.resolve())
+
await waitFor(() => {
expect(onRequestSpy).toHaveBeenCalled()
})
@@ -408,9 +428,10 @@ describe('WalletConnectProvider', () => {
1,
{ method: 'fake', params: [] },
{
+ id: 111,
name: 'name',
description: 'description',
- url: 'url',
+ url: 'https://apps-portal.safe.global/wallet-connect',
iconUrl: 'iconUrl',
},
)
@@ -430,7 +451,7 @@ describe('WalletConnectProvider', () => {
metadata: {
name: 'name',
description: 'description',
- url: 'url',
+ url: 'https://apps-portal.safe.global/wallet-connect',
icons: ['iconUrl'],
},
},
diff --git a/src/services/walletconnect/__tests__/utils.test.ts b/src/services/walletconnect/__tests__/utils.test.ts
new file mode 100644
index 0000000000..221143296b
--- /dev/null
+++ b/src/services/walletconnect/__tests__/utils.test.ts
@@ -0,0 +1,19 @@
+import { splitError } from '../utils'
+
+describe('WalletConnect utils', () => {
+ describe('splitError', () => {
+ it('should return the error summary and detail', () => {
+ const error = new Error('WalletConnect failed to switch chain: { session: "0x1234", chainId: 1 }')
+ const [summary, detail] = splitError(error.message)
+ expect(summary).toEqual('WalletConnect failed to switch chain')
+ expect(detail).toEqual('{ session: "0x1234", chainId: 1 }')
+ })
+
+ it('should return the error summary if no details', () => {
+ const error = new Error('WalletConnect failed to switch chain')
+ const [summary, detail] = splitError(error.message)
+ expect(summary).toEqual('WalletConnect failed to switch chain')
+ expect(detail).toBeUndefined()
+ })
+ })
+})
diff --git a/src/services/walletconnect/utils.ts b/src/services/walletconnect/utils.ts
index c6a2511537..047e1003ad 100644
--- a/src/services/walletconnect/utils.ts
+++ b/src/services/walletconnect/utils.ts
@@ -58,3 +58,7 @@ export const isWarnedBridge = (origin: string, name: string) => {
export const getPeerName = (peer: SessionTypes.Struct['peer'] | ProposalTypes.Struct['proposer']): string => {
return peer.metadata?.name || peer.metadata?.url || ''
}
+
+export const splitError = (message: string): string[] => {
+ return message.split(/: (.+)/).slice(0, 2)
+}
From 90aaa5ce4bc5cef00369cbc3907d5f98e6a2f921 Mon Sep 17 00:00:00 2001
From: katspaugh
Date: Wed, 1 Nov 2023 15:58:44 +0100
Subject: [PATCH 5/9] 1.21.0
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index a6bd1c923a..9882a430e1 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
"homepage": "https://github.com/safe-global/safe-wallet-web",
"license": "GPL-3.0",
"type": "module",
- "version": "1.20.0",
+ "version": "1.21.0",
"scripts": {
"dev": "next dev",
"start": "next dev",
From bdd207e1b1e06250f5fd687f71d796c85d900d29 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Thu, 2 Nov 2023 11:02:19 +0100
Subject: [PATCH 6/9] Fix: new Safe logo for onboard/walletconnect (#2731)
---
public/images/logo-round.svg | 6 ++++++
src/services/onboard.ts | 5 ++---
2 files changed, 8 insertions(+), 3 deletions(-)
create mode 100644 public/images/logo-round.svg
diff --git a/public/images/logo-round.svg b/public/images/logo-round.svg
new file mode 100644
index 0000000000..7782f914a7
--- /dev/null
+++ b/public/images/logo-round.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/services/onboard.ts b/src/services/onboard.ts
index 280a72e565..2d1b266cba 100644
--- a/src/services/onboard.ts
+++ b/src/services/onboard.ts
@@ -50,9 +50,8 @@ export const createOnboard = (
appMetadata: {
name: 'Safe{Wallet}',
- // Both heights need be set to correctly size the image in the connecting screen/modal
- icon: 'https://app.safe.global/images/safe-logo-green.png',
- description: 'Please select a wallet to connect to Safe{Wallet}',
+ icon: location.origin + '/images/logo-round.svg',
+ description: 'Safe{Wallet} – smart contract wallet for Ethereum (ex-Gnosis Safe multisig)',
recommendedInjectedWallets: getRecommendedInjectedWallets(),
},
From 054b53b2a426193450dd0397bba3797d3276d739 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Thu, 2 Nov 2023 11:15:48 +0100
Subject: [PATCH 7/9] Fix: WalletConnect - track only tx and signature requests
(#2732)
* Fix: WalletConnect - track only tx and signature requests
* Rm href=# from address book upload
---
src/components/common/FileUpload/index.tsx | 5 +----
.../walletconnect/WcSessionMananger/index.tsx | 8 +++++---
.../walletconnect/WalletConnectContext.tsx | 7 +++----
src/services/walletconnect/tracking.ts | 16 ++++++++++++++++
4 files changed, 25 insertions(+), 11 deletions(-)
create mode 100644 src/services/walletconnect/tracking.ts
diff --git a/src/components/common/FileUpload/index.tsx b/src/components/common/FileUpload/index.tsx
index 5589b293b8..a088de4fea 100644
--- a/src/components/common/FileUpload/index.tsx
+++ b/src/components/common/FileUpload/index.tsx
@@ -113,10 +113,7 @@ const FileUpload = ({
sx={{ fill: 'none', color: ({ palette }) => palette.primary.light }}
/>
- Drag and drop a {fileType} file or{' '}
-
- choose a file
-
+ Drag and drop a {fileType} file or choose a file