Best practices

Send playerBalances messages to iframe parent any time the player's balances change

It is required that you broadcast balance updates to the parent casino window so that it can generate correct UI. It's very jarring to the player if the balance desynchronizes.

Read more: PostMessage API

Truncate balances for display

When displaying player balances, truncate the value to the currency's displayUnitScale.

const balance = 123.456789;
const currency = { id: "BTC", displayUnitName: "bits", displayUnitScale: 100 };
// ✅ Show "123.45 bits"
// ❌ Not "123.456789 bits"
const displayBalance =
  Math.floor(balance * currency.displayUnitScale) / currency.displayUnitScale;

This way, you only show an amount that the player can withdraw since the transfer system only allows integers of base unit amounts.

baseAmount = displayAmount * currency.displayUnitScale

Floor base amounts before transfer and withdrawal

The Moneypot API (and thus @moneypot/hub) only allow integer amounts for transfers.

This means that when you implement a withdraw form, you should floor the amount to the nearest integer before sending it to the Moneypot API.

const handleSubmit = () => {
  // Player typed "12.34" bits (display units) into the box, so convert to base units and floor it.
  const baseAmount = Math.floor(
    Number.parseFloat(amountString) * currency.displayUnitScale
  );

  withdraw({
    variables: {
      amount: baseAmount,
      currency,
    },
  });
};

This handles two cases:

1. Too much precision, e.g. 1.123 bits becomes 1.123 * 100 = 112.3 satoshis when instead you want 112 satoshis since the transfer system only supports integers.
2. Truncates floating point error, e.g. 1.12 bits * 100 becomes 112.00000000000001 satoshis when instead you want 112 satoshis.

Look and feel

(TODO)

We will eventually encourage a list of look and feel UI conventions.