Dain/bump nft components and hardcode description and ogImg.

components/doge-cards.js

@@ -1,16 +1,13 @@
 import Link from 'next/link'
-import { NFTPreview } from "@derpyvision/doge-nft-components";
-
+import { NFTPreview } from "@zoralabs/nft-components";
 import { NFT_LIST } from '../lib/constants'
 
 const DogeCard = (props) => {
  return (
- <Link passHref href={`/doge/${props.doge.slug}`}>
- <a className="doge-card_wrapper shadow">
- <div className="doge-card_wrapper-inner">
- <NFTPreview className="doge-card" contract='0xabEFBc9fD2F806065b4f3C237d4b59D9A97Bcac7' showPerpetual={false} id={props.doge.id} />
- </div>
- </a>
+ <Link href={`/doge/${props.doge.slug}`} className="doge-card_wrapper shadow">
+ <div className="doge-card_wrapper-inner">
+ <NFTPreview className="doge-card" contract='0xabEFBc9fD2F806065b4f3C237d4b59D9A97Bcac7' showPerpetual={false} id={props.doge.id} />
+ </div>
  </Link>
  )
 }

components/doge-nft-card.js

@@ -3,12 +3,10 @@ import { NFTPreview } from "@derpyvision/doge-nft-components";
 
 const DogeCard = (props) => {
  return (
- <Link href={`/doge/${props.doge.slug}`}>
- <a className="doge-card_wrapper">
- <div className="doge-card_wrapper-inner">
- <NFTPreview id={props.doge.id} />
- </div>
- </a>
+ <Link href={`/doge/${props.doge.slug}`} className="doge-card_wrapper">
+ <div className="doge-card_wrapper-inner">
+ <NFTPreview id={props.doge.id} />
+ </div>
  </Link>
  )
 }

components/doge-sidebar.js

