add IDX config, button

.idx/dev.nix

@@ -0,0 +1,58 @@
+# To learn more about how to use Nix to configure your environment
+# see: https://developers.google.com/idx/guides/customize-idx-env
+{ pkgs, ... }: {
+  # Which nixpkgs channel to use.
+  channel = "stable-23.11"; # or "unstable"
+
+  # Use https://search.nixos.org/packages to find packages
+  packages = [
+    # pkgs.go
+    # pkgs.python311
+    # pkgs.python311Packages.pip
+    pkgs.nodejs_20
+    pkgs.nodePackages.yarn
+  ];
+
+  services.docker.enable = true;
+
+  # Sets environment variables in the workspace
+  env = {};
+  idx = {
+    # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
+    extensions = [
+      # "vscodevim.vim"
+    ];
+
+    # Enable previews
+    previews = {
+      enable = true;
+      previews = {
+        # web = {
+        #   # Example: run "npm run dev" with PORT set to IDX's defined port for previews,
+        #   # and show it in IDX's web preview panel
+        #   command = ["npm" "run" "dev"];
+        #   manager = "web";
+        #   env = {
+        #     # Environment variables to set for your server
+        #     PORT = "$PORT";
+        #   };
+        # };
+      };
+    };
+
+    # Workspace lifecycle hooks
+    workspace = {
+      # Runs when a workspace is first created
+      onCreate = {
+        # Example: install JS dependencies from NPM
+        npm-install = "yarn install";
+        docker-pull = "docker compose pull";
+      };
+      # Runs when the workspace is (re)started
+      onStart = {
+        # Example: start a background task to watch and re-build backend code
+        # watch-backend = "npm run watch-backend";
+      };
+    };
+  };
+}

README.md

@@ -8,6 +8,10 @@ Offer Up is a simple Dapp for the [Agoric smart contract platform](https://docs.
 
 ## Getting started
 
+<a href="https://idx.google.com/import?url=https%3A%2F%2Fgithub.com%2FAgoric%2Fdapp-offer-up">
+  <img height="32" alt="Try in IDX" src="https://cdn.idx.dev/btn/try_light_32.svg">
+</a>
+
 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:
 - 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.

ui/package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
+    "build:idx": "echo '{\"chainName\": \"agoriclocal\", \"rpcAddrs\": [\"https://26657-'${WEB_HOST}'\"]}' >public/network-config.json",
     "test": "vitest spec",
     "test:e2e": "SKIP_EXTENSION_SETUP=true EXTENSION=keplr synpress run --configFile=test/e2e/synpress.config.cjs",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",

ui/src/App.tsx

@@ -59,7 +59,10 @@
 };
 
 const connectWallet = async () => {
-  await suggestChain('https://local.agoric.net/network-config');
+  const networkConfig = process.env.WEB_HOST ? '/network-config.json' : 'https://local.agoric.net/network-config';
+  console.log({ networkConfig });
+  await suggestChain(networkConfig);
+
   const wallet = await makeAgoricWalletConnection(watcher, ENDPOINTS.RPC);
   useAppStore.setState({ wallet });
   const { pursesNotifier } = wallet;