add links to opensea on nft page

baofinance · May 18, 2022 · 82830ac · 82830ac
1 parent c932f38
commit 82830ac
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 5 deletions.
diff --git a/src/bao/lib/config.ts b/src/bao/lib/config.ts
@@ -24,6 +24,9 @@ export default {
     DEAD: '0x000000000000000000000000000000000000dead',
     //Synths
     baoUSD: '0x7945b0A6674b175695e5d1D08aE1e6F13744Abb0',
+    // NFTs
+    baoElder: '0x39c1f6e78c5200674c84c46dc5bf85ba9f6f630a',
+    baoSwap: '0x36e58282a053f888881cdaa4ba4f44dc7af15024',
   },
   contracts: {
     bao: {

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -125,7 +125,6 @@ const StyledButton = styled.button.attrs((attrs: StyledButtonProps) => ({
 	outline: none;
 	padding-left: ${(props) => props.padding}px;
 	padding-right: ${(props) => props.padding}px;
-	pointer-events: ${(props) => (!props.disabled ? undefined : 'none')};
 	width: ${(props) => (props.width ? props.width : '100%')};
 	opacity: ${(props) => (props.disabled ? 0.5 : 1)};
 	position: relative;
@@ -144,13 +143,18 @@ const StyledButton = styled.button.attrs((attrs: StyledButtonProps) => ({
 			${(props) => -props.theme.spacing[3]}px;
 	}
 
+	&:hover {
+		background: ${(props) => props.theme.color.primary[300]};
+		cursor: pointer;
+	}
+
 	&:hover,
+	&:focus,
 	&:active {
-		background-color: ${(props) => props.theme.color.primary[300]};
-		color: ${(props) => props.theme.color.text[100]};
 		cursor: ${(props) =>
 			props.disabled ? 'not-allowed' : 'pointer'} !important;
 	}
+
 `
 
 const StyledLink = styled(Link)`

diff --git a/src/views/NFT/NFT.tsx b/src/views/NFT/NFT.tsx
@@ -9,7 +9,7 @@ import {
 	mintBaoSwap,
 	mintElder,
 } from 'bao/utils'
-import { SubmitButton } from 'components/Button/Button'
+import { Button, SubmitButton } from 'components/Button/Button'
 import Label from 'components/Label'
 import Page from 'components/Page'
 import PageHeader from 'components/PageHeader'
@@ -22,7 +22,7 @@ import { Card, Col, Container, Row } from 'react-bootstrap'
 import { Route, useRouteMatch } from 'react-router-dom'
 import { addresses as elderAddresses } from './components/baoElderWL.json'
 import { addresses as baoSwapAddresses } from './components/baoSwapWL.json'
-import { StyledInfo, StyledWrapper } from './components/styles'
+import { StyledInfo } from './components/styles'
 
 const NFT: React.FC = () => {
 	const { account } = useWeb3React()
@@ -117,6 +117,14 @@ const NFT: React.FC = () => {
 												Checking Eligibility...
 											</SubmitButton>
 										)}
+										{isElderClaimed ? (
+											<Button
+												href={`https://opensea.io/${account}?search[sortBy]=LISTING_DATE&search[query]=BaoElder}`}
+												text="View on OpenSea"
+											/>
+										) : (
+											<Button disabled={true} text="View on OpenSea" />
+										)}
 									</>
 								</Card.Footer>
 							</Card>
@@ -181,6 +189,14 @@ const NFT: React.FC = () => {
 												Checking Eligibility...
 											</SubmitButton>
 										)}
+										{isElderClaimed ? (
+											<Button
+												href={`https://opensea.io/${account}?search[sortBy]=LISTING_DATE&search[query]=BaoGnosis}`}
+												text="View on OpenSea"
+											/>
+										) : (
+											<Button disabled={true} text="View on OpenSea" />
+										)}
 									</>
 								</Card.Footer>
 							</Card>