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

@martinalong/nft specific support
This commit is contained in:
martinalong 2021-08-30 19:44:07 -07:00 committed by GitHub
commit cc509e3af7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 59 additions and 9 deletions

View File

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

View File

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

View File

@ -9,11 +9,6 @@ import { LoaderSpinner } from "~/components/system/components/Loaders";
import { css } from "@emotion/react"; import { css } from "@emotion/react";
const STYLES_CARD = css` const STYLES_CARD = css`
margin: 24px;
${"" /* height: 100%;
width: 100%;
max-height: 448px;
max-width: 600px; */}
height: 448px; height: 448px;
width: 600px; width: 600px;
max-height: 100%; 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` const STYLES_IMAGE_CONTAINER = css`
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -62,15 +66,49 @@ const STYLES_BODY = css`
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
margin-bottom: 8px; margin-bottom: 8px;
color: ${Constants.semantic.textGrayDark}; color: ${Constants.semantic.textGrayDark};
max-width: 600px;
`; `;
export default function LinkCard({ file }) { export default function LinkCard({ file, isNFTLink }) {
const url = file.url; const url = file.url;
const link = file.data.link; const link = file.data.link;
const { image, name, body } = 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 ( 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.VERTICAL_CONTAINER, STYLES_CARD]}>
<div css={STYLES_IMAGE_CONTAINER}> <div css={STYLES_IMAGE_CONTAINER}>
<img src={image} css={Styles.IMAGE_FILL} /> <img src={image} css={Styles.IMAGE_FILL} />

View File

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