Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mobile-tutorial #214

Merged
merged 11 commits into from
Jan 11, 2024
Merged

Mobile-tutorial #214

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
f08150f
fist commit to prepare the rest of the tutorial
zamrokk Dec 12, 2023
06b624a
version ready to be reviewed
zamrokk Dec 13, 2023
ade2f1e
fix broken link
zamrokk Dec 13, 2023
a81a4d5
fix typo
zamrokk Dec 13, 2023
5e893f4
Added remarks from Tim
zamrokk Dec 14, 2023
f706132
Grammar and style for parts 1 and 2
timothymcmackin Dec 27, 2023
b295cd7
wip grammar and style for parts 3 and 4
timothymcmackin Dec 28, 2023
793dcc5
Grammar and punctuation for parts 3 and 4
timothymcmackin Dec 28, 2023
f331899
Remove redundant Tezos from title
timothymcmackin Dec 29, 2023
9868e09
adding company name
zamrokk Jan 11, 2024
38daced
adding author
zamrokk Jan 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions docs/tutorials.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ title: Tutorials

These tutorials can help you get started developing different kinds of applications on Tezos in as little as 15 minutes.

import TutorialCard from "@site/src/components/TutorialCard";
import TutorialCardContainer from "@site/src/components/TutorialCardContainer";
import TutorialCard from '@site/src/components/TutorialCard';
import TutorialCardContainer from '@site/src/components/TutorialCardContainer';

## Beginner

Expand Down Expand Up @@ -109,4 +109,12 @@ These tutorials are intended for developers who are familiar with Tezos and want
link="Start tutorial"
/>

<TutorialCard
title="Create a mobile game on Tezos"
emoji="📱"
href="/tutorials/mobile"
description="Learn how to create a decentralized game on Tezos to run on Android or iOS"
link="Start tutorial"
/>

</TutorialCardContainer>
1 change: 1 addition & 0 deletions docs/tutorials/build-an-nft-marketplace.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
---
title: Build an NFT marketplace
authors: 'Benjamin Fuentes (Marigold)'
lastUpdated: 8nd November 2023
---

Expand Down
135 changes: 68 additions & 67 deletions docs/tutorials/build-an-nft-marketplace/part-1.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
---
title: "Part 1: Minting tokens"
title: 'Part 1: Minting tokens'
authors: 'Benjamin Fuentes (Marigold)'
lastUpdated: 8th November 2023
---

Expand Down Expand Up @@ -564,17 +565,17 @@ The mint page uses a form that accepts information and an image and sends a tran

