bitcoin-computer · ltardivo · Aug 1, 2024 · Aug 1, 2024 · Aug 1, 2024 · Aug 1, 2024
diff --git 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
@@ -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/.env.example b/packages/nft/.env.example
diff --git a/packages/nft/.env.own-node b/packages/nft/.env.own-node
@@ -0,0 +1,22 @@
+# 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=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=
diff --git a/packages/nft/.env.public-node b/packages/nft/.env.public-node
@@ -0,0 +1,21 @@
+# 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
+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
diff --git 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.

diff --git a/packages/nft/scripts/deploy.mjs b/packages/nft/scripts/deploy.mjs
@@ -1,95 +1,78 @@
 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 * 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"
+
 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 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 = process.env[`REACT_APP_${chain.toUpperCase()}_${network.toUpperCase()}_URL`]
 
-const computerProps = { chain, network, url }
+console.log(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
 }
 
-const computer = new Computer(computerProps)
-
-// Prompt the user to confirm an action
-const rl = readline.createInterface({
-  input: process.stdin,
-  output: process.stdout
-})
-
+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
-`)
+Balance \x1b[2m${balance / 1e8}\x1b[0m`)
+
+const answer = await rl.question('\nDo you want to deploy the contracts? \x1b[2m(y/n)\x1b[0m')
+if (answer === 'n') {
+  console.log("\n Aborting...\n")
+} else {
+  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 Sale contract...")
+  const saleHelper = new SaleHelper(computer)
+  const saleModSpec = await saleHelper.deploy()
 
-const q = `
-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}`)
-      const tbc721 = new TBC721(computer)
-      const modSpec = await tbc721.deploy()
-
-      console.log("Deploying Offer contract...")
-      console.log(`export ${Offer}`)
-      const offerHelper = new OfferHelper(computer)
-      const offerModSpec = await offerHelper.deploy()
-
-      console.log("Deploying Sale contract...")
-      console.log(`export ${Sale}`)
-      const saleHelper = new SaleHelper(computer)
-      const saleModSpec = await saleHelper.deploy()
-
-      console.log("Deploying Payment contract...")
-      console.log(`export ${Payment}`)
-      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
-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(" * Deploying Payment contract...")
+  const paymentHelper = new PaymentHelper(computer)
+  const paymentModSpec = await paymentHelper.deploy()
+
+  console.log(`
+Successfully deployed smart contracts.
+
+-----------------
+ ACTION REQUIRED
+-----------------
+
+(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.
+
+(3) Log in using ${chain} ${network}.
 `)
+}
 
-      console.log("\nDeployment successful. Please update your env variables.")
-    } catch (err) {
-      console.log(err)
-    }
-
-    console.log(`\nSuccessfully created smart objects`)
-  } else {
-    console.log("Aborting...")
-  }
-  rl.close()
-})
+rl.close()
diff --git 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())
@@ -29,7 +29,7 @@ export default function App() {
       <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">
             <Routes>

diff --git 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
@@ -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="#">