react-solidity improvements

* added default contract, so frontend app could work without deploying
the contract
* improved instructions

Author: mutantcornholio

src/templateConfigs/react-solidity.ts

@@ -15,10 +15,14 @@ const config: TemplateConfig = {
     /^package\.json/,
   ],
   instructions: `
-${c.secondary("Start remixd environment:")}
+${c.primary("Step 1: ")}${c.secondary("start remixd environment")}
 ${c.code("pnpm remixd")}
 
-${c.secondary("Start frontend app:")}
+${c.primary("Step 2: ")}\
+${c.secondary("after deploying and pinning smart contracts in remix, build the contracts")}
+${c.code("pnpm contracts:build")}
+
+${c.primary("Step 3: ")}${c.secondary("start frontend app")}
 ${c.code("pnpm frontend:dev")}`,
 };
 

templates/react-solidity/contracts/.deploys/pinned-contracts/420420421/0x12d7b1015d6888edbeb19610cfe518310405c685.json

@@ -0,0 +1,47 @@
+{
+  "name": "Storage",
+  "address": "0x12d7b1015d6888edbeb19610cfe518310405c685",
+  "abi": [
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "num",
+          "type": "uint256"
+        }
+      ],
+      "name": "addMoney",
+      "outputs": [],
+      "stateMutability": "payable",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "num",
+          "type": "uint256"
+        }
+      ],
+      "name": "store",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "retrieve",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    }
+  ],
+  "filePath": " - connect to localhost - /Storage.sol",
+  "pinnedAt": 1733225540743
+}

templates/react-solidity/frontend/src/App.tsx

@@ -8,7 +8,7 @@ import polkadotLogo from "./assets/polkadot-logo.svg";
 import { useNetworkData } from "./hooks/useNetworkData";
 
 function App() {
-  const contractData = contracts["1b5b93a223026219f4f75e5b90c20970ab976451"];
+  const contractData = contracts["12d7b1015d6888edbeb19610cfe518310405c685"];
   const { storedValue, balance, chainId } = useNetworkData(contractData);
 
   return (