Making dapp work on GHCS

.devcontainer/devcontainer.json

@@ -0,0 +1,35 @@
+// 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": [5173, 1317, 26657, 26656],
+	"portsAttributes": {
+      "5173": {
+        "label": "UI",
+        "onAutoForward": "openBrowser"
+      },
+      "1317": {
+        "label": "API",
+        "onAutoForward": "silent"
+      },
+      "26657": {
+          "label": "RPC",
+          "onAutoForward": "silent"
+      },
+      "26656": {
+        "label": "P2P",
+        "onAutoForward": "silent"
+      }
+	},
+	// Use 'postCreateCommand' to run commands after the container is created.
+	"postCreateCommand": "bash /workspaces/dapp-agoric-basics/make_ports_public.sh 26657 5173 1317",
+	"postStartCommand": "yarn install",
+	"features": {
+		"ghcr.io/devcontainers/features/docker-in-docker:2": {},
+		"ghcr.io/devcontainers/features/github-cli:1": {}
+	}
+}

.github/dependabot.yml

@@ -0,0 +1,12 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for more information:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+# https://containers.dev/guide/dependabot
+
+version: 2
+updates:
+ - package-ecosystem: "devcontainers"
+   directory: "/"
+   schedule:
+     interval: weekly

README.md

@@ -1,6 +1,7 @@
 # Agoric Dapp Starter: Agoric Basics
 
 This is a basic Agoric Dapp that contains three smart contracts `postal-service`, `sell-concert-tickets`, and `swaparoo` demonstrating different scenarios which can be implemented easily using Agoric SDK. There is also a UI for `sell-concert-tickets` contract that a user can use to buy three different types of concert tickets and pay through a wallet extension in the browser. 
+The following instrucions provide a guide to setup an environment to try `dapp-agoric-basics` on your local machine. If you want to try it in cloud environment without any installations or downloads, you can [try it in github codespaces](#instructions-to-run-dapp-agoric-basic-in-ghcs).
 
 ## Getting started
 
@@ -29,5 +30,20 @@ To perform unit tests:
 To perform end to end test
 -run the command `yarn test:e2e` in the root directory.
 
+## Instructions to run `dapp-agoric-basic` in GHCS
+
+Here are the step-by-step instructions to run/work on `dapp-agoric-basic` in github codespaces:
+
+1. Go to repo here: [https://github.com/Agoric/dapp-agoric-basics/](https://github.com/Agoric/dapp-agoric-basics/)
+2. Click on ![Green `<> Code` button](https://docs.github.com/assets/cb-13128/mw-1440/images/help/repository/code-button.webp)
+3. Click on `Codespaces` tab and create a new Codespace. If you are already using Codespaces on current repo then click the "+" button on top right of the `Codespaces` tab to create a new one.
+4. You should see a VSCode environment load in your browser followed by a setup. This should take a few minutes.
+5. Once it's done do `yarn install` in the terminal.
+6. Do `yarn start:docker` followed by `yarn docker:logs` - kill it after you see `begin`/`commit`.
+7.  Do `yarn start:contract`.
+8. Do `yarn start:ui` - a pop-up should appear in bottom right. Click open in browser if needed.
+9. DApp should be load in your browser.
+10. Connect your Wallet and interact with DApp as usual.
+
 ## Contributing
 See [CONTRIBUTING](./CONTRIBUTING.md) for more on contributions.

contract/tools/ui-kit-goals/makeHttpClient.js

@@ -29,7 +29,8 @@ const filterBadStatus = res => {
  * @returns {import('@cosmjs/tendermint-rpc').RpcClient}
  */
 export const makeHttpClient = (url, fetch) => {
-  const headers = {}; // XXX needed?
+  const headers = { 'Access-Control-Allow-Origin': '*'
+        }; // XXX needed?
 
   // based on cosmjs 0.30.1:
   // https://github.com/cosmos/cosmjs/blob/33271bc51cdc865cadb647a1b7ab55d873637f39/packages/tendermint-rpc/src/rpcclients/http.ts#L37
@@ -80,6 +81,7 @@ export const makeAPI = (apiAddress, { fetch }) => {
       keepalive: true,
       headers: {
         'Content-Type': 'application/json',
+        'Access-Control-Allow-Origin': '*',
         ...options.headers,
       },
     };

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

package.json

@@ -48,7 +48,7 @@
     "docker:make": "cd contract; docker compose exec agd make -C /workspace/contract",
     "make:help": "make -C contract list",
     "start:contract": "cd contract && yarn start",
-    "start:ui": "cd ui && yarn dev",
+    "start:ui": "export VITE_HOSTNAME=$CODESPACE_NAME && export VITE_GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN=$GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN && cd ui && yarn dev",
     "lint": "yarn workspaces run lint",
     "lint:fix": "yarn workspaces run lint:fix",
     "test": "yarn workspaces run test",

ui/src/App.tsx

@@ -8,6 +8,16 @@ import '@agoric/react-components/dist/style.css';
 
 function App() {
   const { themeClass } = useTheme();
+  let REST_HOSTNAME = 'http://localhost:1317';
+  let RPC_HOSTNAME = 'http://localhost:26657';
+
+  const codeSpaceHostName = import.meta.env.VITE_HOSTNAME;
+  const codeSpaceDomain = import.meta.env.VITE_GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN;
+
+  if (codeSpaceHostName) {
+    REST_HOSTNAME = `https://${codeSpaceHostName}-1317.${codeSpaceDomain}`;
+    RPC_HOSTNAME = `https://${codeSpaceHostName}-26657.${codeSpaceDomain}`;
+  }
 
   return (
     <ThemeProvider>
@@ -22,8 +32,8 @@ function App() {
                 iconUrl: 'agoric.svg', // Optional icon for dropdown display
               },
               apis: {
-                rest: ['http://localhost:1317'],
-                rpc: ['http://localhost:26657'],
+                rest: [REST_HOSTNAME],
+                rpc: [RPC_HOSTNAME],
               },
             },
           ]}