diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json new file mode 100644 index 0000000..3f52c4f --- /dev/null +++ b/.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": {} + } +} diff --git a/README.md b/README.md index fcdc763..a241629 100644 --- a/README.md +++ b/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. diff --git a/contract/scripts/wait-for-blocks.sh b/contract/scripts/wait-for-blocks.sh index 2f02039..591128d 100755 --- a/contract/scripts/wait-for-blocks.sh +++ b/contract/scripts/wait-for-blocks.sh @@ -10,8 +10,9 @@ TARGET_HEIGHT='$TARGET_HEIGHT' SLEEP=10 echo "Waiting for the Agoric service to be fully ready..." echo "Target block height: $TARGET_HEIGHT" +RPC=http://localhost:26657 while true; do - response=$(curl --silent http://localhost:26657/abci_info) + response=$(curl --silent $RPC/abci_info) height=$(echo $response | jq -r ".result.response.last_block_height | tonumber") if [ "$height" -ge $TARGET_HEIGHT ]; then echo "Service is ready! Last block height: $height" diff --git a/make_ports_public.sh b/make_ports_public.sh new file mode 100755 index 0000000..f8f49ca --- /dev/null +++ b/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 [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 diff --git a/ui/package.json b/ui/package.json index 664db26..608cbaa 100644 --- a/ui/package.json +++ b/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", diff --git a/ui/src/App.tsx b/ui/src/App.tsx index d62c47a..db4c2a2 100644 --- a/ui/src/App.tsx +++ b/ui/src/App.tsx @@ -25,6 +25,23 @@ 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}`; +} +if (codeSpaceHostName && codeSpaceDomain) { + ENDPOINTS.API = `https://${codeSpaceHostName}-1317.${codeSpaceDomain}`; + ENDPOINTS.RPC = `https://${codeSpaceHostName}-26657.${codeSpaceDomain}`; +} else { + console.error( + 'Missing environment variables: VITE_HOSTNAME or VITE_GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN', + ); +} const watcher = makeAgoricChainStorageWatcher(ENDPOINTS.API, 'agoriclocal'); interface AppState {