diff --git a/apps/base-docs/base-camp/docs/frontend-setup/building-an-onchain-app.md b/apps/base-docs/base-camp/docs/frontend-setup/building-an-onchain-app.md index 07ced64ae3..32877be325 100644 --- a/apps/base-docs/base-camp/docs/frontend-setup/building-an-onchain-app.md +++ b/apps/base-docs/base-camp/docs/frontend-setup/building-an-onchain-app.md @@ -81,7 +81,7 @@ As discussed above, add `"use client":` to the top of the file. Continue with the imports: -```typescript +```tsx import '@rainbow-me/rainbowkit/styles.css'; import { useState, type ReactNode } from 'react'; import { getDefaultConfig, RainbowKitProvider } from '@rainbow-me/rainbowkit'; @@ -108,7 +108,7 @@ Remember, everything on the frontend is public! Be sure to configure the allowli ::: -```typescript +```tsx const config = getDefaultConfig({ appName: 'Cool Onchain App', projectId: 'YOUR_PROJECT_ID', @@ -123,7 +123,7 @@ const config = getDefaultConfig({ Add an exported function for the providers. This sets up the `QueryClient` and returns `props.children` wrapped in all of your providers. -```typescript +```tsx export function Providers(props: { children: ReactNode }) { const [queryClient] = useState(() => new QueryClient()); @@ -141,7 +141,7 @@ export function Providers(props: { children: ReactNode }) { Open `layout.tsx`. Import your `Providers`, being careful if you use auto-import as there are many other things with similar names in the list. Wrap the `children` in your `return` with the new `Providers`. -```typescript +```tsx return ( @@ -157,13 +157,13 @@ You're now ready to add your connect button. You can do this anywhere in your ap Open up `page.tsx`, and import the `ConnectButton`: -```typescript +```tsx import { ConnectButton } from '@rainbow-me/rainbowkit'; ``` Then, simply add the `ConnectButton` component at the top of the first `
`: -```typescript +```tsx // This function has been simplified to save space. export default function Home() { return ( @@ -183,7 +183,7 @@ Run your app with `yarn dev`, and you should be able to use the RainbowKit conne You use the [Connect Button] props to modify its properties, or you can [customize the connect button] extensively. Some users dislike having the connect button display their token balance. Try disabling it with: -```typescript +```tsx ``` diff --git a/apps/base-docs/base-camp/docs/hardhat-deploy/hardhat-deploy-sbs.md b/apps/base-docs/base-camp/docs/hardhat-deploy/hardhat-deploy-sbs.md index 175d1970eb..b251116844 100644 --- a/apps/base-docs/base-camp/docs/hardhat-deploy/hardhat-deploy-sbs.md +++ b/apps/base-docs/base-camp/docs/hardhat-deploy/hardhat-deploy-sbs.md @@ -30,7 +30,7 @@ To install: 1. Run `npm install -D hardhat-deploy`. Then, import hardhat-deploy in `hardhat.config.ts`: -```typescript +```tsx import 'hardhat-deploy'; ``` @@ -38,7 +38,7 @@ import 'hardhat-deploy'; 3. Include the following: -```typescript +```tsx import { HardhatRuntimeEnvironment } from 'hardhat/types'; import { DeployFunction } from 'hardhat-deploy/types'; @@ -69,7 +69,7 @@ export default func; 6. Run the following, which adds an alias to the account 0 of your environment: -```typescript +```tsx const config: HardhatUserConfig = { solidity: '0.8.23', namedAccounts: { @@ -80,7 +80,7 @@ const config: HardhatUserConfig = { 7. Implement the deploy function by including the following in the `001_deploy_lock.ts` file: -```typescript +```tsx import { HardhatRuntimeEnvironment } from 'hardhat/types'; import { DeployFunction } from 'hardhat-deploy/types'; import { ethers } from 'hardhat'; @@ -121,7 +121,7 @@ The easiest way to test your deployment is by modifying the test. Go to `Lock.ts` and include in the imports the following: -```typescript +```tsx import { ethers, deployments } from 'hardhat'; ``` @@ -129,7 +129,7 @@ import { ethers, deployments } from 'hardhat'; Change the `before` function to look like the following: -```typescript +```tsx before(async () => { lastBlockTimeStamp = await time.latest(); @@ -148,7 +148,7 @@ Notice how you execute `deployments.fixture` and pass a tag that matches the one The deployment file is then executed and you can then reuse that functionality and simply consume the address of the newly-deployed contract by using: -```typescript +```tsx const lockDeployment = await deployments.get('Lock'); ``` @@ -176,7 +176,7 @@ Deploying to a real test network involves configuring the network parameters in Include the following in the `hardhat.config.ts` file: -```typescript +```tsx const config: HardhatUserConfig = { solidity: '0.8.18', namedAccounts: { @@ -219,7 +219,7 @@ npm install -D dotenv Then, include the following in the `hardhat.config.ts` file: -```typescript +```tsx import dotenv from 'dotenv'; dotenv.config(); diff --git a/apps/base-docs/base-camp/docs/hardhat-forking/hardhat-forking.md b/apps/base-docs/base-camp/docs/hardhat-forking/hardhat-forking.md index 20de633879..9f0f071839 100644 --- a/apps/base-docs/base-camp/docs/hardhat-forking/hardhat-forking.md +++ b/apps/base-docs/base-camp/docs/hardhat-forking/hardhat-forking.md @@ -46,7 +46,7 @@ Those won't be covered in this guide, however it's recommended to explore them a The BalanceReader contract is created as follows: -```typescript +```tsx pragma solidity 0.8.9; import "@openzeppelin/contracts/token/ERC20/IERC20.sol"; @@ -106,7 +106,7 @@ Also notice that forking is enabled by specifying `enabled: true`, however this Create a test file in the test folder called `BalanceReader.ts` and include the following: -```typescript +```tsx import { Signer } from 'ethers'; import { ethers } from 'hardhat'; diff --git a/apps/base-docs/base-camp/docs/hardhat-setup-overview/hardhat-setup-overview-sbs.md b/apps/base-docs/base-camp/docs/hardhat-setup-overview/hardhat-setup-overview-sbs.md index 48826e2fea..65ace47f7f 100644 --- a/apps/base-docs/base-camp/docs/hardhat-setup-overview/hardhat-setup-overview-sbs.md +++ b/apps/base-docs/base-camp/docs/hardhat-setup-overview/hardhat-setup-overview-sbs.md @@ -85,7 +85,7 @@ Since the project uses Typescript, you have the benefit of using static typing. The following is the default configuration: -```typescript +```tsx import { HardhatUserConfig } from 'hardhat/config'; import '@nomicfoundation/hardhat-toolbox'; @@ -106,7 +106,7 @@ You can configure aspects such as: For example: -```typescript +```tsx import { HardhatUserConfig } from 'hardhat/config'; import '@nomicfoundation/hardhat-toolbox'; diff --git a/apps/base-docs/base-camp/docs/hardhat-testing/hardhat-testing-sbs.md b/apps/base-docs/base-camp/docs/hardhat-testing/hardhat-testing-sbs.md index c1e9e0d9f9..c0b9f6afc2 100644 --- a/apps/base-docs/base-camp/docs/hardhat-testing/hardhat-testing-sbs.md +++ b/apps/base-docs/base-camp/docs/hardhat-testing/hardhat-testing-sbs.md @@ -39,7 +39,7 @@ In the following, you reuse this smart contract but rewrite the test using Typec To remove the body of the `Lock.ts` file: -```typescript +```tsx import { expect } from 'chai'; import { ethers } from 'hardhat'; @@ -54,7 +54,7 @@ The `Lock.sol` contract allows the creator to lock Ether until an unlock time ha Notice the constructor has a payable keyword: -```typescript +```tsx constructor(uint _unlockTime) payable { require( block.timestamp < _unlockTime, @@ -83,7 +83,7 @@ Start with the value locked, however you must set up a `before` function, which Then, include some new imports and variables: -```typescript +```tsx import { expect } from 'chai'; import { ethers } from 'hardhat'; @@ -138,6 +138,7 @@ describe('Lock', function () { }); }); ``` + ### Testing `unlockTime` @@ -150,7 +151,7 @@ The first test case should verify that the `unlockTime` variable is correct. Reveal code -```typescript +```tsx it('should get the unlockTime value', async () => { // we get the value from the contract const unlockTime = await lockInstance.unlockTime(); @@ -177,8 +178,6 @@ You can simply run `npx hardhat test` and then get: ### Testing Ether balance - - In order to get the balance of your `Lock` contract, you simply call `ethers.provider.getBalance`. Create a new test case: @@ -187,7 +186,7 @@ Create a new test case: Reveal code -```typescript +```tsx it('should have the right ether balance', async () => { // Get the Lock contract address const lockInstanceAddress = await lockInstance.getAddress(); @@ -221,7 +220,7 @@ Similar to the previous test cases, you can verify that the owner is correct. Reveal code -```typescript +```tsx it('should have the right owner', async () => { // Notice ownerSigned has an address property expect(await lockInstance.owner()).to.equal(ownerSigner.address); @@ -242,7 +241,6 @@ Then, run `npx hardhat test` and you should get: 3 passing (1s) ``` - ### Testing withdraw Testing withdrawal is more complex because you need to assert certain conditions, such as: @@ -255,7 +253,7 @@ Hardhat allow you to test reverts with a set of custom matchers. For example, the following code checks that an attempt to call the function `withdraw` reverts with a particular message: -```typescript +```tsx it('shouldn"t allow to withdraw before unlock time', async () => { await expect(lockInstance.withdraw()).to.be.revertedWith("You can't withdraw yet"); }); @@ -265,7 +263,7 @@ In addition, Hardhat also allows you to manipulate the time of the environment w You can modify `the block.timestamp` by using the time helper: -```typescript +```tsx it('shouldn"t allow to withdraw a non owner', async () => { const newLastBlockTimeStamp = await time.latest(); @@ -288,7 +286,7 @@ Finally, test that the owner can withdraw. You can manipulate the time similarly Reveal code -```typescript +```tsx it('should allow to withdraw a owner', async () => { const balanceBefore = await ethers.provider.getBalance(await lockInstance.getAddress()); diff --git a/apps/base-docs/base-camp/docs/hardhat-verify/hardhat-verify-sbs.md b/apps/base-docs/base-camp/docs/hardhat-verify/hardhat-verify-sbs.md index 70e96911c1..b5fcfd070c 100644 --- a/apps/base-docs/base-camp/docs/hardhat-verify/hardhat-verify-sbs.md +++ b/apps/base-docs/base-camp/docs/hardhat-verify/hardhat-verify-sbs.md @@ -55,7 +55,7 @@ You'll need to go to that particular explorer and get the API Key following a si You can configure the Etherscan API Key for each different network. For example, include the following to the `hardhat.config.ts` file for Base Sepolia: -```typescript +```tsx base_sepolia: { url: "https://sepolia.base.org", accounts: { diff --git a/apps/base-docs/base-camp/docs/interfaces/contract-to-contract-interaction.md b/apps/base-docs/base-camp/docs/interfaces/contract-to-contract-interaction.md index 6c44ab7f47..4f427925c6 100644 --- a/apps/base-docs/base-camp/docs/interfaces/contract-to-contract-interaction.md +++ b/apps/base-docs/base-camp/docs/interfaces/contract-to-contract-interaction.md @@ -129,7 +129,7 @@ interface IUniswapV3Factory { Then, create a test file called `PoolCreator.test.ts` with the following content: -```typescript +```tsx import { ethers } from 'hardhat'; import { HardhatEthersSigner } from '@nomicfoundation/hardhat-ethers/signers'; diff --git a/apps/base-docs/base-camp/docs/reading-and-displaying-data/configuring-useReadContract.md b/apps/base-docs/base-camp/docs/reading-and-displaying-data/configuring-useReadContract.md index ec963069d2..2947f6d463 100644 --- a/apps/base-docs/base-camp/docs/reading-and-displaying-data/configuring-useReadContract.md +++ b/apps/base-docs/base-camp/docs/reading-and-displaying-data/configuring-useReadContract.md @@ -30,7 +30,7 @@ Once the excitement of your accomplishment of finally reading from your own cont The easiest is to use `useBlockNumber` with the `watch` feature to automatically keep track of the block number, then use the `queryClient` to update when that changes. **Make sure** you decompose the `queryKey` from the return of `useReadContract`. -```typescript +```tsx import { useEffect, useState } from 'react'; import { useReadContract, useBlockNumber } from 'wagmi'; import { useQueryClient } from '@tanstack/react-query'; @@ -82,7 +82,7 @@ Luckily, you have options to control these calls a little better. Once quick improvement is to simply stop watching the blockchain if the website doesn't have focus. To see this in action, add a state variable to count how many times the function has settled, and one for if the page is focused. You'll also need to set up event listeners to set the state of the latter when the page is focused or blurred. -```typescript +```tsx const [timesCalled, setTimesCalled] = useState(0); const [pageIsFocused, setPageIsFocused] = useState(true); @@ -102,13 +102,13 @@ useEffect(() => { Then, update the `watch` for `useBlockNumber` so that it only does so if `pageIsFocused`. -```typescript +```tsx const { data: blockNumber } = useBlockNumber({ watch: pageIsFocused }); ``` Add a line to the `useEffect` for `blockNumber` increment your counter as well. -```typescript +```tsx useEffect(() => { setTimesCalled((prev) => prev + 1); queryClient.invalidateQueries({ queryKey: issuesQueryKey }); @@ -117,7 +117,7 @@ useEffect(() => { Finally, surface your counter in the component. -```typescript +```tsx return (

Number of times called

@@ -139,7 +139,7 @@ A more robust DAO is going to have a voting period of at least a day or two, so Adjust your [`pollingInterval`] by setting it in `getDefaultConfig` in `_app.tsx`: -```typescript +```tsx const config = getDefaultConfig({ appName: 'RainbowKit App', projectId: 'YOUR_PROJECT_ID', @@ -157,7 +157,7 @@ You can also set `pollingInterval` if you're using `createConfig` instead of the You can use a similar system to call your update function on demand. First, add a button, a handler for that button, and a state variable for it to set: -```typescript +```tsx const [triggerRead, setTriggerRead] = useState(false); const handleTriggerRead = () => { @@ -165,7 +165,7 @@ const handleTriggerRead = () => { }; ``` -```typescript +```tsx return (
@@ -180,7 +180,7 @@ return ( Finally, set `watch` to equal `triggerRead`, instead of `pageIsFocused`, and reset `triggerRead` in the `useEffect`. -```typescript +```tsx const { data: blockNumber } = useBlockNumber({ watch: triggerRead }); // Other code... @@ -201,7 +201,7 @@ You can use the "is" return values to set UI elements depending on the status of Try to modify your button to provide feedback to the user that the function has been called. -```typescript +```tsx // Bad code example, do not use @@ -480,7 +480,7 @@ Use a blockchain explorer to mint a few NFTs on your contract if you haven't yet Add a new folder in `app` for `components` then add a component called `nftList` in a file of the same name. Import the address and ABI for your deployed Random Color NFT contract. Also import `useAccount` and `useReadContract` from `wagmi`: -```typescript +```tsx import { useAccount, useReadContract } from 'wagmi'; import contractData from '../contracts/RandomColorNFT.json'; ``` @@ -528,7 +528,7 @@ export function NFTList() { Add a type and helper function to convert the base64 encoded metadata to JSON: -```typescript +```tsx type JSONMetadata = { name: string; description: string; @@ -548,7 +548,7 @@ The image is already in a format usable by `` tags! Now that you can extract your metadata and image from your data, use it to build a render function for your NFTs: -```typescript +```tsx function renderNft(nft: NFTData) { const metadata = getJsonMetadata(nft); return ( @@ -563,7 +563,7 @@ function renderNft(nft: NFTData) { And use it to display them: -```typescript +```tsx return (

NFTs

@@ -587,7 +587,7 @@ Everything should work as expected for both. Import and set up functions to write to your contract and wait for the receipt: -```typescript +```tsx const { data: writeData, writeContract } = useWriteContract(); const { data: receipt } = useWaitForTransactionReceipt({ hash: writeData, @@ -596,7 +596,7 @@ const { data: receipt } = useWaitForTransactionReceipt({ Wait for the receipt, and use it to trigger a refetch of the NFT data. Doing so will update the user's list of NFTs after they buy a new one: -```typescript +```tsx useEffect(() => { if (receipt) { refetchNftData(); @@ -606,7 +606,7 @@ useEffect(() => { Finally, add a button allowing the user to purchase a new NFT: -```typescript +```tsx