Making dapp work on GHCS

.devcontainer.json

@@ -0,0 +1,22 @@
+{
+  "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"
+      }
+  },
+  "postStartCommand": "bash -i -c 'nvm install 18.20 && nvm alias default 18.20' && bash ./make_ports_public.sh 5173 1317 26657"
+}

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 && 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,15 @@ 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;
+
+  if (codeSpaceHostName) {
+    REST_HOSTNAME = `https://${codeSpaceHostName}-1317.app.github.dev`;
+    RPC_HOSTNAME = `https://${codeSpaceHostName}-26657.app.github.dev`;
+  }
 
   return (
     <ThemeProvider>
@@ -22,8 +31,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],
               },
             },
           ]}