@lightsparkdev/lightspark-sdk 0.1.6

package/examples/streaming-wallet-extension/src/background/messageHandling.ts

@@ -0,0 +1,185 @@
+import {
+  BitcoinNetwork,
+  CurrencyUnit,
+  LightsparkClient,
+} from "@lightsparkdev/lightspark-sdk";
+import AccountStorage from "../auth/AccountStorage";
+import { VideoPlaybackUpdateMessage } from "../types/Messages";
+import { LinearPaymentStrategy } from "./PaymentStrategy";
+import StreamingInvoiceHolder from "./StreamingInvoiceHolder";
+import TransactionObserver from "./TransactionObserver";
+import VideoProgressCache from "./VideoProgressCache";
+
+const paymentStrategy = new LinearPaymentStrategy(10_000, 1);
+
+const playbackMessageReceived = async (
+  message: VideoPlaybackUpdateMessage,
+  lightsparkClient: LightsparkClient,
+  viewerNodeId: string | undefined,
+  progressCache: VideoProgressCache,
+  invoiceHolder: StreamingInvoiceHolder,
+  sendResponse: (response?: any) => void
+) => {
+  const previousRanges = progressCache.getPlayedRanges(message.videoID).slice();
+  progressCache.addProgress(
+    message.videoID,
+    message.prevProgress || 0,
+    message.progress
+  );
+  // Only send payments for the demo streaming video for now:
+  if (message.videoID !== "ls_demo") {
+    sendResponse({ amountToPay: 0 });
+    return;
+  }
+  const amountToPay = paymentStrategy.onPlayedRange(
+    previousRanges,
+    progressCache.getPlayedRanges(message.videoID)
+  );
+  const invoiceToPay = await invoiceHolder.getInvoiceData();
+  if (amountToPay > 0) {
+    console.log(`Paying: ${amountToPay / 1000} sats`);
+    if (!invoiceToPay || !viewerNodeId) {
+      console.error("No invoice to pay while streaming");
+    } else {
+      await lightsparkClient.payInvoice(
+        viewerNodeId,
+        invoiceToPay,
+        Math.ceil(amountToPay * 0.0016 + 5),
+        60,
+        amountToPay
+      );
+    }
+  }
+  sendResponse({ amountToPay });
+};
+
+const getWalletStatus = async (lightsparkClient: LightsparkClient) => {
+  const isAuthorized = await lightsparkClient.isAuthorized();
+  if (!isAuthorized) {
+    return "no_wallet";
+  }
+  return "funded";
+};
+
+let pendingPause: NodeJS.Timeout | undefined;
+
+export const onMessageReceived = (
+  message: any,
+  lightsparkClient: LightsparkClient,
+  progressCache: VideoProgressCache,
+  invoiceHolder: StreamingInvoiceHolder,
+  accountStorage: AccountStorage,
+  transactionObserver: TransactionObserver,
+  sendResponse: (response: any) => void
+) => {
+  switch (message.id) {
+    case "video_play":
+      accountStorage.getAccountCredentials().then((account) => {
+        transactionObserver.startListening(account!.viewerWalletId);
+        if (pendingPause) {
+          clearTimeout(pendingPause);
+          pendingPause = undefined;
+        }
+        sendResponse({ status: "ok" });
+      });
+      break;
+    case "video_pause":
+      pendingPause = setTimeout(() => {
+        transactionObserver.stopListening();
+        pendingPause = undefined;
+      }, 10000);
+      sendResponse({ status: "ok" });
+      break;
+    case "ping":
+      sendResponse("pong");
+      break;
+    case "get_version":
+      sendResponse({ version: chrome.runtime.getManifest().version });
+      break;
+    case "video_progress":
+      accountStorage.getAccountCredentials().then((account) => {
+        playbackMessageReceived(
+          message,
+          lightsparkClient,
+          account?.viewerWalletId,
+          progressCache,
+          invoiceHolder,
+          sendResponse
+        );
+      });
+      break;
+    case "get_wallet_status":
+      // TODO: Send messages when the status changes.
+      getWalletStatus(lightsparkClient).then((status) => {
+        sendResponse({ status });
+      });
+      break;
+    case "get_wallet_transactions":
+      accountStorage.getAccountCredentials().then((account) => {
+        if (!account) {
+          sendResponse({ transactions: [] });
+          return;
+        }
+
+        lightsparkClient
+          .getRecentTransactions(
+            account.viewerWalletId,
+            20,
+            BitcoinNetwork.REGTEST,
+            account.allocationTime
+          )
+          .then((transactions) => {
+            sendResponse({ transactions });
+          });
+      });
+      break;
+    case "get_streaming_wallet_balances":
+      // Hack for testing. Remove this line when releasing:
+      progressCache.clear();
+      lightsparkClient
+        .getAccountDashboard(undefined, BitcoinNetwork.REGTEST)
+        .then(async (dashboard) => {
+          const zeroSats = { unit: CurrencyUnit.SATOSHI, value: 0 };
+          const account = await accountStorage.getAccountCredentials();
+          if (!account) {
+            sendResponse({
+              balances: { viewerBalance: zeroSats, creatorBalance: zeroSats },
+            });
+            return;
+          }
+          const viewerNode = dashboard.nodes?.find((node) =>
+            node.id.includes(account.viewerWalletId)
+          );
+          const creatorNode = dashboard.nodes?.find((node) =>
+            node.id.includes(account.creatorWalletId)
+          );
+          const balances = {
+            viewerBalance: viewerNode?.localBalance || zeroSats,
+            creatorBalance: creatorNode?.localBalance || zeroSats,
+          };
+          sendResponse({ balances });
+        });
+      break;
+    case "open_and_create_wallet":
+      chrome.windows.getCurrent().then((activeWindow) => {
+        chrome.windows.create(
+          {
+            url: "index.html",
+            type: "popup",
+            width: 300,
+            height: 408,
+            left: Math.round(
+              (activeWindow.left ?? 0) + (activeWindow.width ?? 0) - 480
+            ),
+            top: Math.round((activeWindow.top ?? 0) + 90),
+          },
+          () => console.log("opened popup")
+        );
+      });
+      sendResponse({ status: "ok" });
+      break;
+    default:
+      console.log(`Unknown message received: ${JSON.stringify(message)}`);
+      sendResponse({ status: "unknown" });
+  }
+};

