Fix Gnosis Safe claiming Workflow (#2277)

* Fix explorer link

* Create new tx link component

src/custom/components/EnhancedTransactionLink/index.tsx

@@ -0,0 +1,32 @@
+import { ExplorerDataType } from 'utils/getExplorerLink'
+
+import { ExplorerLink } from 'components/ExplorerLink'
+import { GnosisSafeLink } from 'components/AccountDetails/Transaction/StatusDetails'
+
+import { EnhancedTransactionDetails, HashType } from 'state/enhancedTransactions/reducer'
+import { useWalletInfo } from 'hooks/useWalletInfo'
+
+interface Props {
+  tx: EnhancedTransactionDetails
+}
+
+/**
+ * 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, gnosisSafeInfo } = useWalletInfo()
+
+  if (tx.hashType === HashType.GNOSIS_SAFE_TX) {
+    const safeTx = tx.safeTransaction
+
+    if (!chainId || !safeTx || !gnosisSafeInfo) {
+      return null
+    }
+
+    return <GnosisSafeLink chainId={chainId} safeTransaction={safeTx} gnosisSafeThreshold={gnosisSafeInfo.threshold} />
+  } else {
+    return <ExplorerLink id={tx.hash} type={ExplorerDataType.TRANSACTION} />
+  }
+}

src/custom/pages/Claim/ClaimingStatus.tsx

@@ -1,13 +1,12 @@
 import { Trans } from '@lingui/macro'
 import { ConfirmOrLoadingWrapper, ConfirmedIcon, AttemptFooter, CowSpinner } from 'pages/Claim/styled'
-import { ExternalLink } from 'theme'
 import { ClaimStatus } from 'state/claim/actions'
 import { useClaimState } from 'state/claim/hooks'
 import { useActiveWeb3React } from 'hooks/web3'
 import CowProtocolLogo from 'components/CowProtocolLogo'
-import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 import { useAllClaimingTransactions } from 'state/enhancedTransactions/hooks'
 import { useMemo } from 'react'
+import { EnhancedTransactionLink } from 'components/EnhancedTransactionLink'
 
 export default function ClaimingStatus() {
   const { chainId } = useActiveWeb3React()
@@ -66,14 +65,7 @@ export default function ClaimingStatus() {
           </p>
         </AttemptFooter>
       )}
-      {isSubmitted && chainId && lastClaimTx?.hash && (
-        <ExternalLink
-          href={getExplorerLink(chainId, lastClaimTx.hash, ExplorerDataType.TRANSACTION)}
-          style={{ zIndex: 99, marginTop: '20px' }}
-        >
-          <Trans>View transaction on Explorer</Trans>
-        </ExternalLink>
-      )}
+      {isSubmitted && chainId && lastClaimTx?.hash && <EnhancedTransactionLink tx={lastClaimTx} />}
     </ConfirmOrLoadingWrapper>
   )
 }