feat(ui): start Dapp Offer Up UI in Next.js

next-ui/.eslintrc.cjs

@@ -0,0 +1,22 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:prettier/recommended',
+    'plugin:@next/next/recommended',
+    "next/core-web-vitals"
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh', 'prettier'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    'prettier/prettier': 'error',
+  },
+};

next-ui/.gitignore

@@ -0,0 +1,27 @@
+#next
+.next
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

next-ui/.nvmrc

@@ -0,0 +1 @@
+18

next-ui/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next-ui/next.config.mjs

@@ -0,0 +1,13 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  experimental: {
+    serverComponentsExternalPackages: [
+      '@agoric/ui-components',
+      '@agoric/ui-components/dist/next',
+      'zustand',
+    ],
+  },
+};
+
+export default nextConfig;

next-ui/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "dapp-offer-ui-nextjs",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint && eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "yarn lint --fix"
+  },
+  "dependencies": {
+    "next": "^14.1.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "ses": "^1.3.0"
+  },
+  "devDependencies": {
+    "@agoric/eventual-send": "^0.14.1",
+    "@agoric/notifier": "^0.6.2",
+    "@agoric/rpc": "0.9.1-dev-f471a83.0",
+    "@agoric/store": "^0.9.2",
+    "@agoric/ui-components": "^0.9.0",
+    "@agoric/web-components": "^0.15.0",
+    "@next/eslint-plugin-next": "^14.1.2",
+    "@testing-library/react": "^14.1.2",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
+    "eslint": "^8.45.0",
+    "eslint-config-next": "14.1.2",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "happy-dom": "^13.3.1",
+    "prettier": "^3.2.4",
+    "puppeteer": "^21.9.0",
+    "typescript": "^5.0.2",
+    "zustand": "^4.5.2"
+  },
+  "resolutions": {
+    "**/ses": "^0.18.8",
+    "**/@agoric/xsnap": "0.14.3-dev-9f085d3.0"
+  },
+  "prettier": {
+    "trailingComma": "all",
+    "arrowParens": "avoid",
+    "singleQuote": true
+  }
+}

next-ui/src/app/App.css

@@ -0,0 +1,109 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 1rem;
+  text-align: center;
+}
+
+.logo {
+  height: 2em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+.logo.agoric:hover {
+  filter: drop-shadow(0 0 2em #fa4a49aa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 1em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+.piece {
+  width: 6em;
+  border-radius: 10%;
+}
+
+.coin {
+  width: 2em;
+  margin: 10px;
+}
+
+.trade {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: #171717;
+  border-radius: 25px;
+  margin-bottom: 15px;
+}
+
+.item-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 15px 25px 15px;
+  margin: 5px;
+}
+
+.row-center {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+input {
+  border: none;
+  background: #242424;
+  text-align: center;
+  padding: 5px 10px;
+  border-radius: 15px;
+  font-size: 1.2rem;
+  width: 75px;
+}
+
+@media (prefers-color-scheme: light) {
+  .trade {
+    background: #fafafa;
+    border: 1px solid #e5e5e5;
+  }
+  input {
+    background: #e5e5e5;
+  }
+}
+
+.error {
+  background-color: #E11D48;
+  color: #fff;
+}
+
+/* increment/decrement arrows always visible */
+input[type=number]::-webkit-inner-spin-button {
+  opacity: 1
+}

next-ui/src/app/App.tsx

@@ -0,0 +1,115 @@
+import './installSesLockdown.ts'; // Must be the first
+import { useEffect } from 'react';
+import { create } from 'zustand';
+import './App.css';
+import { Inventory } from './components/Inventory';
+import { Trade } from './components/Trade';
+import { makeCopyBag } from '@agoric/store';
+import { Logos } from './components/Logos.tsx';
+
+import {
+  Wallet,
+  connectWallet,
+  getBrands,
+  getdappInstance,
+} from '../lib/agoric.ts';
+
+const { entries } = Object;
+
+interface AppState {
+  wallet?: Wallet;
+  offerUpInstance?: unknown;
+  brands?: Record<string, unknown>;
+  purses?: Array<Purse>;
+}
+
+console.log('zustand create', create);
+const useAppStore = create<AppState>(() => ({}));
+
+const setup = async () => {
+  const offerUpInstance = await getdappInstance('offerUp');
+  if (!offerUpInstance) throw Error('no contract instance');
+  const brands = await getBrands();
+  if (!brands) throw Error('no brands');
+  useAppStore.setState({ offerUpInstance, brands });
+};
+
+const makeOffer = (giveValue: bigint, wantChoices: Record<string, bigint>) => {
+  const { wallet, offerUpInstance, brands } = useAppStore.getState();
+  if (!offerUpInstance) throw Error('no contract instance');
+  if (!(brands && brands.IST && brands.Item))
+    throw Error('brands not available');
+
+  const value = makeCopyBag(entries(wantChoices));
+  const want = { Items: { brand: brands.Item, value } };
+  const give = { Price: { brand: brands.IST, value: giveValue } };
+
+  wallet?.makeOffer(
+    {
+      source: 'contract',
+      instance: offerUpInstance,
+      publicInvitationMaker: 'makeTradeInvitation',
+      description: 'buy items',
+    },
+    { give, want },
+    undefined,
+    (update: { status: string; data?: unknown }) => {
+      if (update.status === 'error') {
+        alert(`Offer error: ${update.data}`);
+      }
+      if (update.status === 'accepted') {
+        alert('Offer accepted');
+      }
+      if (update.status === 'refunded') {
+        alert('Offer rejected');
+      }
+    },
+  );
+};
+
+function App() {
+  useEffect(() => {
+    setup();
+  }, []);
+
+  const { wallet, purses } = useAppStore(({ wallet, purses }) => ({
+    wallet,
+    purses,
+  }));
+  const istPurse = purses?.find(p => p.brandPetname === 'IST');
+  const itemsPurse = purses?.find(p => p.brandPetname === 'Item');
+
+  const tryConnectWallet = async () => {
+    const { wallet, walletpurses } = await connectWallet();
+    console.log('wallet', wallet);
+    console.log('walletpurses', walletpurses);
+    useAppStore.setState({ wallet, purses: walletpurses });
+  };
+
+  return (
+    <>
+      <Logos />
+      <h1>Items Listed on Offer Up</h1>
+
+      <div className="card">
+        <Trade
+          makeOffer={makeOffer}
+          istPurse={istPurse as Purse}
+          walletConnected={!!wallet}
+        />
+        <hr />
+        {wallet && istPurse ? (
+          <Inventory
+            address={wallet.address}
+            istPurse={istPurse}
+            itemsPurse={itemsPurse as Purse}
+          />
+        ) : (
+          <button onClick={tryConnectWallet}>Connect Wallet</button>
+        )}
+      </div>
+    </>
+  );
+}
+
+export default App;

next-ui/src/app/[[...slug]]/client.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+const App = dynamic(() => import('../App'), { ssr: false });
+
+export function ClientOnly() {
+  return <App />;
+}

next-ui/src/app/[[...slug]]/page.tsx

@@ -0,0 +1,9 @@
+import '../index.css';
+import { ClientOnly } from './client';
+export function generateStaticParams() {
+  return [{ slug: [''] }];
+}
+
+export default function Page() {
+  return <ClientOnly />;
+}