feat: style the offers

packages/dapp-svelte-wallet/ui/lib/Chip.svelte

@@ -0,0 +1,101 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  import { scale } from "svelte/transition";
+  import createRipple from "smelte/src/components/Ripple/ripple.js";
+  import utils, { ClassBuilder, filterProps } from "smelte/src/utils/classes.js";
+
+  import Icon from "smelte/src/components/Icon";
+
+
+
+  export let removable = false;
+  export let icon = "";
+  export let outlined = false;
+  export let selected = false;
+  export let selectable = true;
+  export let color = "primary";
+  export let remove = "";
+  export let add = "";
+  export let replace = {};
+
+  $: ripple = createRipple(color);
+
+  let value = true;
+
+  const dispatch = createEventDispatcher();
+
+  function close() {
+    dispatch("close");
+    value = false;
+  }
+
+  function select() {
+    if (!selectable) return;
+
+    selected = true;
+  }
+
+  $: ({ bg, txt, border } = utils(color));
+
+  const cb = new ClassBuilder();
+
+  $: classes = cb
+    .flush()
+    .add('relative overflow-hidden flex items-center rounded-full px-2 py-1')
+    .add('bg-transparent border', outlined)
+    .add('border-gray-400 border-solid hover:bg-gray-50 dark-hover:bg-dark-400 bg-gray-300 dark:bg-dark-600', !selected)
+    .add(`${border()} dark:${border('800')} ${txt()} ${bg(100)} hover:${bg(50)}`, selected)
+    .remove(remove)
+    .replace(replace)
+    .add(add)
+    .get();
+
+  const props = filterProps([
+    'removable',
+    'icon',
+    'outlined',
+    'selected',
+    'selectable',
+    'color',
+  ], $$props);
+
+  $: iconClass = selected ? `hover:${bg(300)} ${bg(400)}` : "hover:bg-gray-400 bg-gray-500 dark:bg-gray-800";
+
+   $: c = cb
+      .flush()
+      .add($$props.class)
+      .get();
+</script>
+
+<style>
+  .p-1\/2 {
+    padding: 0.125rem;
+  }
+</style>
+
+{#if value}
+  <span class="{c} mx-1 inline-block" out:scale={{ duration: 100 }}>
+    <button
+      class={classes}
+      on:click
+      use:ripple
+      {...props}
+      on:click={select}>
+      {#if icon}
+        <Icon small class={selected ? txt(400) : 'text-gray-600'}>
+          {icon}
+        </Icon>
+      {/if}
+      <span class="px-2 text-sm">
+        <slot />
+      </span>
+      {#if removable}
+        <span
+          class="rounded-full p-1/2 inline-flex items-center cursor-pointer {iconClass}"
+          on:click|stopPropagation={close}>
+          <Icon class="text-white dark:text-white" xs>clear</Icon>
+        </span>
+      {/if}
+    </button>
+  </span>
+{/if}

packages/dapp-svelte-wallet/ui/src/Transaction.svelte

@@ -3,8 +3,9 @@
   import Petname from "./Petname.svelte";
   import Amount from "./Amount.svelte";
   import Debug from "../lib/Debug.svelte";
-
+  
   import { walletP } from './store';
+  import Chip from "../lib/Chip.svelte";
 
   export let item;
   export let summary = true;
@@ -43,15 +44,24 @@
     proposed: "Proposed",
   };
 
+  const statusColors = {
+    accept: "success",
+    rejected: "error",
+    decline: "error",
+    pending: "alert",
+    proposed: "grey",
+  };
+
   $: ({
     instancePetname,
     instanceHandleBoardId,
     installationHandleBoardId,
     offerId,
     requestContext: { date, dappOrigin, origin = "unknown origin" } = {},
     proposalForDisplay: { give = {}, want = {} } = {},
-    status,
   } = item);
+
+  $: status = item.status || 'proposed';
 </script>
 
 <style>
@@ -74,10 +84,6 @@
     }
   }
 
-  button:hover {
-    background-color: red;
-  }
-
   .actions {
     margin-top: 1em;
   }
@@ -86,7 +92,9 @@
 <section>
   {#if summary}
     {#if !summaryLine || summaryLine === 1}
-      {formatDateNow(date)}
+      {formatDateNow(date)} <Chip outline selected
+      color={statusColors[status]}
+    >{statusText[status]}</Chip>
     {/if}
     {#if !summaryLine || summaryLine === 2}
       <Petname name={instancePetname} board={instanceHandleBoardId} /> via ({dappOrigin || origin})
@@ -111,10 +119,20 @@
     {/each}
   </div> 
   <div class="actions">
-    <b>{statusText[status || 'proposed']}</b>
-    <button on:click={() => E(walletP).acceptOffer(offerId).then(showOutcome)}>Accept</button>
-    <button on:click={() => E(walletP).declineOffer(offerId)}>Decline</button>
-    <button on:click={() => E(walletP).cancelOffer(offerId)}>Cancel</button>
+    {#if status === 'pending'}
+    <Chip on:click={() => E(walletP).cancelOffer(offerId)}
+      selected icon="clear" color="alert"
+    >Cancel</Chip>
+    {/if}
+    {#if status === 'proposed'}
+    <div class="flex flex-row">
+    <Chip on:click={() => E(walletP).acceptOffer(offerId).then(showOutcome)}
+      selected icon="check" color="success"
+    >Accept</Chip> <Chip on:click={() => E(walletP).declineOffer(offerId)}
+      selected icon="clear" color="error"
+    >Decline</Chip>
+    </div>
+    {/if}
   </div>
   {/if}
 </section>

packages/dapp-svelte-wallet/ui/src/Transactions.svelte

@@ -6,7 +6,8 @@
   import { inbox } from './store';
 </script>
 
-<ListCard items={$inbox}>
+<!-- filter out the history -->
+<ListCard items={($inbox || []).filter(({ status }) => status === undefined || status === 'pending')}>
   <div slot="title">
     <Card.Title title="Transactions" />
   </div>

packages/dapp-svelte-wallet/ui/src/store.js

@@ -45,7 +45,7 @@ function onReset(readyP) {
   updateFromNotifier({
     updateState(ijs) {
       const state = JSON.parse(ijs);
-      setInbox(state.map(tx => ({ ...tx, offerId: tx.id, id: `${tx.requestContext.date}-${tx.requestContext.dappOrigin}`}))
+      setInbox(state.map(tx => ({ ...tx, offerId: tx.id, id: `${tx.requestContext.date}-${tx.requestContext.dappOrigin}-${tx.id}`}))
         .sort((a, b) => cmp(b.id, a.id)));
     },
   }, E(walletP).getInboxJSONNotifier());