Skip to content

Commit

Permalink
Implement Video Modal, Landing Page Image, 404 page, Copy Link in Cry…
Browse files Browse the repository at this point in the history 
…ptobot single (#211)

* feat:video modal added

* feat:added hero image

* ✅ feat:added custom 404 page

* featt: ✅ copy link functionality in cryptobot single

* feat: ✅ sharable link in successful transaction

* 🐛 fix:redirect to marketplace if bot not found, build fixed hopefully

* feat: ✅ sharable link of cryptobot after successfull minting

* feat: ✅ error modal if no cryptobot in transaction

* feat : ✅ error modal in claim-transaction

* feat: ✅ added phase 2 video link

Co-authored-by: Bhaskar Singh <[email protected]>
  • Loading branch information
@harsh242 @bhaskarSingh
harsh242 and bhaskarSingh authored Mar 5, 2021
1 parent c3488ef commit 1e52a73
Show file tree
Hide file tree
Showing 6 changed files with 338 additions and 106 deletions.
Binary file added src/images/hero.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
42 changes: 42 additions & 0 deletions src/pages/404.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React, { useState } from 'react';
import { Link } from 'gatsby';
import NavBar from 'src/components/NavBar';
import ErrorBot from 'src/images/error.png';

const Error404 = () => {
return (
<>
<NavBar />
<main
className={`flex h-full w-full items-center justify-center bg-base-900 text-white`}
style={{
minHeight: `calc(100vh - 5rem)`,
}}
>
<div
className={`flex justify-center items-center flex-col -mt-16`}
style={{
maxWidth: '70vw',
}}
>
<img src={ErrorBot} className={`h-64 w-64`} />
<h3 className={`font-black text-4xl mt-4`}>Oops</h3>
<p className={`text-center text-2xl mt-4`}>
This cryptobot does not exists. Try exploring on Marketplace or
build your own while learning in Academy
</p>
<div className={`mt-6 space-x-4`}>
<Link
to="/tezos"
className={`py-3 px-9 text-xl bg-primary-600 hover:bg-primary-700 text-white font-bold rounded focus:outline-none`}
>
Home
</Link>
</div>
</div>
</main>
</>
);
};

export default Error404;
140 changes: 100 additions & 40 deletions src/pages/tezos/claim-transaction.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { useAsync, useWindowSize } from 'react-use';
import Loader from 'react-loader-spinner';
import Popper from 'popper.js';
import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
import ErrorBot from 'src/images/error.png';

import NavBar from 'src/components/NavBar';
import Button from 'src/components/Buttons';
Expand All @@ -19,6 +20,7 @@ import { InMemorySigner } from '@taquito/signer';
import { estimateNFTMintFee } from 'src/utils/gas_estimates';
import { MdDone } from 'react-icons/md';
import Confetti from 'react-confetti';
import Clipboard from 'react-clipboard.js';

import userAtom from 'src/atoms/user-atom';
import isUserAtom from 'src/atoms/is-user-atom';
Expand Down Expand Up @@ -144,16 +146,50 @@ function Transaction({ location }) {
const [opHash, setOpHash] = useState(null);
const [networkFeeEstimate, setNetworkFeeEstimate] = useState(0);
// const xtzPrice = location.state ? location.state.xtzPrice : null;
const uri = location.state ? location.state.uri : null;
const uri = location.state ? location.state.uri : false;
console.log(location.state);
const { width, height } = useWindowSize();
const [xtzPrice, updateXtzPrice] = useState(null);

const [user, setUser] = useAtom(userAtom);
const [isUser] = useAtom(isUserAtom);

const [botTokenId, setTokenId] = useState(false);
const [copyLink, setCopyLink] = useState(false);
const [claimButtonDisabled, setClaimButtonDisabledStatus] = useState(true);

const ErrorModal = () => {
return (
<div
className={`bg-base-700 px-12 py-8 rounded-lg relative flex flex-col items-center shadow-lg text-center text-white`}
style={{ maxWidth: '40vw' }}
>
<img src={ErrorBot} />
<div className={`mt-6`}>
<h4 className={`text-2xl font-extrabold`}>Cryptobot not Found</h4>
<p className={`mt-6 text-lg`}>
We couldn’t find the cryptobot you were trying to claim. Explore
marketplace to buy more cryptobots or build your own in Academy.
</p>
</div>
<div className={`flex items-center flex-col w-full mb-2`}>
<Link
to={'/tezos/marketplace'}
className={`w-full bg-primary-600 hover:bg-primary-700 text-white font-bold rounded focus:outline-none mt-8 py-3 px-9 text-xl`}
>
Explore Marketplace
</Link>
<Link
to={'/tezos/academy'}
className={`w-full border-2 border-primary-600 hover:border-primary-700 text-white font-bold rounded focus:outline-none mt-4 py-3 px-9 text-xl`}
>
Go to Academy
</Link>
</div>
</div>
);
};

useAsync(async () => {
try {
const result = await getXTZPrice();
Expand All @@ -176,7 +212,7 @@ function Transaction({ location }) {
parseInt(Date.now() + Math.random() * deepness);

const randomId = RnId();

setTokenId(randomId);
const contract = await Tezos.wallet.at(CONTRACT_ADDRESS);
console.log('🔥', contract);

Expand Down Expand Up @@ -382,15 +418,28 @@ function Transaction({ location }) {
Share your unique cryptobot with your friends and start
trading with other on marketplace!
</h4>
<h4 className="text-white text-center text-lg font-mulish mt-8">
<div className="text-white text-center text-lg font-mulish mt-8">
Here’s the link to your unique cryptobot:
https://cryptocodeschool.in/mybot-4433
</h4>
<a
href={`https://cryptocodeschool.in/tezos/cryptobot/${botTokenId}`}
className="text-primary-400 underline"
target="_blank"
rel="noopener noreferrer"
>
{' '}
https://cryptocodeschool.in/tezos/cryptobot/{botTokenId}
</a>
</div>

{/* social icons start */}
<div className="flex flex-row space-x-6 justify-center mt-4">
{/* twitter icon */}
<div className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-primary-600 text-white">
{/* twitter icon */}
<a
href={`https://twitter.com/intent/tweet?text=Look at this cool Cryptobot at https://cryptocodeschool.in/tezos/cryptobot/${botTokenId}&related=twitter%3ABUIDLabs`}
target="_blank"
className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-primary-600 text-white focus:outline-none"
>
<svg
width="24"
height="24"
Expand All @@ -403,42 +452,48 @@ function Transaction({ location }) {
fill="white"
/>
</svg>
</div>
{/* fb icon */}
<div className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-primary-600 text-white ">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.397 20.9969V12.8009H16.162L16.573 9.59191H13.397V7.54791C13.397 6.62191 13.655 5.98791 14.984 5.98791H16.668V3.12691C15.849 3.03891 15.025 2.99691 14.201 2.99991C11.757 2.99991 10.079 4.49191 10.079 7.23091V9.58591H7.33203V12.7949H10.085V20.9969H13.397Z"
fill="white"
/>
</svg>
</div>
</a>

{/* copy icon */}
<div className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-primary-600 text-white ">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
<button
className={
'w-12 h-12 inline-flex items-center justify-center rounded-full text-white focus:outline-none ' +
(copyLink == 1 ? 'bg-success-600' : 'bg-primary-600')
}
>
<Clipboard
data-clipboard-text={`https://cryptocodeschool.in/tezos/cryptobot/${botTokenId}`}
onClick={() => {
setCopyLink(true);
}}
>
<path
d="M17 7H13V9H17C18.65 9 20 10.35 20 12C20 13.65 18.65 15 17 15H13V17H17C19.76 17 22 14.76 22 12C22 9.24 19.76 7 17 7Z"
fill="white"
/>
<path
d="M11 15H7C5.35 15 4 13.65 4 12C4 10.35 5.35 9 7 9H11V7H7C4.24 7 2 9.24 2 12C2 14.76 4.24 17 7 17H11V15Z"
fill="white"
/>
<path d="M8 11H16V13H8V11Z" fill="white" />
</svg>
</div>
{copyLink ? (
<div className="focus:outline-none text-white">
<MdDone />
</div>
) : (
<div className="focus:outline-none">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17 7H13V9H17C18.65 9 20 10.35 20 12C20 13.65 18.65 15 17 15H13V17H17C19.76 17 22 14.76 22 12C22 9.24 19.76 7 17 7Z"
fill="white"
/>
<path
d="M11 15H7C5.35 15 4 13.65 4 12C4 10.35 5.35 9 7 9H11V7H7C4.24 7 2 9.24 2 12C2 14.76 4.24 17 7 17H11V15Z"
fill="white"
/>
<path d="M8 11H16V13H8V11Z" fill="white" />
</svg>
</div>
)}
</Clipboard>
</button>
</div>
{/* social icons ends*/}
<h4 className="text-white text-center text-lg font-mulish mt-6">
Expand All @@ -462,6 +517,11 @@ function Transaction({ location }) {
</div>
</div>
</div>
{!uri && (
<div className="bg-base-700 bg-opacity-75 justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none">
<ErrorModal />
</div>
)}
</div>
);
}
Expand Down
63 changes: 44 additions & 19 deletions src/pages/tezos/cryptobot/[id].js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,10 @@ import Loader from 'react-loader-spinner';
import { BeaconContext } from 'src/context/beacon-context';
import { CONTRACT_ADDRESS } from 'src/defaults';
import { connectToBeacon, Tezos } from 'src/utils/wallet';
import { MdClose } from 'react-icons/md';

import Clipboard from 'react-clipboard.js';

import { MdClose, MdDone } from 'react-icons/md';
import userAtom from 'src/atoms/user-atom';
import isUserAtom from 'src/atoms/is-user-atom';
import { useAtom } from 'jotai';
Expand Down Expand Up @@ -51,6 +54,8 @@ function BotView({ location }) {

const [claimButtonDisabled, setClaimButtonDisabledStatus] = useState(true);

const [copyLink, setCopyLink] = useState(false);

const tokenId = useMemo(() => {
const pathArr =
typeof window !== 'undefined' && location.pathname.split('/');
Expand Down Expand Up @@ -490,7 +495,7 @@ function BotView({ location }) {
<a
href={`https://twitter.com/intent/tweet?text=Look at this cool Cryptobot at https://cryptocodeschool.in/tezos/cryptobot/${bot.tokenId}&related=twitter%3ABUIDLabs`}
target="_blank"
className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-primary-600 text-white"
className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-primary-600 text-white focus:outline-none"
>
<svg
width="24"
Expand All @@ -507,24 +512,44 @@ function BotView({ location }) {
</a>

{/* copy icon */}
<button className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-primary-600 text-white ">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
<button
className={
'w-12 h-12 inline-flex items-center justify-center rounded-full text-white focus:outline-none ' +
(copyLink==1 ? 'bg-success-600' : 'bg-primary-600')
}
>
<Clipboard
data-clipboard-text={`https://cryptocodeschool.in/tezos/cryptobot/${bot.tokenId}`}
onClick={() => {
setCopyLink(true);
}}
>
<path
d="M17 7H13V9H17C18.65 9 20 10.35 20 12C20 13.65 18.65 15 17 15H13V17H17C19.76 17 22 14.76 22 12C22 9.24 19.76 7 17 7Z"
fill="white"
/>
<path
d="M11 15H7C5.35 15 4 13.65 4 12C4 10.35 5.35 9 7 9H11V7H7C4.24 7 2 9.24 2 12C2 14.76 4.24 17 7 17H11V15Z"
fill="white"
/>
<path d="M8 11H16V13H8V11Z" fill="white" />
</svg>
{copyLink ? (
<div className="focus:outline-none text-white">
<MdDone />
</div>
) : (
<div className="focus:outline-none">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17 7H13V9H17C18.65 9 20 10.35 20 12C20 13.65 18.65 15 17 15H13V17H17C19.76 17 22 14.76 22 12C22 9.24 19.76 7 17 7Z"
fill="white"
/>
<path
d="M11 15H7C5.35 15 4 13.65 4 12C4 10.35 5.35 9 7 9H11V7H7C4.24 7 2 9.24 2 12C2 14.76 4.24 17 7 17H11V15Z"
fill="white"
/>
<path d="M8 11H16V13H8V11Z" fill="white" />
</svg>
</div>
)}
</Clipboard>
</button>
</div>
{/* social icons ends*/}
Expand Down
Loading

0 comments on commit 1e52a73

Please sign in to comment.