React Dapp Tutorial (MetaMask#724)

* Check-in Part 1 of Dapp Tutorial * Update name of project to remove "sdk" in project name * Update verbiage of part one * update comments * add button to initial starting point * Add starting point source code link to start branch. * Add Error Handling for connection. * update comments * Update headings * remove margin from .App in CSS * Add images with text to accommodate * update files and title * Update description * update formatting * Add title in markdown * Add `utils/index.tsx` * Add source code to branch of final app code after part 1 * Update wallet-sidebar with first tutorial * update sidebar to category replace all images with rounded corners update title of react dapp to simple * Add alt text for images * edit tutorial * fix footer link --------- Co-authored-by: Alexandra Tran <[email protected]>
kongali1720 · Apr 26, 2023 · a492628 · a492628
1 parent 89e10f8
commit a492628
Show file tree

Hide file tree

Showing 15 changed files with 706 additions and 9 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -243,7 +243,7 @@ const config = {
               },
               {
                 label: "Tutorials",
-                to: "/wallet/tutorials",
+                to: "/wallet/category/tutorials",
               },
               {
                 label: "Reference",

diff --git a/wallet-sidebar.js b/wallet-sidebar.js
@@ -96,9 +96,12 @@ const sidebar = {
       ],
     },
     {
-      type: "doc",
-      id: "tutorials/index",
+      type: "category",
       label: "Tutorials",
+      link: { type: "generated-index" },
+      items: [
+        "tutorials/simple-react-dapp",
+      ],
     },
     {
       type: "category",

diff --git a/wallet/assets/tutorials/dapp-tutorial/img-01.png b/wallet/assets/tutorials/dapp-tutorial/img-01.png
diff --git a/wallet/assets/tutorials/dapp-tutorial/img-02.png b/wallet/assets/tutorials/dapp-tutorial/img-02.png
diff --git a/wallet/assets/tutorials/dapp-tutorial/img-03.png b/wallet/assets/tutorials/dapp-tutorial/img-03.png
diff --git a/wallet/assets/tutorials/dapp-tutorial/img-04.png b/wallet/assets/tutorials/dapp-tutorial/img-04.png
diff --git a/wallet/assets/tutorials/dapp-tutorial/img-05.png b/wallet/assets/tutorials/dapp-tutorial/img-05.png
diff --git a/wallet/assets/tutorials/dapp-tutorial/img-06.png b/wallet/assets/tutorials/dapp-tutorial/img-06.png
diff --git a/wallet/assets/tutorials/dapp-tutorial/img-07.png b/wallet/assets/tutorials/dapp-tutorial/img-07.png
diff --git a/wallet/assets/tutorials/dapp-tutorial/img-08.png b/wallet/assets/tutorials/dapp-tutorial/img-08.png
diff --git a/wallet/assets/tutorials/dapp-tutorial/img-09.png b/wallet/assets/tutorials/dapp-tutorial/img-09.png
diff --git a/wallet/assets/tutorials/dapp-tutorial/img-10.png b/wallet/assets/tutorials/dapp-tutorial/img-10.png
diff --git a/wallet/get-started/set-up-dev-environment.md b/wallet/get-started/set-up-dev-environment.md
@@ -5,6 +5,8 @@ description: Set up a new simple dapp to integrate with MetaMask.
 # Set up your development environment
 
 You can easily set up a simple dapp to integrate with MetaMask.
+For a full end-to-end tutorial using [Vite](https://v3.vitejs.dev/guide/), see the
+[Create a simple React dapp](../tutorials/simple-react-dapp.md) tutorial.
 
 ## Prerequisites
 

diff --git a/wallet/tutorials/index.md b/wallet/tutorials/index.md