├── .gitignore
├── README.md
├── craco.config.js
├── package.json
├── public
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
├── src
├── App.jsx
├── components
│ ├── ChangeName.jsx
│ └── Navbar.jsx
├── config.js
├── index.css
├── index.js
└── utils
│ └── wallet.js
├── tailwind.config.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | **/output/
4 | ARTICLE.md
5 |
6 | # dependencies
7 | /node_modules
8 | /.pnp
9 | .pnp.js
10 |
11 | # testing
12 | /coverage
13 |
14 | # production
15 | /build
16 |
17 | # misc
18 | .DS_Store
19 | .env.local
20 | .env.development.local
21 | .env.test.local
22 | .env.production.local
23 |
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-tezos-template
2 |
3 | Live Demo: https://scaffold-tez.vercel.app/
4 |
5 | ## Setup
6 | Clone and install dependencies
7 | ```bash
8 | git clone https://github.com/vivekascoder/react-tezos-template
9 | ```
10 |
11 | Install dependencies
12 | ```bash
13 | cd react-tezos-template
14 | yarn install
15 | ```
16 |
17 |
18 | ## How to run the project
19 | ```bash
20 | yarn start
21 | ```
22 |
--------------------------------------------------------------------------------
/craco.config.js:
--------------------------------------------------------------------------------
1 | // craco.config.js
2 | module.exports = {
3 | style: {
4 | postcss: {
5 | plugins: [require("tailwindcss"), require("autoprefixer")],
6 | },
7 | },
8 | };
9 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "dex",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@craco/craco": "^6.3.0",
7 | "@tailwindcss/forms": "^0.3.4",
8 | "@taquito/beacon-wallet": "^10.2.0",
9 | "@taquito/taquito": "^10.2.0",
10 | "@testing-library/jest-dom": "^5.11.4",
11 | "@testing-library/react": "^11.1.0",
12 | "@testing-library/user-event": "^12.1.10",
13 | "axios": "^0.22.0",
14 | "react": "^17.0.2",
15 | "react-dom": "^17.0.2",
16 | "react-scripts": "4.0.3",
17 | "web-vitals": "^1.0.1"
18 | },
19 | "scripts": {
20 | "start": "craco start",
21 | "build": "craco build",
22 | "test": "craco test",
23 | "eject": "react-scripts eject"
24 | },
25 | "eslintConfig": {
26 | "extends": [
27 | "react-app",
28 | "react-app/jest"
29 | ]
30 | },
31 | "browserslist": {
32 | "production": [
33 | ">0.2%",
34 | "not dead",
35 | "not op_mini all"
36 | ],
37 | "development": [
38 | "last 1 chrome version",
39 | "last 1 firefox version",
40 | "last 1 safari version"
41 | ]
42 | },
43 | "devDependencies": {
44 | "autoprefixer": "^9",
45 | "postcss": "^7",
46 | "tailwindcss": "npm:@tailwindcss/postcss7-compat"
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vivekascoder/react-tezos-template/ac0f4bab4eb6846065400fb8c49c3f0cff24b204/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | K9 NFT
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vivekascoder/react-tezos-template/ac0f4bab4eb6846065400fb8c49c3f0cff24b204/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vivekascoder/react-tezos-template/ac0f4bab4eb6846065400fb8c49c3f0cff24b204/public/logo512.png
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
1 | import Navbar from "./components/Navbar";
2 | import ChangeName from "./components/ChangeName";
3 |
4 | const App = () => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 | Hello, world!
12 |
13 |
14 |
15 |
16 |
17 |
18 |
9 | {
13 | setName(e.target.value);
14 | }}
15 | value={name}
16 | />
17 |
25 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/src/components/Navbar.jsx:
--------------------------------------------------------------------------------
1 | import "../index.css";
2 | import {
3 | connectWallet,
4 | getActiveAccount,
5 | disconnectWallet,
6 | } from "../utils/wallet";
7 | import { useEffect, useState } from "react";
8 |
9 | export default function Navbar() {
10 | const [wallet, setWallet] = useState(null);
11 |
12 | const handleConnectWallet = async () => {
13 | const { wallet } = await connectWallet();
14 | setWallet(wallet);
15 | };
16 | const handleDisconnectWallet = async () => {
17 | const { wallet } = await disconnectWallet();
18 | setWallet(wallet);
19 | };
20 |
21 | useEffect(() => {
22 | const func = async () => {
23 | const account = await getActiveAccount();
24 | if (account) {
25 | setWallet(account.address);
26 | }
27 | };
28 | func();
29 | }, []);
30 |
31 | return (
32 |
70 | );
71 | }
72 |
--------------------------------------------------------------------------------
/src/config.js:
--------------------------------------------------------------------------------
1 | const config = {
2 | contractAddress: "KT1UZLPPZmZpbpAdimNhHb9QfmKTcEWUrRxz",
3 | };
4 |
5 | export default config;
6 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | /* ./src/index.css */
2 | @tailwind base;
3 | @tailwind components;
4 |
5 | @tailwind utilities;
6 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import App from "./App";
4 | import "./index.css";
5 |
6 | ReactDOM.render(
7 |
8 |
9 | ,
10 | document.getElementById("root")
11 | );
12 |
--------------------------------------------------------------------------------
/src/utils/wallet.js:
--------------------------------------------------------------------------------
1 | import { TezosToolkit } from "@taquito/taquito";
2 | import { BeaconWallet } from "@taquito/beacon-wallet";
3 | import config from "../config";
4 |
5 | const preferredNetwork = "hangzhounet";
6 | const options = {
7 | name: "NFT",
8 | iconUrl: "https://tezostaquito.io/img/favicon.png",
9 | preferredNetwork: preferredNetwork,
10 | };
11 | const rpcURL = "https://hangzhounet.smartpy.io";
12 | const wallet = new BeaconWallet(options);
13 |
14 | const getActiveAccount = async () => {
15 | return await wallet.client.getActiveAccount();
16 | };
17 |
18 | const connectWallet = async () => {
19 | let account = await wallet.client.getActiveAccount();
20 |
21 | if (!account) {
22 | await wallet.requestPermissions({
23 | network: { type: preferredNetwork },
24 | });
25 | account = await wallet.client.getActiveAccount();
26 | }
27 | return { success: true, wallet: account.address };
28 | };
29 |
30 | const disconnectWallet = async () => {
31 | await wallet.disconnect();
32 | return { success: true, wallet: null };
33 | };
34 |
35 | const checkIfWalletConnected = async (wallet) => {
36 | try {
37 | const activeAccount = await wallet.client.getActiveAccount();
38 | if (!activeAccount) {
39 | await wallet.client.requestPermissions({
40 | type: { network: preferredNetwork },
41 | });
42 | }
43 | return {
44 | success: true,
45 | };
46 | } catch (error) {
47 | return {
48 | success: false,
49 | error,
50 | };
51 | }
52 | };
53 |
54 | export const changeName = async (name) => {
55 | // const wallet = new BeaconWallet(options);
56 | const response = await checkIfWalletConnected(wallet);
57 |
58 | if (response.success) {
59 | const tezos = new TezosToolkit(rpcURL);
60 | tezos.setWalletProvider(wallet);
61 | const contract = await tezos.wallet.at(config.contractAddress);
62 | const operation = await contract.methods.default(name).send();
63 | const result = await operation.confirmation();
64 | console.log(result);
65 | }
66 | };
67 |
68 | export {
69 | connectWallet,
70 | disconnectWallet,
71 | getActiveAccount,
72 | checkIfWalletConnected,
73 | };
74 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | // tailwind.config.js
2 | module.exports = {
3 | purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
4 | darkMode: false, // or 'media' or 'class'
5 | theme: {
6 | extend: {},
7 | },
8 | variants: {
9 | extend: {},
10 | },
11 | plugins: [require("@tailwindcss/forms")],
12 | };
13 |
--------------------------------------------------------------------------------