Items Listed on Agoric Basics
- -
-
- {wallet && istPurse ? ( -
-
+ - {wallet && istPurse ? ( -
-
My Wallet
-
-
-
-
+const Inventory = () => {
+ const istPurse = usePurse('IST');
+ const ticketsPurse = usePurse('Ticket');
+ const { walletConnection } = useAgoric();
- {address}
-
-
- >;
+}) => {
+ const handleRemoveToast = (index: number) => {
+ props.setNotifications(notifications =>
+ notifications.filter((_, i) => i !== index),
+ );
+ };
+
+ return (
+ ([]);
+
+ const addNotification = (newNotification: DynamicToastChild) => {
+ setNotifications([...notifications, newNotification]);
+ };
+
+ return (
+ >;
-
-const parseValue = (numeral: string, purse: Purse): bigint => {
- const { decimalPlaces } = purse.displayInfo;
- const num = Number(numeral) * 10 ** decimalPlaces;
- return BigInt(num);
-};
-
-const Item = ({
- icon,
- coinIcon,
- label,
- value,
- onChange,
- inputClassName,
- inputStep,
-}: {
- icon?: string;
- coinIcon?: string;
- label: string;
- value: number | string;
- onChange: React.ChangeEventHandler;
- inputClassName: string;
- inputStep?: string;
-}) => (
- ) => void;
- istPurse: Purse;
- walletConnected: boolean;
-};
-
-// TODO: IST displayInfo is available in vbankAsset or boardAux
-const Trade = ({ makeOffer, istPurse, walletConnected }: TradeProps) => {
- const [giveValue, setGiveValue] = useState(terms.price);
- const [choices, setChoices] = useState({ map: 1n, scroll: 2n });
- const changeChoice = (ev: FormEvent) => {
- if (!ev.target) return;
- const elt = ev.target as HTMLInputElement;
- const title = elt.title as ItemName;
- if (!title) return;
- const qty = BigInt(elt.value);
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
- const { [title]: _old, ...rest }: ItemChoices = choices;
- const newChoices = qty > 0 ? { ...rest, [title]: qty } : rest;
- setChoices(newChoices);
- };
-
- return (
- <>
- ({});
diff --git a/ui/src/hooks/usePurse.ts b/ui/src/hooks/usePurse.ts
new file mode 100644
index 00000000..9646300e
--- /dev/null
+++ b/ui/src/hooks/usePurse.ts
@@ -0,0 +1,10 @@
+import { useAgoric } from '@agoric/react-components';
+import type { Purse } from '../types';
+
+export const usePurse = (brandPetname: string) => {
+ const { purses } = useAgoric();
+
+ return purses?.find(p => p.brandPetname === brandPetname) as
+ | Purse
+ | undefined;
+};
diff --git a/ui/src/index.css b/ui/src/index.css
index d3f626a8..b5c61c95 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -1,72 +1,3 @@
-:root {
- font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
- line-height: 1.5;
- font-weight: 400;
-
- color-scheme: light dark;
- color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
-
- font-synthesis: none;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- -webkit-text-size-adjust: 100%;
-}
-
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-a:hover {
- color: #535bf2;
-}
-
-body {
- margin: 0;
- display: flex;
- min-width: 320px;
- min-height: 100vh;
-}
-
-h1 {
- line-height: 1.1;
-}
-
-button {
- border-radius: 8px;
- border: 4px solid transparent;
- padding: 12px 16px;
- margin: 8px 2px;
- font-size: 1em;
- font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- cursor: pointer;
- transition: border-color 0.25s;
-}
-button:hover {
- background: #171717;
-}
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #04aa6d; /* Green */
- color: #fff;
- }
- button:hover {
- background: #039962;
- }
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/ui/src/installSesLockdown.ts b/ui/src/installSesLockdown.ts
index 7a98c156..a8afbc91 100644
--- a/ui/src/installSesLockdown.ts
+++ b/ui/src/installSesLockdown.ts
@@ -1,5 +1,6 @@
import 'ses'; // adds lockdown, harden, and Compartment
import '@endo/eventual-send/shim.js'; // adds support needed by E
+import { Buffer } from 'buffer';
const consoleTaming = import.meta.env.DEV ? 'unsafe' : 'safe';
@@ -10,3 +11,8 @@ lockdown({
});
Error.stackTraceLimit = Infinity;
+
+globalThis.Buffer = Buffer;
+
+// @ts-expect-error Add process to context for cosmos-kit
+globalThis.process = { env: import.meta.env };
diff --git a/ui/src/main.tsx b/ui/src/main.tsx
index bfb9f34e..953c5a1e 100644
--- a/ui/src/main.tsx
+++ b/ui/src/main.tsx
@@ -1,11 +1,11 @@
import './installSesLockdown.ts';
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App.tsx';
-import './index.css';
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
,
-);
+)
diff --git a/ui/src/providers/Contract.tsx b/ui/src/providers/Contract.tsx
new file mode 100644
index 00000000..730f8042
--- /dev/null
+++ b/ui/src/providers/Contract.tsx
@@ -0,0 +1,44 @@
+import { PropsWithChildren, useEffect } from 'react';
+import {
+ type ChainStorageWatcher,
+ AgoricChainStoragePathKind as Kind,
+} from '@agoric/rpc';
+import { useAgoric } from '@agoric/react-components';
+import { useContractStore } from '../store/contract';
+
+const { fromEntries } = Object;
+
+const watchContract = (watcher: ChainStorageWatcher) => {
+ watcher.watchLatest>(
+ [Kind.Data, 'published.agoricNames.instance'],
+ instances => {
+ console.log('Got instances', instances);
+ useContractStore.setState({
+ instance: instances
+ .find(([name]) => name === 'sellConcertTickets')!
+ .at(1),
+ });
+ },
+ );
+
+ watcher.watchLatest>(
+ [Kind.Data, 'published.agoricNames.brand'],
+ brands => {
+ console.log('Got brands', brands);
+ useContractStore.setState({
+ brands: fromEntries(brands),
+ });
+ },
+ );
+};
+
+export const ContractProvider = ({ children }: PropsWithChildren) => {
+ const { chainStorageWatcher } = useAgoric();
+ useEffect(() => {
+ if (chainStorageWatcher) {
+ watchContract(chainStorageWatcher);
+ }
+ }, [chainStorageWatcher]);
+
+ return <>{children};
+};
diff --git a/ui/src/store/contract.ts b/ui/src/store/contract.ts
new file mode 100644
index 00000000..160b05c4
--- /dev/null
+++ b/ui/src/store/contract.ts
@@ -0,0 +1,8 @@
+import { create } from 'zustand';
+
+interface ContractState {
+ instance?: unknown;
+ brands?: Record;
+}
+
+export const useContractStore = create(() => ({}));
diff --git a/ui/src/index.d.ts b/ui/src/types/index.ts
similarity index 77%
rename from ui/src/index.d.ts
rename to ui/src/types/index.ts
index d2ee4b35..0d303c37 100644
--- a/ui/src/index.d.ts
+++ b/ui/src/types/index.ts
@@ -1,8 +1,8 @@
-interface CopyBag {
+export interface CopyBag {
payload: Array<[T, bigint]>;
}
-interface Purse {
+export interface Purse {
brand: unknown;
brandPetname: string;
currentAmount: {
diff --git a/ui/src/vite-env.d.ts b/ui/src/vite-env.d.ts
index 11686fc7..11f02fe2 100644
--- a/ui/src/vite-env.d.ts
+++ b/ui/src/vite-env.d.ts
@@ -1,9 +1 @@
///
- IST:
- {stringifyAmountValue(
- istPurse.currentAmount,
- istPurse.displayInfo.assetKind,
- istPurse.displayInfo.decimalPlaces,
- )}
-
-
- Items:
- {itemsPurse ? (
-
-);
+ );
+};
export { Inventory };
diff --git a/ui/src/components/Logos.tsx b/ui/src/components/Logos.tsx
deleted file mode 100644
index 13e9e5c8..00000000
--- a/ui/src/components/Logos.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import reactLogo from '../assets/react.svg';
-import viteLogo from '/vite.svg';
-import agoricLogo from '/agoric.svg';
-
-const Logos = () => (
-
-);
-
-export { Logos };
diff --git a/ui/src/components/Navbar.tsx b/ui/src/components/Navbar.tsx
new file mode 100644
index 00000000..efae8381
--- /dev/null
+++ b/ui/src/components/Navbar.tsx
@@ -0,0 +1,50 @@
+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 (
+ -
- {(itemsPurse.currentAmount.value as CopyBag).payload.map(
- ([name, number]) => (
-
- - {String(number)} {name} - - ), - )} -
+
-
+
My Wallet
+
+
+
+
+ )}
+
+ IST:
+ {istPurse ? (
+ stringifyAmountValue(
+ AmountMath.make(
+ istPurse?.currentAmount.brand,
+ istPurse?.currentAmount.value,
+ ),
+ istPurse.displayInfo.assetKind,
+ istPurse.displayInfo.decimalPlaces,
+ )
+ ) : (
+ Fetching balance...
+ )}
+
+
+ Tickets:
+ {ticketsPurse ? (
+
+ -
+ {(
+ ticketsPurse.currentAmount.value as CopyBag
+ ).payload.map(([name, number]) => (
+
- + {String(number)} {name} + + ))} +
+ {/* Agoric logo */}
+
+
+ {/* connect wallet button */}
+
+ );
+};
+
+export { Navbar };
diff --git a/ui/src/components/Notifications.tsx b/ui/src/components/Notifications.tsx
new file mode 100644
index 00000000..a7162451
--- /dev/null
+++ b/ui/src/components/Notifications.tsx
@@ -0,0 +1,52 @@
+import { Toast, Alert, Button } from 'react-daisyui';
+import { DynamicToastChild } from './Tabs';
+import { Dispatch, SetStateAction } from 'react';
+
+const daisyUiAlertClass = (status: string) => {
+ switch (status) {
+ case 'info':
+ return 'daisyui-alert-info';
+ case 'success':
+ return 'daisyui-alert-success';
+ case 'warning':
+ return 'daisyui-alert-warning';
+ case 'error':
+ return 'daisyui-alert-error';
+ default:
+ return '';
+ }
+};
+
+const Notifications = (props: {
+ notifications: DynamicToastChild[];
+ setNotifications: Dispatch
+
+
+ {/* dApp title */}
+
+
+
+ {/* network selector */}
+
+
+
+
+
+
+
+
+ {props.notifications.map((alert, index) => (
+
+
+ ))}
+
+
+ );
+};
+
+export { Notifications };
diff --git a/ui/src/components/TabWrapper.tsx b/ui/src/components/TabWrapper.tsx
new file mode 100644
index 00000000..f7ed0dee
--- /dev/null
+++ b/ui/src/components/TabWrapper.tsx
@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+
+const TabWrapper = (props: { tab: string; activeTab: string, handleTabClick:(tab: string)=>void, children: ReactNode }) => {
+ return (
+ <>
+ {props.handleTabClick(props.tab)}}
+ />
+
+
+
+ {alert.text}
+
+ {props.children}
+
+
+ );
+};
+
+export { TabWrapper };
diff --git a/ui/src/components/Tabs.tsx b/ui/src/components/Tabs.tsx
new file mode 100644
index 00000000..7b278cc1
--- /dev/null
+++ b/ui/src/components/Tabs.tsx
@@ -0,0 +1,83 @@
+import { useState } from 'react';
+import { Mint } from './mint/Mint';
+import { TabWrapper } from './TabWrapper';
+import { Notifications } from './Notifications';
+import { NotificationContext } from '../context/NotificationContext';
+
+// notification related types
+const dynamicToastChildStatuses = [
+ 'info',
+ 'success',
+ 'warning',
+ 'error',
+] as const;
+
+type DynamicToastChild = {
+ text: string;
+ status: (typeof dynamicToastChildStatuses)[number];
+};
+
+const Tabs = () => {
+ // tab state related functions
+ const [activeTab, setActiveTab] = useState('Mint');
+
+ const handleTabClick = (tab: string) => {
+ setActiveTab(tab);
+ };
+
+ // notification related functions
+ const [notifications, setNotifications] = useState
+
+
+
+ );
+};
+
+export { Tabs };
+export type { DynamicToastChild };
diff --git a/ui/src/components/Trade.tsx b/ui/src/components/Trade.tsx
deleted file mode 100644
index 9ce8b875..00000000
--- a/ui/src/components/Trade.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import { FormEvent, useState } from 'react';
-import { stringifyAmountValue } from '@agoric/ui-components';
-import scrollIcon from '../assets/scroll.png';
-import istIcon from '../assets/IST.svg';
-import mapIcon from '../assets/map.png';
-import potionIcon from '../assets/potionBlue.png';
-
-const { entries, values } = Object;
-const sum = (xs: bigint[]) => xs.reduce((acc, next) => acc + next, 0n);
-
-const terms = {
- price: 250000n,
- maxItems: 3n,
-};
-const nameToIcon = {
- scroll: scrollIcon,
- map: mapIcon,
- potion: potionIcon,
-} as const;
-type ItemName = keyof typeof nameToIcon;
-type ItemChoices = Partial
+
+
+
+
+
+
+
+
+
+ TBD
+ TBD
+ TBD
+
-
- {icon && 
}
- {coinIcon && 
}
-
-
-);
-
-type TradeProps = {
- makeOffer: (giveValue: bigint, wantChoices: Record
-
- Want: Choose up to 3 items
-
- {entries(nameToIcon).map(([title, icon]) => (
-
-
-
- Give: Offer at least 0.25 IST
-
- -
- setGiveValue(parseValue(ev?.target?.value, istPurse))
- }
- inputClassName={giveValue >= terms.price ? 'ok' : 'error'}
- inputStep="0.01"
- />
-
-
- {walletConnected && (
-
- )}
-
-
- );
-};
-
-export { Trade };
diff --git a/ui/src/components/mint/Mint.tsx b/ui/src/components/mint/Mint.tsx
new file mode 100644
index 00000000..7bd9119f
--- /dev/null
+++ b/ui/src/components/mint/Mint.tsx
@@ -0,0 +1,21 @@
+import { Inventory } from '../Inventory';
+import { MintTickets } from './MintTickets';
+
+const Mint = () => {
+ // Whole Mint UI
+ return (
+
+
+ );
+};
+
+export { Mint };
diff --git a/ui/src/components/mint/MintTickets.tsx b/ui/src/components/mint/MintTickets.tsx
new file mode 100644
index 00000000..5f924493
--- /dev/null
+++ b/ui/src/components/mint/MintTickets.tsx
@@ -0,0 +1,157 @@
+import { useState, useContext } from 'react';
+import { Range } from 'react-daisyui';
+import { AmountMath } from '@agoric/ertp';
+import { makeCopyBag } from '@endo/patterns';
+import { AgoricWalletConnection, useAgoric } from '@agoric/react-components';
+import { useContractStore } from '../../store/contract';
+import { NotificationContext } from '../../context/NotificationContext';
+import { DynamicToastChild } from '../Tabs';
+
+const IST_UNIT = 1_000_000n;
+
+const makeOffer = (
+ wallet: AgoricWalletConnection,
+ addNotification: (arg0: DynamicToastChild) => void,
+ ticketKind: string,
+ ticketValue: bigint,
+ giveValue: bigint,
+) => {
+ const { instance, brands } = useContractStore.getState();
+ if (!instance) throw Error('no contract instance');
+ if (!(brands && brands.IST && brands.Ticket))
+ throw Error('brands not available');
+
+ const choices: [string, bigint][] = [
+ [ticketKind.toLowerCase() + 'Row', ticketValue],
+ ];
+ const choiceBag = makeCopyBag(choices);
+ const ticketAmount = AmountMath.make(brands.Ticket, choiceBag);
+ const want = { Tickets: ticketAmount };
+ const give = { Price: { brand: brands.IST, value: giveValue * IST_UNIT } };
+
+ wallet?.makeOffer(
+ {
+ source: 'contract',
+ instance,
+ publicInvitationMaker: 'makeTradeInvitation',
+ },
+ { give, want },
+ undefined,
+ (update: { status: string; data?: unknown }) => {
+ if (update.status === 'error') {
+ addNotification({
+ text: `Offer error: ${update.data}`,
+ status: 'error',
+ });
+ }
+ if (update.status === 'accepted') {
+ addNotification({
+ text: 'Offer accepted',
+ status: 'success',
+ });
+ }
+ if (update.status === 'refunded') {
+ addNotification({
+ text: 'Offer refunded',
+ status: 'warning',
+ });
+ }
+ },
+ );
+};
+
+const MintRow = ({
+ kind,
+ price,
+ available,
+}: {
+ kind: string;
+ price: number;
+ available: number;
+}) => {
+ const [tickets, setTickets] = useState(1);
+ const { walletConnection } = useAgoric();
+ const { addNotification } = useContext(NotificationContext);
+
+ return (
+
+
+
+
+
+
+
+
+ {/* Mint card */}
+
+ );
+};
+
+const MintTickets = () => {
+ return (
+
+ {/* card image */}
+
+ 
+
+ {/* card body */}
+
+
+ {/* card title */}
+ setTickets(Number(evt.target.value))}
+ />
+ {/* card action */}
+
+ {kind} Row
+ {/* card description */} +{kind} row concert ticket
+ {/* ticket value selector */} +
+ {/* ticket price */}
+
+
+
+ {/* mint button */}
+
+
+
+
+ 
+
+
+ Total Price
+
+ {tickets * price} IST
+
+ {tickets} tickets
+
+
+ );
+};
+
+export { MintTickets };
diff --git a/ui/src/context/NotificationContext.tsx b/ui/src/context/NotificationContext.tsx
new file mode 100644
index 00000000..e1ce32be
--- /dev/null
+++ b/ui/src/context/NotificationContext.tsx
@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+import { DynamicToastChild } from '../components/Tabs';
+
+export type NotificationState = {
+ addNotification?: (arg0: DynamicToastChild) => void;
+};
+
+export const NotificationContext =
+ createContext