From 54a48dcffc5dfe72562970d19edefa0261e65f1b Mon Sep 17 00:00:00 2001
From: lemu <github@lemu.sh>
Date: Tue, 5 Sep 2023 18:03:43 -0300
Subject: [PATCH] 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          |  4 +++-
 src/components/User/Badges/BadgeDetail.css |  8 ++++++++
 src/components/User/Badges/BadgeDetail.tsx | 14 ++++++++++++++
 src/entities/Badges/types.ts               |  2 ++
 src/entities/Transparency/utils.ts         |  4 ++--
 src/intl/en.json                           |  3 ++-
 6 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/clients/OtterspaceSubgraph.ts b/src/clients/OtterspaceSubgraph.ts
index 6742a5cd5..e8815612f 100644
--- a/src/clients/OtterspaceSubgraph.ts
+++ b/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 }
diff --git a/src/components/User/Badges/BadgeDetail.css b/src/components/User/Badges/BadgeDetail.css
index 777f74f9e..1c17f0667 100644
--- a/src/components/User/Badges/BadgeDetail.css
+++ b/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;
 }
diff --git a/src/components/User/Badges/BadgeDetail.tsx b/src/components/User/Badges/BadgeDetail.tsx
index 1c741df48..631bc7c1c 100644
--- a/src/components/User/Badges/BadgeDetail.tsx
+++ b/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>
   )
 }
diff --git a/src/entities/Badges/types.ts b/src/entities/Badges/types.ts
index 155655457..9025ee827 100644
--- a/src/entities/Badges/types.ts
+++ b/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
 }
diff --git a/src/entities/Transparency/utils.ts b/src/entities/Transparency/utils.ts
index 3d76cb7f3..1319be450 100644
--- a/src/entities/Transparency/utils.ts
+++ b/src/entities/Transparency/utils.ts
@@ -40,7 +40,7 @@ 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
@@ -48,7 +48,7 @@ export function blockExplorerLink(wallet: TokenInWallet): BlockExplorerLink {
     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: '/' }
diff --git a/src/intl/en.json b/src/intl/en.json
index dd84fada5..ea91ed4db 100644
--- a/src/intl/en.json
+++ b/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": {