Skip to content

Commit cc509e3

Browse files
authored
Merge pull request #903 from filecoin-project/@martinalong/nft-specific-support
@martinalong/nft specific support
2 parents 45d03ef + 59c8f95 commit cc509e3

File tree

4 files changed

+59
-9
lines changed

4 files changed

+59
-9
lines changed

common/constants.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,8 @@ export const gateways = {
184184

185185
export const hostname = "https://slate.host";
186186

187+
export const NFTDomains = ["foundation.app", "zora.co", "opensea.io"];
188+
187189
// more important filetypes to consider:
188190
// midi
189191
// txt, rtf, docx

common/validations.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import * as Strings from "~/common/strings";
2+
import * as Constants from "~/common/constants";
23

34
import JSZip from "jszip";
45

@@ -280,3 +281,10 @@ export const isUnityFile = async (file) => {
280281
return false;
281282
}
282283
};
284+
285+
export const isNFTLink = (file) => {
286+
let domain = file?.data?.link?.domain;
287+
if (!domain) return false;
288+
domain = domain.toLowerCase();
289+
return Constants.NFTDomains.includes(domain);
290+
};

components/core/Link/LinkCard.js

Lines changed: 45 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,6 @@ import { LoaderSpinner } from "~/components/system/components/Loaders";
99
import { css } from "@emotion/react";
1010

1111
const STYLES_CARD = css`
12-
margin: 24px;
13-
${"" /* height: 100%;
14-
width: 100%;
15-
max-height: 448px;
16-
max-width: 600px; */}
1712
height: 448px;
1813
width: 600px;
1914
max-height: 100%;
@@ -29,6 +24,15 @@ const STYLES_CARD = css`
2924
}
3025
`;
3126

27+
const STYLES_FREEFORM_CARD = css`
28+
max-height: 90%;
29+
max-width: 90%;
30+
border-radius: 8px;
31+
overflow: hidden;
32+
box-shadow: ${Constants.shadow.large};
33+
background-color: ${Constants.semantic.bgGrayLight};
34+
`;
35+
3236
const STYLES_IMAGE_CONTAINER = css`
3337
width: 100%;
3438
height: 100%;
@@ -62,15 +66,49 @@ const STYLES_BODY = css`
6266
-webkit-box-orient: vertical;
6367
margin-bottom: 8px;
6468
color: ${Constants.semantic.textGrayDark};
69+
max-width: 600px;
6570
`;
6671

67-
export default function LinkCard({ file }) {
72+
export default function LinkCard({ file, isNFTLink }) {
6873
const url = file.url;
6974
const link = file.data.link;
7075
const { image, name, body } = link;
7176

77+
if (isNFTLink) {
78+
return (
79+
<a
80+
css={Styles.LINK}
81+
href={url}
82+
target="_blank"
83+
onClick={(e) => e.stopPropagation()}
84+
style={{ margin: 24 }}
85+
>
86+
<div css={[Styles.VERTICAL_CONTAINER, STYLES_FREEFORM_CARD]}>
87+
<div css={STYLES_IMAGE_CONTAINER}>
88+
<img src={image} css={Styles.IMAGE_FILL} style={{ maxHeight: "calc(100vh - 200px)" }} />
89+
</div>
90+
<div css={[Styles.VERTICAL_CONTAINER, STYLES_TEXT_BOX]}>
91+
<div css={STYLES_NAME}>
92+
<System.H3>{name}</System.H3>
93+
</div>
94+
<div css={STYLES_BODY}>
95+
<System.P1>{body}</System.P1>
96+
</div>
97+
<LinkTag url={url} fillWidth={false} style={{ color: Constants.semantic.textGray }} />
98+
</div>
99+
</div>
100+
</a>
101+
);
102+
}
103+
72104
return (
73-
<a css={Styles.LINK} href={url} target="_blank" onClick={(e) => e.stopPropagation()}>
105+
<a
106+
css={Styles.LINK}
107+
href={url}
108+
target="_blank"
109+
onClick={(e) => e.stopPropagation()}
110+
style={{ margin: 24 }}
111+
>
74112
<div css={[Styles.VERTICAL_CONTAINER, STYLES_CARD]}>
75113
<div css={STYLES_IMAGE_CONTAINER}>
76114
<img src={image} css={Styles.IMAGE_FILL} />

components/core/SlateLinkObject.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ export default class SlateLinkObject extends React.Component {
3434
const url = this.props.file.url;
3535
const link = this.props.file.data.link;
3636
const { html, iFrameAllowed } = link;
37+
const isNFTLink = Validations.isNFTLink(this.props.file);
38+
3739
if (html) {
3840
return (
3941
<div
@@ -43,7 +45,7 @@ export default class SlateLinkObject extends React.Component {
4345
}}
4446
/>
4547
);
46-
} else if (iFrameAllowed && !isMobile) {
48+
} else if (iFrameAllowed && !isMobile && !isNFTLink) {
4749
return (
4850
<div
4951
style={{ position: "relative", display: "block", width: "100%", height: "100%" }}
@@ -67,7 +69,7 @@ export default class SlateLinkObject extends React.Component {
6769
</div>
6870
);
6971
} else {
70-
return <LinkCard file={this.props.file} />;
72+
return <LinkCard file={this.props.file} isNFTLink={isNFTLink} />;
7173
}
7274
}
7375
}

0 commit comments

Comments
 (0)