Merge pull request #7 from skundu42/dev

rectify old callouts

content/docs/smart-contracts/deploy/foundry.mdx

@@ -3,6 +3,9 @@ title: Foundry
 description: Learn how to deploy on Shardeum using Foundry
 ---
 
+import { Callout } from 'fumadocs-ui/components/callout';
+
+
 Foundry is a fast testing and deployment tool for developing EVM smart contracts.
 Tests are written in Solidity to keep the workflow consistent with smart contract development and testing before deployments.
 
@@ -41,7 +44,14 @@ foundryup
 If this installation method does not work,
 or you would like to install Foundry a different way, see other installation methods in Foundry's README:
 
-https://github.com/foundry-rs/foundry#installation
+<Cards>
+  <Card
+    href="https://github.com/foundry-rs/foundry#installation"
+    title="Foundry's ReadMe"
+    description="Learn more about foundry, how to install, etc."
+  />
+</Cards>
+
 
 
 ## Creating a Foundry Project
@@ -218,9 +228,9 @@ forge test
 
 If you want a detailed overview of how a specific test failed or passed, add a match test add verbosity flag.
 
-:::tip
+<Callout title="Verbose" type="info">
 The more v characters you add to the verbosity flag, the more detailed the test report will be.
-:::
+</Callout>
 
 The example below has level 4 verbosity for the match test contract function ```testDonateToOwnerValidPath```:
 
@@ -257,9 +267,9 @@ However, some contract applications integrate with contracts already deployed to
 If you want to test contracts deployed to specific networks and know your code coverage, run the following command with a RPC URL endpoint
 for the ```--fork-url``` flag:
 
-:::tip
+<Callout title="Local Unit Testing" type="info">
 Do local unit testing first before forking a network to speed up testing time.
-:::
+</Callout>
 
 ```shell
 forge coverage --fork-url $mainnetHTTPS_InfuraAPIKey --report lcov && genhtml lcov.info -o report --branch-coverage
@@ -293,16 +303,16 @@ $devTestnetPrivateKey
 $etherscanApiKey
 ```
 
-:::tip
+
+<Callout title="EIP-1559" type="info">
 Using
 
 ```
 forge create
 ```
 
 will use EIP-1559 for the deployment transaction by default.
-
-:::
+</Callout>
 
 
 ```shell
@@ -314,7 +324,9 @@ forge create --rpc-url $goerliHTTPS_InfuraAPIKey --etherscan-api-key $etherscanA
 
 If the following Goerli deployment worked, the following Shardeum deployment should work as well.
 
-:::danger[WARNING]
+
+<Callout title="Legacy flag" type="warn">
+
 The
 
 ```
@@ -329,13 +341,12 @@ Otherwise, you will see the following error when attempting to deploy to Shardeu
 EIP-1559 not activated
 ```
 
-:::
-
+</Callout>
 
-:::danger[WARNING]
+<Callout title="Deployment Info" type="warn">
 The terminal might not notify you if the contract deployment worked.
 Check the Shardeum Explorer after a transaction cycle to see if the contract deployed from the signer address from the private key used.
-:::
+</Callout>
 
 
 ```shell

content/docs/smart-contracts/deploy/hardhat.mdx

@@ -2,6 +2,8 @@
 title: Hardhat
 description: Learn how to deploy on Shardeum with hardhat
 ---
+import { Callout } from 'fumadocs-ui/components/callout';
+
 
 Hardhat is a development environment to compile, deploy, test, and debug your Ethereum software. It helps developers manage and automate the recurring tasks inherent to the process of building smart contracts and dApps and easily introduces more functionality around this workflow. This means compiling, running and testing smart contracts at the very core.
 
@@ -30,11 +32,11 @@ npm install --save-dev hardhat
 ```
 
 
-:::tip Tip
+<Callout title="Hardhat Version" type="info">
 
 Installing Hardhat will install some Ethereum JavaScript dependencies, so be patient.
 
-:::
+</Callout>
 
 This tutorial will use the Ethers.js and Waffle plugins. They'll allow interaction with Shardeum to test contracts.
 

content/docs/smart-contracts/deploy/remix.mdx

@@ -1,19 +1,22 @@
 ---
 title: Remix IDE
-sidebar_position: 1
+description: Deploy on Shardeum using Remix
 ---
 
+import { Callout } from 'fumadocs-ui/components/callout';
+
+
 Remix IDE is an open source web and desktop application. It fosters a fast development cycle and has a rich set of plugins with intuitive GUIs. Remix is used for the entire journey of contract development as well as act as a playground for learning and teaching Ethereum.
 
-1, Visit https://remix.ethereum.org/
+1. Visit https://remix.ethereum.org/
 
 ## Writing your smart contract
 
-2, Create a "New File" under contracts with name HelloWorld.sol.
+2. Create a "New File" under contracts with name HelloWorld.sol.
 
 ![remix_1](/img/remix/remix_1.jpg)
 
-3, Copy and paste the code below to HelloWorld.sol file.
+3. Copy and paste the code below to HelloWorld.sol file.
 
 
 ```solidity
@@ -38,42 +41,43 @@ contract HelloWorld { // Defines a contract named `HelloWorld`
 
 ## Compiling
 
-4, Compile HelloWorld.sol.
+4. Compile HelloWorld.sol.
 
 ![remix_2](/img/remix/remix_2.jpg)
 
 ## Deploying to Shardeum
 
-5, Select Injected Web3 for deploying to Shardeum.
+5. Select Injected Web3 for deploying to Shardeum.
+
 
-:::caution
+<Callout title="Injected Web3" type="warn">
 If Injected Web3 cannot detect the network, refresh the Remix IDE page, and then switch between networks in MetaMask.
-:::
+</Callout>
 
 ![remix_3](/img/remix/remix_3.jpg)
 
-6, Deploy the compiler contract.
+6. Deploy the compiler contract.
 
 ![remix_4](/img/remix/remix_4.jpg)
 
-7, Confirm the deploy transaction in MetaMask.
+7. Confirm the deploy transaction in MetaMask.
 
 ![remix_5](/img/remix/remix_5.jpg)
 
-8, Find the deployed contract address in Remix.
+8. Find the deployed contract address in Remix.
 
 ![remix_6](/img/remix/remix_6.jpg)
 
 ## Interacting
 
-9, Update the contract by interacting with the contract.
+9. Update the contract by interacting with the contract.
 
 ![remix_7](/img/remix/remix_7.jpg)
 
-10, Confirm the deploy transaction in MetaMask.
+10. Confirm the deploy transaction in MetaMask.
 
 ![remix_8](/img/remix/remix_8.jpg)
 
-11, Check the contract has been updated.
+11. Check the contract has been updated.
 
 ![remix_9](/img/remix/remix_9.jpg)