Merge pull request #213 from xch-dev/cancel-offer-wc

Add offer cancellation endpoint

Author: Rigidity

src/components/OfferSummaryCard.tsx

@@ -0,0 +1,92 @@
+import { OfferAssets, OfferRecord } from '@/bindings';
+import { nftUri } from '@/lib/nftUri';
+import { toDecimal } from '@/lib/utils';
+import { useWalletState } from '@/state';
+import BigNumber from 'bignumber.js';
+
+export interface OfferSummaryCardProps {
+  record: OfferRecord;
+  content: React.ReactNode;
+}
+
+export function OfferSummaryCard({ record, content }: OfferSummaryCardProps) {
+  return (
+    <div className='block p-4 rounded-sm bg-neutral-100 dark:bg-neutral-900'>
+      <div className='flex justify-between'>
+        <div className='grid grid-cols-1 md:grid-cols-3 gap-4'>
+          <div className='flex flex-col gap-1'>
+            <div>
+              {record.status === 'active'
+                ? 'Pending'
+                : record.status === 'completed'
+                  ? 'Taken'
+                  : record.status === 'cancelled'
+                    ? 'Cancelled'
+                    : 'Expired'}
+            </div>
+            <div className='text-muted-foreground text-sm'>
+              {record.creation_date}
+            </div>
+          </div>
+
+          <AssetPreview label='Offered' assets={record.summary.maker} />
+          <AssetPreview label='Requested' assets={record.summary.taker} />
+        </div>
+
+        {content}
+      </div>
+    </div>
+  );
+}
+
+interface AssetPreviewProps {
+  label: string;
+  assets: OfferAssets;
+}
+
+function AssetPreview({ label, assets }: AssetPreviewProps) {
+  const walletState = useWalletState();
+
+  return (
+    <div className='flex flex-col gap-1 w-[125px] lg:w-[200px] xl:w-[300px]'>
+      <div>{label}</div>
+      {BigNumber(assets.xch.amount)
+        .plus(assets.xch.royalty)
+        .isGreaterThan(0) && (
+        <div className='flex items-center gap-2'>
+          <img src='https://icons.dexie.space/xch.webp' className='w-8 h-8' />
+
+          <div className='text-sm text-muted-foreground truncate'>
+            {toDecimal(
+              BigNumber(assets.xch.amount).plus(assets.xch.royalty).toString(),
+              walletState.sync.unit.decimals,
+            )}{' '}
+            {walletState.sync.unit.ticker}
+          </div>
+        </div>
+      )}
+      {Object.entries(assets.cats).map(([_assetId, cat]) => (
+        <div className='flex items-center gap-2'>
+          <img src={cat.icon_url!} className='w-8 h-8' />
+
+          <div className='text-sm text-muted-foreground truncate'>
+            {toDecimal(BigNumber(cat.amount).plus(cat.royalty).toString(), 3)}{' '}
+            {cat.name ?? cat.ticker ?? 'Unknown'}
+          </div>
+        </div>
+      ))}
+      {Object.entries(assets.nfts).map(([_nftId, nft]) => (
+        <div className='flex items-center gap-2'>
+          <img
+            src={nftUri(nft.image_mime_type, nft.image_data)}
+            className='w-8 h-8'
+          />
+
+          <div className='text-sm text-muted-foreground truncate'>
+            {nft.name ?? 'Unknown'}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

src/contexts/WalletConnectContext.tsx

@@ -1,6 +1,12 @@
-import { commands, OfferSummary, TransactionSummary } from '@/bindings';
+import {
+  commands,
+  OfferRecord,
+  OfferSummary,
+  TransactionSummary,
+} from '@/bindings';
 import { AdvancedSummary } from '@/components/ConfirmationDialog';
 import { OfferCard } from '@/components/OfferCard';
+import { OfferSummaryCard } from '@/components/OfferSummaryCard';
 import { Button } from '@/components/ui/button';
 import {
   Dialog,
@@ -487,6 +493,39 @@ function CreateOfferDialog({ params }: CommandDialogProps<'chia_createOffer'>) {
   );
 }
 
+function CancelOfferDialog({ params }: CommandDialogProps<'chia_cancelOffer'>) {
+  const walletState = useWalletState();
+
+  const [record, setRecord] = useState<OfferRecord | null>(null);
+  const { addError } = useErrors();
+
+  useEffect(() => {
+    commands
+      .getOffer({ offer_id: params.id })
+      .then((data) => setRecord(data.offer))
+      .catch(addError);
+  }, [params, addError]);
+
+  return (
+    <div className='space-y-2'>
+      <div className='font-medium'>Offer ID</div>
+      <div className='text-sm text-muted-foreground'>{params.id}</div>
+
+      <div className='font-medium'>Fee</div>
+      <div className='text-sm text-muted-foreground'>
+        {toDecimal(params.fee || 0, walletState.sync.unit.decimals)}{' '}
+        {walletState.sync.unit.ticker}
+      </div>
+
+      {record && (
+        <div className='border rounded-md'>
+          <OfferSummaryCard record={record} content={null} />
+        </div>
+      )}
+    </div>
+  );
+}
+
 function SendDialog({ params }: CommandDialogProps<'chia_send'>) {
   const walletState = useWalletState();
 
@@ -543,6 +582,7 @@ const COMMAND_COMPONENTS: {
   chip0002_signMessage: SignMessageDialog,
   chia_takeOffer: TakeOfferDialog,
   chia_createOffer: CreateOfferDialog,
+  chia_cancelOffer: CancelOfferDialog,
   chia_send: SendDialog,
 };
 
@@ -568,6 +608,10 @@ const COMMAND_METADATA: {
     title: 'Create Offer',
     description: 'Review and create the offer',
   },
+  chia_cancelOffer: {
+    title: 'Cancel Offer',
+    description: 'Review and cancel the offer',
+  },
 };
 
 function RequestDialog({