Skip to content

Commit

Permalink
Mobile-tutorial (#214)
Browse files Browse the repository at this point in the history 
* fist commit to prepare the rest of the tutorial

* version ready to be reviewed

* fix broken link

* fix typo

* Added remarks from Tim

* Grammar and style for parts 1 and 2

* wip grammar and style for parts 3 and 4

* Grammar and punctuation for parts 3 and 4

* Remove redundant Tezos from title

* adding company name

* adding author

---------

Co-authored-by: Tim McMackin <[email protected]>
  • Loading branch information
@zamrokk @timothymcmackin
zamrokk and timothymcmackin authored Jan 11, 2024
1 parent 0fedff7 commit d23c40e
Show file tree
Hide file tree
Showing 24 changed files with 2,962 additions and 640 deletions.
12 changes: 10 additions & 2 deletions docs/tutorials.mdx
View file
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
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
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

0 comments on commit d23c40e

Please sign in to comment.