feat: pay ui

contract/.gitignore

@@ -1,3 +1,4 @@
 start-sell-concert-tickets-permit.json
 start-sell-concert-tickets.js
 bundles/
+,tx.json

ui/src/components/swap/DisplayAmount.tsx → ui/src/components/DisplayAmount.tsx

@@ -1,10 +1,10 @@
 import type { PurseJSONState } from '@agoric/react-components';
-import type { DisplayInfoForBrand } from '../../store/displayInfo';
+import type { DisplayInfoForBrand } from '../store/displayInfo';
 import { stringifyValue, type AssetKind } from '@agoric/web-components';
 import type { Amount } from '@agoric/ertp/src/types';
 import { isCopyBagValue } from '@agoric/ertp';
 import { useEffect, useRef, useState } from 'react';
-import { stringifyData } from '../../utils/stringify';
+import { stringifyData } from '../utils/stringify';
 
 export const PurseValue = ({
   purse,

ui/src/components/swap/PurseAmountInput.tsx → ui/src/components/PurseAmountInput.tsx

@@ -2,7 +2,7 @@ import { AmountInput, type PurseJSONState } from '@agoric/react-components';
 import type { Amount, AssetKind } from '@agoric/web-components';
 import { useState } from 'react';
 import { CopyBagEntry, PurseValue, SetEntry } from './DisplayAmount';
-import { stringifyData } from '../../utils/stringify';
+import { stringifyData } from '../utils/stringify';
 import { makeCopyBag } from '@endo/patterns';
 
 type Props = {

ui/src/components/swap/SelectedAmountRow.tsx → ui/src/components/SelectedAmountRow.tsx

@@ -1,5 +1,5 @@
 import type { Amount } from '@agoric/web-components';
-import { useDisplayInfo } from '../../store/displayInfo';
+import { useDisplayInfo } from '../store/displayInfo';
 import { AmountValue } from './DisplayAmount';
 
 type Props = {

ui/src/components/Tabs.tsx

@@ -4,6 +4,7 @@ import { TabWrapper } from './TabWrapper';
 import { Notifications } from './Notifications';
 import { NotificationContext } from '../context/NotificationContext';
 import Swap from './swap/Swap';
+import Pay from './pay/Pay';
 
 // notification related types
 const dynamicToastChildStatuses = [
@@ -65,7 +66,7 @@ const Tabs = () => {
             activeTab={activeTab}
             handleTabClick={handleTabClick}
           >
-            <div>TBD</div>
+            <Pay />
           </TabWrapper>
           <TabWrapper
             tab="Vote"

ui/src/components/pay/Pay.tsx

@@ -0,0 +1,137 @@
+import { useAgoric } from '@agoric/react-components';
+import ProposalAmountsBox from '../ProposalAmountsBox';
+import RecipientInput from '../RecipientInput';
+import { queryPurses } from '../../utils/queryPurses';
+import { useContext, useEffect, useState } from 'react';
+import type { Amount } from '@agoric/web-components';
+import { useDisplayInfo } from '../../store/displayInfo';
+import { NotificationContext } from '../../context/NotificationContext';
+
+const Pay = () => {
+  const { addNotification } = useContext(NotificationContext);
+  const { purses, chainStorageWatcher, makeOffer } = useAgoric();
+  const [recipientAddr, setRecipientAddr] = useState('');
+  const [recipientError, setRecipientError] = useState('');
+  const [myAmounts, setMyAmounts] = useState<Amount[]>([]);
+  const { brandToDisplayInfo } = useDisplayInfo(({ brandToDisplayInfo }) => ({
+    brandToDisplayInfo,
+  }));
+
+  useEffect(() => {
+    let isCancelled = false;
+    const checkRecipientSmartWallet = async () => {
+      if (chainStorageWatcher && recipientAddr) {
+        try {
+          await queryPurses(chainStorageWatcher, recipientAddr);
+        } catch (e) {
+          if (!isCancelled) {
+            setRecipientError('Failed to fetch recipient wallet.');
+          }
+        }
+      }
+    };
+
+    if (!recipientAddr.length) {
+      setRecipientError('');
+    } else if (
+      recipientAddr.startsWith('agoric') &&
+      recipientAddr.length === 45
+    ) {
+      setRecipientError('');
+      checkRecipientSmartWallet();
+    } else {
+      setRecipientError('Invalid address format');
+    }
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [chainStorageWatcher, recipientAddr]);
+
+  const sendOffer = async () => {
+    assert(chainStorageWatcher && makeOffer);
+    try {
+      const invitationSpec = {
+        source: 'agoricContract',
+        instancePath: ['postalService'],
+        callPipe: [['makeSendInvitation', [recipientAddr]]],
+      };
+
+      const gives = myAmounts.map(amount => {
+        const { petname } = brandToDisplayInfo.get(amount.brand)!;
+        return [petname, amount];
+      });
+      const proposal = {
+        give: { ...Object.fromEntries(gives) },
+        want: {},
+      };
+
+      makeOffer(
+        invitationSpec,
+        proposal,
+        undefined,
+        (update: { status: string; data?: unknown }) => {
+          if (update.status === 'error') {
+            addNotification!({
+              text: `Payment Error: ${update.data}`,
+              status: 'error',
+            });
+          }
+          if (update.status === 'accepted') {
+            addNotification!({
+              text: 'Payment Sent',
+              status: 'success',
+            });
+          }
+          if (update.status === 'refunded') {
+            addNotification!({
+              text: 'Payment Refunded',
+              status: 'warning',
+            });
+          }
+        },
+      );
+    } catch (e) {
+      addNotification!({
+        text: `Offer error: ${e}`,
+        status: 'error',
+      });
+    }
+  };
+
+  const isButtonDisabled = !makeOffer || !recipientAddr || !myAmounts.length;
+
+  return (
+    <div className="items-top flex w-full flex-col justify-around lg:flex-row">
+      <div>
+        <h2 className="daisyui-card-title mb-2 w-full">Send Payment</h2>
+        <div className="daisyui-card h-fit w-96 bg-base-300 px-4 py-4 shadow-xl">
+          <RecipientInput
+            address={recipientAddr}
+            onChange={addr => setRecipientAddr(addr)}
+            error={recipientError}
+          />
+          <div className="my-1">
+            <h2 className="mb-2 text-lg font-medium">Give</h2>
+            <ProposalAmountsBox
+              actionLabel="Add from Your Purse"
+              amounts={myAmounts}
+              purses={purses}
+              onChange={setMyAmounts}
+              warning={purses ? undefined : 'Wallet Not Connected'}
+            />
+          </div>
+          <button
+            onClick={sendOffer}
+            disabled={isButtonDisabled}
+            className="daisyui-btn daisyui-btn-primary mt-4 w-full self-center text-lg"
+          >
+            Send Payment
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Pay;

ui/src/components/swap/FeeInfo.tsx

@@ -1,5 +1,5 @@
 import type { Amount } from '@agoric/web-components';
-import { AmountValue } from './DisplayAmount';
+import { AmountValue } from '../DisplayAmount';
 
 type Props = {
   fee: Amount;

ui/src/components/swap/IncomingOffer.tsx

@@ -1,5 +1,5 @@
 import { type Amount, AssetKind, type Brand } from '@agoric/web-components';
-import { AmountValue } from './DisplayAmount';
+import { AmountValue } from '../DisplayAmount';
 import { useAgoric } from '@agoric/react-components';
 import { useContext, useEffect, useState } from 'react';
 import { useDisplayInfo } from '../../store/displayInfo';

ui/src/components/swap/Swap.tsx

@@ -1,6 +1,6 @@
 import { type PurseJSONState, useAgoric } from '@agoric/react-components';
-import ProposalAmountsBox from './ProposalAmountsBox';
-import RecipientInput from './RecipientInput';
+import ProposalAmountsBox from '../ProposalAmountsBox';
+import RecipientInput from '../RecipientInput';
 import { queryPurses } from '../../utils/queryPurses';
 import { useContext, useEffect, useState } from 'react';
 import type { Amount, AssetKind } from '@agoric/web-components';

ui/src/providers/Contract.tsx

@@ -28,16 +28,6 @@ const watchContract = (watcher: ChainStorageWatcher) => {
       });
     },
   );
-
-  watcher.watchLatest<Array<[string, unknown]>>(
-    [Kind.Data, 'published.agoricNames.vbankAsset'],
-    vbank => {
-      console.log('Got vbank', vbank);
-      useContractStore.setState({
-        vbank: fromEntries(vbank),
-      });
-    },
-  );
 };
 
 export const ContractProvider = ({ children }: PropsWithChildren) => {

ui/src/store/contract.ts

@@ -3,7 +3,6 @@ import { create } from 'zustand';
 interface ContractState {
   instances?: Record<string, unknown>;
   brands?: Record<string, unknown>;
-  vbank?: Record<string, unknown>;
 }
 
 export const useContractStore = create<ContractState>(() => ({}));