refactor network config and cleanup

README.md

@@ -10,7 +10,7 @@
 ⚙️ Built using NextJS, Tailwind and Typescript.
 
 - ✅ **Contract Hot Reload**: Your frontend auto-adapts to your smart contract as you edit it.
-- 🪝 **[Custom hooks](https://docs.scaffoldeth.io/hooks/)**: Collection of React hooks to simplify interactions with smart contracts.
+- 🪝 **[Custom hooks](https://docs.scaffoldeth.io/hooks/)**: Collection of React hooks to simplify interactions with Move modules .
 - 🧱 [**Components**](https://docs.scaffoldeth.io/components/): Collection of common web3 components to quickly build your frontend.
 - 🔐 **Integration with Wallet Providers**: Connect your Petra Wallet and interact with the Aptos or Movement M1 network.
 
@@ -36,7 +36,7 @@ cd scaffold-move
 yarn install
 ```
 
-2. ~~Run a local network in the first terminal:~~
+2. ~~Run a local network in  the first terminal:~~
 
 <!-- ```
 yarn chain
@@ -58,7 +58,7 @@ This command overwrites `packages/move/.aptos/config.yaml` with a new Aptos acco
 yarn deploy
 ```
 
-This command deploys a test smart contract to the local network. The contract is located in `packages/hardhat/contracts` and can be modified to suit your needs. The `yarn deploy` command uses `movement aptos move publish` to publish the contract to the network. After this is executes the script located in `scripts/loadContracts.js` to make the new contracts available in the nextjs frontend.
+This command deploys the move modules to the selected network. The contract is located in `packages/move/sources` and can be modified to suit your needs. The `yarn deploy` command uses `movement aptos move publish` to publish the modules to the network. After this is executes the script located in `scripts/loadContracts.js` to make the new contracts available in the nextjs frontend.
 
 5. On a third terminal, start your NextJS app:
 
@@ -78,14 +78,9 @@ Visit your app on: `http://localhost:3000`. You can interact with your smart con
 
 For this hackathon I kept the scope small due to the time constraints. I build only the most essential and useful features, so that developers can start using Scaffold Move right away. However, there is much more that I want to add to this project after the hackathon. If you have any ideas or suggestions, please reach out and I will add it to this list.
 
-- Wallet button component
-  - Fix QR code
-  - Add network switch
-  - Styling of connect button
-- Store Aptos/Movement network data in scaffold-config
+
 - Debug page
   - Msg for no result on view methods + error msg 
-  - Formatting of input types
   - Styling for resources tab
   - Group contracts under address in list
 - Fix colors for dark mode
@@ -97,6 +92,8 @@ For this hackathon I kept the scope small due to the time constraints. I build o
 <!-- - [Presentation video]()
 - [Presentation slides]() -->
 - [Website](https://scaffold-move-chi.vercel.app/)
+- [Dorahacks](https://dorahacks.io/buidl/13953)
+- [Github](https://github.com/arjanjohan/scaffold-move)
 
 ## Team
 

packages/nextjs/app/bio/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useState } from "react";
-import { Aptos, AptosConfig, Network } from "@aptos-labs/ts-sdk";
 import { InputTransactionData, useWallet } from "@aptos-labs/wallet-adapter-react";
 import type { NextPage } from "next";
 import { InputBase } from "~~/components/scaffold-eth";
@@ -10,8 +9,7 @@ import useSubmitTransaction from "~~/hooks/scaffold-move/useSubmitTransaction";
 import { useGetAccountModules } from "~~/hooks/scaffold-move/useGetAccountModules";
 import { aptosClient } from "~~/utils/scaffold-move/aptosClient";
 
-
-const aptos = aptosClient("devnet");
+const aptos = aptosClient("m1_devnet");
 
 const ONCHAIN_BIO = deployedModules.devnet.onchain_bio.abi;
 
@@ -110,6 +108,7 @@ const OnchainBio: NextPage = () => {
           </div>
           <button
             className="btn btn-secondary mt-2"
+            disabled={!account}
             onClick={async () => {
               try {
                 await registerBio();
@@ -126,6 +125,7 @@ const OnchainBio: NextPage = () => {
         <div className="flex flex-col items-center space-y-4 bg-base-100 shadow-lg shadow-secondary border-8 border-secondary rounded-xl p-6 mt-8 w-full max-w-lg">
           <button
             className="btn btn-secondary mt-2"
+            disabled={!account}
             onClick={async () => {
               try {
                 await fetchBio();
@@ -136,14 +136,26 @@ const OnchainBio: NextPage = () => {
           >
             Fetch Bio
           </button>
-        </div>
+
 
         {accountHasBio && !transactionInProcess && (
-          <div>
-            <div>{currentName}</div>
-            <div>{currentBio}</div>
+        <div className="space-y-4 w-full max-w-lg">
+          <div className="flex items-center">
+            <span className="text-xs font-medium mr-2 leading-none">Name:</span>
+          </div>
+          <div className="w-full flex flex-col space-y-2">
+            {currentName}
+          </div>            
+          <div className="flex items-center">
+            <span className="text-xs font-medium mr-2 leading-none">Bio:</span>
+          </div>
+          <div className="w-full flex flex-col space-y-2">
+            {currentBio}
+          </div>       
           </div>
         )}
+        </div>
+
       </div>
     </>
   );

packages/nextjs/app/debug/_components/contract/ContractUI.tsx

@@ -3,12 +3,12 @@
 // @refresh reset
 import { ContractReadMethods } from "./ContractReadMethods";
 import { ModuleResources } from "./ModuleResources";
-import { ContractVariables } from "./ContractVariables";
 import { ContractWriteMethods } from "./ContractWriteMethods";
 import { Address, Balance} from "~~/components/scaffold-move";
 
 import { useDeployedContractInfo } from "~~/hooks/scaffold-move";
 import { ContractName } from "~~/utils/scaffold-eth/contract";
+import { useTargetNetwork } from "~~/hooks/scaffold-move/useTargetNetwork"; 
 
 type ContractUIProps = {
   contractName: ContractName;
@@ -19,8 +19,7 @@ type ContractUIProps = {
  * UI component to interface with deployed contracts.
  **/
 export const ContractUI = ({ contractName, className = "" }: ContractUIProps) => {
-  // const { targetNetwork } = useTargetNetwork();
-  const targetNetwork = "devnet"
+  const { targetNetwork } = useTargetNetwork();
   const { data: deployedContractData, isLoading: deployedContractLoading } = useDeployedContractInfo(contractName);
 
   if (deployedContractLoading) {
@@ -33,7 +32,7 @@ export const ContractUI = ({ contractName, className = "" }: ContractUIProps) =>
   if (!deployedContractData || !deployedContractData.abi) {
     return (
       <p className="text-3xl mt-14">
-        {`No contract found by the name of "${contractName}" on chain "${targetNetwork}"!`}
+        {`No contract found by the name of "${String(contractName)}" on chain "${targetNetwork}"!`}
       </p>
     );
   }
@@ -45,7 +44,7 @@ export const ContractUI = ({ contractName, className = "" }: ContractUIProps) =>
           <div className="bg-base-100 border-base-300 border shadow-md shadow-secondary rounded-3xl px-6 lg:px-8 mb-6 space-y-1 py-4">
             <div className="flex">
               <div className="flex flex-col gap-1">
-                <span className="font-bold">{contractName}</span>
+                <span className="font-bold">{String(contractName)}</span>
                 <Address address={deployedContractData.abi.address} />
                 <div className="flex gap-1 items-center">
                   <span className="font-bold text-sm">Balance:</span>
@@ -56,7 +55,7 @@ export const ContractUI = ({ contractName, className = "" }: ContractUIProps) =>
             {targetNetwork && (
               <p className="my-0 text-sm">
                 <span className="font-bold">Network</span>:{" "}
-                <span >{targetNetwork}</span>
+                <span >{String(targetNetwork.name)}</span>
               </p>
             )}
           </div>

packages/nextjs/app/debug/_components/contract/FunctionForm.tsx

@@ -3,7 +3,7 @@
 import { Types } from "aptos";
 import { parseTypeTag } from "@aptos-labs/ts-sdk";
 import {
-  InputTransactionData,
+  InputTransactionData, useWallet
 } from "@aptos-labs/wallet-adapter-react";
 
 import { useState } from "react";
@@ -46,8 +46,9 @@ export const FunctionForm = ({
   const [viewInProcess, setViewInProcess] = useState(false);
   const [result, setResult] = useState<Types.MoveValue[]>();
   const [data, setData] = useState<ContractFormType>({ typeArgs: [], args: [] });
-  // const [state] = useGlobalState();
-  const state = {network_value: "https://aptos.devnet.m1.movementlabs.xyz"}
+
+  const { account } = useWallet();
+  const state = { network_value: "https://aptos.devnet.m1.movementlabs.xyz" }
 
 
   const fnParams = removeSignerParam(fn, write);
@@ -154,7 +155,6 @@ export const FunctionForm = ({
           {fn.name}
         </p>
         {fnParams.map((param, i) => {
-          // const isOption = param.startsWith("0x1::option::Option");
           return (
             <div key={`arg-${i}`} className="flex flex-col gap-1.5 w-full">
               <div className="flex items-center mt-2 ml-2">
@@ -179,7 +179,7 @@ export const FunctionForm = ({
           <div className="flex flex-col md:flex-row justify-between gap-2 flex-wrap">
             <div className="flex-grow basis-0">
 
-            {transactionResponse !== null && transactionResponse?.transactionSubmitted && (
+              {transactionResponse !== null && transactionResponse?.transactionSubmitted && (
                 <div className="bg-base-300 rounded-3xl text-sm px-4 py-1.5 break-words overflow-auto">
                   <p className="font-bold m-0 mb-1">Result:</p>
                   <pre className="whitespace-pre-wrap break-words">{transactionResponse.success ? "✅ transaction successful" : "❌ transaction failed"}</pre>
@@ -189,7 +189,7 @@ export const FunctionForm = ({
               {/* {displayedTxResult ? <TxReceipt txResult={displayedTxResult} /> : null} */}
             </div>
 
-            <button className="btn btn-secondary btn-sm" disabled={transactionInProcess} onClick={handleWrite}>
+            <button className="btn btn-secondary btn-sm" disabled={transactionInProcess || !account} onClick={handleWrite}>
               {transactionInProcess && <span className="loading loading-spinner loading-xs"></span>}
               Send 💸
             </button>

packages/nextjs/app/debug/_components/contract/utilsDisplay.tsx

@@ -1,7 +1,7 @@
 import { ReactElement, useState } from "react";
 import { TransactionBase, TransactionReceipt, formatEther, isAddress, isHex } from "viem";
 import { ArrowsRightLeftIcon } from "@heroicons/react/24/solid";
-import { Address } from "~~/components/scaffold-eth";
+import { Address } from "~~/components/scaffold-move";
 import { replacer } from "~~/utils/scaffold-eth/common";
 
 type DisplayContent =

packages/nextjs/components/Footer.tsx

@@ -1,18 +1,17 @@
 import React from "react";
-import Link from "next/link";
-import { hardhat } from "viem/chains";
-import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+// import Link from "next/link";
+// import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { HeartIcon } from "@heroicons/react/24/outline";
 import { SwitchTheme } from "~~/components/SwitchTheme";
 // import { Faucet } from "~~/components/scaffold-eth";
-import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
+import { useTargetNetwork } from "~~/hooks/scaffold-move/useTargetNetwork";
 
 /**
  * Site footer
  */
 export const Footer = () => {
   const { targetNetwork } = useTargetNetwork();
-  const isLocalNetwork = targetNetwork.id === hardhat.id;
+  const isLocalNetwork = targetNetwork.id === "local";
 
   return (
     <div className="min-h-0 py-5 px-1 mb-11 lg:mb-0">

packages/nextjs/components/Header.tsx

@@ -4,7 +4,6 @@ import React, { useRef, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { WalletSelector } from "@aptos-labs/wallet-adapter-ant-design";
 import { Bars3Icon, BugAntIcon } from "@heroicons/react/24/outline";
 // import { FaucetButton } from "~~/components/scaffold-eth";
 // import { useOutsideClick } from "~~/hooks/scaffold-eth";