feat: swap ui

.github/workflows/pr.yml

@@ -12,7 +12,7 @@ jobs:
       - name: Use Node.js 18
         uses: actions/setup-node@v4
         with:
-          node-version: "18"
+          node-version: '18'
       - name: yarn install
         run: yarn
       - name: yarn lint
@@ -31,7 +31,7 @@ jobs:
       - name: Use Node.js 18
         uses: actions/setup-node@v4
         with:
-          node-version: "18"
+          node-version: '18'
       - name: yarn install
         run: yarn
       - name: yarn start:docker

contract/src/sell-concert-tickets.proposal.js

@@ -81,7 +81,7 @@ export const startSellConcertTicketsContract = async (
   console.log(contractName, '(re)started');
 };
 
-/** @type { import("@agoric/vats/src/core/lib-boot").BootstrapManifestPermit } */
+/** @type { import("@agoric/vats/src/core/lib-boot.js").BootstrapManifestPermit } */
 export const permit = harden({
   consume: {
     agoricNames: true,

contract/src/swaparoo.proposal.js

@@ -23,7 +23,7 @@ const contractName = 'swaparoo';
 
 /**
  * @typedef {PromiseSpaceOf<{
- *   swaparooKit: GovernanceFacetKit<typeof import('./swaparoo.contract').start>;
+ *   swaparooKit: GovernanceFacetKit<typeof import('./swaparoo.contract.js').start>;
  *   swaparooCommitteeKit: StartResult<*>;
  *   swaparooCharterKit: StartResult<*>;
  * }> & {
@@ -93,7 +93,7 @@ export const startSwapContract = async powers => {
     },
   } = swapPowers;
 
-  /** @type {import('./types').NonNullChainStorage['consume']} */
+  /** @type {import('./types.js').NonNullChainStorage['consume']} */
   // @ts-expect-error
   const { chainStorage } = powers.consume;
 
@@ -160,7 +160,7 @@ export const main = (
     charterFacets: startSwaparooCharter(permittedPowers, config),
   });
 
-/** @type { import("@agoric/vats/src/core/lib-boot").BootstrapManifestPermit } */
+/** @type { import("@agoric/vats/src/core/lib-boot.js").BootstrapManifestPermit } */
 export const permit = harden({
   consume: {
     namesByAddress: true,

contract/test/boot-tools.js

@@ -98,7 +98,7 @@ export const mockBootstrapPowers = async (
   produce.priceAuthority.resolve(Far('NullPriceAuthority', {}));
 
   /**
-   * @type {BootstrapPowers & import('../src/types').NonNullChainStorage}
+   * @type {BootstrapPowers & import('../src/types.js').NonNullChainStorage}
    */
   // @ts-expect-error mock
   const powers = { produce, consume, ...spaces, zone };

contract/test/mintStable.js

@@ -12,7 +12,7 @@ const centralSupplyPath = myRequire.resolve(
   '@agoric/vats/src/centralSupply.js',
 );
 
-/** @typedef {Installation<typeof import('@agoric/vats/src/centralSupply.js').start>} CentralSupplyInstallation */
+/** @typedef {Installation<typeof import('@agoric/vats/src/centralSupply').start>} CentralSupplyInstallation */
 /** @typedef {Awaited<ReturnType<import('@endo/bundle-source/cache.js').makeNodeBundleCache>>} BundleCache */
 
 /**

contract/test/test-postalSvc.js

@@ -209,7 +209,7 @@ test('send invitation* from contract using publicFacet of postalService', async
     smartWalletIssuers,
   );
 
-  /** @type {StartedInstanceKit<import('../src/postal-service.contract').PostalServiceFn>['instance']} */
+  /** @type {StartedInstanceKit<import('../src/postal-service.contract.js').PostalServiceFn>['instance']} */
   // @ts-expect-error not (yet?) in BootstrapPowers
   const instance = await powers.instance.consume.postalService;
 

ui/package.json

@@ -13,7 +13,7 @@
     "test:e2e": "exit 0"
   },
   "dependencies": {
-    "@agoric/react-components": "0.1.1-dev-8fc28e8.0",
+    "@agoric/react-components": "^0.1.1-dev-ca0ddde.0",
     "@agoric/ui-components": "^0.3.9-u13.0",
     "@agoric/web-components": "0.15.1-dev-8fc28e8.0",
     "buffer": "^6.0.3",

ui/src/App.tsx

@@ -3,28 +3,39 @@ import { AgoricProvider } from '@agoric/react-components';
 import { Navbar } from './components/Navbar';
 import { Tabs } from './components/Tabs';
 import { wallets } from 'cosmos-kit';
+import { ThemeProvider, useTheme } from '@interchain-ui/react';
 import '@agoric/react-components/dist/style.css';
 
 function App() {
+  const { themeClass } = useTheme();
+
   return (
-    <AgoricProvider
-      wallets={wallets.extension}
-      defaultNetworkConfig={{
-        testChain: {
-          chainId: 'agoriclocal',
-          chainName: 'agoric-local',
-        },
-        apis: {
-          rest: ['http://localhost:1317'],
-          rpc: ['http://localhost:26657'],
-        },
-      }}
-    >
-      <ContractProvider>
-        <Navbar />
-        <Tabs />
-      </ContractProvider>
-    </AgoricProvider>
+    <ThemeProvider>
+      <div className={themeClass}>
+        <AgoricProvider
+          wallets={wallets.extension}
+          agoricNetworkConfigs={[
+            {
+              testChain: {
+                chainId: 'agoriclocal',
+                chainName: 'agoric-local',
+                iconUrl: 'agoric.svg', // Optional icon for dropdown display
+              },
+              apis: {
+                rest: ['http://localhost:1317'],
+                rpc: ['http://localhost:26657'],
+              },
+            },
+          ]}
+          defaultChainName="agoric-local"
+        >
+          <ContractProvider>
+            <Navbar />
+            <Tabs />
+          </ContractProvider>
+        </AgoricProvider>
+      </div>
+    </ThemeProvider>
   );
 }
 

ui/src/components/Inventory.tsx

@@ -2,7 +2,6 @@ import { AmountMath } from '@agoric/ertp';
 import { ConnectWalletButton, useAgoric } from '@agoric/react-components';
 import { stringifyAmountValue } from '@agoric/web-components';
 import { usePurse } from '../hooks/usePurse';
-import type { CopyBag } from '../types';
 
 const Inventory = () => {
   const istPurse = usePurse('IST');
@@ -38,7 +37,9 @@ const Inventory = () => {
                   {ticketsPurse ? (
                     <ul>
                       {(
-                        ticketsPurse.currentAmount.value as CopyBag
+                        ticketsPurse.currentAmount.value as {
+                          payload: [string, bigint][];
+                        }
                       ).payload.map(([name, number]) => (
                         <li key={name}>
                           {String(number)} {name}

ui/src/components/Navbar.tsx

@@ -1,22 +1,7 @@
 import { ConnectWalletButton } from '@agoric/react-components';
 import { NetworkDropdown } from '@agoric/react-components';
-import { ThemeProvider, useTheme } from '@interchain-ui/react';
-
-const localnet = {
-  testChain: {
-    chainId: 'agoriclocal',
-    chainName: 'agoric-local',
-  },
-  apis: {
-    rest: ['http://localhost:1317'],
-    rpc: ['http://localhost:26657'],
-    iconUrl: '/agoriclocal.svg', // Optional icon for dropdown display
-  },
-};
 
 const Navbar = () => {
-  const { themeClass } = useTheme();
-
   return (
     <div className="daisyui-navbar bg-neutral text-neutral-content">
       {/* Agoric logo */}
@@ -32,13 +17,9 @@ const Navbar = () => {
         </button>
       </div>
       {/* network selector */}
-      <ThemeProvider>
-        <div className={themeClass}>
-          <div>
-            <NetworkDropdown networkConfigs={[localnet]} />
-          </div>
-        </div>
-      </ThemeProvider>
+      <div className="mx-2">
+        <NetworkDropdown />
+      </div>
       {/* connect wallet button */}
       <div className="flex-none">
         <ConnectWalletButton className="daisyui-btn daisyui-btn-outline daisyui-btn-secondary" />

ui/src/components/Notifications.tsx

@@ -28,24 +28,22 @@ const Notifications = (props: {
   };
 
   return (
-    <div>
-      <Toast className="daisyui-toast daisyui-toast-end daisyui-toast-top">
-        {props.notifications.map((alert, index) => (
-          <Alert
-            className={'daisyui-alert ' + daisyUiAlertClass(alert.status)}
-            key={index}
-            status={alert.status}
-          >
-            <div className="w-full flex-row justify-between gap-2">
-              <h3>{alert.text}</h3>
-            </div>
-            <Button color="ghost" onClick={() => handleRemoveToast(index)}>
-              X
-            </Button>
-          </Alert>
-        ))}
-      </Toast>
-    </div>
+    <Toast className="daisyui-toast daisyui-toast-end daisyui-toast-top mt-14">
+      {props.notifications.map((alert, index) => (
+        <Alert
+          className={'daisyui-alert ' + daisyUiAlertClass(alert.status)}
+          key={index}
+          status={alert.status}
+        >
+          <div className="w-full flex-row justify-between gap-2">
+            <h3>{alert.text}</h3>
+          </div>
+          <Button color="ghost" onClick={() => handleRemoveToast(index)}>
+            X
+          </Button>
+        </Alert>
+      ))}
+    </Toast>
   );
 };
 

ui/src/components/Tabs.tsx

@@ -3,6 +3,7 @@ import { Mint } from './mint/Mint';
 import { TabWrapper } from './TabWrapper';
 import { Notifications } from './Notifications';
 import { NotificationContext } from '../context/NotificationContext';
+import Swap from './swap/Swap';
 
 // notification related types
 const dynamicToastChildStatuses = [
@@ -43,7 +44,7 @@ const Tabs = () => {
       >
         <div
           role="tablist"
-          className="daisyui-tabs daisyui-tabs-lifted daisyui-tabs-lg"
+          className="daisyui-tabs-boxed daisyui-tabs daisyui-tabs-lg"
         >
           <TabWrapper
             tab="Mint"
@@ -57,7 +58,7 @@ const Tabs = () => {
             activeTab={activeTab}
             handleTabClick={handleTabClick}
           >
-            <div>TBD</div>
+            <Swap />
           </TabWrapper>
           <TabWrapper
             tab="Pay"

ui/src/components/mint/MintTickets.tsx

@@ -16,7 +16,8 @@ const makeOffer = (
   ticketValue: bigint,
   giveValue: bigint,
 ) => {
-  const { instance, brands } = useContractStore.getState();
+  const { instances, brands } = useContractStore.getState();
+  const instance = instances?.['sellConcertTickets'];
   if (!instance) throw Error('no contract instance');
   if (!(brands && brands.IST && brands.Ticket))
     throw Error('brands not available');