\ No newline at end of file
diff --git a/main/guides/orchestration/dapp-orchestration-basics/installation/index.md b/main/guides/orchestration/dapp-orchestration-basics/installation/index.md
new file mode 100644
index 000000000..808bed6d7
--- /dev/null
+++ b/main/guides/orchestration/dapp-orchestration-basics/installation/index.md
@@ -0,0 +1,218 @@
+# Agoric Orchestration Basics Installation Guide
+Here, we will walk through installing the Orchestration-Basics demo project onto your local machine.
+
+## Table of Contents
+
+- [Agoric Orchestration Basics Installation Guide](#agoric-orchestration-basics-installation-guide)
+ - [Table of Contents](#table-of-contents)
+ - [Setting Up the Local Environment](#setting-up-the-local-environment)
+ - [Overriding the Chain Registry for use with `agoric-sdk/multichain-testing`](#overriding-the-chain-registry-for-use-with-agoric-sdkmultichain-testing)
+ - [Multichain-Testing Makefile Helpers](#multichain-testing-makefile-helpers)
+ - [Troubleshooting Docker](#troubleshooting-docker)
+ - [Enabling Kubernetes](#enabling-kubernetes)
+ - [Increasing resources allocated to docker](#increasing-resources-allocated-to-docker)
+ - [Adding a New Address](#adding-a-new-address)
+ - [Funding the Account](#funding-the-account)
+ - [Building \& Deploying the dApp](#building--deploying-the-dapp)
+ - [Running Tests](#running-tests)
+ - [End-to-End Build \& Deploy](#end-to-end-build--deploy)
+ - [Funding on Osmosis (for testing)](#funding-on-osmosis-for-testing)
+ - [Example RPC query for Balances](#example-rpc-query-for-balances)
+ - [Temporary Funding of ICA](#temporary-funding-of-ica)
+
+The Orchestration Basics dApp demonstrates key features of the orchestration API within a fully functional end-to-end environment. The user interface enables interaction with the orchestration components from client-side javascript.
+
+## Setting Up the Local Environment
+
+To set up your local environment, refer to the `agoric-sdk/multichain-testing/README.md` for detailed setup instructions. Here’s a brief overview of the key steps:
+
+Once it is setup, you want to be able to run:
+```console
+kubectl get pods
+```
+
+We expect to see an output like this:
+
+```console
+NAME READY STATUS RESTARTS AGE
+agoriclocal-genesis-0 1/2 Running 0 68s
+gaialocal-genesis-0 2/3 Running 0 68s
+hermes-agoric-gaia-0 2/2 Running 0 68s
+hermes-agoric-osmosis-0 2/2 Running 0 68s
+hermes-osmosis-gaia-0 2/2 Running 0 68s
+osmosislocal-genesis-0 3/3 Running 0 68s
+registry-79cf44b64-xct5b 1/1 Running 0 68s
+```
+
+This assures us that our environment with the following resources is running:
+- an Agoric node
+- a Gaia node
+- an Osmosis node
+- an Agoric <-> Gaia hermes relayer
+- an Agoric <-> Osmosis hermes relayer
+
+**Check Agoric Daemon Status**
+Verify that the Agoric daemon is running with the following command:
+```bash
+agd status
+```
+If the daemon isn't reachable, but the node is running, you may need to make sure the ports are forwarded properly. You can do this by running this command from inside `multichain-testing/`:
+
+```bash
+make port-forward
+```
+
+
+### Overriding the Chain Registry for use with `agoric-sdk/multichain-testing`
+
+To use this dapp with the kubernetes environment spun-up by `multchain-testing` & starship, we have to make sure vstorage reflects the chain information relevent to our locally-maintained environment.
+
+Run the following commands from the `agoric-sdk/multichain-testing/` directory:
+
+```bash
+make override-chain-registry
+```
+
+## Multichain-Testing Makefile Helpers
+To streamline your workflow, you can add the following commands to the bottom of your `multichain-testing/Makefile`:
+
+```makefile
+teardown: stop-forward stop clean delete
+
+corepack-setup:
+ corepack prepare yarn@4 --activate
+
+corepack-enable:
+ corepack enable
+
+test:
+ yarn test test/install-contracts.test.ts
+
+all: setup install
+ sleep 3
+ make port-forward
+ sleep 120
+ make fund-provision-pool
+ sleep 10
+ make add-address
+ echo "done running"
+
+hermes-update:
+ kubectl exec -i hermes-agoric-osmosis-0 -c relayer -- hermes update client --host-chain agoriclocal --client 07-tendermint-1 # or 07-tendermint-0
+ sleep 60
+ make hermes-update
+```
+
+**Restart the Environment**
+If you need to restart your environment for any reason, use the following command from `agoric-sdk/multichain-testing`:
+```bash
+make teardown ; make stop; make stop-forward; make clean; make; make port-forward
+```
+
+## Troubleshooting Docker
+During setting up the environment, you may run into a few issues with docker. Here are two common setup requirements.
+
+### Enabling Kubernetes
+Inside of "settings", navigate to the "kubernetes" section. Here, you want to ensure that you select the "Enable Kubernetes" checkbox. You will have to restart docker to make these changes take effect. This is something to keep this in mind if you have any containers that are currently running.
+
+
+
+### Increasing resources allocated to docker
+From inside of "settings", navigate to the "Resources" section. By default docker doesn't optimize the resources allocated for running resource-intensive environments. For this environment, we want to ensure our `CPU limit`, `Memory Limit`, and `Swap` are all bumped up to 75% their max. You can always increase/decrease after you get everything setup, and determine how much resources are needed for your machine.
+
+
+
+
+## Adding a New Address
+
+Before deploying the contract, we want to generate a new address using the keyring inside of the localchain environment. To add a new address to the keychain inside the Kubernetes pod, run the following command from the top-level directory:
+
+```bash
+make add-address
+```
+
+Now, inside of `contract/`, paste the resulting `agoric1` prefixed address into the `Makefile` under the `ADDR`variable.
+
+## Funding the Account
+
+To now fund the account we just generated, we run the following command from the top-level directory.
+
+```bash
+make fund
+```
+
+This funds the pool, provisions the smart wallet, and also funds `CLIENTADDR` and `CLIENT_OSMO_ADDR`. You can use `CLIENTADDR` and `CLIENT_OSMO_ADDR` to set your browser wallet addreses that you would like to fund during this step.
+
+**CLIENTADDR:** Your browser wallet address for interacting with the orchestration dApp.
+
+**CLIENT_OSMO_ADDR:** Your Osmosis account address.
+
+## Building & Deploying the dApp
+
+To build and deploy the dApp, run the following command from the top-level directory:
+
+```bash
+make
+```
+
+This is a convenient step that will build, and deploy `/contract/src/orca.contract.js`, using `scripts/deploy-contract.js`.
+
+
+## Running Tests
+
+To run tests, use the following commands from the top-level directory:
+
+```bash
+make test-orca
+```
+
+For more on testing the project, see the testing guide under `dapp-orchestration-basics`.
+
+
+## End-to-End Build & Deploy
+
+For an end-to-end build and deploy, use the following command if the contract deployment fails -- this will simply retry submitting the proposal:
+
+```bash
+make redeploy
+```
+
+## Funding on Osmosis (for testing)
+
+To fund an account on Osmosis for any reason, we can get access to the node's environment with this command:
+
+```console
+kubectl -it osmosislocal-genesis-0 -- bash
+```
+
+and now we are inside the container, and can interact with the keychain accounts, etc. For example, we can now look at the accounts in the keychain, without having to have the osmosis executable on our local filesystem directly.
+
+```console
+osmosisd keys list
+[{"name":"faucet","type":"local","address":"osmo1vhdew4wqu3tp8l2d55aqcc73aqvr0rr9vdxded","pubkey":"{\"@type\":\"/cosmos.crypto.secp256k1.PubKey\",\"key\":\"A5fdOBMxJrfNN0qRmA+Ewzamh1u/4AA1eKhEJHp+lWXr\"}"},{"name":"genesis","type":"local","address":"osmo1qjtcxl86z0zua2egcsz4ncff2gzlcndz2jeczk","pubkey":"{\"@type\":\"/cosmos.crypto.secp256k1.PubKey\",\"key\":\"AmPsa3aqarITEk9NM7T9guOi9VdyrHkqEdqVABLIcDew\"}"}]osmosislocal-genesis-0:/opt#
+```
+
+
+use the following command to fund any address from the faucet account:
+
+```console
+osmosisd tx bank send faucet osmo1dw3nep8yqy5szzxn6hmma6j2z77vp4wz8tkh0w3gyrruwny0w03s070kaa 299999999uosmo --chain-id osmosislocal --gas-adjustment 2 --gas auto --from faucet --gas-prices 0.0025uosmo
+```
+
+## Example RPC query for Balances
+
+To query balances via RPC, use the following URL structure:
+
+```console
+http://127.0.0.1:26657/abci_query?path=%22/cosmos.bank.v1beta1.Query/AllBalances%22&data=%22%5Cn-agoric12j5kzvrwunqvrga5vm4zpy3mkeh3lvyld0amz5%22
+```
+
+## Temporary Funding of ICA
+
+To temporarily fund an ICA, use the following command for example:
+
+```console
+agd tx bank send keplr1 agoric15ch7da0d8nvqc8hk6dguq4ext0lvskpjcwm3patf8sygm63chmpqjlzt74 1000uist -y --chain-id agoriclocal
+```
+
+This is just a native bank transfer of **1000IST** (`uist`) to an arbitrary account using `agd`
diff --git a/main/guides/orchestration/dapp-orchestration-basics/testing/index.md b/main/guides/orchestration/dapp-orchestration-basics/testing/index.md
new file mode 100644
index 000000000..3bf972f6f
--- /dev/null
+++ b/main/guides/orchestration/dapp-orchestration-basics/testing/index.md
@@ -0,0 +1,376 @@
+# Orchestration Basics Contract Testing Guide
+Here, we will walkthrough the testing setup for the Orchestration Basics demo contract, `orca.contract.js`.
+
+## Table of Contents
+
+- [Orchestration Basics Contract Testing Guide](#orchestration-basics-contract-testing-guide)
+ - [Table of Contents](#table-of-contents)
+ - [Overview](#overview)
+ - [Import Statements](#import-statements)
+ - [Setup and Context](#setup-and-context)
+ - [Initializing Zoe and Bundling Contracts](#initializing-zoe-and-bundling-contracts)
+ - [Mocking Dummy Storage Node](#mocking-dummy-storage-node)
+ - [Mocking Dummy Marshaller](#mocking-dummy-marshaller)
+ - [Setting Up Agoric Names](#setting-up-agoric-names)
+ - [Creating Cosmos Interchain Service](#creating-cosmos-interchain-service)
+ - [Final Context Setup](#final-context-setup)
+ - [Installing the Contract](#installing-the-contract)
+ - [Starting the Contract](#starting-the-contract)
+ - [Orchestration Account Scenario](#orchestration-account-scenario)
+ - [Macro Definition](#macro-definition)
+ - [Chain Configuration Validation](#chain-configuration-validation)
+ - [Setting Up the Testing Context](#setting-up-the-testing-context)
+ - [Starting the Zoe Instance](#starting-the-zoe-instance)
+ - [Creating an Account Invitation](#creating-an-account-invitation)
+ - [Making the Account Offer](#making-the-account-offer)
+ - [Retrieving and Verifying the Offer Result](#retrieving-and-verifying-the-offer-result)
+ - [Querying vStorage for Verification](#querying-vstorage-for-verification)
+ - [Continuing the Offer](#continuing-the-offer)
+ - [Test Execution](#test-execution)
+
+This document provides a detailed walkthrough of the `orca-contract.test.js` file. This test script is designed to validate the functionality of the Orca contract within the Agoric platform using AVA as the testing framework.
+
+## Overview
+
+The `orca-contract.test.js` script performs various tests, including:
+- Installing the contract on Zoe.
+- Starting the contract.
+- Registering chains.
+- Orchestrating accounts.
+- Verifying results via vstorage queries.
+
+## Import Statements
+
+The test script begins by importing necessary modules and setting up the test environment:
+
+```javascript
+import { test as anyTest } from './prepare-test-env-ava.js';
+import { createRequire } from 'module';
+import { E, Far } from '@endo/far';
+import { makeNodeBundleCache } from '@endo/bundle-source/cache.js';
+import { makeZoeKitForTest } from '@agoric/zoe/tools/setup-zoe.js';
+import { startOrcaContract } from '../src/orca.proposal.js';
+import { makeMockTools } from './boot-tools.js';
+import { getBundleId } from '../tools/bundle-tools.js';
+import { startOrchCoreEval } from '../tools/startOrch.js';
+```
+
+## Setup and Context
+
+The `makeTestContext` function sets up the testing environment by creating necessary mocks, bundling contracts, and initializing services:
+
+### Initializing Zoe and Bundling Contracts
+
+```javascript
+const makeTestContext = async t => {
+const { zoeService: zoe, feeMintAccess } = makeZoeKitForTest();
+const bundleCache = await makeNodeBundleCache('bundles/', {}, s => import(s));
+const bundle = await bundleCache.load(contractPath, 'orca');
+const tools = await makeMockTools(t, bundleCache);
+```
+
+- **Zoe Initialization**: `makeZoeKitForTest()` sets up a test environment with Zoe
+- **Contract Bundling**: The contract is bundled using `makeNodeBundleCache`, which caches the compiled contract for faster testing.
+
+### Mocking Dummy Storage Node
+
+```javascript
+const makeDummyStorageNode = nodeName => {
+ return Far('DummyStorageNode', {
+ makeChildNode: async (childName) => {
+ console.log(`makeChildNode called with name: ${childName}`);
+ return makeDummyStorageNode(childName);
+ },
+ getPath: () => `/${nodeName}`,
+ setValue: (value) => {
+ console.log(`setValue called on node: ${nodeName} with value: ${value}`);
+ return value;
+ },
+ });
+};
+```
+
+**Storage Node Mock**: A mock storage node is created to simulate interactions with vstorage. This node can create child nodes and store values.
+
+### Mocking Dummy Marshaller
+
+```javascript
+const makeDummyMarshaller = () => {
+ return Far('DummyMarshaller', {
+ toCapData: (data) => ({}),
+ fromCapData: (capData) => ({}),
+ });
+};
+```
+
+**Marshaller Mock**: A dummy marshaller is created to handle data serialization and deserialization.
+
+### Setting Up Agoric Names
+
+```javascript
+const agoricNames = Far('DummyAgoricNames', {
+ lookup: async (key, name) => {
+ if (key === 'chain' && (name === 'agoric' || name === 'osmosis')) {
+ const state = {
+ name,
+ chainId: `${name}local`,
+ denom: name === 'agoric' ? 'ubld' : 'uosmo',
+ expectedAddressPrefix: name === 'agoric' ? 'agoric' : 'osmo',
+ details: `${name} chain details`,
+ };
+
+ return {
+ ...state,
+ makeAccount: Far('Account', {
+ getChainId: () => state.chainId,
+ getAccountAddress: () => `${state.name}AccountAddress`,
+ getBalance: () => `1000${state.denom}`,
+ }),
+ };
+ } else if (key === 'chainConnection' && (name.includes('agoric') || name.includes('osmosis'))) {
+ return {
+ connectionName: name,
+ sourceChain: name.split('_')[0],
+ destinationChain: name.split('_')[1],
+ transferChannel: {
+ version: '1',
+ state: 'open',
+ portId: 'transfer',
+ counterPartyPortId: 'transfer',
+ counterPartyChannelId: 'channel-1',
+ channelId: 'channel-0',
+ },
+ };
+ }
+ throw Error(`Chain or connection not found: ${name}`);
+ },
+});
+```
+
+**Agoric Names Mock**: A mock service for `agoricNames` is set up to simulate looking up chain information and connection details. This is crucial for testing how the contract interacts with different chains.
+
+### Creating Cosmos Interchain Service
+
+```javascript
+const cosmosInterchainService = Far('DummyCosmosInterchainService', {
+ getChainHub: async () => ({
+ registerChain: async (name, details) => console.log(`chain registered: ${name}`, details),
+ getChain: async (name) => {
+ if (name.includes('agoric') || name.includes('osmosis')) {
+ return {
+ name,
+ chainId: `${name}local`,
+ denom: name === 'agoric' ? 'ubld' : 'uosmo',
+ expectedAddressPrefix: name === 'agoric' ? 'agoric' : 'osmo',
+ };
+ }
+ throw Error(`chain not found: ${name}`);
+ },
+ }),
+ });
+```
+
+**Interchain Service Mock**: This service simulates interchain operations, such as registering chains and retrieving chain information.
+
+### Final Context Setup
+
+```javascript
+return {
+ zoe,
+ bundle,
+ bundleCache,
+ feeMintAccess,
+ cosmosInterchainService,
+ agoricNames,
+ storageNode: makeDummyStorageNode(),
+ marshaller: makeDummyMarshaller(),
+ ...tools
+};
+```
+
+**Returning Context**: The function returns an object containing all the initialized services, mocks, and tools required for the test environment.
+
+## Installing the Contract
+
+The first test installs the Orca contract using `zoe`:
+
+```javascript
+test('Install the contract', async t => {
+ const { zoe, bundle } = t.context;
+ const installation = await E(zoe).install(bundle);
+ t.log('installed:', installation);
+ t.is(typeof installation, 'object');
+});
+```
+
+## Starting the Contract
+This test starts the Orca contract using the Zoe service and mock services we created earlier:
+
+```javascript
+test('Start Orca contract', async t => {
+ const { zoe, bundle, cosmosInterchainService, agoricNames, storageNode, marshaller } = t.context;
+ const installation = E(zoe).install(bundle);
+
+ const privateArgs = {
+ cosmosInterchainService,
+ orchestrationService: cosmosInterchainService,
+ storageNode,
+ marshaller,
+ agoricNames
+ };
+
+ const { instance } = await E(zoe).startInstance(installation, {}, {}, privateArgs);
+ t.log('started:', instance);
+ t.truthy(instance);
+});
+```
+
+
+
+## Orchestration Account Scenario
+
+The `orchestrationAccountScenario` macro for testing the orchestration of accounts across different chains. This macro handles everything from account creation to verifying results using vstorage.
+
+### Macro Definition
+
+```javascript
+const orchestrationAccountScenario = test.macro({
+ title: (_, chainName) =>
+ `orchestrate - ${chainName} makeAccount returns a ContinuingOfferResult`,
+```
+
+**Purpose**: This defines a test macro, `orchestrationAccountScenario`, that takes a chain name as a parameter and tests the orchestration process.
+
+**Title Function**: Here, `title` generates a descriptive name for the test, including the chain name, so we can easily identify it in test logs.
+
+### Chain Configuration Validation
+
+```javascript
+exec: async (t, chainName) => {
+ const config = chainConfigs[chainName];
+ if (!config) {
+ return t.fail(`unknown chain: ${chainName}`);
+ }
+```
+
+**Configuration Check**: This test begins by validating whether the provided `chainName` has a corresponding configuration in the `chainConfigs` object. If not, the test fails immediately.
+
+**Purpose**: This makes sure that the test is only run for recognized chains, avoiding unnecessary errors.
+
+### Setting Up the Testing Context
+
+```javascript
+const { zoe, bundle, cosmosInterchainService, agoricNames, storageNode, marshaller } = t.context;
+t.log('installing the contract...');
+const installation = E(zoe).install(bundle);
+```
+
+**Extracting Context**: The test destructures several key elements from the testing context we set up, including Zoe, the contract bundle, and services like `cosmosInterchainService`.
+
+**Contract Installation**: Using [`E`](/glossary/#E), we invoke the install method on `zoe`, passing the `bundleId` as an argument. This is the first step in the 2-step, contract deployment process. Next, we need to start the contract instance.
+
+### Starting the Zoe Instance
+
+```javascript
+const privateArgs = {
+ cosmosInterchainService,
+ orchestrationService: cosmosInterchainService,
+ storageNode,
+ marshaller,
+ agoricNames,
+};
+
+const { instance } = await E(zoe).startInstance(installation, {}, {}, privateArgs);
+t.truthy(instance);
+```
+
+**Private Arguments**: The `privateArgs` object is prepared with essential services and dependencies that the contract may require.
+
+**Instance Creation**: Zoe is used to start an instance of the contract with these arguments. The test verifies that the instance is successfully created.
+
+### Creating an Account Invitation
+
+```javascript
+const publicFacet = await E(zoe).getPublicFacet(instance);
+const initialInvitation = await E(publicFacet).makeAccountInvitation();
+```
+
+**Public Facet Access**: The test retrieves the public facet of the contract instance, which provides access to public methods.
+
+**Account Invitation**: An invitation is created using the `makeAccountInvitation` method. This invitation will be used to create an account on the specified chain.
+
+### Making the Account Offer
+
+```javascript
+const makeAccountOffer = {
+ give: {},
+ want: {},
+ exit: { onDemand: null },
+};
+
+const offerId = 'offerId';
+const initialUserSeat = await E(zoe).offer(initialInvitation, makeAccountOffer, undefined, { id: offerId });
+```
+
+**Offer Structure**: The `makeAccountOffer` object is defined, detailing what the user is offering and what they want in return. In this case, both `give` and `want` are empty.
+
+**Making the Offer**: The offer is submitted using Zoe's `offer` method, and an `offerId` is assigned to track the offer. The result is captured in `initialUserSeat`.
+
+### Retrieving and Verifying the Offer Result
+
+```javascript
+const offerResult = await E(initialUserSeat).getOfferResult();
+t.truthy(offerResult, 'Offer result should exist');
+```
+
+**Result Retrieval**: The test retrieves the result of the offer using `getOfferResult`.
+
+**Verification**: It asserts that the result is valid, ensuring that the account creation process was successful.
+
+### Querying vStorage for Verification
+
+```javascript
+const qt = makeQueryTool();
+const wallet = 'test-wallet';
+const { address, currentWalletRecord } = await queryVstorage(t, qt, wallet, offerId);
+```
+
+**vStorage Query**: The test uses a query tool, `qt`, to check the state of vstorage, verifying that the wallet's state reflects the new account's creation and that the offer ID is correctly recorded.
+
+**Address Validation**: The retrieved address is checked to verify it matches the expected format for the chain.
+
+```js
+t.regex(address, new RegExp(`^${config.expectedAddressPrefix}1`), `Address for ${chainName} is valid`);
+```
+
+### Continuing the Offer
+
+```javascript
+const continuingInvitation = await E(publicFacet).makeAccountInvitation();
+t.truthy(continuingInvitation, 'continuing invitation should be created');
+
+const continuingOffer = {
+ give: {},
+ want: {},
+ exit: { onDemand: null },
+};
+
+const continuingUserSeat = await E(zoe).offer(continuingInvitation, continuingOffer, undefined, { previousOffer: offerId });
+const continuingOfferResult = await E(continuingUserSeat).getOfferResult();
+
+t.truthy(continuingOfferResult, 'continuing offer should produce a result');
+t.log('continuing offer result', continuingOfferResult);
+```
+
+**Creating a Continuing Invitation**: The test generates a new invitation for a subsequent offer, ensuring the contract can handle repeated interactions.
+
+**Making and Verifying the Continuing Offer**: The test submits a new offer and verifies that the result is as expected. The `previousOffer` parameter links this offer to the previous one, simulating an ongoing interaction.
+
+### Test Execution
+
+```javascript
+test(orchestrationAccountScenario, 'osmosis');
+```
+
+**Running the Test**: The test is finally executed for the 'osmosis' chain, validating the entire orchestration process from account creation to offer continuation on that chain.
+
diff --git a/main/guides/orchestration/dapp-orchestration-basics/ui/index.md b/main/guides/orchestration/dapp-orchestration-basics/ui/index.md
new file mode 100644
index 000000000..e7c070919
--- /dev/null
+++ b/main/guides/orchestration/dapp-orchestration-basics/ui/index.md
@@ -0,0 +1,527 @@
+# Overview of User Interface Components
+Here, we will walkthrough the components making up the user interface for the Orchestration-Basics demo project.
+
+## Table of Contents
+
+- [Overview of User Interface Components](#overview-of-user-interface-components)
+ - [Table of Contents](#table-of-contents)
+ - [Installation](#installation)
+ - [`Orchestration.tsx`](#orchestrationtsx)
+ - [Purpose](#purpose)
+ - [Key Interactions](#key-interactions)
+ - [Imports and Setup](#imports-and-setup)
+ - [Component State and Refs](#component-state-and-refs)
+ - [Toggle Modal Visibility](#toggle-modal-visibility)
+ - [Effect Hook for Loading Balances](#effect-hook-for-loading-balances)
+ - [Opening Modal with Content](#opening-modal-with-content)
+ - [Effect Hook for Modal Display](#effect-hook-for-modal-display)
+ - [Handling Account Creation](#handling-account-creation)
+ - [Handling Deposit](#handling-deposit)
+ - [Executing Deposit Transaction](#executing-deposit-transaction)
+ - [Handling Withdraw](#handling-withdraw)
+ - [Handling Stake and Unstake](#handling-stake-and-unstake)
+ - [Rendering the Component](#rendering-the-component)
+ - [`makeAccountOffer` Function](#makeaccountoffer-function)
+ - [Function Signature](#function-signature)
+ - [Chain Selection Validation](#chain-selection-validation)
+ - [Contract Instance Retrieval](#contract-instance-retrieval)
+ - [Offer Preparation](#offer-preparation)
+ - [Submitting the Offer](#submitting-the-offer)
+ - [Handling Offer Updates](#handling-offer-updates)
+ - [Successful Offer Handling](#successful-offer-handling)
+ - [Refunded Offer Handling](#refunded-offer-handling)
+ - [`AccountList.tsx`](#accountlisttsx)
+ - [Purpose](#purpose-1)
+ - [Key Interactions](#key-interactions-1)
+ - [Key Interactions](#key-interactions-2)
+ - [`FetchBalances.tsx`](#fetchbalancestsx)
+ - [Purpose](#purpose-2)
+ - [Key Interactions](#key-interactions-3)
+ - [`RpcEndpoints.tsx`](#rpcendpointstsx)
+ - [Purpose](#purpose-3)
+ - [Key Interactions](#key-interactions-4)
+ - [`ChainSelector.tsx`](#chainselectortsx)
+ - [Purpose](#purpose-4)
+ - [Key Interactions](#key-interactions-5)
+ - [`CreateAccountButton.tsx`](#createaccountbuttontsx)
+ - [Purpose](#purpose-5)
+
+The UI for the orchestration dApp is divided into multiple components, each responsible for a specific piece of functionality. Below is an overview of the key components and their roles.
+
+You can find these components in `ui/src/components/Orchestration`.
+
+## Installation
+From inside of the `ui/` folder, you can run `yarn install`. It is recommended to use node `v18`.
+
+From there, you can run `yarn dev` to start the ui.
+
+
+
+
+## `Orchestration.tsx`
+
+### Purpose
+The `Orchestration.tsx` component serves as the main controller for the orchestration dApp's user interface. It manages the state and interactions required for users to create accounts, manage their balances, and perform various blockchain transactions such as deposits, withdrawals, staking, and unstaking.
+
+### Key Interactions
+- **Account Management:** Utilizes components like `AccountList`, `CreateAccountButton`, and `ChainSelector` to allow users to view and manage their accounts across different chains.
+- **Transaction Handling:** Interfaces with the Agoric wallet and the Keplr wallet for signing and broadcasting transactions. It supports various types of transactions, including deposits, withdrawals, staking, and unstaking.
+- **Retrieving Balance:** Fetches and displays account balances in real-time for any native-denom the user holds.
+- **Modal Interactions:** Manages modal dialogs for user actions such as creating accounts and making deposits. These dialogs provide feedback on transaction status, ensuring users are informed of the progress and outcome of their actions.
+- **State Management:** Relies on hooks and context (e.g., `useContractStore`, `NotificationContext`) to maintain and update the application's state, ensuring a seamless user experience.
+
+
+
+#### Imports and Setup
+```javascript
+import React, { useState, useContext, useEffect, useRef } from 'react';
+import { useAgoric } from '@agoric/react-components';
+import { useContractStore } from '../../store/contract';
+import { NotificationContext } from '../../context/NotificationContext';
+import { Button } from 'react-daisyui';
+import AccountList from './AccountList';
+import ChainSelector from './ChainSelector';
+import CreateAccountButton from './CreateAccountButton';
+import { fetchBalances } from './FetchBalances';
+import { makeAccountOffer } from './MakeAccountOffer';
+import { initializeKeplr } from './KeplrInitializer';
+import RpcEndpoints from './RpcEndpoints';
+import { StargateClient, SigningStargateClient } from "@cosmjs/stargate";
+```
+- **React hooks:** `useState`, `useContext`, `useEffect`, and `useRef` are used for managing state, context, side effects, and references to DOM elements.
+- **Custom hooks and context:** `useAgoric`, `useContractStore`, and `NotificationContext` are utilized to interact with the Agoric ecosystem, manage contract data, and handle notifications.
+- **UI Components:** The component imports child components (`AccountList`, `ChainSelector`, `CreateAccountButton`) that handle specific parts of the UI.
+
+
+#### Component State and Refs
+```javascript
+const Orchestration = () => {
+ const { walletConnection } = useAgoric();
+ const { addNotification } = useContext(NotificationContext);
+ const [offerId, setOfferId] = useState('');
+ const icas = useContractStore(state => state.icas);
+ const [balances, setBalances] = useState([]);
+ const [selectedChain, setSelectedChain] = useState('');
+ const [loadingDeposit, setLoadingDeposit] = useState<{ [key: string]: boolean }>({});
+ const [loadingWithdraw, setLoadingWithdraw] = useState<{ [key: string]: boolean }>({});
+ const [loadingStake, setLoadingStake] = useState<{ [key: string]: boolean }>({});
+ const [loadingUnstake, setLoadingUnstake] = useState<{ [key: string]: boolean }>({});
+ const [loadingCreateAccount, setLoadingCreateAccount] = useState(false);
+ const [modalContent, setModalContent] = useState('');
+ const [modalOpen, setModalOpen] = useState(false);
+ const [modalAddress, setModalAddress] = useState('');
+ const [selectedDenom, setSelectedDenom] = useState('uist');
+ const [amount, setAmount] = useState(0);
+ const [statusText, setStatusText] = useState('');
+ const modalRef = useRef