From 2d98be3d205587e22013018f5d494f9274f6dc77 Mon Sep 17 00:00:00 2001
From: Clemens Ley <ley.clemens@gmail.com>
Date: Wed, 31 Jul 2024 20:15:14 -0500
Subject: [PATCH 1/9] Nft: change faucet text in wallet

---
 packages/components/built/Wallet.js     | 2 +-
 packages/components/src/Wallet.tsx      | 4 ++--
 packages/nft/src/components/Gallery.tsx | 4 +++-
 packages/nft/src/components/Nft.tsx     | 1 -
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/components/built/Wallet.js b/packages/components/built/Wallet.js
index 1610ad19e..2a36bd4cb 100644
--- a/packages/components/built/Wallet.js
+++ b/packages/components/built/Wallet.js
@@ -289,7 +289,7 @@ function FaucetForm(_a) {
         initFlowbite();
     }, []);
     var showLoader = useUtilsComponents().showLoader;
-    return (_jsxs(_Fragment, { children: [_jsx("h6", __assign({ className: "text-lg font-bold dark:text-white" }, { children: "Fund Your Wallet" })), _jsx("p", __assign({ className: "mb-1 text-sm text-gray-500 dark:text-gray-400" }, { children: "Click below to get 1 free regtest coin (Click the balance reload button after funding)." })), _jsx("div", __assign({ className: "flex items-center pt-4 rounded-b dark:border-gray-600" }, { children: _jsx("button", __assign({ onClick: function (e) { return __awaiter(_this, void 0, void 0, function () {
+    return (_jsxs(_Fragment, { children: [_jsx("h6", __assign({ className: "text-lg font-bold dark:text-white" }, { children: "Fund Your Wallet" })), _jsx("p", __assign({ className: "text-sm text-gray-500 dark:text-gray-400" }, { children: "Click \"Fund\" to get 1 free regtest coin, then click on \"reload\" next to your balance." })), _jsx("div", __assign({ className: "flex items-center pt-4 rounded-b dark:border-gray-600" }, { children: _jsx("button", __assign({ onClick: function (e) { return __awaiter(_this, void 0, void 0, function () {
                         var error_3;
                         return __generator(this, function (_a) {
                             switch (_a.label) {
diff --git a/packages/components/src/Wallet.tsx b/packages/components/src/Wallet.tsx
index 3f79cc766..5777ad334 100644
--- a/packages/components/src/Wallet.tsx
+++ b/packages/components/src/Wallet.tsx
@@ -380,8 +380,8 @@ function FaucetForm({ computer }: { computer: Computer }) {
   return (
     <>
       <h6 className="text-lg font-bold dark:text-white">Fund Your Wallet</h6>
-      <p className="mb-1 text-sm text-gray-500 dark:text-gray-400">
-        Click below to get 1 free regtest coin (Click the balance reload button after funding).
+      <p className="text-sm text-gray-500 dark:text-gray-400">
+        Click "Fund" to get 1 free regtest coin, then click on "reload" next to your balance.
       </p>
       <div className="flex items-center pt-4 rounded-b dark:border-gray-600">
         <button
diff --git a/packages/nft/src/components/Gallery.tsx b/packages/nft/src/components/Gallery.tsx
index 80a8615fb..7b5e29bba 100644
--- a/packages/nft/src/components/Gallery.tsx
+++ b/packages/nft/src/components/Gallery.tsx
@@ -21,7 +21,6 @@ export type UserQuery<T extends Class> = Partial<{
 }>
 
 function NFTCard({ nft }: { nft: NFT }) {
-  console.log(nft)
   return (
     <div className="w-full bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 overflow-hidden mb-4">
       <a href="#">
@@ -196,6 +195,9 @@ export default function WithPagination<T extends Class>(q: UserQuery<T>) {
   useEffect(() => {
     const fetch = async () => {
       showLoader(true)
+
+console.log('query parameters', { ...q, ...params })
+
       const query = { ...q, ...params }
       query.offset = contractsPerPage * pageNum
       query.limit = contractsPerPage + 1
diff --git a/packages/nft/src/components/Nft.tsx b/packages/nft/src/components/Nft.tsx
index dd06b2e22..0277fd57c 100644
--- a/packages/nft/src/components/Nft.tsx
+++ b/packages/nft/src/components/Nft.tsx
@@ -314,7 +314,6 @@ function NftView() {
       try {
         showLoader(true)
         const synced = await computer.sync(rev)
-        console.log({ synced })
         setSmartObject(synced)
         showLoader(false)
       } catch (error) {

From 3a57581dd01c0462ad92c28950cc5782b1e85d81 Mon Sep 17 00:00:00 2001
From: Clemens Ley <ley.clemens@gmail.com>
Date: Wed, 31 Jul 2024 20:37:57 -0500
Subject: [PATCH 2/9] Nft: start to simplify deploy.mjs

---
 packages/nft/.env.own-node      | 22 ++++++++++++
 packages/nft/.env.public-node   | 21 +++++++++++
 packages/nft/scripts/deploy.mjs | 63 +++++++++++++++------------------
 3 files changed, 71 insertions(+), 35 deletions(-)
 create mode 100644 packages/nft/.env.own-node
 create mode 100644 packages/nft/.env.public-node

diff --git a/packages/nft/.env.own-node b/packages/nft/.env.own-node
new file mode 100644
index 000000000..dab640d15
--- /dev/null
+++ b/packages/nft/.env.own-node
@@ -0,0 +1,22 @@
+# Chain and Network
+REACT_APP_CHAIN=LTC
+REACT_APP_NETWORK=regtest
+
+# Node URLs
+REACT_APP_LTC_TESTNET_URL=http://127.0.0.1:1031
+REACT_APP_LTC_REGTEST_URL=http://127.0.0.1:1031
+REACT_APP_BTC_TESTNET_URL=http://127.0.0.1:1031
+REACT_APP_BTC_REGTEST_URL=http://127.0.0.1:1031
+
+# React Application Port
+PORT=1032
+
+# Internal, do not change
+GENERATE_SOURCEMAP=false
+
+# Smart Contract Locations
+# Run 'npm run deploy' and copy the output here
+REACT_APP_NFT_MOD_SPEC=
+REACT_APP_OFFER_MOD_SPEC=
+REACT_APP_SALE_MOD_SPEC=
+REACT_APP_PAYMENT_MOD_SPEC=
\ No newline at end of file
diff --git a/packages/nft/.env.public-node b/packages/nft/.env.public-node
new file mode 100644
index 000000000..db0e0ec5a
--- /dev/null
+++ b/packages/nft/.env.public-node
@@ -0,0 +1,21 @@
+# Chain and Network
+REACT_APP_CHAIN=LTC
+REACT_APP_NETWORK=regtest
+
+# Node URLs
+REACT_APP_LTC_TESTNET_URL=http://127.0.0.1:1031
+REACT_APP_LTC_REGTEST_URL=https://rltc.node.bitcoincomputer.io
+REACT_APP_BTC_TESTNET_URL=http://127.0.0.1:1031
+REACT_APP_BTC_REGTEST_URL=http://127.0.0.1:1031
+
+# React Application Port
+PORT=1032
+
+# Internal, do not change
+GENERATE_SOURCEMAP=false
+
+# Smart Contract Locations
+REACT_APP_NFT_MOD_SPEC=32ced85751dba336f47a46086e4df79e4b4925a30ebf0e39d2fbe0df4e4f5547:0
+REACT_APP_OFFER_MOD_SPEC=575336fb0d7dc61579b0b65628b9d069e82c0cd0435085dc8a85c86167673add:0
+REACT_APP_SALE_MOD_SPEC=d83c4d08794cd8b8ad8c137d61c82d40189382496f8b885b90c00b971a1ac9ec:0
+REACT_APP_PAYMENT_MOD_SPEC=fab53a193aacbeab7d309687965d4fd275fc49ed2e6784cdad0ec0dee57a5661:0
\ No newline at end of file
diff --git a/packages/nft/scripts/deploy.mjs b/packages/nft/scripts/deploy.mjs
index 0c6f43330..01ab0d6ae 100644
--- a/packages/nft/scripts/deploy.mjs
+++ b/packages/nft/scripts/deploy.mjs
@@ -1,29 +1,22 @@
 import { config } from "dotenv"
 import readline from "readline"
-import { NFT, TBC721 } from "@bitcoin-computer/TBC721"
-import {
-  Offer,
-  OfferHelper,
-  Payment,
-  PaymentHelper,
-  Sale,
-  SaleHelper
-} from "@bitcoin-computer/swap"
+import { TBC721 } from "@bitcoin-computer/TBC721"
+import { OfferHelper, PaymentHelper, SaleHelper } from "@bitcoin-computer/swap"
+
 const { Computer } = await import("@bitcoin-computer/lib")
 
 config()
 
-const mnemonic = process.env.MNEMONIC
-const chain = process.env.CHAIN || "LTC"
-const network = process.env.NETWORK || "regtest"
-const url = process.env.BCN_URL || "http://127.0.0.1:1031"
+const { REACT_APP_CHAIN, REACT_APP_NETWORK, MNEMONIC, REACT_APP_LTC_REGTEST_URL } = process.env
+const mnemonic = MNEMONIC
+const chain = REACT_APP_CHAIN
+const network = REACT_APP_NETWORK
+const url = REACT_APP_LTC_REGTEST_URL
 
-const computerProps = { chain, network, url }
+const computerProps = { chain, network, mnemonic, url }
 
 if (network !== "regtest") {
-  if (!mnemonic) {
-    throw new Error("Please set your MNEMONIC in a .env file")
-  }
+  if (!mnemonic) throw new Error("Please set MNEMONIC in the .env file")
   computerProps["mnemonic"] = mnemonic
 }
  
@@ -39,14 +32,12 @@ await computer.faucet(2e8)
 const balance = await computer.wallet.getBalance()
 
 // Summary
-console.log(`
-Chain \x1b[2m${chain}\x1b[0m
+console.log(`Chain \x1b[2m${chain}\x1b[0m
 Network \x1b[2m${network}\x1b[0m
 Node Url \x1b[2m${url}\x1b[0m
 Address \x1b[2m${computer.wallet.address}\x1b[0m
 Mnemonic \x1b[2m${mnemonic}\x1b[0m
-Balance \x1b[2m${balance / 1e8}\x1b[0m
-`)
+Balance \x1b[2m${balance / 1e8}\x1b[0m`)
 
 const q = `
 Do you want to deploy the contracts? (y/n)
@@ -54,40 +45,42 @@ Do you want to deploy the contracts? (y/n)
 rl.question(q, async (answer) => {
   if (answer !== "n") {
     try {
-      console.log("Deploying NFT contract...")
-      console.log(`export ${NFT}`)
+      console.log(" * Deploying NFT contract...")
       const tbc721 = new TBC721(computer)
       const modSpec = await tbc721.deploy()
 
-      console.log("Deploying Offer contract...")
-      console.log(`export ${Offer}`)
+      console.log(" * Deploying Offer contract...")
       const offerHelper = new OfferHelper(computer)
       const offerModSpec = await offerHelper.deploy()
 
-      console.log("Deploying Sale contract...")
-      console.log(`export ${Sale}`)
+      console.log(" * Deploying Sale contract...")
       const saleHelper = new SaleHelper(computer)
       const saleModSpec = await saleHelper.deploy()
 
-      console.log("Deploying Payment contract...")
-      console.log(`export ${Payment}`)
+      console.log(" * Deploying Payment contract...")
       const paymentHelper = new PaymentHelper(computer)
       const paymentModSpec = await paymentHelper.deploy()
 
       // Log the module specifiers
-      console.log(`// Updaate env variables/file with module specifiers for deployed contracts
+      console.log(`
+Successfully deployed smart contracts.
+  
+-----------------
+ ACTION REQUIRED
+-----------------
+Update the following rows in your .env file.
+
 REACT_APP_NFT_MOD_SPEC=${modSpec}
 REACT_APP_OFFER_MOD_SPEC=${offerModSpec}
 REACT_APP_SALE_MOD_SPEC=${saleModSpec}
-REACT_APP_PAYMENT_MOD_SPEC=${paymentModSpec}
-`)
-
-      console.log("\nDeployment successful. Please update your env variables.")
+REACT_APP_PAYMENT_MOD_SPEC=${paymentModSpec}`)
     } catch (err) {
       console.log(err)
     }
 
-    console.log(`\nSuccessfully created smart objects`)
+    console.log(`
+Run 'npm start' to start the application.
+`)
   } else {
     console.log("Aborting...")
   }

From 7d88a0eb59dc10f378c701ad0cd3d0ddd6f107fa Mon Sep 17 00:00:00 2001
From: Clemens Ley <ley.clemens@gmail.com>
Date: Wed, 31 Jul 2024 20:47:37 -0500
Subject: [PATCH 3/9] Nft: simpler naming of module specifiers

---
 packages/nft/src/App.tsx                | 10 +++++-----
 packages/nft/src/components/Assets.tsx  |  6 +++---
 packages/nft/src/components/Gallery.tsx |  3 ---
 packages/nft/src/components/Mint.tsx    |  4 ++--
 packages/nft/src/components/Nft.tsx     | 16 ++++++++--------
 packages/nft/src/constants/modSpecs.ts  | 14 ++------------
 6 files changed, 20 insertions(+), 33 deletions(-)

diff --git a/packages/nft/src/App.tsx b/packages/nft/src/App.tsx
index 8fc264811..8ac3b0f7b 100644
--- a/packages/nft/src/App.tsx
+++ b/packages/nft/src/App.tsx
@@ -14,7 +14,7 @@ import { Navbar } from "./components/Navbar"
 import Mint from "./components/Mint"
 import { AllAssets, MyAssets } from "./components/Assets"
 import { NftView } from "./components/Nft"
-import { paymentModSpec } from "./constants/modSpecs"
+import { REACT_APP_PAYMENT_MOD_SPEC } from "./constants/modSpecs"
 
 export default function App() {
   const [computer] = useState(Auth.getComputer())
@@ -25,13 +25,13 @@ export default function App() {
 
   return (
     <BrowserRouter>
-      <span className="bg-gray-900/50 dark:bg-gray-900/80 z-30 inset-0 sr-only"></span>
+      {/* <span className="bg-gray-900/50 dark:bg-gray-900/80 z-30 inset-0 sr-only"></span> */}
       <UtilsContext.UtilsProvider>
         <ComputerContext.Provider value={computer}>
           <Auth.LoginModal />
-          <Wallet paymentModSpec={paymentModSpec} />
+          <Wallet paymentModSpec={REACT_APP_PAYMENT_MOD_SPEC} />
           <Navbar />
-          <div className="p-8 max-w-screen-xl flex flex-wrap items-center justify-between mx-auto">
+          {/* <div className="p-8 max-w-screen-xl flex flex-wrap items-center justify-between mx-auto"> */}
             <Routes>
               <Route path="/" element={<AllAssets />} />
               <Route path="/mine" element={<MyAssets />} />
@@ -41,7 +41,7 @@ export default function App() {
               <Route path="*" element={<Navigate to="/" replace={true} />} />
               <Route path="*" element={<Error404 />} />
             </Routes>
-          </div>
+          {/* </div> */}
         </ComputerContext.Provider>
       </UtilsContext.UtilsProvider>
     </BrowserRouter>
diff --git a/packages/nft/src/components/Assets.tsx b/packages/nft/src/components/Assets.tsx
index 3eac42182..aec64db36 100644
--- a/packages/nft/src/components/Assets.tsx
+++ b/packages/nft/src/components/Assets.tsx
@@ -1,5 +1,5 @@
 import { Auth } from "@bitcoin-computer/components"
-import { nftModSpec } from "../constants/modSpecs"
+import { REACT_APP_NFT_MOD_SPEC } from "../constants/modSpecs"
 import { Gallery } from "./Gallery"
 
 const publicKey = Auth.getComputer().getPublicKey()
@@ -8,7 +8,7 @@ export function MyAssets() {
   return (
     <>
       <h2 className="text-4xl font-bold dark:text-white">My NFTs</h2>
-      <Gallery.WithPagination mod={nftModSpec} publicKey={publicKey} />
+      <Gallery.WithPagination mod={REACT_APP_NFT_MOD_SPEC} publicKey={publicKey} />
     </>
   )
 }
@@ -17,7 +17,7 @@ export function AllAssets() {
   return (
     <>
       <h2 className="text-4xl font-bold dark:text-white">All NFTs</h2>
-      <Gallery.WithPagination mod={nftModSpec} />
+      <Gallery.WithPagination mod={REACT_APP_NFT_MOD_SPEC} />
     </>
   )
 }
diff --git a/packages/nft/src/components/Gallery.tsx b/packages/nft/src/components/Gallery.tsx
index 7b5e29bba..4e095dc87 100644
--- a/packages/nft/src/components/Gallery.tsx
+++ b/packages/nft/src/components/Gallery.tsx
@@ -195,9 +195,6 @@ export default function WithPagination<T extends Class>(q: UserQuery<T>) {
   useEffect(() => {
     const fetch = async () => {
       showLoader(true)
-
-console.log('query parameters', { ...q, ...params })
-
       const query = { ...q, ...params }
       query.offset = contractsPerPage * pageNum
       query.limit = contractsPerPage + 1
diff --git a/packages/nft/src/components/Mint.tsx b/packages/nft/src/components/Mint.tsx
index a7c4cacc5..557cf5e00 100644
--- a/packages/nft/src/components/Mint.tsx
+++ b/packages/nft/src/components/Mint.tsx
@@ -3,7 +3,7 @@ import { ComputerContext, Modal, UtilsContext } from "@bitcoin-computer/componen
 import { TBC721 } from "@bitcoin-computer/TBC721"
 import { Link } from "react-router-dom"
 import { Computer } from "@bitcoin-computer/lib"
-import { nftModSpec } from "../constants/modSpecs"
+import { REACT_APP_NFT_MOD_SPEC } from "../constants/modSpecs"
 
 function SuccessContent(rev: string) {
   return (
@@ -75,7 +75,7 @@ function MintForm(props: {
     e.preventDefault()
     try {
       showLoader(true)
-      const tbc721 = new TBC721(computer, nftModSpec)
+      const tbc721 = new TBC721(computer, REACT_APP_NFT_MOD_SPEC)
       const nft = await tbc721.mint(name, symbol, url)
       setSuccessRev(nft._id)
       showLoader(false)
diff --git a/packages/nft/src/components/Nft.tsx b/packages/nft/src/components/Nft.tsx
index 0277fd57c..babd6814c 100644
--- a/packages/nft/src/components/Nft.tsx
+++ b/packages/nft/src/components/Nft.tsx
@@ -10,7 +10,7 @@ import {
 import { Computer } from "@bitcoin-computer/lib"
 import { OfferHelper, PaymentHelper, PaymentMock, SaleHelper } from "@bitcoin-computer/swap"
 import { NFT } from "@bitcoin-computer/TBC721"
-import { offerModSpec, paymentModSpec, saleModSpec } from "../constants/modSpecs"
+import { REACT_APP_OFFER_MOD_SPEC, REACT_APP_PAYMENT_MOD_SPEC, REACT_APP_SALE_MOD_SPEC } from "../constants/modSpecs"
 
 const modalId = "smart-object-bought-modal"
 
@@ -23,9 +23,9 @@ const BuyNFT = async ({
   nft: NFT
   setFunctionResult: any
 }) => {
-  const offerHelper = new OfferHelper(computer, offerModSpec)
-  const saleHelper = new SaleHelper(computer, saleModSpec)
-  const paymentHelper = new PaymentHelper(computer, paymentModSpec)
+  const offerHelper = new OfferHelper(computer, REACT_APP_OFFER_MOD_SPEC)
+  const saleHelper = new SaleHelper(computer, REACT_APP_SALE_MOD_SPEC)
+  const paymentHelper = new PaymentHelper(computer, REACT_APP_PAYMENT_MOD_SPEC)
   const saleTxn = await offerHelper.decodeOfferTx(nft.offerTxRev)
   const nftAmount = await saleHelper.checkSaleTx(saleTxn)
   const { tx: paymentTx } = await paymentHelper.createPaymentTx(nftAmount)
@@ -60,7 +60,7 @@ const CreateSellOffer = async ({
   nft: NFT
   showSnackBar: (message: string, success: boolean) => void
 }) => {
-  const offerHelper = new OfferHelper(computer, offerModSpec)
+  const offerHelper = new OfferHelper(computer, REACT_APP_OFFER_MOD_SPEC)
   const { tx: offerTx } = await offerHelper.createOfferTx(
     computer.getPublicKey(),
     computer.getUrl()
@@ -68,7 +68,7 @@ const CreateSellOffer = async ({
   const offerTxId = await computer.broadcast(offerTx)
   await nft.list(offerTxId)
 
-  const saleHelper = new SaleHelper(computer, saleModSpec)
+  const saleHelper = new SaleHelper(computer, REACT_APP_SALE_MOD_SPEC)
   const parsedAmount = Number(amount) * 1e8
   if (!parsedAmount) {
     showSnackBar("Please provide a valid amount.", false)
@@ -175,8 +175,8 @@ const ShowSaleOfferComponent = ({ computer, nft }: { computer: Computer; nft: NF
     const fetch = async () => {
       try {
         showLoader(true)
-        const offerHelper = new OfferHelper(computer, offerModSpec)
-        const saleHelper = new SaleHelper(computer, saleModSpec)
+        const offerHelper = new OfferHelper(computer, REACT_APP_OFFER_MOD_SPEC)
+        const saleHelper = new SaleHelper(computer, REACT_APP_SALE_MOD_SPEC)
         const saleTxn = await offerHelper.decodeOfferTx(nft.offerTxRev)
         const amount = await saleHelper.checkSaleTx(saleTxn)
         setNftAmount(amount)
diff --git a/packages/nft/src/constants/modSpecs.ts b/packages/nft/src/constants/modSpecs.ts
index 06afb1168..e169d6726 100644
--- a/packages/nft/src/constants/modSpecs.ts
+++ b/packages/nft/src/constants/modSpecs.ts
@@ -1,12 +1,2 @@
-export const nftModSpec = process.env.REACT_APP_NFT_MOD_SPEC
-  ? process.env.REACT_APP_NFT_MOD_SPEC
-  : ""
-export const offerModSpec = process.env.REACT_APP_OFFER_MOD_SPEC
-  ? process.env.REACT_APP_OFFER_MOD_SPEC
-  : ""
-export const saleModSpec = process.env.REACT_APP_SALE_MOD_SPEC
-  ? process.env.REACT_APP_SALE_MOD_SPEC
-  : ""
-export const paymentModSpec = process.env.REACT_APP_PAYMENT_MOD_SPEC
-  ? process.env.REACT_APP_PAYMENT_MOD_SPEC
-  : ""
+const { REACT_APP_NFT_MOD_SPEC, REACT_APP_OFFER_MOD_SPEC, REACT_APP_SALE_MOD_SPEC, REACT_APP_PAYMENT_MOD_SPEC } = process.env
+export { REACT_APP_NFT_MOD_SPEC, REACT_APP_OFFER_MOD_SPEC, REACT_APP_SALE_MOD_SPEC, REACT_APP_PAYMENT_MOD_SPEC }

From 07e0ec0c6974fbf76b55e7e119d2527e72d2a950 Mon Sep 17 00:00:00 2001
From: Clemens Ley <ley.clemens@gmail.com>
Date: Wed, 31 Jul 2024 20:53:17 -0500
Subject: [PATCH 4/9] Remove placeholder from mint page

---
 packages/nft/src/components/Mint.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/nft/src/components/Mint.tsx b/packages/nft/src/components/Mint.tsx
index 557cf5e00..338c7c9e0 100644
--- a/packages/nft/src/components/Mint.tsx
+++ b/packages/nft/src/components/Mint.tsx
@@ -103,8 +103,6 @@ function MintForm(props: {
               value={name}
               onChange={(e) => setName(e.target.value)}
               className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-              placeholder="Bitcoin Computer"
-              required
             />
           </div>
           <div>
@@ -117,8 +115,6 @@ function MintForm(props: {
               value={symbol}
               onChange={(e) => setSymbol(e.target.value)}
               className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-              placeholder="TBC"
-              required
             />
           </div>
           <div>

From c8375f5a7ea58f822478eaaa5ff0a5b05857655f Mon Sep 17 00:00:00 2001
From: Clemens Ley <ley.clemens@gmail.com>
Date: Wed, 31 Jul 2024 21:10:15 -0500
Subject: [PATCH 5/9] Nft: simplify deploy.mjs

---
 packages/nft/scripts/deploy.mjs | 43 +++++++++++++--------------------
 1 file changed, 17 insertions(+), 26 deletions(-)

diff --git a/packages/nft/scripts/deploy.mjs b/packages/nft/scripts/deploy.mjs
index 01ab0d6ae..1abff1f01 100644
--- a/packages/nft/scripts/deploy.mjs
+++ b/packages/nft/scripts/deploy.mjs
@@ -39,30 +39,26 @@ Address \x1b[2m${computer.wallet.address}\x1b[0m
 Mnemonic \x1b[2m${mnemonic}\x1b[0m
 Balance \x1b[2m${balance / 1e8}\x1b[0m`)
 
-const q = `
-Do you want to deploy the contracts? (y/n)
-`
-rl.question(q, async (answer) => {
+
+rl.question(`\nDo you want to deploy the contracts? (y/n)`, async (answer) => {
   if (answer !== "n") {
-    try {
-      console.log(" * Deploying NFT contract...")
-      const tbc721 = new TBC721(computer)
-      const modSpec = await tbc721.deploy()
+    console.log("\n * Deploying NFT contract...")
+    const tbc721 = new TBC721(computer)
+    const modSpec = await tbc721.deploy()
 
-      console.log(" * Deploying Offer contract...")
-      const offerHelper = new OfferHelper(computer)
-      const offerModSpec = await offerHelper.deploy()
+    console.log(" * Deploying Offer contract...")
+    const offerHelper = new OfferHelper(computer)
+    const offerModSpec = await offerHelper.deploy()
 
-      console.log(" * Deploying Sale contract...")
-      const saleHelper = new SaleHelper(computer)
-      const saleModSpec = await saleHelper.deploy()
+    console.log(" * Deploying Sale contract...")
+    const saleHelper = new SaleHelper(computer)
+    const saleModSpec = await saleHelper.deploy()
 
-      console.log(" * Deploying Payment contract...")
-      const paymentHelper = new PaymentHelper(computer)
-      const paymentModSpec = await paymentHelper.deploy()
+    console.log(" * Deploying Payment contract...")
+    const paymentHelper = new PaymentHelper(computer)
+    const paymentModSpec = await paymentHelper.deploy()
 
-      // Log the module specifiers
-      console.log(`
+    console.log(`
 Successfully deployed smart contracts.
   
 -----------------
@@ -73,14 +69,9 @@ Update the following rows in your .env file.
 REACT_APP_NFT_MOD_SPEC=${modSpec}
 REACT_APP_OFFER_MOD_SPEC=${offerModSpec}
 REACT_APP_SALE_MOD_SPEC=${saleModSpec}
-REACT_APP_PAYMENT_MOD_SPEC=${paymentModSpec}`)
-    } catch (err) {
-      console.log(err)
-    }
+REACT_APP_PAYMENT_MOD_SPEC=${paymentModSpec}
 
-    console.log(`
-Run 'npm start' to start the application.
-`)
+Run 'npm start' to start the application.`)
   } else {
     console.log("Aborting...")
   }

From 63c9570d633d235ea301fd6d7922003e029cb9e5 Mon Sep 17 00:00:00 2001
From: Clemens Ley <ley.clemens@gmail.com>
Date: Thu, 1 Aug 2024 11:42:59 -0500
Subject: [PATCH 6/9] Nft: use node:readline instead of readline

---
 packages/nft/scripts/deploy.mjs | 56 +++++++++++++++------------------
 1 file changed, 25 insertions(+), 31 deletions(-)

diff --git a/packages/nft/scripts/deploy.mjs b/packages/nft/scripts/deploy.mjs
index 1abff1f01..86003136e 100644
--- a/packages/nft/scripts/deploy.mjs
+++ b/packages/nft/scripts/deploy.mjs
@@ -1,5 +1,6 @@
 import { config } from "dotenv"
-import readline from "readline"
+import * as readline from 'node:readline/promises'
+import { stdin as input, stdout as output } from 'node:process'
 import { TBC721 } from "@bitcoin-computer/TBC721"
 import { OfferHelper, PaymentHelper, SaleHelper } from "@bitcoin-computer/swap"
 
@@ -21,13 +22,6 @@ if (network !== "regtest") {
 }
  
 const computer = new Computer(computerProps)
-
-// Prompt the user to confirm an action
-const rl = readline.createInterface({
-  input: process.stdin,
-  output: process.stdout
-})
-
 await computer.faucet(2e8)
 const balance = await computer.wallet.getBalance()
 
@@ -39,30 +33,32 @@ Address \x1b[2m${computer.wallet.address}\x1b[0m
 Mnemonic \x1b[2m${mnemonic}\x1b[0m
 Balance \x1b[2m${balance / 1e8}\x1b[0m`)
 
+const rl = readline.createInterface({ input, output })
+const answer = await rl.question('\nDo you want to deploy the contracts? (y/n)')
+if (answer === 'n') {
+  console.log("Aborting...")
+} else {
+  console.log("\n * Deploying NFT contract...")
+  const tbc721 = new TBC721(computer)
+  const modSpec = await tbc721.deploy()
 
-rl.question(`\nDo you want to deploy the contracts? (y/n)`, async (answer) => {
-  if (answer !== "n") {
-    console.log("\n * Deploying NFT contract...")
-    const tbc721 = new TBC721(computer)
-    const modSpec = await tbc721.deploy()
-
-    console.log(" * Deploying Offer contract...")
-    const offerHelper = new OfferHelper(computer)
-    const offerModSpec = await offerHelper.deploy()
+  console.log(" * Deploying Offer contract...")
+  const offerHelper = new OfferHelper(computer)
+  const offerModSpec = await offerHelper.deploy()
 
-    console.log(" * Deploying Sale contract...")
-    const saleHelper = new SaleHelper(computer)
-    const saleModSpec = await saleHelper.deploy()
+  console.log(" * Deploying Sale contract...")
+  const saleHelper = new SaleHelper(computer)
+  const saleModSpec = await saleHelper.deploy()
 
-    console.log(" * Deploying Payment contract...")
-    const paymentHelper = new PaymentHelper(computer)
-    const paymentModSpec = await paymentHelper.deploy()
+  console.log(" * Deploying Payment contract...")
+  const paymentHelper = new PaymentHelper(computer)
+  const paymentModSpec = await paymentHelper.deploy()
 
-    console.log(`
+  console.log(`
 Successfully deployed smart contracts.
-  
+
 -----------------
- ACTION REQUIRED
+ACTION REQUIRED
 -----------------
 Update the following rows in your .env file.
 
@@ -72,8 +68,6 @@ REACT_APP_SALE_MOD_SPEC=${saleModSpec}
 REACT_APP_PAYMENT_MOD_SPEC=${paymentModSpec}
 
 Run 'npm start' to start the application.`)
-  } else {
-    console.log("Aborting...")
-  }
-  rl.close()
-})
+}
+
+rl.close()

From a3711883e9986f345c82adfc5bdb75b1f89c16a9 Mon Sep 17 00:00:00 2001
From: Clemens Ley <ley.clemens@gmail.com>
Date: Thu, 1 Aug 2024 16:02:30 -0500
Subject: [PATCH 7/9] Nft: refactor deploy.mjs

---
 packages/nft/scripts/deploy.mjs | 35 +++++++++++++++++++--------------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/packages/nft/scripts/deploy.mjs b/packages/nft/scripts/deploy.mjs
index 86003136e..a295d0b8c 100644
--- a/packages/nft/scripts/deploy.mjs
+++ b/packages/nft/scripts/deploy.mjs
@@ -8,35 +8,36 @@ const { Computer } = await import("@bitcoin-computer/lib")
 
 config()
 
-const { REACT_APP_CHAIN, REACT_APP_NETWORK, MNEMONIC, REACT_APP_LTC_REGTEST_URL } = process.env
+const rl = readline.createInterface({ input, output })
+
+const { REACT_APP_CHAIN, REACT_APP_NETWORK, MNEMONIC } = process.env
 const mnemonic = MNEMONIC
 const chain = REACT_APP_CHAIN
 const network = REACT_APP_NETWORK
-const url = REACT_APP_LTC_REGTEST_URL
+const url = process.env[`REACT_APP_${chain.toUpperCase()}_${network.toUpperCase()}_URL`]
 
-const computerProps = { chain, network, mnemonic, url }
+console.log(url)
 
 if (network !== "regtest") {
   if (!mnemonic) throw new Error("Please set MNEMONIC in the .env file")
   computerProps["mnemonic"] = mnemonic
 }
  
-const computer = new Computer(computerProps)
+const computer = new Computer({ chain, network, mnemonic, url })
 await computer.faucet(2e8)
 const balance = await computer.wallet.getBalance()
 
 // Summary
-console.log(`Chain \x1b[2m${chain}\x1b[0m
+console.log(`\nChain \x1b[2m${chain}\x1b[0m
 Network \x1b[2m${network}\x1b[0m
 Node Url \x1b[2m${url}\x1b[0m
 Address \x1b[2m${computer.wallet.address}\x1b[0m
 Mnemonic \x1b[2m${mnemonic}\x1b[0m
 Balance \x1b[2m${balance / 1e8}\x1b[0m`)
 
-const rl = readline.createInterface({ input, output })
-const answer = await rl.question('\nDo you want to deploy the contracts? (y/n)')
+const answer = await rl.question('\nDo you want to deploy the contracts? \x1b[2m(y/n)\x1b[0m')
 if (answer === 'n') {
-  console.log("Aborting...")
+  console.log("\n Aborting...\n")
 } else {
   console.log("\n * Deploying NFT contract...")
   const tbc721 = new TBC721(computer)
@@ -58,16 +59,20 @@ if (answer === 'n') {
 Successfully deployed smart contracts.
 
 -----------------
-ACTION REQUIRED
+ ACTION REQUIRED
 -----------------
-Update the following rows in your .env file.
 
-REACT_APP_NFT_MOD_SPEC=${modSpec}
-REACT_APP_OFFER_MOD_SPEC=${offerModSpec}
-REACT_APP_SALE_MOD_SPEC=${saleModSpec}
-REACT_APP_PAYMENT_MOD_SPEC=${paymentModSpec}
+(1) Update the following rows in your .env file.
+
+REACT_APP_NFT_MOD_SPEC\x1b[2m=${modSpec}\x1b[0m
+REACT_APP_OFFER_MOD_SPEC\x1b[2m=${offerModSpec}\x1b[0m
+REACT_APP_SALE_MOD_SPEC\x1b[2m=${saleModSpec}\x1b[0m
+REACT_APP_PAYMENT_MOD_SPEC\x1b[2m=${paymentModSpec}\x1b[0m
+
+(2) Run 'npm start' to start the application.
 
-Run 'npm start' to start the application.`)
+(3) Log in using ${chain} ${network}.
+`)
 }
 
 rl.close()

From ba431dd891e60b57c79196e36538e6391455efec Mon Sep 17 00:00:00 2001
From: Clemens Ley <ley.clemens@gmail.com>
Date: Thu, 1 Aug 2024 16:09:02 -0500
Subject: [PATCH 8/9] Nft: simplify readme file

---
 packages/nft/.env.example     | 13 -------
 packages/nft/.env.own-node    |  2 +-
 packages/nft/.env.public-node |  2 +-
 packages/nft/README.md        | 70 +++++++++++++++++++++++++++++------
 4 files changed, 60 insertions(+), 27 deletions(-)
 delete mode 100644 packages/nft/.env.example

diff --git a/packages/nft/.env.example b/packages/nft/.env.example
deleted file mode 100644
index 8515062df..000000000
--- a/packages/nft/.env.example
+++ /dev/null
@@ -1,13 +0,0 @@
-MNEMONIC=travel upgrade inside soda birth essence junk merit never twenty system opinion
-GENERATE_SOURCEMAP=false
-PORT=1032
-REACT_APP_LTC_TESTNET_URL=http://127.0.0.1:1031
-REACT_APP_LTC_REGTEST_URL=https://rltc.node.bitcoincomputer.io
-REACT_APP_BTC_TESTNET_URL=http://127.0.0.1:1031
-REACT_APP_BTC_REGTEST_URL=http://127.0.0.1:1031
-REACT_APP_CHAIN=LTC
-REACT_APP_NETWORK=regtest
-REACT_APP_NFT_MOD_SPEC=1457fc30a16bf78849502ab88b06bf5de38bf842f1cb9ebed93a1e4c4c6271f9:0
-REACT_APP_OFFER_MOD_SPEC=46f6c6fd1dca3ded3567ac77115393192bbae49a3649e124d24754e1e434f299:0
-REACT_APP_SALE_MOD_SPEC=8ec3a750cfd1e55f82b7c5b851d3ecbf038c627ffc3afb25cebc41dca4058cb9:0
-REACT_APP_PAYMENT_MOD_SPEC=1d5dfd8c8b63d658c0f17d987d563ba89342df2d34e5d957a64fd144613ff5b2:0
\ No newline at end of file
diff --git a/packages/nft/.env.own-node b/packages/nft/.env.own-node
index dab640d15..575f17da4 100644
--- a/packages/nft/.env.own-node
+++ b/packages/nft/.env.own-node
@@ -1,4 +1,4 @@
-# Chain and Network
+# Default configuration when the user is not logged in
 REACT_APP_CHAIN=LTC
 REACT_APP_NETWORK=regtest
 
diff --git a/packages/nft/.env.public-node b/packages/nft/.env.public-node
index db0e0ec5a..abc142732 100644
--- a/packages/nft/.env.public-node
+++ b/packages/nft/.env.public-node
@@ -1,4 +1,4 @@
-# Chain and Network
+# Default configuration when the user is not logged in
 REACT_APP_CHAIN=LTC
 REACT_APP_NETWORK=regtest
 
diff --git a/packages/nft/README.md b/packages/nft/README.md
index 259758743..2e79b9377 100644
--- a/packages/nft/README.md
+++ b/packages/nft/README.md
@@ -9,7 +9,7 @@
 
 ## Prerequisites
 
-You need to have a [Bitcoin Computer Node](https://github.com/bitcoin-computer/monorepo/tree/main/packages/node#readme) installed and running.
+You need to have [git](https://www.git-scm.com/) and [node.js](https://nodejs.org/en/) installed.
 
 ## Installation
 
@@ -22,31 +22,46 @@ git clone https://github.com/bitcoin-computer/monorepo.git
 # Move into monorepo folder
 cd monorepo
 
-# Install the dependencies
+# Install the dependencies of the monorepo
 npm install
+
+# Move to the NFT package folder
+cd packages/nft
 ```
 
 </font>
 
 ## Usage
 
-Most of the api is documented in the [Create React App Readme](https://github.com/facebook/create-react-app).
+### Start the Application Connecting to a Public Node
 
-### Start the Application
-
-To start the application run the command below and open [http://localhost:3000](http://localhost:3000).
+The easiest way to get started is to run the commands below and open [http://localhost:1032/](http://localhost:1032/).
 
 <font size=1>
 
 ```bash
-# Move to the package
-cd packages/cra-template
+# Use the environment variables for the public node
+cp .env.public-node .env
+
+# Start the app
+npm run start
+```
+
+</font>
+
+### Start the Application Connecting to a Your Own Node
+
+You need to have a [Bitcoin Computer Node](https://github.com/bitcoin-computer/monorepo/tree/main/packages/node#readme) installed and running.
 
-# Install the dependencies
-npm install
 
-# Use the default environment variables
-cp .env.example .env
+<font size=1>
+
+```bash
+# Use the environment variables for the public node
+cp .env.own-node .env
+
+# Deploy the smart contracts and follow the instructions there
+npm run deploy
 
 # Start the app
 npm run start
@@ -58,6 +73,37 @@ npm run start
 
 See [here](https://github.com/bitcoin-computer/monorepo/tree/main/packages/node#fund-the-wallet).
 
+## Configuration
+
+<font size=1>
+
+```bash
+# Default configuration when the user is not logged in
+REACT_APP_CHAIN=LTC
+REACT_APP_NETWORK=regtest
+
+# Node URLs
+REACT_APP_LTC_TESTNET_URL=http://127.0.0.1:1031
+REACT_APP_LTC_REGTEST_URL=https://rltc.node.bitcoincomputer.io
+REACT_APP_BTC_TESTNET_URL=http://127.0.0.1:1031
+REACT_APP_BTC_REGTEST_URL=http://127.0.0.1:1031
+
+# React Application Port
+PORT=1032
+
+# Internal, do not change
+GENERATE_SOURCEMAP=false
+
+# Smart Contract Locations, these can be generated with the deploy script
+REACT_APP_NFT_MOD_SPEC=32ced85751dba336f47a46086e4df79e4b4925a30ebf0e39d2fbe0df4e4f5547:0
+REACT_APP_OFFER_MOD_SPEC=575336fb0d7dc61579b0b65628b9d069e82c0cd0435085dc8a85c86167673add:0
+REACT_APP_SALE_MOD_SPEC=d83c4d08794cd8b8ad8c137d61c82d40189382496f8b885b90c00b971a1ac9ec:0
+REACT_APP_PAYMENT_MOD_SPEC=fab53a193aacbeab7d309687965d4fd275fc49ed2e6784cdad0ec0dee57a5661:0
+```
+
+</font>
+
+
 ## Documentation
 
 Have a look at the [docs](https://docs.bitcoincomputer.io/) for the Bitcoin Computer.

From 8c6bf2c9997422129eae9c4fdc01d766a788682f Mon Sep 17 00:00:00 2001
From: Clemens Ley <ley.clemens@gmail.com>
Date: Thu, 1 Aug 2024 17:16:51 -0500
Subject: [PATCH 9/9] Nft: re-enable spacing

---
 packages/nft/src/App.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nft/src/App.tsx b/packages/nft/src/App.tsx
index 8ac3b0f7b..ff5dfa1fa 100644
--- a/packages/nft/src/App.tsx
+++ b/packages/nft/src/App.tsx
@@ -25,13 +25,13 @@ export default function App() {
 
   return (
     <BrowserRouter>
-      {/* <span className="bg-gray-900/50 dark:bg-gray-900/80 z-30 inset-0 sr-only"></span> */}
+      <span className="bg-gray-900/50 dark:bg-gray-900/80 z-30 inset-0 sr-only"></span>
       <UtilsContext.UtilsProvider>
         <ComputerContext.Provider value={computer}>
           <Auth.LoginModal />
           <Wallet paymentModSpec={REACT_APP_PAYMENT_MOD_SPEC} />
           <Navbar />
-          {/* <div className="p-8 max-w-screen-xl flex flex-wrap items-center justify-between mx-auto"> */}
+          <div className="p-8 max-w-screen-xl flex flex-wrap items-center justify-between mx-auto">
             <Routes>
               <Route path="/" element={<AllAssets />} />
               <Route path="/mine" element={<MyAssets />} />
@@ -41,7 +41,7 @@ export default function App() {
               <Route path="*" element={<Navigate to="/" replace={true} />} />
               <Route path="*" element={<Error404 />} />
             </Routes>
-          {/* </div> */}
+          </div>
         </ComputerContext.Provider>
       </UtilsContext.UtilsProvider>
     </BrowserRouter>