package/examples/streaming-wallet-extension/src/common/datetimes.ts

@@ -0,0 +1,28 @@
+import day from "dayjs";
+import utc from "dayjs/plugin/utc";
+import { Maybe } from "./types";
+
+const NOT_APPLICABLE = "-";
+
+day.extend(utc);
+
+export const formatDateTime = (
+  datetime: string,
+  format: string,
+  toUserTime: boolean = true
+): string => {
+  let time_val = day(datetime).utc();
+  if (toUserTime) {
+    time_val = day(time_val).local();
+  }
+  return time_val.format(format);
+};
+
+export const getFormattedDateTimeOrDefault = (
+  datetime: Maybe<string>,
+  format: string
+): string => {
+  return datetime === undefined || datetime === null || datetime === ""
+    ? NOT_APPLICABLE
+    : formatDateTime(datetime, format);
+};

package/examples/streaming-wallet-extension/src/common/settings.ts

@@ -0,0 +1,12 @@
+/**
+ * Enable YouTube and Twitch streaming tracking.
+ *
+ * If you enable this, you will need to add the following to your manifest.json in content_scripts -> matches:
+ * [
+ *     "https://youtube.com/*",
+ *     "https://www.youtube.com/*",
+ *     "https://www.twitch.tv/*",
+ *     "https://twitch.tv/*",
+ * ]
+ */
+export const ENABLE_YOUTUBE_AND_TWITCH = false;

package/examples/streaming-wallet-extension/src/common/storage.ts

@@ -0,0 +1,8 @@
+export const INSTANCE_ID_KEY = "instanceID";
+
+export const clearStorageKeepingInstanceId = async () => {
+  const instanceId = (await chrome.storage.local.get(INSTANCE_ID_KEY))
+    ?.instanceID;
+  await chrome.storage.local.clear();
+  await chrome.storage.local.set({ [INSTANCE_ID_KEY]: instanceId });
+};

package/examples/streaming-wallet-extension/src/common/streamingTabs.ts

