Leave a copy of some cards/defs in Experiments to avoid breaking thin…

…gs not moved to Seed Realm

packages/experiments-realm/Currency/1.json

@@ -0,0 +1,18 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "locale": "en-US",
+      "sign": "$",
+      "name": "U.S. Dollar",
+      "symbol": "USD",
+      "logoURL": "https://i.imgur.com/JIL3hND.png"
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../asset",
+        "name": "Currency"
+      }
+    }
+  }
+}

packages/experiments-realm/Currency/2.json

@@ -0,0 +1,18 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "locale": "en-IE",
+      "sign": "€",
+      "name": "Euro",
+      "symbol": "EUR",
+      "logoURL": "https://i.imgur.com/7pDUUVh.png"
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../asset",
+        "name": "Currency"
+      }
+    }
+  }
+}

packages/experiments-realm/Currency/3.json

@@ -0,0 +1,18 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "locale": "en-IN",
+      "sign": "₹",
+      "name": "Indian Rupee",
+      "symbol": "INR",
+      "logoURL": "https://i.imgur.com/sSUPndr.png"
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../asset",
+        "name": "Currency"
+      }
+    }
+  }
+}

packages/experiments-realm/asset.gts

@@ -0,0 +1,173 @@
+import {
+  contains,
+  field,
+  CardDef,
+  FieldDef,
+  Component,
+  relativeTo,
+} from 'https://cardstack.com/base/card-api';
+import StringField from 'https://cardstack.com/base/string';
+import CurrencyIcon from '@cardstack/boxel-icons/currency';
+import CircleDotIcon from '@cardstack/boxel-icons/circle-dot';
+
+export class Asset extends CardDef {
+  static displayName = 'Asset';
+  @field name = contains(StringField);
+  @field symbol = contains(StringField);
+  @field logoURL = contains(StringField);
+  @field logoHref = contains(StringField, {
+    computeVia: function (this: Asset) {
+      if (!this.logoURL) {
+        return null;
+      }
+      return new URL(this.logoURL, this[relativeTo] || this.id).href;
+    },
+  });
+  @field title = contains(StringField, {
+    computeVia: function (this: Asset) {
+      return this.name;
+    },
+  });
+
+  static embedded = class Embedded extends Component<typeof Asset> {
+    <template>
+      <div class='asset-card'>
+        {{#if @model.logoURL}}
+          <img
+            src={{@model.logoHref}}
+            width='20'
+            height='20'
+            aria-hidden='true'
+          />
+        {{/if}}
+        <div class='currency'><@fields.symbol /></div>
+      </div>
+      <style scoped>
+        .asset-card {
+          display: inline-grid;
+          grid-template-columns: var(--boxel-sp) 1fr;
+          gap: var(--boxel-sp-xxxs);
+        }
+
+        .currency {
+          font: 700 var(--boxel-font);
+        }
+      </style>
+    </template>
+  };
+
+  static atom = class Atom extends Component<typeof Asset> {
+    <template>
+      <span>
+        {{#if @model.logoURL}}
+          <img
+            src={{@model.logoHref}}
+            width='20'
+            height='20'
+            aria-hidden='true'
+          />
+        {{/if}}
+        {{@model.title}}
+      </span>
+      <style scoped>
+        img {
+          vertical-align: middle;
+          margin-right: var(--boxel-sp-xxxs);
+        }
+      </style>
+    </template>
+  };
+}
+
+class AssetField extends FieldDef {
+  static displayName = 'Asset';
+  @field name = contains(StringField);
+  @field symbol = contains(StringField);
+  @field logoURL = contains(StringField);
+  @field logoHref = contains(StringField, {
+    computeVia: function (this: Asset) {
+      if (!this.logoURL) {
+        return null;
+      }
+      return new URL(this.logoURL, this[relativeTo] || this.id).href;
+    },
+  });
+  @field title = contains(StringField, {
+    computeVia: function (this: Asset) {
+      return this.name;
+    },
+  });
+  static embedded = class Embedded extends Component<typeof Asset> {
+    <template>
+      <div class='asset-card'>
+        {{#if @model.logoURL}}
+          <img
+            src={{@model.logoHref}}
+            width='20'
+            height='20'
+            aria-hidden='true'
+          />
+        {{/if}}
+        <div class='currency'><@fields.symbol /></div>
+      </div>
+      <style scoped>
+        .asset-card {
+          display: inline-grid;
+          grid-template-columns: var(--boxel-sp) 1fr;
+          gap: var(--boxel-sp-xxxs);
+        }
+
+        .currency {
+          font: 700 var(--boxel-font);
+        }
+      </style>
+    </template>
+  };
+}
+
+const currencyFormatters = new Map<string, Intl.NumberFormat>();
+
+// For fiat money
+export class Currency extends Asset {
+  static displayName = 'Currency';
+  @field sign = contains(StringField); // $, €, £, ¥, ₽, ₿ etc.
+  @field locale = contains(StringField); // en-US, en-GB, ja-JP, ru-RU, etc.
+
+  get formatter() {
+    if (!currencyFormatters.has(this.locale)) {
+      currencyFormatters.set(
+        this.locale,
+        new Intl.NumberFormat(this.locale, {
+          style: 'currency',
+          currency: this.symbol,
+        }),
+      );
+    }
+    return currencyFormatters.get(this.locale)!;
+  }
+
+  format(amount?: number) {
+    if (amount === undefined) {
+      return '';
+    }
+    return this.formatter.format(amount);
+  }
+}
+
+export class CurrencyField extends AssetField {
+  static displayName = 'Currency';
+  static icon = CurrencyIcon;
+  @field sign = contains(StringField); // $, €, £, ¥, ₽, ₿ etc.
+}
+
+// For crypto
+export class Token extends Asset {
+  static displayName = 'Token';
+  static icon = CircleDotIcon;
+  @field address = contains(StringField);
+}
+
+export class TokenField extends AssetField {
+  static displayName = 'Token';
+  @field address = contains(StringField);
+}