Switch typescript code blocks to tsx

base-org · Jun 25, 2024 · f524d62 · f524d62
1 parent be1a620
commit f524d62
Show file tree

Hide file tree

Showing 29 changed files with 197 additions and 200 deletions.
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
@@ -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 (
   <html lang="en">
     <body className={inter.className}>
@@ -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 `<div>`:
 
-```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
 <ConnectButton showBalance={false} />
 ```
 

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
@@ -30,15 +30,15 @@ To install:
 
 1. Run `npm install -D hardhat-deploy`. Then, import hardhat-deploy in `hardhat.config.ts`:
 
-```typescript
+```tsx
 import 'hardhat-deploy';
 ```
 
 2. Create a folder called deploy and inside it create a new file called `001_deploy_lock.ts`.
 
 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,15 +121,15 @@ 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';
 ```
 
 `deployments` will allow you to execute the deployment files from your test.
 
 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
@@ -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
@@ -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
@@ -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 () {
   });
 });
 ```
+
 </details>
 
 ### Testing `unlockTime`
@@ -150,7 +151,7 @@ The first test case should verify that the `unlockTime` variable is correct.
 
 <summary>Reveal code</summary>
 
-```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:
 
 <summary>Reveal code</summary>
 
-```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.
 
 <summary>Reveal code</summary>
 
-```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
 
 <summary>Reveal code</summary>
 
-```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
@@ -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
@@ -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';