@@ -0,0 +1,27 @@
+const URLS = [
+  "https://localhost:3000/demos/streaming",
+  "http://192.168.86.248:3000/demos/streaming",
+  "https://dev.dev.sparkinfra.net/demos/streaming",
+  "https://app.lightspark.com/demos/streaming",
+];
+
+export const findActiveStreamingDemoTabs = () => {
+  const allAndActive = Promise.all([
+    new Promise<chrome.tabs.Tab[]>((resolve) => {
+      chrome.tabs.query({ url: URLS }, (tabs) => resolve(tabs));
+    }),
+    new Promise<chrome.tabs.Tab[]>((resolve) => {
+      chrome.tabs.query(
+        { url: URLS, active: true, lastFocusedWindow: true },
+        (tabs) => resolve(tabs)
+      );
+    }),
+  ]);
+  return allAndActive.then(([all, active]) => {
+    if (active.length > 0) {
+      return active;
+    }
+    // Reverse the order so that the most recently opened tab is returned.
+    return all.reverse();
+  });
+};

package/examples/streaming-wallet-extension/src/common/types.tsx

@@ -0,0 +1,23 @@
+// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
+
+export type Maybe<T> = T | null | undefined;
+
+export type ExpandRecursively<T> = T extends object
+  ? T extends infer O
+    ? { [K in keyof O]: ExpandRecursively<O[K]> } // eslint-disable-line @typescript-eslint/no-unused-vars
+    : never
+  : T;
+
+export type ById<T> = {
+  [id: string]: T;
+};
+
+export type OmitTypename<T> = Omit<T, "__typename">;
+
+export const isType =
+  <T extends string>(typename: T) =>
+  <N extends { __typename: string }>(
+    node: N | undefined | null
+  ): node is Extract<N, { __typename: T }> => {
+    return node?.__typename === typename;
+  };

package/examples/streaming-wallet-extension/src/components/CirclePlusIcon.tsx

@@ -0,0 +1,19 @@
+// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
+
+const CirclePlusIcon = () => (
+  <svg
+    width="12"
+    height="13"
+    viewBox="0 0 12 13"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6 3.75V9.25M3.25 6.5H8.75M11.5 6.5C11.5 9.53757 9.03757 12 6 12C2.96243 12 0.5 9.53757 0.5 6.5C0.5 3.46243 2.96243 1 6 1C9.03757 1 11.5 3.46243 11.5 6.5Z"
+      stroke="white"
+      stroke-linecap="round"
+    />
+  </svg>
+);
+
+export default CirclePlusIcon;

package/examples/streaming-wallet-extension/src/components/CurrencyAmount.tsx

@@ -0,0 +1,110 @@
+// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
+import {
+  CurrencyAmount as CurrencyAmountType,
+  CurrencyUnit,
+} from "@lightsparkdev/lightspark-sdk";
+import { Maybe } from "../common/types";
+import CurrencyAmountRaw from "./CurrencyAmountRaw";
+
+type Props = {
+  amount?: CurrencyAmountType | null;
+  displayUnit?: CurrencyUnit;
+  shortNumber?: boolean;
+  shortUnit?: boolean;
+  symbol?: boolean;
+  useLocaleString?: boolean;
+  maximumSignificantDigits?: number;
+  maximumFractionDigits?: number;
+  minimumFractionDigits?: number;
+  dash?: boolean;
+};
+
+const CurrencyAmount = (props: Props) => {
+  if (!props.amount) {
+    return props.dash ? <>-</> : null;
+  }
+  const amount = convert(props.amount, props.displayUnit);
+  return (
+    <CurrencyAmountRaw
+      value={amount.preferredCurrencyValueApprox}
+      unit={amount.preferredCurrencyUnit}
+      shortNumber={props.shortNumber}
+      shortUnit={props.shortUnit}
+      symbol={props.symbol}
+      useLocaleString={props.useLocaleString}
+      maximumSignificantDigits={props.maximumSignificantDigits}
+      maximumFractionDigits={props.maximumFractionDigits}
+      minimumFractionDigits={props.minimumFractionDigits}
+    />
+  );
+};
+
+// TODO(Jeremy): consider moving this to fetch the actual exchange rate.
+const SATS_TO_USD = 0.0268;
+const btc_conversions: Map<CurrencyUnit, Map<CurrencyUnit, number>> = new Map([
+  [
+    CurrencyUnit.BITCOIN,
+    new Map([
+      [CurrencyUnit.BITCOIN, 1],
+      [CurrencyUnit.SATOSHI, 1e8],
+      [CurrencyUnit.MILLISATOSHI, 1e11],
+    ]),
+  ],
+  [
+    CurrencyUnit.SATOSHI,
+    new Map([
+      [CurrencyUnit.BITCOIN, 1e-8],
+      [CurrencyUnit.SATOSHI, 1],
+      [CurrencyUnit.MILLISATOSHI, 1000],
+    ]),
+  ],
+  [
+    CurrencyUnit.MILLISATOSHI,
+    new Map([
+      [CurrencyUnit.BITCOIN, 1e-11],
+      [CurrencyUnit.SATOSHI, 0.001],
+      [CurrencyUnit.MILLISATOSHI, 1],
+    ]),
+  ],
+  [
+    CurrencyUnit.USD,
+    new Map([
+      [CurrencyUnit.USD, 1],
+      [CurrencyUnit.SATOSHI, SATS_TO_USD],
+      [CurrencyUnit.BITCOIN, SATS_TO_USD * 1e8],
+      [CurrencyUnit.MILLISATOSHI, SATS_TO_USD / 1000],
+    ]),
+  ],
+]);
+
+const convert = (
+  amount: CurrencyAmountType,
+  unit: Maybe<CurrencyUnit>
+): CurrencyAmountType => {
+  if (unit === null || unit === undefined || unit === amount.originalUnit)
+    return amount;
+  const multiplier = btc_conversions.get(amount.originalUnit)?.get(unit);
+  if (!multiplier) {
+    throw new ConversionError(
+      `Unable to convert from ${amount.originalUnit} to ${unit}`
+    );
+  }
+
+  return {
+    originalUnit: amount.originalUnit,
+    originalValue: amount.originalValue,
+    preferredCurrencyUnit: unit,
+    preferredCurrencyValueApprox: amount.originalValue * multiplier,
+    preferredCurrencyValueRounded: amount.originalValue * multiplier,
+  };
+};
+
+export class ConversionError {
+  message: string;
+
+  constructor(message: string) {
+    this.message = message;
+  }
+}
+
+export default CurrencyAmount;

