Overhaul hardhat quickstart > Remix

arbitrum-docs/build-decentralized-apps/token-bridging/bridge-tokens-programmatically/02-how-to-bridge-tokens-standard.mdx

@@ -7,7 +7,7 @@ content_type: how-to
 
 In this how-to you’ll learn how to bridge your own token between Ethereum (Layer 1 or L1) and Arbitrum (Layer 2 or L2), using [Arbitrum’s standard ERC20 gateway](/build-decentralized-apps/token-bridging/03-token-bridge-erc20.mdx#default-standard-bridging). For alternative ways of bridging tokens, don’t forget to check out this [overview](/build-decentralized-apps/token-bridging/bridge-tokens-programmatically/01-get-started.mdx).
 
-Familiarity with [Arbitrum’s token bridge system](/build-decentralized-apps/token-bridging/01-overview.mdx), smart contracts, and blockchain development is expected. If you’re new to blockchain development, consider reviewing our [Quickstart: Build a dApp with Arbitrum (Solidity, Hardhat)](/build-decentralized-apps/01-quickstart-solidity-hardhat.mdx) before proceeding. We will use [Arbitrum’s SDK](https://github.com/OffchainLabs/arbitrum-sdk) throughout this how-to, although no prior knowledge is required.
+Familiarity with [Arbitrum’s token bridge system](/build-decentralized-apps/token-bridging/01-overview.mdx), smart contracts, and blockchain development is expected. If you’re new to blockchain development, consider reviewing our [Quickstart: Build a dApp with Arbitrum (Solidity, Hardhat)](/build-decentralized-apps/01-quickstart-solidity-remix.mdx) before proceeding. We will use [Arbitrum’s SDK](https://github.com/OffchainLabs/arbitrum-sdk) throughout this how-to, although no prior knowledge is required.
 
 We will go through all steps involved in the process. However, if you want to jump straight to the code, we have created [this script in our tutorials repository](https://github.com/OffchainLabs/arbitrum-tutorials/tree/master/packages/token-deposit) that encapsulates the entire process.
 

arbitrum-docs/build-decentralized-apps/token-bridging/bridge-tokens-programmatically/03-how-to-bridge-tokens-generic-custom.mdx

@@ -7,7 +7,7 @@ content_type: how-to
 
 In this how-to you’ll learn how to bridge your own token between Ethereum (Layer 1 or L1) and Arbitrum (Layer 2 or L2), using [Arbitrum’s generic-custom gateway](/build-decentralized-apps/token-bridging/03-token-bridge-erc20.mdx#the-arbitrum-generic-custom-gateway). For alternative ways of bridging tokens, don’t forget to check out this [overview](/build-decentralized-apps/token-bridging/bridge-tokens-programmatically/01-get-started.mdx).
 
-Familiarity with [Arbitrum’s token bridge system](/build-decentralized-apps/token-bridging/01-overview.mdx), smart contracts, and blockchain development is expected. If you’re new to blockchain development, consider reviewing our [Quickstart: Build a dApp with Arbitrum (Solidity, Hardhat)](/build-decentralized-apps/01-quickstart-solidity-hardhat.mdx) before proceeding. We will use [Arbitrum’s SDK](https://github.com/OffchainLabs/arbitrum-sdk) throughout this how-to, although no prior knowledge is required.
+Familiarity with [Arbitrum’s token bridge system](/build-decentralized-apps/token-bridging/01-overview.mdx), smart contracts, and blockchain development is expected. If you’re new to blockchain development, consider reviewing our [Quickstart: Build a dApp with Arbitrum (Solidity, Hardhat)](/build-decentralized-apps/01-quickstart-solidity-remix.mdx) before proceeding. We will use [Arbitrum’s SDK](https://github.com/OffchainLabs/arbitrum-sdk) throughout this how-to, although no prior knowledge is required.
 
 We will go through all steps involved in the process. However, if you want to jump straight to the code, we have created [this script in our tutorials repository](https://github.com/OffchainLabs/arbitrum-tutorials/tree/master/packages/custom-token-bridging) that encapsulates the entire process.
 

arbitrum-docs/build-decentralized-apps/token-bridging/bridge-tokens-programmatically/04-how-to-bridge-tokens-custom-gateway.mdx

@@ -13,7 +13,7 @@ Before starting to implement and deploy a custom gateway, it is strongly encoura
 
 In this how-to you’ll learn how to bridge your own token between Ethereum (Layer 1 or L1) and Arbitrum (Layer 2 or L2), using a custom gateway. For alternative ways of bridging tokens, don’t forget to check out this [overview](/build-decentralized-apps/token-bridging/bridge-tokens-programmatically/01-get-started.mdx).
 
-Familiarity with [Arbitrum’s token bridge system](/build-decentralized-apps/token-bridging/01-overview.mdx), smart contracts, and blockchain development is expected. If you’re new to blockchain development, consider reviewing our [Quickstart: Build a dApp with Arbitrum (Solidity, Hardhat)](/build-decentralized-apps/01-quickstart-solidity-hardhat.mdx) before proceeding. We will use [Arbitrum’s SDK](https://github.com/OffchainLabs/arbitrum-sdk) throughout this how-to, although no prior knowledge is required.
+Familiarity with [Arbitrum’s token bridge system](/build-decentralized-apps/token-bridging/01-overview.mdx), smart contracts, and blockchain development is expected. If you’re new to blockchain development, consider reviewing our [Quickstart: Build a dApp with Arbitrum (Solidity, Hardhat)](/build-decentralized-apps/01-quickstart-solidity-remix.mdx) before proceeding. We will use [Arbitrum’s SDK](https://github.com/OffchainLabs/arbitrum-sdk) throughout this how-to, although no prior knowledge is required.
 
 We will go through all steps involved in the process. However, if you want to jump straight to the code, we have created [this script in our tutorials repository](https://github.com/OffchainLabs/arbitrum-tutorials/tree/master/packages/custom-gateway-bridging) that encapsulates the entire process.
 

arbitrum-docs/for-devs/oracles/api3/api3.mdx

@@ -59,7 +59,7 @@ contract ARBPriceConsumer {
 }
 ```
 
-You can adapt this contract to your needs. Just remember to use the address of the asset you want to request the price for in the appropriate network and to **deploy your contract to the same network**. Remember we have a [Quickstart](/build-decentralized-apps/01-quickstart-solidity-hardhat.mdx) available that goes through the process of compiling and deploying a contract.
+You can adapt this contract to your needs. Just remember to use the address of the asset you want to request the price for in the appropriate network and to **deploy your contract to the same network**. Remember we have a [Quickstart](/build-decentralized-apps/01-quickstart-solidity-remix.mdx) available that goes through the process of compiling and deploying a contract.
 
 ### Querying a random number through API3
 
@@ -155,7 +155,7 @@ contract QrngRequester is RrpRequesterV0 {
 }
 ```
 
-You can adapt this contract to your needs. Just remember to set the `sponsorWallet` address before making the request to use the appropriate network's addresses, and to **deploy your contract to the same network**. Remember, we have a [Quickstart](/build-decentralized-apps/01-quickstart-solidity-hardhat.mdx) available that goes through the process of compiling and deploying a contract.
+You can adapt this contract to your needs. Just remember to set the `sponsorWallet` address before making the request to use the appropriate network's addresses, and to **deploy your contract to the same network**. Remember, we have a [Quickstart](/build-decentralized-apps/01-quickstart-solidity-remix.mdx) available that goes through the process of compiling and deploying a contract.
 
 ### More examples
 

arbitrum-docs/for-devs/oracles/chainlink/chainlink.mdx

@@ -59,7 +59,7 @@ contract ARBPriceConsumer {
 }
 ```
 
-You can adapt this contract to your needs. Just remember to use the address of the asset you want to request the price for in the appropriate network, and to **deploy your contract to the same network**. Remember we have a [Quickstart](/build-decentralized-apps/01-quickstart-solidity-hardhat.mdx) available that goes through the process of compiling and deploying a contract.
+You can adapt this contract to your needs. Just remember to use the address of the asset you want to request the price for in the appropriate network, and to **deploy your contract to the same network**. Remember we have a [Quickstart](/build-decentralized-apps/01-quickstart-solidity-remix.mdx) available that goes through the process of compiling and deploying a contract.
 
 ### More examples
 

arbitrum-docs/for-devs/oracles/trellor/trellor.mdx

@@ -47,7 +47,7 @@ contract ARBPriceConsumer is UsingTellor {
 }
 ```
 
-You can adapt this contract to your needs. Just remember to use the ticker of the assets you want to request the price for and to **deploy your contract to the appropriate network, with the address of the Oracle contract in that network**. Remember, we have a [Quickstart](/build-decentralized-apps/01-quickstart-solidity-hardhat.mdx) available that goes through the process of compiling and deploying a contract.
+You can adapt this contract to your needs. Just remember to use the ticker of the assets you want to request the price for and to **deploy your contract to the appropriate network, with the address of the Oracle contract in that network**. Remember, we have a [Quickstart](/build-decentralized-apps/01-quickstart-solidity-remix.mdx) available that goes through the process of compiling and deploying a contract.
 
 ### See also
 

arbitrum-docs/partials/_contribute-docs-partial.mdx

@@ -109,7 +109,7 @@ Every document should be a specific _type_ of document. Each type of document ha
 | Document type       | Purpose                                                                            | Example(s) to refer to                                                                                                                                                    |
 | ------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Gentle introduction | Onboard a specific reader audience with tailored questions and answers             | [A gentle introduction to Orbit](/launch-orbit-chain/orbit-gentle-introduction.md)                                                                                        |
-| Quickstart          | Onboard a specific reader audience with step-by-step "learn by doing" instructions | [Quickstart: Build dApps](/build-decentralized-apps/01-quickstart-solidity-hardhat.mdx)                                                                                   |
+| Quickstart          | Onboard a specific reader audience with step-by-step "learn by doing" instructions | [Quickstart: Build dApps](/build-decentralized-apps/01-quickstart-solidity-remix.mdx)                                                                                     |
 | How-to              | Provide task-oriented procedural guidance                                          | [How to run a full chain simulation](/run-arbitrum-node/04-run-local-full-chain-simulation.mdx)                                                                           |
 | Concept             | Explain what things are and how they work                                          | [Token bridging](/build-decentralized-apps/token-bridging/03-token-bridge-erc20.mdx) <br/>[Nodes and networks](https://docs.prylabs.network/docs/concepts/nodes-networks) |
 | FAQ                 | Address frequently asked questions                                                 | [FAQ: Run a node](../node-running/faq.mdx)                                                                                                                                |

arbitrum-docs/welcome/get-started.mdx

@@ -40,11 +40,11 @@ The Arbitrum suite includes the protocols, chains, services, and SDKs that power
 
 **Developers** build Arbitrum dApps by deploying smart contracts to an Arbitrum chain.
 
-| Resource                                                                              | Description                                                                                              |
-| ------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
-| [A gentle introduction to Arbitrum](/welcome/arbitrum-gentle-introduction)            | A technical introduction to Arbitrum's suite of scaling solutions.                                       |
-| [Quickstart (Solidity)](/build-decentralized-apps/01-quickstart-solidity-hardhat.mdx) | Targeted at web2 developers who want to deploy their first Solidity smart contract to Arbitrum.          |
-| [Quickstart (Rust)](/stylus/quickstart)                                               | Targeted at web3 developers who want to deploy their first Rust smart contract to Arbitrum using Stylus. |
+| Resource                                                                            | Description                                                                                              |
+| ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| [A gentle introduction to Arbitrum](/welcome/arbitrum-gentle-introduction)          | A technical introduction to Arbitrum's suite of scaling solutions.                                       |
+| [Quickstart (Solidity)](/build-decentralized-apps/01-quickstart-solidity-remix.mdx) | Targeted at web2 developers who want to deploy their first Solidity smart contract to Arbitrum.          |
+| [Quickstart (Rust)](/stylus/quickstart)                                             | Targeted at web3 developers who want to deploy their first Rust smart contract to Arbitrum using Stylus. |
 
 ## Arbitrum for node runners
 

vercel.json

@@ -411,8 +411,8 @@
       "permanent": false
     },
     {
-      "source": "/(for-devs/quickstart-solidity-hardhat/?)",
-      "destination": "/build-decentralized-apps/quickstart-solidity-hardhat",
+      "source": "/(for-devs/quickstart-solidity-remix/?)",
+      "destination": "/build-decentralized-apps/quickstart-solidity-remix",
       "permanent": false
     },
     {
@@ -607,7 +607,7 @@
     },
     {
       "source": "/docs/tutorials",
-      "destination": "/for-devs/quickstart-solidity-hardhat",
+      "destination": "/for-devs/quickstart-solidity-remix",
       "permanent": false
     },
     {
@@ -617,17 +617,17 @@
     },
     {
       "source": "/docs/frontend_integration",
-      "destination": "/for-devs/quickstart-solidity-hardhat",
+      "destination": "/for-devs/quickstart-solidity-remix",
       "permanent": false
     },
     {
       "source": "/docs/contract_deployment",
-      "destination": "/for-devs/quickstart-solidity-hardhat",
+      "destination": "/for-devs/quickstart-solidity-remix",
       "permanent": false
     },
     {
       "source": "/getting-started-devs",
-      "destination": "/for-devs/quickstart-solidity-hardhat",
+      "destination": "/for-devs/quickstart-solidity-remix",
       "permanent": false
     },
     {

website/package.json

@@ -57,6 +57,9 @@
     "typedoc-plugin-markdown": "4.0.1",
     "typescript": "^5.1"
   },
+  "resolutions": {
+    "image-size": "~1.0.2"
+  },
   "browserslist": {
     "production": [
       ">0.5%",

website/sidebars.js

@@ -36,7 +36,7 @@ const sidebars = {
       items: [
         {
           type: 'doc',
-          id: 'build-decentralized-apps/quickstart-solidity-hardhat',
+          id: 'build-decentralized-apps/quickstart-solidity-remix',
           label: 'Quickstart (Solidity)',
         },
         {

website/src/components/CustomDetails/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Details from '@theme/Details';
+import styles from './styles.module.css';
+
+interface Props {
+  children: React.ReactNode;
+  summary?: string | React.ReactElement;
+  className?: string;
+}
+
+export default function CustomDetails({
+  children,
+  summary,
+  className,
+  ...props
+}: Props): JSX.Element {
+  return (
+    <Details {...props} summary={summary} className={`${styles.details} ${className || ''}`}>
+      {children}
+    </Details>
+  );
+}

website/src/components/CustomDetails/styles.module.css

@@ -0,0 +1,65 @@
+.details {
+  --docusaurus-details-summary-arrow-size: 0.5rem;
+  --docusaurus-details-transition: transform 300ms ease;
+  --docusaurus-details-decoration-color: var(--ifm-color-primary);
+  margin: 1rem 0;
+  padding: 0.1rem 1rem;
+  --ifm-alert-background-color: transparent;
+}
+
+.details[open] {
+  padding: 1rem;
+}
+
+.details > summary {
+  position: relative;
+  cursor: pointer;
+  list-style: none;
+  padding: 0.25rem 0.25rem 0.25rem 1.5rem;
+  margin: 0;
+}
+
+.details > summary::-webkit-details-marker {
+  display: none;
+}
+
+.details > summary::before {
+  position: absolute;
+  top: 0.6rem;
+  left: 0.5rem;
+  content: '';
+  border-width: var(--docusaurus-details-summary-arrow-size);
+  border-style: solid;
+  border-color: transparent transparent transparent var(--docusaurus-details-decoration-color);
+  transform: rotate(0deg);
+  transition: var(--docusaurus-details-transition);
+  transform-origin: calc(var(--docusaurus-details-summary-arrow-size) / 2) 50%;
+}
+
+.details[open]:not(.isBrowser) > summary::before,
+.details[data-collapsed='false'].isBrowser > summary::before {
+  transform: rotate(90deg);
+}
+
+.details > div > .collapsibleContent {
+  margin-top: 0.2rem;
+  border-top: 1px solid var(--docusaurus-details-decoration-color);
+  padding: 0.1rem !important;
+  background: none !important;
+  background-color: unset !important;
+  --ifm-alert-background-color: unset !important;
+}
+
+.details > div > .collapsibleContent p:last-child {
+  margin-bottom: 0;
+}
+
+.details > summary > p:last-child {
+  margin: 0;
+}
+
+.details > div > .collapsibleContent img {
+  max-width: 600px;
+  width: 100%;
+  height: auto;
+}

website/src/components/HomepageFeatures/index.tsx

@@ -20,7 +20,7 @@ const FeatureList: FeatureItem[] = [
   {
     title: 'Quickstart: Build a dApp (Solidity)',
     Svg: require('@site/static/img/cupcake_icon.svg').default,
-    href: '/build-decentralized-apps/quickstart-solidity-hardhat',
+    href: '/build-decentralized-apps/quickstart-solidity-remix',
     description:
       'Deploy a cupcake vending machine contract locally, then to Arbitrum Sepolia, then to Arbitrum Mainnet.',
   },

website/src/css/partials/_content-body.scss

@@ -102,11 +102,9 @@ article {
     }
 
     .footnotes {
-      border-top: 1px solid #ddd;
       margin-top: 50px;
 
       &:before {
-        content: 'Footnotes:';
         font-weight: 600;
         margin-top: 30px;
         display: inline-block;

website/src/css/partials/_page-specific-styles.scss

@@ -1,6 +1,6 @@
 @use './_mixins.scss' as *;
 
-[class*='quickstart-solidity-hardhat'] {
+[class*='quickstart-solidity-remix'] {
   .vending-machine {
     border-radius: 5px;
     display: flex;