You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/tutorials/marketpulse/frontend.md
+8-14Lines changed: 8 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,17 +5,14 @@ dependencies:
5
5
viem: 2.41.2
6
6
---
7
7
8
-
`Deno` is not mandatory as you can still use `npm`, but we use it on this tutorial. You can install it with [this link](https://docs.deno.com/runtime/getting_started/installation/)
9
-
10
8
1. Create a frontend app on the same project root directory. Here we use `Vite` and `React` to start a default project;
11
9
12
10
```bash
13
-
deno run -A npm:create-vite@latest
11
+
npmcreatevite@latest
14
12
```
15
13
16
-
If you have trouble with Deno, as on some Mac computers, you can create a non-deno project that works in a similar way by running this command: `npm create vite@latest`.
17
-
18
14
1. Choose a name for the frontend project (such as `app`, which is what the examples later use), select the `React` framework, and select the `Typescript` language.
15
+
If prompted, don't use the experimental version of Vite, and choose to not install and run immediately, because we have a few more settings to do below.
19
16
20
17
1. Run these commands to install the dependencies:
21
18
@@ -54,13 +51,7 @@ dependencies:
54
51
55
52
1. Run `npm i` to call the postinstall script automatically. You should see new files and folders in the `./src` folder of the frontend application.
56
53
57
-
1. Create an utility file to manage Viem errors. Better than the technical defaults and not helpful ones
58
-
59
-
```bash
60
-
touch src/DecodeEvmTransactionLogsArgs.ts
61
-
```
62
-
63
-
1. Put this code in the `./app/src/DecodeEvmTransactionLogsArgs.ts` file:
54
+
1. Create a utility file called `app/src/DecodeEvmTransactionLogsArgs.ts` to manage Viem errors (better than the technical defaults and not helpful ones), with this content:
64
55
65
56
```Typescript
66
57
import {
@@ -145,7 +136,7 @@ dependencies:
145
136
146
137
```
147
138
148
-
1. Edit `./app/src/main.tsx` to add a `Thirdweb` provider around your application. In the following example, replace **line 7**`<THIRDWEB_CLIENTID>` with your own `clientId` configured on the [Thirdweb dashboard here](https://portal.thirdweb.com/typescript/v4/getting-started#initialize-the-sdk):
139
+
1. Edit `./app/src/main.tsx` to add a `Thirdweb` provider around your application, by replacing its content with the one below. Then, replace on **line 8**the placeholder `<THIRDWEB_CLIENTID>` (including the delimiters `<` and `>`!) with your own `clientId` configured on the [Thirdweb dashboard here](https://portal.thirdweb.com/typescript/v4/getting-started#initialize-the-sdk):
149
140
150
141
```Typescript
151
142
import { createRoot } from"react-dom/client";
@@ -890,9 +881,12 @@ dependencies:
890
881
}
891
882
```
892
883
893
-
1. Run the application:
884
+
1. Edit the file `app/tsconfig.app.json` to set both "verbatimModuleSyntax" and "erasableSyntaxOnly" to "false".
0 commit comments