fix: display relevant link in Order Submitted modal (#2788)

cowprotocol · Jul 6, 2023 · b683402 · b683402
1 parent fe875e1
commit b683402
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 26 deletions.
diff --git a/src/common/pure/OrderSubmittedContent/index.cosmos.tsx b/src/common/pure/OrderSubmittedContent/index.cosmos.tsx
@@ -1,11 +1,11 @@
-import { SupportedChainId } from '@cowprotocol/cow-sdk'
-
 import styled from 'styled-components/macro'
 
 import { OrderSubmittedContent } from './index'
 
 const defaultProps = {
-  chainId: SupportedChainId.MAINNET,
+  chainId: 1,
+  account: '0x0001',
+  isSafeWallet: false,
   hash: '0x62baf4be8adec4766d26a2169999cc170c3ead90ae11a28d658e6d75edc05b185b0abe214ab7875562adee331deff0fe1912fe42644d2bb7',
   onDismiss() {
     console.log('onDismiss')

diff --git a/src/common/pure/OrderSubmittedContent/index.tsx b/src/common/pure/OrderSubmittedContent/index.tsx
@@ -4,8 +4,8 @@ import { Trans } from '@lingui/macro'
 import styled from 'styled-components/macro'
 
 import { ButtonPrimary } from 'legacy/components/Button'
-import { ExternalLink } from 'legacy/theme'
-import { getEtherscanLink as getExplorerLink } from 'legacy/utils'
+import { EnhancedTransactionLink } from 'legacy/components/EnhancedTransactionLink'
+import { HashType } from 'legacy/state/enhancedTransactions/reducer'
 
 import AnimatedConfirmation from 'common/pure/AnimatedConfirmation'
 
@@ -31,20 +31,28 @@ const ActionButton = styled(ButtonPrimary)`
 export interface OrderSubmittedContentProps {
   onDismiss(): void
   chainId: SupportedChainId
+  isSafeWallet: boolean
+  account: string
   hash: string
 }
 
-export function OrderSubmittedContent({ chainId, hash, onDismiss }: OrderSubmittedContentProps) {
+export function OrderSubmittedContent({ chainId, account, isSafeWallet, hash, onDismiss }: OrderSubmittedContentProps) {
+  const tx = {
+    hash,
+    hashType: isSafeWallet ? HashType.GNOSIS_SAFE_TX : HashType.ETHEREUM_TX,
+    safeTransaction: {
+      safeTxHash: hash,
+      safe: account,
+    },
+  }
+
   return (
     <Wrapper>
       <AnimatedConfirmation />
       <Caption>
         <Trans>Order Submitted</Trans>
       </Caption>
-      {/*TODO: unify and fix explorer link. Refs: ExplorerLink, DisplayLink, EnhancedTransactionLink*/}
-      <ExternalLink href={getExplorerLink(chainId, hash, 'transaction')}>
-        <Trans>View on Explorer ↗</Trans>
-      </ExternalLink>
+      <EnhancedTransactionLink chainId={chainId} tx={tx} />
       <ActionButton onClick={onDismiss}>
         <Trans>Close</Trans>
       </ActionButton>

diff --git a/src/legacy/components/EnhancedTransactionLink/index.tsx b/src/legacy/components/EnhancedTransactionLink/index.tsx
@@ -1,29 +1,30 @@
-import { ExplorerLink } from 'legacy/components/ExplorerLink'
-import { EnhancedTransactionDetails, HashType } from 'legacy/state/enhancedTransactions/reducer'
+import { SupportedChainId } from '@cowprotocol/cow-sdk'
 
-import { useGnosisSafeInfo, useWalletInfo } from 'modules/wallet'
+import { ExplorerLink } from 'legacy/components/ExplorerLink'
+import { HashType } from 'legacy/state/enhancedTransactions/reducer'
 
 import { SafeWalletLink } from 'common/pure/SafeWalletLink'
 
 interface Props {
-  tx: EnhancedTransactionDetails
+  chainId: SupportedChainId
+  tx: {
+    hash: string
+    hashType: HashType
+    safeTransaction?: { safe: string; safeTxHash: string }
+  }
 }
 
 /**
  * Creates a link to the relevant explorer: Etherscan, GP Explorer or Blockscout, or Gnosis Safe web if its a Gnosis Safe Transaction
  * @param props
  */
 export function EnhancedTransactionLink(props: Props) {
-  const { tx } = props
-  const { chainId } = useWalletInfo()
-  const gnosisSafeInfo = useGnosisSafeInfo()
+  const { tx, chainId } = props
 
   if (tx.hashType === HashType.GNOSIS_SAFE_TX) {
     const safeTx = tx.safeTransaction
 
-    if (!chainId || !safeTx || !gnosisSafeInfo) {
-      return null
-    }
+    if (!safeTx) return null
 
     return <SafeWalletLink chainId={chainId} safeTransaction={safeTx} />
   } else {

diff --git a/src/modules/trade/containers/TradeConfirmModal/index.tsx b/src/modules/trade/containers/TradeConfirmModal/index.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 
 import { isSupportedChain } from 'legacy/utils/supportedChainId'
 
-import { useWalletInfo } from 'modules/wallet'
+import { useIsSafeWallet, useWalletInfo } from 'modules/wallet'
 
 import { CowModal } from 'common/pure/Modal'
 import { OrderSubmittedContent } from 'common/pure/OrderSubmittedContent'
@@ -21,11 +21,12 @@ export interface TradeConfirmModalProps {
 export function TradeConfirmModal(props: TradeConfirmModalProps) {
   const { children } = props
 
-  const { chainId } = useWalletInfo()
+  const { chainId, account } = useWalletInfo()
+  const isSafeWallet = useIsSafeWallet()
   const { isOpen, pendingTrade, transactionHash, error } = useAtomValue(tradeConfirmStateAtom)
   const { onDismiss } = useTradeConfirmActions()
 
-  if (!isSupportedChain(chainId)) return null
+  if (!isSupportedChain(chainId) || !account) return null
 
   return (
     <CowModal isOpen={isOpen} onDismiss={onDismiss}>
@@ -40,7 +41,15 @@ export function TradeConfirmModal(props: TradeConfirmModalProps) {
 
         // TODO: use <TransactionSubmittedContent/> for Swap
         if (transactionHash) {
-          return <OrderSubmittedContent chainId={chainId} onDismiss={onDismiss} hash={transactionHash} />
+          return (
+            <OrderSubmittedContent
+              chainId={chainId}
+              account={account}
+              isSafeWallet={isSafeWallet}
+              onDismiss={onDismiss}
+              hash={transactionHash}
+            />
+          )
         }
 
         return children

diff --git a/src/pages/Claim/ClaimingStatus.tsx b/src/pages/Claim/ClaimingStatus.tsx
@@ -152,11 +152,11 @@ export default function ClaimingStatus({ handleChangeAccount }: ClaimNavProps) {
           </p>
         </AttemptFooter>
       )}
-      {isSubmitted && chainId && lastClaimTx?.hash && <EnhancedTransactionLink tx={lastClaimTx} />}
+      {isSubmitted && chainId && lastClaimTx?.hash && <EnhancedTransactionLink chainId={chainId} tx={lastClaimTx} />}
 
       {isFailure && (
         <>
-          {chainId && lastClaimTx?.hash && <EnhancedTransactionLink tx={lastClaimTx} />}
+          {chainId && lastClaimTx?.hash && <EnhancedTransactionLink chainId={chainId} tx={lastClaimTx} />}
           <AttemptFooter>
             <p>The claim transaction failed. Please check the network parameters and try again.</p>
           </AttemptFooter>