Agoric · LuqiPan · Apr 22, 2024 · Feb 21, 2024 · Feb 22, 2024 · Feb 22, 2024
diff --git a/interchain-ui/.eslintrc.cjs b/interchain-ui/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/interchain-ui/.gitignore b/interchain-ui/.gitignore
@@ -0,0 +1,24 @@
+# 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?
diff --git a/interchain-ui/README.md b/interchain-ui/README.md
@@ -0,0 +1,30 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+}
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
diff --git a/interchain-ui/index.html b/interchain-ui/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/agoric.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>dApp Agoric Basics</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/interchain-ui/package.json b/interchain-ui/package.json
@@ -0,0 +1,51 @@
+{
+  "name": "interchain-ui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@agoric/react-components": "^0.1.1-dev-8fc28e8.0",
+    "@agoric/ui-components": "^0.3.9-u13.0",
+    "@agoric/web-components": "^0.15.1-dev-09ca26c.0",
+    "buffer": "^6.0.3",
+    "chain-registry": "^1.28.1",
+    "cosmos-kit": "^2.9.0",
+    "daisyui": "^4.7.2",
+    "react": "^18.2.0",
+    "react-daisyui": "^5.0.0",
+    "react-dom": "^18.2.0",
+    "ses": "^1.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.56",
+    "@types/react-dom": "^18.2.19",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.17",
+    "eslint": "^8.56.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "postcss": "^8.4.35",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.11",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.2.2",
+    "vite": "^5.1.4"
+  },
+  "prettier": {
+    "trailingComma": "all",
+    "arrowParens": "avoid",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "plugins": [
+      "prettier-plugin-tailwindcss"
+    ]
+  }
+}
diff --git a/interchain-ui/postcss.config.js b/interchain-ui/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/interchain-ui/public/agoric.svg b/interchain-ui/public/agoric.svg
diff --git a/interchain-ui/src/App.tsx b/interchain-ui/src/App.tsx
@@ -0,0 +1,31 @@
+import { ContractProvider } from './providers/Contract';
+import { AgoricProvider } from '@agoric/react-components';
+import { Navbar } from './components/Navbar';
+import { Tabs } from './components/Tabs';
+import { wallets } from 'cosmos-kit';
+import '@agoric/react-components/dist/style.css';
+
+function App() {
+  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>
+  );
+}
+
+export default App;
diff --git a/interchain-ui/src/assets/IST.png b/interchain-ui/src/assets/IST.png
diff --git a/interchain-ui/src/assets/frontRow.jpg b/interchain-ui/src/assets/frontRow.jpg
diff --git a/interchain-ui/src/assets/lastRow.jpg b/interchain-ui/src/assets/lastRow.jpg
diff --git a/interchain-ui/src/assets/middleRow.jpg b/interchain-ui/src/assets/middleRow.jpg
diff --git a/interchain-ui/src/components/Inventory.tsx b/interchain-ui/src/components/Inventory.tsx
@@ -0,0 +1,61 @@
+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');
+  const ticketsPurse = usePurse('Ticket');
+  const { walletConnection } = useAgoric();
+
+  return (
+    <div className="daisyui-card w-96 bg-base-100 shadow-xl">
+      <div className="daisyui-card-body items-center text-center">
+        <h2 className="daisyui-card-title">My Wallet</h2>
+        <div className="daisyui-card-actions">
+          <div>
+            <ConnectWalletButton className="daisyui-btn daisyui-btn-outline daisyui-btn-primary" />
+            {walletConnection && (
+              <div>
+                <div>
+                  <b>IST: </b>
+                  {istPurse ? (
+                    stringifyAmountValue(
+                      AmountMath.make(
+                        istPurse?.currentAmount.brand,
+                        istPurse?.currentAmount.value,
+                      ),
+                      istPurse.displayInfo.assetKind,
+                      istPurse.displayInfo.decimalPlaces,
+                    )
+                  ) : (
+                    <i>Fetching balance...</i>
+                  )}
+                </div>
+                <div>
+                  <b>Tickets: </b>
+                  {ticketsPurse ? (
+                    <ul>
+                      {(
+                        ticketsPurse.currentAmount.value as CopyBag
+                      ).payload.map(([name, number]) => (
+                        <li key={name}>
+                          {String(number)} {name}
+                        </li>
+                      ))}
+                    </ul>
+                  ) : (
+                    'None'
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { Inventory };
diff --git a/interchain-ui/src/components/Navbar.tsx b/interchain-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 (
+    <div className="daisyui-navbar bg-neutral text-neutral-content">
+      {/* Agoric logo */}
+      <div className="flex-none">
+        <button className="daisyui-btn daisyui-btn-square daisyui-btn-ghost">
+          <img src="/agoric.svg" />
+        </button>
+      </div>
+      {/* dApp title */}
+      <div className="flex-1">
+        <button className="daisyui-btn daisyui-btn-ghost text-xl">
+          dApp Agoric Basics
+        </button>
+      </div>
+      {/* network selector */}
+      <ThemeProvider>
+        <div className={themeClass}>
+          <div>
+            <NetworkDropdown networkConfigs={[localnet]} />
+          </div>
+        </div>
+      </ThemeProvider>
+      {/* connect wallet button */}
+      <div className="flex-none">
+        <ConnectWalletButton className="daisyui-btn daisyui-btn-outline daisyui-btn-secondary" />
+      </div>
+    </div>
+  );
+};
+
+export { Navbar };
diff --git a/interchain-ui/src/components/Notifications.tsx b/interchain-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<SetStateAction<DynamicToastChild[]>>;
+}) => {
+  const handleRemoveToast = (index: number) => {
+    props.setNotifications(notifications =>
+      notifications.filter((_, i) => i !== index),
+    );
+  };
+
+  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>
+  );
+};
+
+export { Notifications };
diff --git a/interchain-ui/src/components/TabWrapper.tsx b/interchain-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 (
+    <>
+      <input
+        type="radio"
+        name={props.tab}
+        role="tab"
+        className="daisyui-tab"
+        aria-label={props.tab}
+        checked={(props.activeTab === props.tab)}
+        onClick={()=>{props.handleTabClick(props.tab)}}
+      />
+      <div
+        role="tabpanel"
+        className="daisyui-tab-content rounded-box border-base-300 bg-base-100 p-6"
+      >
+        {props.children}
+      </div>
+    </>
+  );
+};
+
+export { TabWrapper };