| 6 | "": "let { contentId, accountId, onBuy, onConnect, loading, basic } = props;\\\\n\\\\nif (!contentId) contentId = \\\\\\\"1694994895662977529\\\\\\\"; // for demo\\\\n\\\\nfunction getContentById(contentId) {\\\\n const S3_STORAGE_URL =\\\\n \\\\\\\"https://miscellaneous.s3-website.fr-par.scw.cloud/web3hackfest-2023\\\\\\\";\\\\n\\\\n const contents = [\\\\n {\\\\n id: \\\\\\\"1694994895662977529\\\\\\\",\\\\n blurred: S3_STORAGE_URL + \\\\\\\"/MrConCreator/0001_blurred.png\\\\\\\",\\\\n original: S3_STORAGE_URL + \\\\\\\"/MrConCreator/0001.png\\\\\\\",\\\\n },\\\\n {\\\\n id: \\\\\\\"1694995203663290832\\\\\\\",\\\\n blurred: S3_STORAGE_URL + \\\\\\\"/MrConCreator/0002_blurred.png\\\\\\\",\\\\n original: S3_STORAGE_URL + \\\\\\\"/MrConCreator/0002.png\\\\\\\",\\\\n },\\\\n {\\\\n id: \\\\\\\"1694995269547438149\\\\\\\",\\\\n blurred: S3_STORAGE_URL + \\\\\\\"/MrConCreator/0003_blurred.png\\\\\\\",\\\\n original: S3_STORAGE_URL + \\\\\\\"/MrConCreator/0003.png\\\\\\\",\\\\n },\\\\n {\\\\n id: \\\\\\\"1694995303642939408\\\\\\\",\\\\n blurred: S3_STORAGE_URL + \\\\\\\"/MrConCreator/0004_blurred.png\\\\\\\",\\\\n original: S3_STORAGE_URL + \\\\\\\"/MrConCreator/0004.png\\\\\\\",\\\\n },\\\\n ];\\\\n\\\\n return contents.find((x) => x.id === contentId);\\\\n}\\\\n\\\\nconst content = getContentById(contentId);\\\\n\\\\nif (!content) {\\\\n return <></>;\\\\n}\\\\n\\\\nconst isPurchased = accountId\\\\n ? Near.view(\\\\n \\\\\\\"app.paywall.near\\\\\\\",\\\\n \\\\\\\"purchased\\\\\\\",\\\\n {\\\\n account_id: accountId,\\\\n content_id: contentId,\\\\n },\\\\n \\\\\\\"final\\\\\\\",\\\\n true\\\\n )\\\\n : false;\\\\n\\\\nconst price = \\\\\\\"0.5\\\\\\\";\\\\n\\\\nconst Wrapper = styled.div`\\\\n .content-blur-wrapper {\\\\n overflow: hidden;\\\\n width: 100%;\\\\n margin-top: 12px;\\\\n border-radius: 16px;\\\\n border: 1px solid rgb(207, 217, 222);\\\\n aspect-ratio: 1.777;\\\\n cursor: default;\\\\n position: relative;\\\\n }\\\\n\\\\n .content-wrapper-basic {\\\\n overflow: hidden;\\\\n width: 100%;\\\\n border-radius: 4px;\\\\n aspect-ratio: 1.777;\\\\n position: relative;\\\\n }\\\\n\\\\n .content-image {\\\\n width: 100%;\\\\n }\\\\n`;\\\\n\\\\nreturn (\\\\n <Wrapper>\\\\n <div className={basic ? \\\\\\\"content-wrapper-basic\\\\\\\" : \\\\\\\"content-blur-wrapper\\\\\\\"}>\\\\n {isPurchased === null ? null : isPurchased ? (\\\\n <img className=\\\\\\\"content-image\\\\\\\" src={content.original} />\\\\n ) : (\\\\n <>\\\\n <img className=\\\\\\\"content-image\\\\\\\" src={content.blurred} />\\\\n <Widget\\\\n src=\\\\\\\"paywall.near/widget/PaywallDapplet-Overlap\\\\\\\"\\\\n props={{\\\\n text: \\\\\\\"Unlock this Tweet\\\\\\\",\\\\n price,\\\\n label: accountId ? \\\\\\\"Buy\\\\\\\" : \\\\\\\"Connect Wallet\\\\\\\",\\\\n onClick: accountId\\\\n ? () => onBuy?.({ contentId, price })\\\\n : () => onConnect?.(),\\\\n loading,\\\\n }}\\\\n />\\\\n </>\\\\n )}\\\\n </div>\\\\n </Wrapper>\\\\n);\\\\n" |