fix: Crash in bridge input pasted non-numeric and add v1link translation

apps/web/src/pages/bridge/index.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from '@pancakeswap/localization'
 import { Flex, useMatchBreakpoints } from '@pancakeswap/uikit'
 import ConnectWalletButton from 'components/ConnectWalletButton'
 import { PUBLIC_NODES } from 'config/nodes'
@@ -11,6 +12,7 @@ const CanonicalBridge = lazy(() =>
 
 const BridgePage = () => {
   const { isMobile } = useMatchBreakpoints()
+  const { t } = useTranslation()
 
   return (
     <Page removePadding hideFooterOnDesktop={false} showExternalLink={false} showHelpLink={false} noMinHeight>
@@ -31,6 +33,7 @@ const BridgePage = () => {
             supportedChainIds={CHAIN_IDS}
             // @ts-ignore
             rpcConfig={PUBLIC_NODES}
+            v1LinkText={t('V1 Bridge supports bridging to/from Aptos')}
           />
         </Suspense>
       </Flex>

packages/canonical-bridge/package.json

@@ -29,7 +29,8 @@
     "@solana/wallet-adapter-react": "^0",
     "@tronweb3/tronwallet-adapter-react-hooks": "^1",
     "@pancakeswap/uikit": "workspace:*",
-    "@pancakeswap/localization": "workspace:*"
+    "@pancakeswap/localization": "workspace:*",
+    "@pancakeswap/hooks": "workspace:*"
   },
   "dependencies": {
     "@bnb-chain/canonical-bridge-widget": "0.5.15",

packages/canonical-bridge/src/components/V1BridgeLink.tsx

@@ -2,11 +2,11 @@ import { Flex, Link } from '@pancakeswap/uikit'
 import { styled } from 'styled-components'
 import { ExternalLinkIcon } from './icons/ExternalLinkIcon'
 
-export function V1BridgeLink() {
+export function V1BridgeLink({ v1LinkText }: { v1LinkText: string }) {
   return (
     <Flex marginTop="16px" alignItems="center" justifyContent="center">
       <StyledLink href="https://bridge.pancakeswap.finance/" target="_blank" rel="noopener">
-        V1 Bridge supports bridging to/from Aptos
+        {v1LinkText}
         <ExternalLinkIcon />
       </StyledLink>
     </Flex>

packages/canonical-bridge/src/views/index.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from '@pancakeswap/localization'
 import { Flex, useToast } from '@pancakeswap/uikit'
-import { useCallback, useMemo } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
 
 import {
   BridgeRoutes,
@@ -11,6 +11,7 @@ import {
 } from '@bnb-chain/canonical-bridge-widget'
 import { useTheme } from 'styled-components'
 import { useAccount } from 'wagmi'
+import { useLastUpdated } from '@pancakeswap/hooks'
 import { RefreshingIcon } from '../components/RefreshingIcon'
 import { V1BridgeLink } from '../components/V1BridgeLink'
 import { chains, env } from '../configs'
@@ -26,15 +27,42 @@ export interface CanonicalBridgeProps {
   connectWalletButton: CanonicalBridgeProviderProps['connectWalletButton']
   supportedChainIds: number[]
   rpcConfig: Record<number, string[]>
+  v1LinkText: string
 }
 
 export const CanonicalBridge = (props: CanonicalBridgeProps) => {
-  const { connectWalletButton, supportedChainIds } = props
+  const { connectWalletButton, supportedChainIds, v1LinkText } = props
 
   const transferConfig = useTransferConfig()
   const { currentLanguage } = useTranslation()
   const theme = useTheme()
   const toast = useToast()
+  const { setLastUpdated: refresh } = useLastUpdated()
+
+  useEffect(() => {
+    if (typeof document !== 'undefined' && document) {
+      const inputElement = document.querySelector('.bccb-widget-transfer-input') as HTMLInputElement | null
+      if (inputElement) {
+        inputElement.setAttribute('pattern', '^[0-9]*[.,]?[0-9]*$')
+
+        const handlePaste = (e: ClipboardEvent) => {
+          const pastedValue = e?.clipboardData?.getData('Text')
+
+          if (!pastedValue || !/^[0-9]*[.,]?[0-9]*$/.test(pastedValue)) {
+            e.preventDefault()
+          }
+        }
+
+        inputElement.addEventListener('paste', handlePaste)
+        refresh()
+
+        return () => {
+          inputElement.removeEventListener('paste', handlePaste)
+        }
+      }
+    }
+    return undefined
+  }, [refresh])
 
   const config = useMemo<ICanonicalBridgeConfig>(
     () => ({
@@ -89,7 +117,7 @@ export const CanonicalBridge = (props: CanonicalBridgeProps) => {
       >
         <Flex flexDirection="column" justifyContent="center" maxWidth="480px" width="100%">
           <BridgeTransfer />
-          <V1BridgeLink />
+          <V1BridgeLink v1LinkText={v1LinkText} />
         </Flex>
         <BridgeRoutes />
       </CanonicalBridgeProvider>

packages/localization/src/config/translations.json

@@ -3778,5 +3778,6 @@
   "If you've already set this up manually, no action is needed - just proceed with the swap!": "If you've already set this up manually, no action is needed - just proceed with the swap!",
   "MEV Protected": "MEV Protected",
   "Add automatically on BNB Smart Chain: PancakeSwap MEV Guard": "Add automatically on BNB Smart Chain: PancakeSwap MEV Guard",
-  "Dual Incentives are Completed! You will continue to earn trading fees and check the Finished farms tab to find your positions.": "Dual Incentives are Completed! You will continue to earn trading fees and check the Finished farms tab to find your positions."
+  "Dual Incentives are Completed! You will continue to earn trading fees and check the Finished farms tab to find your positions.": "Dual Incentives are Completed! You will continue to earn trading fees and check the Finished farms tab to find your positions.",
+  "V1 Bridge supports bridging to/from Aptos": "V1 Bridge supports bridging to/from Aptos"
 }