package/examples/streaming-wallet-extension/src/components/CurrencyAmountRaw.tsx

@@ -0,0 +1,195 @@
+// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
+import styled from "@emotion/styled/macro";
+import { CurrencyUnit } from "@lightsparkdev/lightspark-sdk";
+import type { Maybe } from "../common/types";
+
+type Props = {
+  value: Maybe<number>;
+  unit: Maybe<CurrencyUnit>;
+  shortUnit?: boolean;
+  symbol?: boolean;
+  shortNumber?: boolean;
+  useLocaleString?: boolean;
+  maximumSignificantDigits?: number;
+  maximumFractionDigits?: number;
+  minimumFractionDigits?: number;
+};
+
+const CurrencyAmountRaw = (props: Props) => {
+  const symbol = () => {
+    switch (props.unit) {
+      case CurrencyUnit.SATOSHI:
+        return <Satoshi />;
+      case CurrencyUnit.USD:
+        return "$";
+    }
+    return "";
+  };
+
+  const text = getAsText(props);
+  return (
+    <Amount>
+      {symbol()}
+      {text}
+    </Amount>
+  );
+};
+
+export const getAsText = (props: Props): string => {
+  const {
+    value,
+    unit,
+    shortUnit,
+    symbol,
+    shortNumber,
+    useLocaleString,
+    maximumSignificantDigits,
+    maximumFractionDigits,
+    minimumFractionDigits,
+  } = props;
+
+  if (value === undefined || value === null) {
+    return "ERROR";
+  }
+
+  let amountValue = value;
+  /* Currencies should always be represented in the smallest unit, e.g. cents for USD: */
+  if (unit === CurrencyUnit.USD) {
+    amountValue = value / 100;
+  }
+
+  let number = amountValue.toString();
+  if (shortNumber) {
+    const abs_val = Math.abs(amountValue);
+    if (abs_val >= 1_000_000_000) {
+      const newValue = amountValue / 1_000_000_000;
+      number = newValue.toFixed(newValue >= 100 ? 0 : 1) + "B";
+    } else if (abs_val >= 1_000_000) {
+      const newValue = amountValue / 1_000_000;
+      number = newValue.toFixed(newValue >= 100 ? 0 : 1) + "M";
+    } else if (abs_val >= 1_000) {
+      const newValue = amountValue / 1_000;
+      number = (amountValue / 1_000).toFixed(newValue >= 100 ? 0 : 1) + "K";
+    } else {
+      number = amountValue.toFixed(3);
+    }
+  } else if (useLocaleString) {
+    const options: Intl.NumberFormatOptions = {};
+    if (maximumSignificantDigits !== undefined) {
+      options.maximumSignificantDigits = maximumSignificantDigits;
+    }
+    if (maximumFractionDigits !== undefined) {
+      options.maximumFractionDigits = maximumFractionDigits;
+    }
+    if (minimumFractionDigits !== undefined) {
+      options.minimumFractionDigits = minimumFractionDigits;
+    }
+    number = Number(number).toLocaleString(undefined, options);
+  }
+  if (!unit || symbol) {
+    return number;
+  }
+  if (shortUnit) {
+    return number + " " + shorttext(unit);
+  }
+  const isPlural = amountValue > 1;
+  const unitText = isPlural ? plural(unit) : singular(unit);
+  return number + " " + unitText;
+};
+
+const singular = (unit: CurrencyUnit) => {
+  switch (unit) {
+    case CurrencyUnit.BITCOIN:
+      return "Bitcoin";
+    case CurrencyUnit.MILLIBITCOIN:
+      return "Millibitcoin";
+    case CurrencyUnit.MICROBITCOIN:
+      return "Microbitcoin";
+    case CurrencyUnit.NANOBITCOIN:
+      return "Nanobitcoin";
+    case CurrencyUnit.SATOSHI:
+      return "Satoshi";
+    case CurrencyUnit.MILLISATOSHI:
+      return "Millisatoshi";
+  }
+  return unit;
+};
+
+const plural = (unit: CurrencyUnit) => {
+  switch (unit) {
+    case CurrencyUnit.BITCOIN:
+      return "Bitcoins";
+    case CurrencyUnit.MILLIBITCOIN:
+      return "Millibitcoins";
+    case CurrencyUnit.MICROBITCOIN:
+      return "Microbitcoins";
+    case CurrencyUnit.NANOBITCOIN:
+      return "Nanobitcoins";
+    case CurrencyUnit.SATOSHI:
+      return "Satoshis";
+    case CurrencyUnit.MILLISATOSHI:
+      return "Millisatoshis";
+  }
+  return unit;
+};
+
+const shorttext = (unit: CurrencyUnit) => {
+  switch (unit) {
+    case CurrencyUnit.BITCOIN:
+      return "BTC";
+    case CurrencyUnit.MILLIBITCOIN:
+      return "mBTC";
+    case CurrencyUnit.MICROBITCOIN:
+      return "μBTC";
+    case CurrencyUnit.SATOSHI:
+      return "sat";
+    case CurrencyUnit.MILLISATOSHI:
+      return "msat";
+  }
+  return unit;
+};
+
+// This is a squared-off version that is compatible with Montserrat.
+type SatProps = {
+  color?: string;
+  offset?: number;
+  size?: number;
+};
+
+const Satoshi = (props: SatProps) => (
+  <svg
+    width="0.675em"
+    height="0.9em"
+    style={{ transform: "translate(-0.05em, 0.1em)" }}
+    viewBox="0 0 26 40"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect y="8.88867" width="25.9994" height="4.44434" fill="currentColor" />
+    <rect y="17.7788" width="25.9994" height="4.44434" fill="currentColor" />
+    <rect y="26.6685" width="25.9994" height="4.44434" fill="currentColor" />
+    <rect
+      x="15.4753"
+      y="34.6748"
+      width="5.32497"
+      height="4.95226"
+      transform="rotate(90 15.4753 34.6748)"
+      fill="currentColor"
+    />
+    <rect
+      x="15.4753"
+      width="5.33322"
+      height="4.95226"
+      transform="rotate(90 15.4753 0)"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+const Amount = styled.span`
+  color: inherit !important;
+  white-space: nowrap;
+  font-feature-settings: "tnum" on, "lnum" on;
+`;
+
+export default CurrencyAmountRaw;

package/examples/streaming-wallet-extension/src/components/LeftArrow.tsx

@@ -0,0 +1,21 @@
+// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
+
+const LeftArrow = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12.9837 8.00003L3.01636 8.00003M3.01636 8.00003L7.01636 12.1905M3.01636 8.00003L7.01636 3.80955"
+      stroke="#666666"
+      stroke-width="1.33333"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
+
+export default LeftArrow;