```typescript
const validationSchema = yup.object({
name: yup.string().required("Name is required"),
description: yup.string().required("Description is required"),
symbol: yup.string().required("Symbol is required"),
name: yup.string().required('Name is required'),
description: yup.string().required('Description is required'),
symbol: yup.string().required('Symbol is required'),
});

const formik = useFormik({
initialValues: {
name: "",
description: "",
name: '',
description: '',
token_id: 0,
symbol: "WINE",
symbol: 'WINE',
} as TZIP21TokenMetadata,
validationSchema: validationSchema,
onSubmit: (values) => {
Expand All @@ -586,7 +587,7 @@ The mint page uses a form that accepts information and an image and sends a tran
1. After this code, add state variables for the image and its URL:

```typescript
const [pictureUrl, setPictureUrl] = useState<string>("");
const [pictureUrl, setPictureUrl] = useState<string>('');
const [file, setFile] = useState<File | null>(null);
```

Expand All @@ -605,9 +606,9 @@ The mint page uses a form that accepts information and an image and sends a tran
const toggleDrawer =
(open: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
if (
event.type === "keydown" &&
((event as React.KeyboardEvent).key === "Tab" ||
(event as React.KeyboardEvent).key === "Shift")
event.type === 'keydown' &&
((event as React.KeyboardEvent).key === 'Tab' ||
(event as React.KeyboardEvent).key === 'Shift')
) {
return;
}
Expand All @@ -625,29 +626,29 @@ The mint page uses a form that accepts information and an image and sends a tran
//IPFS
if (file) {
const formData = new FormData();
formData.append("file", file);
formData.append('file', file);

const requestHeaders: HeadersInit = new Headers();
requestHeaders.set(
"pinata_api_key",
'pinata_api_key',
`${import.meta.env.VITE_PINATA_API_KEY}`
);
requestHeaders.set(
"pinata_secret_api_key",
'pinata_secret_api_key',
`${import.meta.env.VITE_PINATA_API_SECRET}`
);

const resFile = await fetch(
"https://api.pinata.cloud/pinning/pinFileToIPFS",
'https://api.pinata.cloud/pinning/pinFileToIPFS',
{
method: "post",
method: 'post',
body: formData,
headers: requestHeaders,
}
);

const responseJson = await resFile.json();
console.log("responseJson", responseJson);
console.log('responseJson', responseJson);

const thumbnailUri = `ipfs://${responseJson.IpfsHash}`;
setPictureUrl(
Expand All @@ -667,13 +668,13 @@ The mint page uses a form that accepts information and an image and sends a tran
//close directly the form
setFormOpen(false);
enqueueSnackbar(
"Wine collection is minting ... it will be ready on next block, wait for the confirmation message before minting another collection",
{ variant: "info" }
'Wine collection is minting ... it will be ready on next block, wait for the confirmation message before minting another collection',
{ variant: 'info' }
);

await op.confirmation(2);

enqueueSnackbar("Wine collection minted", { variant: "success" });
enqueueSnackbar('Wine collection minted', { variant: 'success' });

refreshUserContextOnPageReload(); //force all app to refresh the context
}
Expand All @@ -682,7 +683,7 @@ The mint page uses a form that accepts information and an image and sends a tran
let tibe: TransactionInvalidBeaconError =
new TransactionInvalidBeaconError(error);
enqueueSnackbar(tibe.data_message, {
variant: "error",
variant: 'error',
autoHideDuration: 10000,
});
}
Expand All @@ -700,7 +701,7 @@ The mint page uses a form that accepts information and an image and sends a tran
useEffect(() => {
(async () => {
if (nftContratTokenMetadataMap && nftContratTokenMetadataMap.size > 0) {
formik.setFieldValue("token_id", nftContratTokenMetadataMap.size);
formik.setFieldValue('token_id', nftContratTokenMetadataMap.size);
}
})();
}, [nftContratTokenMetadataMap?.size]);
Expand All @@ -709,8 +710,8 @@ The mint page uses a form that accepts information and an image and sends a tran
1. Replace the imports at the top of the file with these imports:

```typescript
import { AddCircleOutlined, Close } from "@mui/icons-material";
import OpenWithIcon from "@mui/icons-material/OpenWith";
import { AddCircleOutlined, Close } from '@mui/icons-material';
import OpenWithIcon from '@mui/icons-material/OpenWith';
import {
Box,
Button,
Expand All @@ -719,18 +720,18 @@ The mint page uses a form that accepts information and an image and sends a tran
TextField,
Toolbar,
useMediaQuery,
} from "@mui/material";
import Paper from "@mui/material/Paper";
import Typography from "@mui/material/Typography";
import { useFormik } from "formik";
import React, { useEffect, useState } from "react";
import * as yup from "yup";
import { TZIP21TokenMetadata, UserContext, UserContextType } from "./App";
import { useSnackbar } from "notistack";
import { BigNumber } from "bignumber.js";
import { address, bytes, nat } from "./type-aliases";
import { char2Bytes } from "@taquito/utils";
import { TransactionInvalidBeaconError } from "./TransactionInvalidBeaconError";
} from '@mui/material';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
import { useFormik } from 'formik';
import React, { useEffect, useState } from 'react';
import * as yup from 'yup';
import { TZIP21TokenMetadata, UserContext, UserContextType } from './App';
import { useSnackbar } from 'notistack';
import { BigNumber } from 'bignumber.js';
import { address, bytes, nat } from './type-aliases';
import { char2Bytes } from '@taquito/utils';
import { TransactionInvalidBeaconError } from './TransactionInvalidBeaconError';
```

