dApp v1 (#27)

* dApp draft

* Missing contract client

* Update lockfiles

* Add dist from packages

* Remove bindings folder

* Better topic formatting

* Add commit code

* Use alert for now to show it's working

* Fix default env vars

* Add link to contract on-chain

* Fix signing for commit

* Move card to project

* Adjust margins for topics

.gitignore

@@ -32,3 +32,6 @@ build
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# Local Netlify folder
+.netlify

Makefile

@@ -73,7 +73,7 @@ contract_bindings: contract_build-release
 	stellar contract bindings typescript \
 		--network $(network) \
 		--contract-id $(shell cat .soroban/soroban_versioning_id) \
-		--output-dir web/bindings/ts \
+		--output-dir dapp/packages/soroban_versioning \
 		--overwrite
 
 contract_deploy: contract_test contract_build-release  ## Deploy Soroban contract to testnet

dapp/.env.example

@@ -0,0 +1,8 @@
+# Prefix with "PUBLIC_" to make available in Astro frontend files
+PUBLIC_SOROBAN_NETWORK_PASSPHRASE="Test SDF Network ; September 2015"
+PUBLIC_SOROBAN_RPC_URL="https://soroban-testnet.stellar.org:443"
+
+TANSU_CONTRACT_ID=
+
+SOROBAN_ACCOUNT="alice"
+SOROBAN_NETWORK="testnet"

dapp/.gitattributes

@@ -0,0 +1,2 @@
+Cargo.lock text -merge eol=lf linguist-generated=true -diff
+package-lock.json linguist-generated=true -diff

dapp/.gitignore

@@ -0,0 +1,35 @@
+# Rust's output directory
+target
+
+# Local Soroban settings
+.soroban
+
+
+# The following is from the Frontend Template's .gitignore
+
+# soroban/Rust output
+target
+.soroban
+
+# build output
+dist/
+!packages/**/dist
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

dapp/CONTRIBUTING.md

@@ -0,0 +1,10 @@
+# Contributing
+
+This is a guide to contributing to `loam-build/soroban-frontend-template`
+itself. Feel free to delete or modify it for your own project.
+
+soroban-cli requires that the main branch obtained with `git clone` be the branch to use as a template. So we are keeping `main` free of artifacts that do not make sense in the context of a `soroban contract init` template, such as the `contracts` folder.
+
+However, when actually maintaining and improving this template, we need these artifacts.
+
+Therefore, to contribute to this project, please check out the `dev` branch. All pushes/merges to the `dev` branch will be automatically pushed to `main` [on every push](.github/workflows/publish.yml).

dapp/README.md

@@ -0,0 +1,45 @@
+# Soroban Project
+
+## Project Structure
+
+This repository uses the recommended structure for a Soroban project:
+```text
+.
+├── contracts
+│   └── hello_world
+│       ├── src
+│       │   ├── lib.rs
+│       │   └── test.rs
+│       └── Cargo.toml
+├── Cargo.toml
+└── README.md
+```
+
+- New Soroban contracts can be put in `contracts`, each in their own directory. There is already a `hello_world` contract in there to get you started.
+- If you initialized this project with any other example contracts via `--with-example`, those contracts will be in the `contracts` directory as well.
+- Contracts should have their own `Cargo.toml` files that rely on the top-level `Cargo.toml` workspace for their dependencies.
+- Frontend libraries can be added to the top-level directory as well. If you initialized this project with a frontend template via `--frontend-template` you will have those files already included.
+
+---
+<!-- The following is the Frontend Template's README.md -->
+
+# Soroban Frontend in Astro
+
+A Frontend Template suitable for use with `soroban contract init --frontend-template`, powered by [Astro](https://astro.build/).
+
+# Getting Started
+
+- `cp .env.example .env`
+- `npm install`
+- `npm run dev`
+
+# How it works
+
+If you look in [package.json](./package.json), you'll see that the `start` & `dev` scripts first run the [`initialize.js`](./initialize.js) script. This script loops over all contracts in `contracts/*` and, for each:
+
+1. Deploys to a local network (_needs to be running with `docker run` or `soroban network start`_)
+2. Saves contract IDs to `.soroban/contract-ids`
+3. Generates TS bindings for each into the `packages` folder, which is set up as an [npm workspace](https://docs.npmjs.com/cli/v10/configuring-npm/package-json#workspaces)
+4. Create a file in `src/contracts` that imports the contract client and initializes it for the `standalone` network.
+
+You're now ready to import these initialized contract clients in your [Astro templates](https://docs.astro.build/en/core-concepts/astro-syntax/) or your [React, Svelte, Vue, Alpine, Lit, and whatever else JS files](https://docs.astro.build/en/core-concepts/framework-components/#official-ui-framework-integrations). You can see an example of this in [index.astro](./src/pages/index.astro).

dapp/astro.config.mjs

@@ -0,0 +1,8 @@
+import { defineConfig } from 'astro/config';
+
+import tailwind from "@astrojs/tailwind";
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [tailwind()]
+});

dapp/init.js

@@ -0,0 +1,36 @@
+import 'dotenv/config';
+import { mkdirSync, writeFileSync } from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+// Get dirname (equivalent to the Bash version)
+const __filename = fileURLToPath(import.meta.url);
+const dirname = path.dirname(__filename);
+
+function importContract(alias) {
+  const outputDir = `${dirname}/src/contracts/`;
+
+  mkdirSync(outputDir, { recursive: true });
+
+  const importContent =
+    `import * as Client from '${alias}';\n` +
+    `import { rpcUrl } from './util';\n\n` +
+    `export default new Client.Client({\n` +
+    `  ...Client.networks.${process.env.SOROBAN_NETWORK},\n` +
+    `  rpcUrl,\n` +
+    `${
+      process.env.SOROBAN_NETWORK === "local" || "standalone"
+        ? `  allowHttp: true,\n`
+        : null
+    }` +
+    `});\n`;
+
+  const outputPath = `${outputDir}/${alias}.ts`;
+
+  writeFileSync(outputPath, importContent);
+
+  console.log(`Created import for ${alias}`);
+}
+
+
+importContract('soroban_versioning');

dapp/package.json

@@ -0,0 +1,30 @@
+{
+  "dependencies": {
+    "@astrojs/check": "^0.4.1",
+    "@astrojs/tailwind": "^5.1.0",
+    "@creit.tech/stellar-wallets-kit": "^1.0.0",
+    "astro": "^4.2.4",
+    "install": "^0.13.0",
+    "js-sha3": "^0.9.3",
+    "tailwindcss": "^3.4.10",
+    "typescript": "^5.3.3"
+  },
+  "devDependencies": {
+    "dotenv": "^16.4.1",
+    "glob": "^10.4.1",
+    "netlify-cli": "^17.34.1"
+  },
+  "name": "dapp",
+  "scripts": {
+    "astro": "astro",
+    "build": "astro check && astro build",
+    "dev": "astro dev",
+    "preview": "astro preview",
+    "start": "astro dev"
+  },
+  "type": "module",
+  "version": "0.0.1",
+  "workspaces": [
+    "packages/*"
+  ]
+}

bindings/ts/README.md → dapp/packages/soroban_versioning/README.md

@@ -1,15 +1,15 @@
-# ts JS
+# soroban_versioning JS
 
-JS library for interacting with [Soroban](https://soroban.stellar.org/) smart contract `ts` via Soroban RPC.
+JS library for interacting with [Soroban](https://soroban.stellar.org/) smart contract `soroban_versioning` via Soroban RPC.
 
 This library was automatically generated by Soroban CLI using a command similar to:
 
 ```bash
 soroban contract bindings ts \
   --rpc-url https://soroban-testnet.stellar.org:443 \
   --network-passphrase "Test SDF Network ; September 2015" \
-  --contract-id CC3JCYWHNMPMQTOQUNDCJSCFSWRFZIE2JVSAUEXEG56DMKOMI3RL7VOH \
-  --output-dir ./path/to/ts
+  --contract-id CAP52ERGUZ65UNPHP36CQBHYUPEUG2TT4NPVEV7CREWRT7UCPD7PRWEE \
+  --output-dir ./path/to/soroban_versioning
 ```
 
 The network passphrase and contract ID are exported from [index.ts](./src/index.ts) in the `networks` constant. If you are the one who generated this library and you know that this contract is also deployed to other networks, feel free to update `networks` with other valid options. This will help your contract consumers use this library more easily.
@@ -22,15 +22,15 @@ But you don't need to publish this library to NPM to use it. You can add it to y
 
 ```json
 "dependencies": {
-  "ts": "./path/to/this/folder"
+  "soroban_versioning": "./path/to/this/folder"
 }
 ```
 
 However, we've actually encountered [frustration](https://github.com/stellar/soroban-example-dapp/pull/117#discussion_r1232873560) using local libraries with NPM in this way. Though it seems a bit messy, we suggest generating the library directly to your `node_modules` folder automatically after each install by using a `postinstall` script. We've had the least trouble with this approach. NPM will automatically remove what it sees as erroneous directories during the `install` step, and then regenerate them when it gets to your `postinstall` step, which will keep the library up-to-date with your contract.
 
 ```json
 "scripts": {
-  "postinstall": "soroban contract bindings ts --rpc-url https://soroban-testnet.stellar.org:443 --network-passphrase \"Test SDF Network ; September 2015\" --id CC3JCYWHNMPMQTOQUNDCJSCFSWRFZIE2JVSAUEXEG56DMKOMI3RL7VOH --name ts"
+  "postinstall": "soroban contract bindings ts --rpc-url https://soroban-testnet.stellar.org:443 --network-passphrase \"Test SDF Network ; September 2015\" --id CAP52ERGUZ65UNPHP36CQBHYUPEUG2TT4NPVEV7CREWRT7UCPD7PRWEE --name soroban_versioning"
 }
 ```
 
@@ -41,7 +41,7 @@ Obviously you need to adjust the above command based on the actual command you u
 Now that you have your library up-to-date and added to your project, you can import it in a file and see inline documentation for all of its exported methods:
 
 ```js
-import { Contract, networks } from "ts"
+import { Contract, networks } from "soroban_versioning"
 
 const contract = new Contract({
   ...networks.futurenet, // for example; check which networks this library exports