Making Offer-up Work with GHCS

.devcontainer/devcontainer.json

@@ -0,0 +1,26 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
+{
+	"name": "Node.js",
+	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+	"image": "mcr.microsoft.com/devcontainers/javascript-node:1-18-bookworm",
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	"forwardPorts": [1317, 26657],
+	"portsAttributes": {
+
+      "1317": {
+        "label": "API",
+        "onAutoForward": "silent"
+      },
+      "26657": {
+          "label": "RPC",
+          "onAutoForward": "silent"
+      }
+	},
+	"postStartCommand": "/bin/bash /workspaces/dapp-offer-up/make_ports_public.sh 26657 1317",
+	"features": {
+		"ghcr.io/devcontainers/features/docker-in-docker:2": {},
+		"ghcr.io/devcontainers/features/github-cli:1": {}
+	}
+}

README.md

@@ -8,7 +8,7 @@ Offer Up is a simple Dapp for the [Agoric smart contract platform](https://docs.
 
 ## Getting started
 
-Detailed instructions regarding setting up the environment with a video walkthrough is available at [Your First Agoric Dapp](https://docs.agoric.com/guides/getting-started/) tutorial. But if you have the environment set, i.e., have correct version of node, yarn, docker, and Keplr wallet installed, here are the steps that you need to follow:
+Detailed instructions regarding setting up the environment with a video walkthrough is available at [Your First Agoric Dapp](https://docs.agoric.com/guides/getting-started/) tutorial. But if you have the environment set, i.e., have correct version of node, yarn, docker, and Keplr wallet installed, below are the steps that you need to follow. *You can also use the same instructions to follow along in Github Codespaces without any installation or downloads on your local machine, apart from Keplr which is needed to connect to dApp.*
 - run the `yarn install` command to install any solution dependencies. *Downloading all the required dependencies may take several minutes. The UI depends on the React framework, and the contract depends on the Agoric framework. The packages in this project also have development dependencies for testing, code formatting, and static analysis.*
 - start a local Agoric blockchain using the `yarn start:docker` command.
 - run `yarn docker:logs` to check the logs. Once your logs resemble the following, stop the logs by pressing `ctrl+c`.
@@ -20,6 +20,7 @@ demo-agd-1  | 2023-12-27T04:08:07.398Z block-manager: block 1004 commit
 demo-agd-1  | 2023-12-27T04:08:08.405Z block-manager: block 1005 begin
 demo-agd-1  | 2023-12-27T04:08:08.407Z block-manager: block 1005 commit
 ```
+- **Only if you are running this in a github codespace:** go to `PORTS` in bottom-right panel, and make all listed ports `public` by selecting `Port Visibility` after right-click.
 - run `yarn start:contract` to start the smart contract. 
 - run `yarn start:ui` to start the smart contract. You can use the link in the output to load the smart contract UI in a browser.
 

make_ports_public.sh

@@ -0,0 +1,19 @@
+#!/bin/bash
+set -x
+
+# Function to change port visibility to public
+change_port_visibility() {
+  local port=$1
+  gh codespace ports visibility $port:public -c $CODESPACE_NAME
+}
+
+# Check if at least one port is provided
+if [ $# -eq 0 ]; then
+  echo "Usage: $0 <port1> [port2 ... portN]"
+  exit 1
+fi
+
+# Loop through each provided port and change its visibility to public
+for port in "$@"; do
+  change_port_visibility $port
+done

ui/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "export VITE_HOSTNAME=$CODESPACE_NAME && export VITE_GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN=$GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN && vite",
     "build": "tsc && vite build",
     "test": "vitest spec",
     "test:e2e": "SKIP_EXTENSION_SETUP=true EXTENSION=keplr synpress run --configFile=test/e2e/synpress.config.cjs",

ui/src/App.tsx

@@ -25,6 +25,16 @@ const ENDPOINTS = {
   API: 'http://localhost:1317',
 };
 
+const codeSpaceHostName = import.meta.env.VITE_HOSTNAME;
+
+const codeSpaceDomain = import.meta.env
+  .VITE_GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN;
+
+if (codeSpaceHostName) {
+  ENDPOINTS.API = `https://${codeSpaceHostName}-1317.${codeSpaceDomain}`;
+  ENDPOINTS.RPC = `https://${codeSpaceHostName}-26657.${codeSpaceDomain}`;
+}
+
 const watcher = makeAgoricChainStorageWatcher(ENDPOINTS.API, 'agoriclocal');
 
 interface AppState {