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 NFTDomains = ["foundation.app", "zora.co", "opensea.io"];
// more important filetypes to consider:
// midi
// txt, rtf, docx

View File

@ -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);
};

View File

@ -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()}>
<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()}
style={{ margin: 24 }}
>
<div css={[Styles.VERTICAL_CONTAINER, STYLES_CARD]}>
<div css={STYLES_IMAGE_CONTAINER}>
<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 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} />;
}
}
}