feat: add view on polygonscan link for minted badges (#1241)

* feat: add view on polygonscan link for minted badges

* fix: add margin bottom for mobile view

src/clients/OtterspaceSubgraph.ts

@@ -17,6 +17,7 @@ query Badges($raft_id: String!, $address: Bytes!, $first: Int!, $skip: Int!) {
     createdAt
     status
     statusReason
+    transactionHash
     spec {
       id
       metadata {
@@ -107,8 +108,9 @@ export type OtterspaceBadge = {
   createdAt: number
   status: string
   statusReason: string
-  owner?: { id: string }
   spec: OtterspaceBadgeSpec
+  owner?: { id: string }
+  transactionHash?: string
 }
 
 type BadgeOwnership = { id: string; address: string }

src/components/User/Badges/BadgeDetail.css

@@ -9,6 +9,9 @@
   .BadgeDetail__Container {
     margin-top: 120px;
   }
+  .BadgeDetail__TxLink {
+    margin-bottom: 0;
+  }
 }
 
 .BadgeDetail__Icon {
@@ -45,4 +48,9 @@
 .BadgeDetail__Description {
   max-width: 360px;
   text-align: center;
+  margin-bottom: 16px;
+}
+
+.BadgeDetail__TxLink {
+  margin-bottom: 16px;
 }

src/components/User/Badges/BadgeDetail.tsx

@@ -1,8 +1,10 @@
 import React from 'react'
 
 import { Badge as GovernanceBadge } from '../../../entities/Badges/types'
+import { POLYGONSCAN_BASE_URL } from '../../../entities/Transparency/utils'
 import useFormatMessage from '../../../hooks/useFormatMessage'
 import Time from '../../../utils/date/Time'
+import Link from '../../Common/Typography/Link'
 import Markdown from '../../Common/Typography/Markdown'
 
 import Badge, { BadgeVariant } from './Badge'
@@ -31,6 +33,10 @@ function addNewLinesAfterFirstDot(text: string): string {
   return `${firstPart}\n\n${secondPart}`
 }
 
+function getPolygonscanTxLink(txHash: string) {
+  return POLYGONSCAN_BASE_URL + 'tx/' + txHash
+}
+
 export default function BadgeDetail({ badge }: Props) {
   const t = useFormatMessage()
 
@@ -44,6 +50,14 @@ export default function BadgeDetail({ badge }: Props) {
         </div>
       </div>
       <Markdown className="BadgeDetail__Description">{addNewLinesAfterFirstDot(badge.description)}</Markdown>
+      <Link
+        href={getPolygonscanTxLink(badge.transactionHash)}
+        target="_blank"
+        rel="noreferrer"
+        className="BadgeDetail__TxLink"
+      >
+        {t('component.badge_card.polygonscan_link')}
+      </Link>
     </div>
   )
 }

src/entities/Badges/types.ts

@@ -23,6 +23,7 @@ export type Badge = {
   status: BadgeStatus
   isPastBadge: boolean
   createdAt: number
+  transactionHash: string
 }
 
 export enum ErrorReason {
@@ -77,6 +78,7 @@ export function toGovernanceBadge(otterspaceBadge: OtterspaceBadge) {
     image: getIpfsHttpsLink(image),
     status: toBadgeStatus(otterspaceBadge.status),
     isPastBadge: isPastBadge(otterspaceBadge),
+    transactionHash: otterspaceBadge.transactionHash || '',
   }
   return badge
 }

src/entities/Transparency/utils.ts

@@ -40,15 +40,15 @@ export function aggregateBalances(latestBalances: TokenInWallet[]): AggregatedTo
 }
 
 const ETHERSCAN_BASE_URL = 'https://etherscan.io/'
-const POLYGON_BASE_URL = 'https://polygonscan.com/'
+export const POLYGONSCAN_BASE_URL = 'https://polygonscan.com/'
 
 export function blockExplorerLink(wallet: TokenInWallet): BlockExplorerLink {
   const addressUrl = 'address/' + wallet.address
   switch (wallet.network) {
     case 'Ethereum':
       return { name: 'Etherscan', link: ETHERSCAN_BASE_URL + addressUrl }
     case 'Polygon':
-      return { name: 'Polygonscan', link: POLYGON_BASE_URL + addressUrl }
+      return { name: 'Polygonscan', link: POLYGONSCAN_BASE_URL + addressUrl }
     default:
       logger.error('Unable to get block explorer link', { wallet: wallet })
       return { name: '', link: '/' }

src/intl/en.json

@@ -706,7 +706,8 @@
       "size": "Size"
     },
     "badge_card": {
-      "mint_date": "Minted {at}"
+      "mint_date": "Minted {at}",
+      "polygonscan_link": "View transaction on Polygonscan"
     },
     "snapshot_redirect_button_label": "Vote on Snapshot",
     "reaction_icon": {