Merge pull request #903 from filecoin-project/@martinalong/nft-specific-support

@martinalong/nft specific support

Author: martinalong

common/constants.js

@@ -184,6 +184,8 @@ export const gateways = {
 
 export const hostname = "https://slate.host";
 
+export const NFTDomains = ["foundation.app", "zora.co", "opensea.io"];
+
 // more important filetypes to consider:
 // midi
 // txt, rtf, docx

common/validations.js

@@ -1,4 +1,5 @@
 import * as Strings from "~/common/strings";
+import * as Constants from "~/common/constants";
 
 import JSZip from "jszip";
 
@@ -280,3 +281,10 @@ export const isUnityFile = async (file) => {
     return false;
   }
 };
+
+export const isNFTLink = (file) => {
+  let domain = file?.data?.link?.domain;
+  if (!domain) return false;
+  domain = domain.toLowerCase();
+  return Constants.NFTDomains.includes(domain);
+};

components/core/Link/LinkCard.js

@@ -9,11 +9,6 @@ import { LoaderSpinner } from "~/components/system/components/Loaders";
 import { css } from "@emotion/react";
 
 const STYLES_CARD = css`
-  margin: 24px;
-  ${"" /* height: 100%;
-  width: 100%;
-  max-height: 448px;
-  max-width: 600px; */}
   height: 448px;
   width: 600px;
   max-height: 100%;
@@ -29,6 +24,15 @@ const STYLES_CARD = css`
   }
 `;
 
+const STYLES_FREEFORM_CARD = css`
+  max-height: 90%;
+  max-width: 90%;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: ${Constants.shadow.large};
+  background-color: ${Constants.semantic.bgGrayLight};
+`;
+
 const STYLES_IMAGE_CONTAINER = css`
   width: 100%;
   height: 100%;
@@ -62,15 +66,49 @@ const STYLES_BODY = css`
   -webkit-box-orient: vertical;
   margin-bottom: 8px;
   color: ${Constants.semantic.textGrayDark};
+  max-width: 600px;
 `;
 
-export default function LinkCard({ file }) {
+export default function LinkCard({ file, isNFTLink }) {
   const url = file.url;
   const link = file.data.link;
   const { image, name, body } = link;
 
+  if (isNFTLink) {
+    return (
+      <a
+        css={Styles.LINK}
+        href={url}
+        target="_blank"
+        onClick={(e) => e.stopPropagation()}
+        style={{ margin: 24 }}
+      >
+        <div css={[Styles.VERTICAL_CONTAINER, STYLES_FREEFORM_CARD]}>
+          <div css={STYLES_IMAGE_CONTAINER}>
+            <img src={image} css={Styles.IMAGE_FILL} style={{ maxHeight: "calc(100vh - 200px)" }} />
+          </div>
+          <div css={[Styles.VERTICAL_CONTAINER, STYLES_TEXT_BOX]}>
+            <div css={STYLES_NAME}>
+              <System.H3>{name}</System.H3>
+            </div>
+            <div css={STYLES_BODY}>
+              <System.P1>{body}</System.P1>
+            </div>
+            <LinkTag url={url} fillWidth={false} style={{ color: Constants.semantic.textGray }} />
+          </div>
+        </div>
+      </a>
+    );
+  }
+
   return (
-    <a css={Styles.LINK} href={url} target="_blank" onClick={(e) => e.stopPropagation()}>
+    <a
+      css={Styles.LINK}
+      href={url}
+      target="_blank"
+      onClick={(e) => e.stopPropagation()}
+      style={{ margin: 24 }}
+    >
       <div css={[Styles.VERTICAL_CONTAINER, STYLES_CARD]}>
         <div css={STYLES_IMAGE_CONTAINER}>
           <img src={image} css={Styles.IMAGE_FILL} />

components/core/SlateLinkObject.js

@@ -34,6 +34,8 @@ export default class SlateLinkObject extends React.Component {
     const url = this.props.file.url;
     const link = this.props.file.data.link;
     const { html, iFrameAllowed } = link;
+    const isNFTLink = Validations.isNFTLink(this.props.file);
+
     if (html) {
       return (
         <div
@@ -43,7 +45,7 @@ export default class SlateLinkObject extends React.Component {
           }}
         />
       );
-    } else if (iFrameAllowed && !isMobile) {
+    } else if (iFrameAllowed && !isMobile && !isNFTLink) {
       return (
         <div
           style={{ position: "relative", display: "block", width: "100%", height: "100%" }}
@@ -67,7 +69,7 @@ export default class SlateLinkObject extends React.Component {
         </div>
       );
     } else {
-      return <LinkCard file={this.props.file} />;
+      return <LinkCard file={this.props.file} isNFTLink={isNFTLink} />;
     }
   }
 }