feat: update wallet for decimals

packages/dapp-svelte-wallet/api/package.json

@@ -27,7 +27,8 @@
   "dependencies": {
     "@agoric/eventual-send": "^0.12.0-dev.0",
     "@agoric/store": "^0.3.1-dev.0",
-    "esm": "^3.2.5"
+    "esm": "^3.2.5",
+    "json5": "^2.1.3"
   },
   "eslintConfig": {
     "extends": [

packages/dapp-svelte-wallet/api/src/lib-wallet.js

@@ -1,5 +1,7 @@
 // @ts-check
 
+import JSON5 from 'json5';
+
 import { assert, details, q } from '@agoric/assert';
 import { makeStore, makeWeakStore } from '@agoric/store';
 import { makeIssuerTable } from '@agoric/zoe/src/issuerTable';
@@ -10,6 +12,7 @@ import { makeMarshal } from '@agoric/marshal';
 import { makeNotifierKit } from '@agoric/notifier';
 import { makePromiseKit } from '@agoric/promise-kit';
 
+import { MathKind } from '@agoric/ertp';
 import makeObservablePurse from './observable';
 import { makeDehydrator } from './lib-dehydrate';
 
@@ -150,6 +153,8 @@ export async function makeWallet({
       // We have a depositId for the purse.
       depositBoardId = brandToDepositFacetId.get(brand);
     }
+
+    const issuerRecord = brandTable.getByBrand(brand);
     /**
      * @type {PursesJSONState}
      */
@@ -158,21 +163,56 @@ export async function makeWallet({
       ...(depositBoardId && { depositBoardId }),
       brandPetname,
       pursePetname,
+      displayInfo: (issuerRecord && issuerRecord.displayInfo),
       value,
       currentAmountSlots: dehydratedCurrentAmount,
       currentAmount: fillInSlots(dehydratedCurrentAmount),
     };
     pursesState.set(purseKey, jstate);
+
     pursesFullState.set(
       purse,
       harden({
         ...jstate,
         purse,
         brand,
         actions: {
-          async send(receiverP, valueToSend) {
+          parseValue(str) {
+            const { amountMath, displayInfo } = brandTable.getByBrand(brand);
+            assert.typeof(
+              str,
+              'string',
+              details`stringValue ${str} is not a string`,
+            );
+
+            if (amountMath.getAmountMathKind() !== MathKind.NAT) {
+              // Punt to JSON5 parsing.
+              return JSON5.parse(str);
+            }
+
+            // Parse the string as a number.
+            const { decimalPlaces = 0 } = displayInfo || {};
+
+            const match = str.match(/^0*(\d+)(\.(\d*[1-9])?0*)?$/);
+            assert(
+              match,
+              details`${str} must be a non-negative decimal number`,
+            );
+
+            const unitstr = match[1];
+            const dec0str = match[3] || '';
+            const dec0str0 = dec0str.padEnd(decimalPlaces, '0');
+            assert(
+              dec0str0.length <= decimalPlaces,
+              details`${str} exceeds ${decimalPlaces} decimal places`,
+            );
+
+            return parseInt(`${unitstr}${dec0str0}`, 10);
+          },
+          // Send a value from this purse.
+          async send(receiverP, sendValue) {
             const { amountMath } = brandTable.getByBrand(brand);
-            const amount = amountMath.make(valueToSend);
+            const amount = amountMath.make(sendValue);
             const payment = await E(purse).withdraw(amount);
             try {
               await E(receiverP).receive(payment);
@@ -984,8 +1024,10 @@ export async function makeWallet({
           } else {
             purse = purseOrPetname;
           }
+          const brandRecord = brandTable.getByBrand(brand);
           paymentRecord = {
             ...paymentRecord,
+            ...brandRecord,
             status: 'pending',
           };
           updatePaymentRecord(paymentRecord);
@@ -995,6 +1037,7 @@ export async function makeWallet({
             ...paymentRecord,
             status: 'deposited',
             depositedAmount,
+            ...brandRecord,
           };
           updatePaymentRecord(paymentRecord);
           depositedPK.resolve(depositedAmount);

packages/dapp-svelte-wallet/api/src/types.js

@@ -17,6 +17,7 @@
  * @property {string=} depositBoardId
  * @property {Petname} brandPetname
  * @property {Petname} pursePetname
+ * @property {any} displayInfo
  * @property {any} value
  * @property {any} currentAmountSlots
  * @property {any} currentAmount

packages/dapp-svelte-wallet/ui/package.json

@@ -33,5 +33,8 @@
   ],
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "@rollup/plugin-replace": "^2.3.4"
   }
 }

packages/dapp-svelte-wallet/ui/rollup.config.js

@@ -1,6 +1,7 @@
 import svelte from 'rollup-plugin-svelte';
 import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
+import replace from '@rollup/plugin-replace';
 import livereload from 'rollup-plugin-livereload';
 import { terser } from 'rollup-plugin-terser';
 import smelte from 'smelte/rollup-plugin-smelte';
@@ -37,6 +38,9 @@ export default {
     file: 'public/wallet/build/bundle.js'
   },
   plugins: [
+    replace({
+      isProduction: production,
+    }),
     svelte({
       // enable run-time checks when not in production
       dev: !production,

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

@@ -4,10 +4,34 @@
   import Tooltip from "smelte/src/components/Tooltip";
 
   export let amount;
+  export let displayInfo;
 
   // The amount gets updated. Make this dynamic
   $: ({ brand, value } = amount);
-  const cardinality = v => typeof v === 'number' ? v : v.length;
+  const decimate = v => {
+    if (Array.isArray(v)) {
+      return `${v.length}`;
+    }
+    const { decimalPlaces = 0, significantDecimals = 0 } = displayInfo || {};
+
+    const bScale = BigInt(10) ** BigInt(decimalPlaces);
+    const bValue = BigInt(value);
+    const bDecimals = BigInt(bValue % bScale)
+    const bUnits = bValue / bScale;
+
+    // Convert 100 to '0000100'.
+    const dec0str0 = `${bDecimals}`.padStart(decimalPlaces, '0');
+    const dec0str = dec0str0.replace(/0+$/, '');
+
+    const decstr = dec0str.padEnd(significantDecimals, '0');
+    const unitstr = `${bUnits}`;
+    if (!decstr) {
+      // No decimals to display.
+      return unitstr;
+    }
+
+    return `${unitstr}.${decstr}`;
+  };
 </script>
 
 <style>
@@ -23,7 +47,7 @@
       <div slot="activator">
         <b class="dotted-underline">
           {value.length}
-          <Petname name={brand.petname} plural={value.length !== 1} />
+          <Petname name={brand.petname} />
         </b>
       </div>
       {#if brand.petname === 'zoe invite'}
@@ -37,8 +61,8 @@
     </Tooltip>
   {:else}
     <b>
-      {cardinality(value)}
-      <Petname name={brand.petname} plural={cardinality(value) !== 1} />
+      {decimate(value)}
+      <Petname name={brand.petname} />
     </b>
   {/if}
 

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

@@ -31,15 +31,15 @@ import Select from "smelte/src/components/Select/Select.svelte";
   <div>
     {#if item.status === 'deposited'}
       {#if summary}
-        Deposited <Amount amount={item.displayPayment.depositedAmount} />
+        Deposited <Amount amount={item.displayPayment.depositedAmount} displayInfo={item.displayPayment.displayInfo} />
       {/if}
     {:else if item.issuer}
       {#if summary}
         {#if !summaryLine || summaryLine === 1}
         Payment amount
         {/if}
         {#if item.lastAmount && (!summaryLine || summaryLine === 2)}
-          <Amount amount={item.displayPayment.lastAmount} />
+          <Amount amount={item.displayPayment.lastAmount} displayInfo={item.displayPayment.displayInfo}  />
         {/if}
       {/if}
 

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

@@ -33,7 +33,7 @@ export let details = true;
       <Petname name={item.pursePetname} />
     {/if}
     {#if !summaryLine || summaryLine === 2}
-      <Amount amount={item.currentAmount} />
+      <Amount amount={item.currentAmount} displayInfo={item.displayInfo} />
     {/if}
   </div>
   {/if}

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

@@ -99,16 +99,16 @@
 	<Debug title="Offer Detail" target={item} />
   </div>
   <div>
-    {#each Object.entries(give) as [role, { amount, pursePetname }], i}
+    {#each Object.entries(give) as [role, { amount, displayInfo, pursePetname }], i}
       <div>
         <h6>Give</h6>
-        <Amount {amount} /> from <Petname name={pursePetname} />
+        <Amount {amount} /> from <Petname name={pursePetname} {displayInfo} />
       </div>
     {/each}
-    {#each Object.entries(want) as [role, { amount, pursePetname }], i}
+    {#each Object.entries(want) as [role, { amount, displayInfo, pursePetname }], i}
       <div>
         <h6>Want</h6>
-        <Amount {amount} /> into <Petname name={pursePetname} />
+        <Amount {amount} /> into <Petname name={pursePetname} {displayInfo} />
       </div>
     {/each}
   </div> 

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

@@ -15,23 +15,21 @@
   import { RadioButton } from "smelte/src/components/RadioButton";
   import Select from 'smelte/src/components/Select';
 
-  import { selfContact } from './store';
-
   export let source;
 
   const name = `xfer-${Math.random()}`;
   const title = `Transfer from ${source.pursePetname}`;
   let showModal = false;
   let ownPurse = true;
-  let valueJSON = "0";
+  let valueStr = "0";
   let toPurse = source;
   let toContact = undefined;
 
   const send = async destination => {
     try {
-      const value = JSON.parse(valueJSON);
+      const parsed = await E(source.actions).parseValue(valueStr);
       showModal = false;
-      await E(source.actions).send(destination.actions, value);
+      await E(source.actions).send(destination.actions, parsed);
     } catch (e) {
       alert(`Cannot send: ${e}`);
     }
@@ -48,8 +46,8 @@
 </div>
 <Dialog bind:value={showModal}>
   <h2 slot="title">{title}</h2>
-  Current balance: <Amount amount={source.currentAmount} />
-  <TextField bind:value={valueJSON} label="Send amount" />
+  Current balance: <Amount amount={source.currentAmount} displayInfo={source.displayInfo} />
+  <TextField bind:value={valueStr} label="Send amount" />
 
   <table>
     <tr>

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

@@ -7,12 +7,14 @@ import { makeCapTPConnection } from './captp';
 
 // Fetch the access token from the window's URL.
 const accessTokenParams = `?${window.location.hash.slice(1)}`;
-// Now that we've captured it, clear out the access token from the URL bar.
-window.location.hash = '';
-window.addEventListener('hashchange', _ev => {
-  // Keep it clear.
+if (isProduction) {
+  // Now that we've captured it, clear out the access token from the URL bar.
   window.location.hash = '';
-});
+  window.addEventListener('hashchange', _ev => {
+    // Keep it clear.
+    window.location.hash = '';
+  });
+}
 const hasAccessToken = new URLSearchParams(accessTokenParams).has(
   'accessToken',
 );

yarn.lock

@@ -1348,6 +1348,14 @@
     is-module "^1.0.0"
     resolve "^1.17.0"
 
+"@rollup/plugin-replace@^2.3.4":
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-2.3.4.tgz#7dd84c17755d62b509577f2db37eb524d7ca88ca"
+  integrity sha512-waBhMzyAtjCL1GwZes2jaE9MjuQ/DQF2BatH3fRivUF3z0JBFrU0U6iBNC/4WR+2rLKhaAhPWDNPYp4mI6RqdQ==
+  dependencies:
+    "@rollup/pluginutils" "^3.1.0"
+    magic-string "^0.25.7"
+
 "@rollup/pluginutils@^3.0.0", "@rollup/pluginutils@^3.0.6":
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.0.8.tgz#4e94d128d94b90699e517ef045422960d18c8fde"
@@ -5874,7 +5882,7 @@ json5@^2.1.0:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.1.2:
+json5@^2.1.2, json5@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.3.tgz#c9b0f7fa9233bfe5807fe66fcf3a5617ed597d43"
   integrity sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==
@@ -6237,6 +6245,13 @@ magic-string@^0.25.2:
   dependencies:
     sourcemap-codec "^1.4.4"
 
+magic-string@^0.25.7:
+  version "0.25.7"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
+  integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==
+  dependencies:
+    sourcemap-codec "^1.4.4"
+
 make-dir@^1.0.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"