Add exitOffer method to agoricWalletConnection for seamless offer exits

[Copilot]

What is the Problem Being Solved?

Dapp developers want their users to be able to exit long-standing offers directly from their dapp UI to provide a seamless experience. Previously, this required either:

1. Creating custom contract methods with complex exit subscriber patterns or using the waived: null flag (which breaks wallet-app), or
2. Building custom interactive signers based on wallet-app examples

Both approaches are cumbersome and error-prone for dapp developers.

Description of the Design

This PR adds an exitOffer method to makeAgoricWalletConnection in the web-components package. The implementation:

• Accepts an offerId parameter (string or number)
• Creates a tryExitOffer spend action using the wallet's marshaller
• Submits the spend action through the existing secure submitSpendAction infrastructure
• Returns the transaction result for the dapp to handle

This approach keeps the functionality restricted and less error-prone while providing dapp developers with a simple, clean API.

Usage Example

import { makeAgoricChainStorageWatcher } from '@agoric/rpc';
import { makeAgoricWalletConnection } from '@agoric/web-components';

const watcher = makeAgoricChainStorageWatcher(apiAddr, chainName);
const connection = await makeAgoricWalletConnection(watcher, rpcAddr);

// Exit an offer by its id
try {
  const txn = await connection.exitOffer(offerId);
  console.log('Offer exit transaction:', txn);
} catch (error) {
  console.error('Failed to exit offer:', error);
}

Dapp developers can watch offer status updates using the existing walletUpdatesNotifier from the wallet connection to track when offers are successfully exited.

Implementation Details

The exitOffer method creates a spend action that maps to the TryExitOfferAction bridge action type from @agoric/smart-wallet:

{
  method: 'tryExitOffer',
  offerId: string | number
}

This calls tryExit() on the offer's seat in the smart wallet contract, following the same secure transaction flow as makeOffer.

Changes Made

Web Components Package

1. Added exitOffer method to makeAgoricWalletConnection in src/wallet-connection/walletConnection.ts
2. Added comprehensive tests covering string/numeric offerIds and error handling
3. Updated documentation in README.md with usage examples

React Components Package

4. Added exitOffer to AgoricState type in src/lib/context/AgoricContext.ts
5. Exposed exitOffer in AgoricProvider to make it available through the React context

Example App

6. Added "Exit Offer" UI section to src/components/WalletDetails.tsx demonstrating the feature:
   • Text input field for entering offer ID
   • "Exit Offer" button to submit the exit request
   • Real-time status display with success/error messages
   • Only visible when smart wallet is provisioned

Security Considerations

• Uses the existing secure submitSpendAction infrastructure
• No new security surface area introduced
• Wallet user must still approve the transaction via Keplr
• CodeQL security scan found 0 vulnerabilities

Test Plan

• ✅ All existing tests continue to pass
• ✅ New tests verify exitOffer with string offerIds
• ✅ New tests verify exitOffer with numeric offerIds
• ✅ Error handling is tested
• ✅ All linting passes

Fixes #44

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add the ability to exit offers to agoricWalletConnection in web-components</issue_title>
<issue_description>## What is the Problem Being Solved?
Dapp developers want their dapp users to be able to exit their offers through their own UI to give users a seamless experience, this us hard to develop at the moment and would require either of 2 solutions, which both have their own drawbacks and are not ideal.

1: dapp developers create a cancel offer function on their own contracts, which requires one of the 2 addiotnal things:

• dapp developers have an exit subscriber that listens to offer exits that are transacted through wallet-app
• dapp developers pass waived: null flag to their offers (currently breaks wallet-app)

2: dapp developers create their own interactive signer based on examples from wallet-app/ui-kit

Description of the Design

2 possible solutions:
1: add a method of exitOffer to makeAgoricWalletConnection

• keeps the functionality more restricted and less error prone for the end-user
• less freedom for dapp developers to create spendactions themselves

2: expose submitSpendAction(JSON.stringify(spendAction)) more freely

• more freedom for dapp-developers (pro and a con)
• smaller/cleaner code base

Security Considerations

Scaling Considerations

Test Plan

</issue_description>

Comments on the Issue (you are @copilot in this section)

@samsiegart I think adding `exitOffer` to the wallet connection component is an ideal solution.

For dapps to watch offer status updates, the dapp can use walletUpdatesNotifier from the wallet connection. But, we probably also need to add a notifier for live offers to the component so you can see existing long-standing offers.</comment_new>
<comment_new>@samsiegart
I don't understand how this relates to contracts or waived: null though. Other than the fact that waived: null breaks the wallet-app currently, changing the contract is unrelated to which UI you exit the offer from.</comment_new>

Fixes #44

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[cloudflare-workers-and-pages]

Deploying ui-kit with    Cloudflare Pages

Latest commit:	531b365
Status:	✅  Deploy successful!
Preview URL:	https://edbac240.ui-kit-dwm.pages.dev
Branch Preview URL:	https://copilot-add-exit-offer-metho.ui-kit-dwm.pages.dev

View logs

[turadg]

@copilot add a section to the index page for example app to exit an offer. It takes an offer ID and has a button to try exiting.

[Copilot]

@copilot add a section to the index page for example app to exit an offer. It takes an offer ID and has a button to try exiting.

Added an "Exit Offer" section to the example app index page (commit 531b365). The section includes:

• Text input field for entering the offer ID
• "Exit Offer" button that triggers the exit request
• Real-time status display showing success/error messages
• Only visible when the smart wallet is provisioned

The UI displays below the "Test Transaction" button with a clear visual separator.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• fake.rpc
  • Triggering command: node (vitest) (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[turadg]

Lgtm. Needs @samsiegart review before merging.

[Copilot]

Pull Request Overview

This PR adds an exitOffer method to agoricWalletConnection to allow dapp users to exit long-standing offers directly from dapp UIs. This addresses the problem where dapp developers previously had to either create complex contract methods or build custom interactive signers.

• Implements exitOffer method that accepts offer IDs and creates tryExitOffer spend actions
• Exposes the functionality through React components context
• Adds comprehensive test coverage and example UI implementation

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/web-components/src/wallet-connection/walletConnection.ts	Core implementation of exitOffer method
packages/web-components/test/wallet-connection/walletConnection.test.js	Test coverage for string/numeric offer IDs and error handling
packages/react-components/src/lib/context/AgoricContext.ts	Type definition for exitOffer in React context
packages/react-components/src/lib/context/AgoricProvider.tsx	Exposes exitOffer through React provider
packages/example/src/components/WalletDetails.tsx	Example UI implementation with input field and status display
README.md	Documentation with usage examples

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}