@@ -19,11 +19,11 @@ const DogeSidebar = () => {
  <p className="doge-sidebar_intro" dangerouslySetInnerHTML={{ __html: INTRO_COPY }} />
  </div>
  <div className="doge-sidebar_ui">
- <Link href={'/charities'}>
- <a className="lozenge-button doge-sidebar_history-button">Charities</a>
+ <Link href={'/charities'} className="lozenge-button doge-sidebar_history-button">
+ Charities
  </Link>
- <Link href={'/doge-history'}>
- <a className="lozenge-button doge-sidebar_history-button">Doge History</a>
+ <Link href={'/doge-history'} className="lozenge-button doge-sidebar_history-button">
+ Doge History
  </Link>
  </div>
  <a className="doge-footer_blog-link" href="https://kabochan.blog.jp/" target="_blank">

components/go-home.js

@@ -5,11 +5,9 @@ import Stroke from '../public/svg/brush-stroke.svg'
 const GoHome = () => {
  return (
  <div className="go-home_wrapper">
- <Link href="/">
- <a className="go-home_link">
- <DogeHead/>
- <span className="go-home_cta lozenge-button">Go Home</span>
- </a>
+ <Link href="/" className="go-home_link">
+ <DogeHead/>
+ <span className="go-home_cta lozenge-button">Go Home</span>
  </Link>
  <div className="go-home_paint-wrapper">
  <Stroke className="go-home_paint" />

lib/constants.js

@@ -3,55 +3,71 @@ export const NFT_LIST = [
  id: '3366',
  slug: 'doge',
  title: 'Doge',
+ description: 'The original image that started it all. This photo of the Shiba Inu “Kabosu” was taken by her owner Atsuko Sato on February 13th, 2010. After sharing it to her personal blog alongside the series of other famous images under the title “Taking a walk with Kabosu-chan,” these photos went on to kickstart the Doge meme and have circulated the web ever since — none more iconic than this picture.',
+ image: 'https://ipfs.io/ipfs/bafybeiejv7o3zqcizio3jpcc5geucdvci73klmf7kazyzpvyp5qn64ny4a',
  auctionState: true,
  allowOffer: false
  },
  {
  id: '3367',
  slug: 'feisty-doge',
  title: 'Feisty Doge',
+ description: 'While not as well-known as some Doge images, this photo of the Shiba Inu “Kabosu” was taken by her owner Atsuko Sato on February 13th, 2010. Sato shared this image and several others to her personal blog under the title “Taking a walk with Kabosu-chan,” which went on to become one of the most iconic memes of all time.',
+ image: 'https://ipfs.io/ipfs/bafybeialp5jtrdgrn6febhd3q7i2ebjwmwchom7jgbmcizar6eabd6a6tq',
  auctionState: true,
  allowOffer: true
  },
  {
  id: '3368',
  slug: 'yelling-doge',
  title: 'Yelling Doge',
+ description: 'Originally captured on February 13th, 2010, this photo of the Shiba Inu “Kabosu” was taken by her owner Atsuko Sato and shared on her personal blog before going viral. As one of the most iconic images of Doge, “Yelling Doge,” as this picture is sometimes called, has been used in thousands upon thousands of memes over the last decade all around the internet.',
+ image: 'https://ipfs.io/ipfs/bafybeifr6ouzsvtt3nwofzxgra2fqi2wmpx4355sjb35gurff6k5xk4gmy',
  auctionState: true,
  allowOffer: true
  },
  {
  id: '3369',
  slug: 'curious-doge',
  title: 'Curious Doge',
+ description: 'One of the many classic photographs of the Shiba Inu “Kabosu,” this image was taken by her owner Atsuko Sato on February 13th, 2010, before going on to become an iconic meme throughout the 2010s. Snapped back when Kabosu was just a few years old during an impromptu photoshoot, this picture captures a rare side of the beloved Shiba behind the Doge meme.',
+ image: 'https://ipfs.io/ipfs/bafybeicxvsr2uevlw34rwrd22ewujhjmrdlktbwx3jijvmcjjgfibv5qe4',
  auctionState: true,
  allowOffer: true
  },
  {
  id: '3370',
  slug: 'angry-doge',
  title: 'Angry Doge',
+ description: 'Perhaps the second most famous image of Doge used in memes, this photo of the Shiba Inu “Kabosu” was taken by owner Atsuko Sato on February 13th, 2010. Over the years, “Angry Doge” has been a popular character in ironic Doge memes in communities, like Reddit’s r/DogeLore, where it’s been photoshopped into countless meme comics.',
+ image: 'https://ipfs.io/ipfs/bafybeiau72b3qgkj4lkqd4ipzux3y7t77rap23k2i7yrdqtqy7x63k2pvm', 
  auctionState: true,
  allowOffer: true
  },
  {
  id: '3371',
  slug: 'shocked-doge',
  title: 'Shocked Doge',
+ description: 'Revealing a more candid side of Doge, this image from the original photographs captured by Kabosu’s owner Atsuko Sato in February 2010 has been used in many memes over the last decade, commonly known as “Shocked Doge.”',
+ image: 'https://ipfs.io/ipfs/bafybeia4rutog45r5a4uw3x2mnsetptxvu2qdvnitgiqhh4rk5fx2gnnqe',
  auctionState: true,
  allowOffer: true
  },
  {
  id: '3372',
  slug: 'sad-doge',
  title: 'Sad Doge',
+ description: 'A commonly known fact about Shiba Inus is their squishy faces and fluffy neckrolls, and Doge is no different IRL. This photo of the Shiba “Kabosu” was taken by her owner Atsuko Sato in February 2010, subsequently kicking off the Doge meme in the years to come. Since then, Kabosu has become the most well-known Shibe on the entire internet.',
+ image: 'https://ipfs.io/ipfs/bafybeig5mpzydrsbdszfnrkipsdl6wpii4bjh3ztsj7iw7ogknygmsqtfq', 
  auctionState: true,
  allowOffer: true
  },
  {
  id: '3373',
  slug: 'cuddly-doge',
  title: 'Cuddly Doge',
+ description: 'As the cats of the dog world, it’s quite rare for a Shiba Inu to roll over for belly rubs, but even more rare to see the famous Doge doing so. Originally captured by her owner Atsuko Sato in February 2010, this image of Kabosu shows a rare side of the beloved meme icon in cuddly fashion before she became the most famous dog to ever grace the web.',
+ image: 'https://ipfs.io/ipfs/bafybeigdyfekcd5lpxbrnbkup2blq6esfni3q54rnu2oqw3tvdp6m3nrja',
  auctionState: true,
  allowOffer: true
  }

package.json

@@ -12,18 +12,18 @@
  "author": "",
  "license": "ISC",
  "dependencies": {
- "@derpyvision/doge-nft-components": "^1.2.12",
  "@emotion/react": "^11.4.0",
  "@svgr/webpack": "^5.5.0",
  "@types/react": "^17.0.5",
- "@zoralabs/nft-components": "1.2.1",
+ "@zoralabs/nft-components": "^1.2.1",
  "@zoralabs/nft-hooks": "^1.2.1",
  "babel-plugin-inline-react-svg": "^2.0.1",
  "granim": "^2.0.0",
+ "lodash": "^4.17.21",
  "merge-anything": "^4.0.1",
- "next": "^10.2.0",
- "react": "^17.0.2",
- "react-dom": "^17.0.2",
+ "next": "^13.5.3",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
  "react-youtube": "^7.13.1",
  "rm": "^0.1.8",
  "sass": "^1.32.12",

pages/doge/[id].js

@@ -1,8 +1,7 @@
 import Head from "../../components/head";
 import GoHome from "../../components/go-home";
 import find from "lodash/find";
-import { NFTFullPage, MediaConfiguration, FullComponents, NFTDataProvider } from "@derpyvision/doge-nft-components";
-import { MediaFetchAgent, Networks } from "@zoralabs/nft-hooks";
+import { NFTFullPage, MediaConfiguration } from "@zoralabs/nft-components";
 import DogeFooter from "../../components/doge-footer";
 import { NFT_LIST } from "../../lib/constants";
 
@@ -34,30 +33,13 @@ const Doge = ({ post }) => {
  showPerpetual: false,
  refreshInterval: false,
  };
-
- // console.log(nftData?.description)
-
- /*
- description
- : 
- "One of the many classic photographs of the Shiba Inu “Kabosu,” this image was taken by her owner Atsuko Sato on February 13th, 2010, before going on to become an iconic meme throughout the 2010s. Snapped back when Kabosu was just a few years old during an impromptu photoshoot, this picture captures a rare side of the beloved Shiba behind the Doge meme."
- mimeType
- : 
- "image/png"
- name
- : 
- "Curious Doge"
- */
-
  return (
  <>
- {/*
  <Head
  title={post.title}
- description={nftData.description}
- ogImage={`${nftData.zoraNFT.contentURI}`}
+ description={post?.description}
+ ogImage={post?.image}
  />
- */}
  <GoHome />
  <article
  className={`doge-nft_wrapper`}
@@ -87,26 +69,9 @@ export async function getStaticPaths() {
 
 export async function getStaticProps({ params }) {
  const post = find(NFT_LIST, { slug: params.id });
- const fetcher = new MediaFetchAgent(Networks.MAINNET);
-
- // const nft = await fetcher.loadZNFTData(post.id);
- // const metadata = await fetcher.fetchIPFSMetadata(nft.nft.metadataURI);
- /*
- console.log(nft)
-
- function prepareJson(json) {
- return JSON.parse(JSON.stringify(json));
- }
-
- const nftData = prepareJson({
- ...nft,
- ...metadata,
- });
- */
  return {
  props: {
  post,
- // nftData,
  },
  };
 }

scss/_doge-cards.scss

@@ -115,6 +115,10 @@
  * {
  font-family: var(--font)!important;
  }
+ > div:first-child {
+ width: 100%;
+ height: 100%;
+ }
  .media-thumnail-wrapper {
  aspect-ratio: 690 / 525;
  }