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: fern/tutorials/creating-smart-contracts/hello-world-smart-contract/integrating-your-smart-contract-with-the-frontend.mdx
You'll need to have finished part 1: [creating and deploying a smart contract](https://docs.alchemy.com/alchemy/tutorials/hello-world-smart-contract), part 2: [interacting with your smart contract](https://docs.alchemy.com/alchemy/tutorials/hello-world-smart-contract/interacting-with-a-smart-contract), and part 3: [submitting your smart contract to Etherscan](https://docs.alchemy.com/alchemy/tutorials/hello-world-smart-contract/submitting-your-smart-contract-to-etherscan) before starting part 4 below.
9
10
10
11
## Part 4: Marrying Web2 & Web3: connecting your smart contract to a frontend project
@@ -143,7 +144,7 @@ Once the modules have finished installing and you've updated the `webpack.config
143
144
```
144
145
</CodeGroup>
145
146
146
-
Doing so should open [http://localhost:3000/](http://localhost:3000/) in your browser, where you'll see the frontend for our project. It should consist of one field (a place to update the message stored in your smart contract), a "Connect Wallet" button, and an "Update" button.
147
+
Doing so should open `http://localhost:3000/` in your browser, where you'll see the frontend for our project. It should consist of one field (a place to update the message stored in your smart contract), a "Connect Wallet" button, and an "Update" button.
147
148
148
149

149
150
@@ -469,7 +470,7 @@ Since we want to display this smart contract in our UI, let's update the *useEff
469
470
470
471
Note that we only want our *loadCurrentMessage* to be called once during the component's first render. We'll soon implement `addSmartContractListener` to automatically update the UI after the message in the smart contract changes.
471
472
472
-
Before we dive into our listeners, let's check out what we have so far! Save your **HelloWorld.js** and **interact.js** files, and then go to [http://localhost:3000/](http://localhost:3000/)
473
+
Before we dive into our listeners, let's check out what we have so far! Save your **HelloWorld.js** and **interact.js** files, and then go to `http://localhost:3000/`
473
474
474
475
You'll notice that the current message no longer says "No connection to the network." Instead, it reflects the message stored in the smart contract. Sick!
475
476
@@ -695,7 +696,7 @@ In *connectWalletPressed*, we make an await call to our imported *connectWallet*
695
696
696
697
Now, let's save both files (**HelloWorld.js** and **interact.js**) and test our UI.
697
698
698
-
Open your browser on the [http://localhost:3000/](http://localhost:3000/) page, and press the "Connect Wallet" button on the top right of the page.
699
+
Open your browser on the `http://localhost:3000/` page, and press the "Connect Wallet" button on the top right of the page.
699
700
700
701
If you have Metamask installed, you should be prompted to connect your wallet to your dApp. Accept the invitation to connect.
Copy file name to clipboardExpand all lines: fern/tutorials/creating-smart-contracts/hello-world-solana-program/integrating-your-solana-program-with-a-web3-application.mdx
Congrats on making it this far! You’ve already deployed your Solana program, and now we’ll build a frontend application that will interact with the program to allow you write and update a message you’ll store on the Solana blockchain! By the end of this tutorial, you’ll know how to connect your web3 app to a user’s Phantom Wallet and use your previously deployed Solana program to store a message that anyone can change. And we’re going to get through it together!
@@ -192,7 +193,7 @@ All this is doing is rendering a giant title for your application! Next, look at
192
193
193
194
Don’t worry too much about CSS! All this is doing is making our application look pretty. We don’t need CSS to use our Solana program and create our web3 application. It just looks nicer 😅. If you’re still curious, you can learn more about it [here](https://www.w3schools.com/html/html_css.asp).
194
195
195
-
Awesome! We’re ready to look at our app! You can view your application on `[http://localhost:3000/](http://localhost:3000/)` by running the following from your `app` directory on your terminal:
196
+
Awesome! We’re ready to look at our app! You can view your application on `http://localhost:3000/` by running the following from your `app` directory on your terminal:
Copy file name to clipboardExpand all lines: fern/tutorials/creating-smart-contracts/nft-minter-tutorial-how-to-create-a-full-stack-dapp/nft-minter.mdx
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -101,7 +101,7 @@ Once those have finished installing, run `npm start` in your terminal:
101
101
```
102
102
</CodeGroup>
103
103
104
-
Doing so should open [http://localhost:3000/](http://localhost:3000) in your browser, where you'll see the frontend for our project. It should consist of 3 fields: a place to input a link to your NFT's asset, enter the name of your NFT, and provide a description.
104
+
Doing so should open `http://localhost:3000/` in your browser, where you'll see the frontend for our project. It should consist of 3 fields: a place to input a link to your NFT's asset, enter the name of your NFT, and provide a description.
Copy file name to clipboardExpand all lines: fern/tutorials/learning-solidity/how-to-verify-a-message-signature-on-ethereum/how-to-create-a-signature-generator-dapp.mdx
1. First, clone the [signature-generator-app](https://github.com/Chris-Moller/signature-generator-app) repository to get your starter files on your local machine. This repository provides all of the necessary styling and UI. (If you need assistance cloning a repository, checkout [GitHub's documentation](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository).)
@@ -18,7 +19,7 @@ In your terminal:
18
19
19
20
1. Navigate to your local repository with \`cd starter files.
20
21
2. Run `npm install` to install your dependencies.
21
-
3. Run `npm start` to deploy a local development server at [http://localhost:3000/](http://localhost:3000/).
22
+
3. Run `npm start` to deploy a local development server at `http://localhost:3000/`.
22
23
23
24
At your local server, you should see the front end of our Signature Generator app. It should contain:
In the last tutorial on [Part 1: How to Create an NFT Game Smart Contract](/docs/how-to-create-an-nft-game-smart-contract), we leveraged Hardhat, Solidity, and Alchemy to deploy an NFT game smart contract that allowed users to breed and collect creatures called Alchemon.
9
10
10
11

@@ -446,9 +447,9 @@ We are all set to go! Let's launch our app on localhost using the following comm
446
447
447
448
### Playing the game
448
449
449
-
* When you open [localhost:3000](https://localhost:3000), you will first be prompted to visit the [localhost:3000/connect]() page. Here, connect your MetaMask wallet to be redirected back to the main breeding page at [localhost:3000](https://localhost:3000).
450
+
* When you open `localhost:3000`, you will first be prompted to visit the `localhost:3000/connect` page. Here, connect your MetaMask wallet to be redirected back to the main breeding page at `localhost:3000`.
450
451
451
-
* For breeding to work, you must choose two different Alchemons as parents. In case you don't have 2 Alchemons, you can simply mint Genesis NFTs by visiting [localhost:3000/mint-genesis](https://localhost:3000/mint-genesis). Make sure you've got enough Goerli ETH from the [Goerli Faucet](https://goerlifaucet.com/) before you mint.
452
+
* For breeding to work, you must choose two different Alchemons as parents. In case you don't have 2 Alchemons, you can simply mint Genesis NFTs by visiting `localhost:3000/mint-genesis`. Make sure you've got enough Goerli ETH from the [Goerli Faucet](https://goerlifaucet.com/) before you mint.
452
453
453
454
* You will be redirected back on the main page. Select an Alchemon in both the first and the second dropdown, then click on breed. Metamask will prompt you to pay gas for the transaction.
0 commit comments