1. Save the file.
Expand Down Expand Up @@ -790,7 +791,7 @@ Follow these steps to show the tokens that you have minted:
1. In the `MintPage.tsx` file, replace the `"//TODO"` comment with this code:

```typescript
<Box sx={{ width: "70vw" }}>
<Box sx={{ width: '70vw' }}>
<SwipeableViews
axis="x"
index={activeStep}
Expand All @@ -801,15 +802,15 @@ Follow these steps to show the tokens that you have minted:
([token_id, token]) => (
<Card
sx={{
display: "block",
maxWidth: "80vw",
overflow: "hidden",
display: 'block',
maxWidth: '80vw',
overflow: 'hidden',
}}
key={token_id.toString()}
>
<CardHeader
titleTypographyProps={
isTablet ? { fontSize: "1.5em" } : { fontSize: "1em" }
isTablet ? { fontSize: '1.5em' } : { fontSize: '1em' }
}
title={token.name}
/>
Expand All @@ -818,24 +819,24 @@ Follow these steps to show the tokens that you have minted:
sx={
isTablet
? {
width: "auto",
marginLeft: "33%",
maxHeight: "50vh",
width: 'auto',
marginLeft: '33%',
maxHeight: '50vh',
}
: { width: "100%", maxHeight: "40vh" }
: { width: '100%', maxHeight: '40vh' }
}
component="img"
image={token.thumbnailUri?.replace(
"ipfs://",
"https://gateway.pinata.cloud/ipfs/"
'ipfs://',
'https://gateway.pinata.cloud/ipfs/'
)}
/>

<CardContent>
<Box>
<Typography>{"ID : " + token_id}</Typography>
<Typography>{"Symbol : " + token.symbol}</Typography>
<Typography>{"Description : " + token.description}</Typography>
<Typography>{'ID : ' + token_id}</Typography>
<Typography>{'Symbol : ' + token.symbol}</Typography>
<Typography>{'Description : ' + token.description}</Typography>
</Box>
</CardContent>
</Card>
Expand Down Expand Up @@ -893,8 +894,8 @@ Follow these steps to show the tokens that you have minted:
1. Replace the imports at the top of the file with these imports:

```typescript
import SwipeableViews from "react-swipeable-views";
import OpenWithIcon from "@mui/icons-material/OpenWith";
import SwipeableViews from 'react-swipeable-views';
import OpenWithIcon from '@mui/icons-material/OpenWith';
import {
Box,
Button,
Expand All @@ -906,26 +907,26 @@ Follow these steps to show the tokens that you have minted:
TextField,
Toolbar,
useMediaQuery,
} from "@mui/material";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
} from '@mui/material';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import {
AddCircleOutlined,
Close,
KeyboardArrowLeft,
KeyboardArrowRight,
} from "@mui/icons-material";
import Paper from "@mui/material/Paper";
import Typography from "@mui/material/Typography";
import { useFormik } from "formik";
import React, { useEffect, useState } from "react";
import * as yup from "yup";
import { TZIP21TokenMetadata, UserContext, UserContextType } from "./App";
import { useSnackbar } from "notistack";
import { BigNumber } from "bignumber.js";
import { address, bytes, nat } from "./type-aliases";
import { char2Bytes } from "@taquito/utils";
import { TransactionInvalidBeaconError } from "./TransactionInvalidBeaconError";
} from '@mui/icons-material';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
import { useFormik } from 'formik';
import React, { useEffect, useState } from 'react';
import * as yup from 'yup';
import { TZIP21TokenMetadata, UserContext, UserContextType } from './App';
import { useSnackbar } from 'notistack';
import { BigNumber } from 'bignumber.js';
import { address, bytes, nat } from './type-aliases';
import { char2Bytes } from '@taquito/utils';
import { TransactionInvalidBeaconError } from './TransactionInvalidBeaconError';
```

1. Open the web page in the browser again and see that the NFT you created is shown, as in this picture:
Expand Down
Loading
Loading