@lightsparkdev/lightspark-sdk 0.1.6

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

@@ -0,0 +1,151 @@
+import styled from "@emotion/styled";
+
+type LoadingProps = { size: number };
+
+export const LoadingSpinner = (props: LoadingProps) => {
+  return (
+    <Rotate size={props.size}>
+      <LoadingSvg />
+    </Rotate>
+  );
+};
+
+const Rotate = styled.div<LoadingProps>`
+  display: inline-flex;
+  animation: rotate 1s linear infinite;
+  width: ${(props) => `${props.size}px`};
+  height: ${(props) => `${props.size}px`};
+
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
+const LoadingSvg = () => (
+  <svg
+    width="100%"
+    viewBox="0 0 12 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_1200_7026)">
+      <circle cx="6" cy="6" r="5.25" stroke="#333333" strokeWidth="1.5" />
+      <path
+        d="M6 11.25C3.10051 11.25 0.75 8.89949 0.75 6C0.75 3.10051 3.10051 0.75 6 0.75"
+        stroke="black"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+      <mask
+        id="mask0_1200_7026"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="7"
+        height="12"
+      >
+        <path
+          d="M6 11.25C3.10051 11.25 0.75 8.89949 0.75 6C0.75 3.10051 3.10051 0.75 6 0.75"
+          stroke="black"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+        />
+      </mask>
+      <g mask="url(#mask0_1200_7026)">
+        <g filter="url(#filter0_f_1200_7026)">
+          <ellipse
+            cx="6.375"
+            cy="2.625"
+            rx="35.25"
+            ry="14.25"
+            fill="url(#paint0_radial_1200_7026)"
+          />
+        </g>
+        <g filter="url(#filter1_f_1200_7026)">
+          <ellipse
+            cx="6.75"
+            cy="-5.25"
+            rx="23.625"
+            ry="19.125"
+            fill="url(#paint1_radial_1200_7026)"
+          />
+        </g>
+      </g>
+    </g>
+    <defs>
+      <filter
+        id="filter0_f_1200_7026"
+        x="-33.375"
+        y="-16.125"
+        width="79.5"
+        height="37.5"
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="BackgroundImageFix"
+          result="shape"
+        />
+        <feGaussianBlur
+          stdDeviation="2.25"
+          result="effect1_foregroundBlur_1200_7026"
+        />
+      </filter>
+      <filter
+        id="filter1_f_1200_7026"
+        x="-21.375"
+        y="-28.875"
+        width="56.25"
+        height="47.25"
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="BackgroundImageFix"
+          result="shape"
+        />
+        <feGaussianBlur
+          stdDeviation="2.25"
+          result="effect1_foregroundBlur_1200_7026"
+        />
+      </filter>
+      <radialGradient
+        id="paint0_radial_1200_7026"
+        cx="0"
+        cy="0"
+        r="1"
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="translate(6.44679 2.59598) rotate(161.271) scale(23.5 14.7413)"
+      >
+        <stop stopColor="#0066FF" />
+        <stop offset="1" stopColor="#0066FF" stopOpacity="0" />
+      </radialGradient>
+      <radialGradient
+        id="paint1_radial_1200_7026"
+        cx="0"
+        cy="0"
+        r="1"
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="translate(6.79812 -5.28895) rotate(145.825) scale(18.0291 17.2834)"
+      >
+        <stop stopColor="#FFC700" />
+        <stop offset="1" stopColor="#BF09FF" stopOpacity="0" />
+      </radialGradient>
+      <clipPath id="clip0_1200_7026">
+        <rect width="12" height="12" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);

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

@@ -0,0 +1,95 @@
+import styled from "@emotion/styled";
+import { CurrencyUnit, Transaction } from "@lightsparkdev/lightspark-sdk";
+import CurrencyAmountRaw from "./CurrencyAmountRaw";
+import { LoadingSpinner } from "./Loading";
+
+const StreamingTransactionChip = (props: {
+  transactions: Transaction[];
+  streamingDuration: number;
+  isStreaming: boolean;
+}) => {
+  const filteredTransactions = props.transactions.filter(
+    (t) => t.typename === "OutgoingPayment"
+  );
+  // TODO: Probably need a unit normalization here to ensure they're all sats.
+  const totalTransactionAmount = filteredTransactions.reduce(
+    (acc, t) => acc + t.amount.originalValue / 1000,
+    0
+  );
+  return (
+    <Wrapper>
+      <InnerColumn>
+        <TopTextRow>Demo wallet</TopTextRow>
+        <BottomTextRow>
+          {props.isStreaming ? (
+            <>
+              <LoadingSpinner size={12} />
+              <span style={{ marginInlineStart: "4px" }}>Streaming</span>
+            </>
+          ) : (
+            `${filteredTransactions.length} transactions`
+          )}
+        </BottomTextRow>
+      </InnerColumn>
+      <InnerColumn style={{ alignItems: "flex-end" }}>
+        <TopTextRow>
+          <CurrencyAmountRaw
+            value={-totalTransactionAmount}
+            unit={CurrencyUnit.SATOSHI}
+            symbol
+          />
+        </TopTextRow>
+        <BottomTextRow>
+          {secondsToDurationString(Math.round(props.streamingDuration))}
+        </BottomTextRow>
+      </InnerColumn>
+    </Wrapper>
+  );
+};
+
+const secondsToDurationString = (seconds: number) => {
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const secondsLeft = seconds % 60;
+  const hoursString = hours > 0 ? `${hours}h ` : "";
+  const minutesString = minutes > 0 ? `${minutes}m ` : "";
+  const secondsString = secondsLeft > 0 ? `${secondsLeft}s` : "";
+  return `${hoursString}${minutesString}${secondsString}`;
+};
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px;
+  border: 1.6px solid #f2f2f2;
+  border-radius: 12px;
+  margin-bottom: 32px;
+  margin-top: 16px;
+`;
+
+const InnerColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const TopTextRow = styled.span`
+  color: black;
+  font-size: 14px;
+  font-weight: 700;
+  margin-bottom: 6px;
+`;
+
+const BottomTextRow = styled.div`
+  color: #666666;
+  font-size: 14px;
+  font-weight: 500;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 16px;
+  justify-content: center;
+`;
+
+export default StreamingTransactionChip;

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

@@ -0,0 +1,93 @@
+import styled from "@emotion/styled";
+import {
+  ChannelClosingTransaction,
+  ChannelOpeningTransaction,
+  IncomingPayment,
+  OutgoingPayment,
+  RoutingTransaction,
+  Transaction,
+  Withdrawal,
+} from "@lightsparkdev/lightspark-sdk";
+import { Maybe } from "../common/types";
+import CurrencyAmount from "./CurrencyAmount";
+
+export const getTransactionType = (typename: string): string => {
+  switch (typename) {
+    case "Deposit":
+      return "L1 Deposit";
+    case "Withdrawal":
+      return "L1 Withdraw";
+    case "ChannelOpeningTransaction":
+      return "Channel Open";
+    case "ChannelClosingTransaction":
+      return "Channel Close";
+    case "RoutingTransaction":
+      return "Route";
+    case "OutgoingPayment":
+      return "Payment";
+    case "IncomingPayment":
+      return "Payment Request";
+    default:
+      return "";
+  }
+};
+
+const getTransactionOtherNode = (transaction: Transaction): Maybe<string> => {
+  switch (transaction.typename) {
+    case "Withdrawal":
+      return (transaction as Withdrawal).originId;
+    case "ChannelOpeningTransaction":
+      return (transaction as ChannelOpeningTransaction).channelId;
+    case "ChannelClosingTransaction":
+      return (transaction as ChannelClosingTransaction).channelId;
+    case "OutgoingPayment":
+      return (transaction as OutgoingPayment).destinationId;
+    case "IncomingPayment":
+      return (transaction as IncomingPayment).originId;
+    case "RoutingTransaction":
+      return (transaction as RoutingTransaction).incomingChannelId;
+    default:
+      return undefined;
+  }
+};
+
+const TransactionRow = (props: { transaction: Transaction }) => {
+  return (
+    <TransactionWrapper>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          marginInlineStart: "8px",
+          flex: "1",
+        }}
+      >
+        <div style={{ fontSize: "14px", fontWeight: 500 }}>
+          {getTransactionOtherNode(props.transaction)}
+        </div>
+        <div style={{ fontSize: "10px", color: "#8C8C8C" }}>
+          {getTransactionType(props.transaction.typename)}
+        </div>
+      </div>
+      <div style={{ fontSize: "16px", fontWeight: "bold", color: "#17C27C" }}>
+        <CurrencyAmount
+          amount={props.transaction.amount}
+          displayUnit={props.transaction.amount.preferredCurrencyUnit}
+          shortNumber
+          shortUnit
+          symbol
+        />
+      </div>
+    </TransactionWrapper>
+  );
+};
+
+const TransactionWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 16px;
+  border-bottom: 1px solid #e8e8e8;
+`;
+
+export default TransactionRow;

package/examples/streaming-wallet-extension/src/contentscript/content.ts

@@ -0,0 +1,123 @@
+import { ENABLE_YOUTUBE_AND_TWITCH } from "../common/settings";
+import { VideoPlaybackUpdateMessage } from "../types/Messages";
+import {
+  updateTransactionRows,
+  updateWalletBalances,
+} from "./lightsparkDemoDom";
+import {
+  getDomDetailsForLighstparkDemo,
+  getDomDetailsForTwitch,
+  getDomDetailsForYoutube,
+} from "./videoElementParsers";
+
+let currentTrackingDetails: VideoPlaybackUpdateMessage | null = null;
+let timeUpdateListener: (() => void) | null = null;
+
+const messageReceived = (
+  msg: any,
+  sender: chrome.runtime.MessageSender,
+  sendResponse: (response: any) => void
+) => {
+  console.log("[content.js]. Message received", msg);
+  if (msg.id === "is_video_playing") {
+    sendResponse(currentTrackingDetails?.isPlaying || false);
+  } else if (
+    msg.id === "new_transactions" ||
+    msg.id === "transactions_updated"
+  ) {
+    updateTransactionRows(msg.transactions);
+  }
+};
+
+const startListeningToVideoEvents = (videoElement: HTMLVideoElement) => {
+  console.log(
+    `Beginning listener on: ${JSON.stringify(currentTrackingDetails)}`
+  );
+  if (timeUpdateListener) {
+    videoElement.removeEventListener("timeupdate", timeUpdateListener);
+  }
+  timeUpdateListener = () => {
+    console.log("Time update", videoElement.currentTime);
+    const prevProgress = currentTrackingDetails?.progress || 0;
+    currentTrackingDetails = {
+      ...currentTrackingDetails!,
+      progress: videoElement.currentTime,
+      duration: videoElement.duration,
+      prevProgress: prevProgress,
+    };
+    // No time updates while seeking.
+    if (
+      videoElement.seeking ||
+      Math.abs(videoElement.currentTime - prevProgress) > 2
+    )
+      return;
+    chrome.runtime
+      .sendMessage({ id: "video_progress", ...currentTrackingDetails })
+      .then((response) => {
+        if (response.amountToPay > 0) {
+          console.log(`Paying ${response.amountToPay} msats!`);
+        }
+      });
+  };
+  const playListener = () => {
+    console.log("Play event");
+    currentTrackingDetails = {
+      ...currentTrackingDetails!,
+      isPlaying: true,
+    };
+    chrome.runtime.sendMessage({ id: "video_play", ...currentTrackingDetails });
+  };
+  const pauseListener = () => {
+    console.log("Pause event");
+    currentTrackingDetails = {
+      ...currentTrackingDetails!,
+      isPlaying: false,
+    };
+    chrome.runtime.sendMessage({
+      id: "video_pause",
+      ...currentTrackingDetails,
+    });
+  };
+  videoElement.addEventListener("timeupdate", timeUpdateListener);
+  videoElement.addEventListener("play", playListener);
+  videoElement.addEventListener("pause", pauseListener);
+};
+
+chrome.runtime.onMessage.addListener(messageReceived);
+
+const afterDOMLoaded = (numRetries: number) => {
+  console.log("[content.js]. DOM loaded");
+  const isLightsparkDemo =
+    window.location.host.includes("lightspark") ||
+    window.location.host.includes("localhost") ||
+    window.location.host.includes("sparkinfra.net");
+  const parseResponse =
+    window.location.host.includes("youtube") && ENABLE_YOUTUBE_AND_TWITCH
+      ? getDomDetailsForYoutube()
+      : window.location.host.includes("twitch") && ENABLE_YOUTUBE_AND_TWITCH
+      ? getDomDetailsForTwitch()
+      : getDomDetailsForLighstparkDemo();
+
+  if (parseResponse) {
+    currentTrackingDetails = parseResponse.trackingDetails;
+    startListeningToVideoEvents(parseResponse.videoElement);
+    chrome.runtime.sendMessage({
+      ...parseResponse.trackingDetails,
+      id: "video_details",
+    });
+    if (isLightsparkDemo) {
+      updateWalletBalances();
+    }
+  } else if (numRetries < 10) {
+    // Retry in a second to see if the page loads.
+    // TODO: Consider whether we need to use a navigation listener to detect video page changes for SPAs where the
+    // load event won't re-fire.
+    setTimeout(() => afterDOMLoaded(numRetries + 1), 1000);
+  }
+};
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", () => afterDOMLoaded(0));
+} else {
+  afterDOMLoaded(0);
+}

package/examples/streaming-wallet-extension/src/contentscript/lightsparkDemoDom.tsx

@@ -0,0 +1,113 @@
+import {
+  CurrencyAmount,
+  Transaction,
+  TransactionStatus,
+} from "@lightsparkdev/lightspark-sdk";
+
+type Balances = {
+  viewerBalance: CurrencyAmount;
+  creatorBalance: CurrencyAmount;
+};
+let initialBalances: Balances | null = null;
+
+export const updateWalletBalances = async () => {
+  const { balances } = await getWalletBalances();
+  initialBalances = balances;
+  renderBalances(balances);
+};
+
+const renderBalances = async (balances: Balances | null) => {
+  if (!balances) {
+    return;
+  }
+  window.postMessage(
+    {
+      type: "FROM_CONTENT_SCRIPT",
+      id: "balances_changed",
+      viewerBalance: balances.viewerBalance,
+      creatorBalance: balances.creatorBalance,
+    },
+    "*"
+  );
+};
+
+const transactions = new Map<string, Transaction>();
+
+export const updateTransactionRows = async (
+  changedTransactions: Transaction[]
+) => {
+  changedTransactions.forEach((transaction) => {
+    transactions.set(transaction.id, transaction);
+  });
+  const sortedTransactions = Array.from(transactions.values()).sort((a, b) =>
+    b.createdAt.localeCompare(a.createdAt)
+  );
+  window.postMessage(
+    {
+      type: "FROM_CONTENT_SCRIPT",
+      id: "transactions_changed",
+      transactions: sortedTransactions,
+    },
+    "*"
+  );
+  fakeBalanceChanges();
+};
+
+const fakeBalanceChanges = () => {
+  if (!initialBalances) {
+    return;
+  }
+
+  console.log("initialBalances", JSON.stringify(initialBalances));
+  let viewerBalance = initialBalances.viewerBalance;
+  let creatorBalance = initialBalances.creatorBalance;
+  for (const t of Array.from(transactions.values())) {
+    if (t.status !== TransactionStatus.SUCCESS) {
+      continue;
+    }
+
+    if (
+      t.amount.preferredCurrencyUnit !== viewerBalance.preferredCurrencyUnit ||
+      t.amount.originalUnit !== viewerBalance.originalUnit
+    ) {
+      console.warn("Transaction amount units do not match wallet balance");
+      continue;
+    }
+
+    viewerBalance = addCurrencyAmounts(viewerBalance, negativeAmount(t.amount));
+    creatorBalance = addCurrencyAmounts(creatorBalance, t.amount);
+  }
+  console.log("new values", JSON.stringify({ viewerBalance, creatorBalance }));
+  renderBalances({ viewerBalance, creatorBalance });
+};
+
+const addCurrencyAmounts = (
+  amount1: CurrencyAmount,
+  amount2: CurrencyAmount
+) => {
+  return {
+    ...amount1,
+    originalValue: amount1.originalValue + amount2.originalValue,
+    preferredCurrencyValueApprox:
+      amount1.preferredCurrencyValueApprox +
+      amount2.preferredCurrencyValueApprox,
+    preferredCurrencyValueRounded:
+      amount1.preferredCurrencyValueRounded +
+      amount2.preferredCurrencyValueRounded,
+  };
+};
+
+const negativeAmount = (amount: CurrencyAmount) => {
+  return {
+    ...amount,
+    originalValue: -amount.originalValue,
+    preferredCurrencyValueApprox: -amount.preferredCurrencyValueApprox,
+    preferredCurrencyValueRounded: -amount.preferredCurrencyValueRounded,
+  };
+};
+
+const getWalletBalances = () => {
+  return chrome.runtime.sendMessage({
+    id: "get_streaming_wallet_balances",
+  }) as Promise<{ balances: any }>;
+};

package/examples/streaming-wallet-extension/src/contentscript/videoElementParsers.ts

@@ -0,0 +1,92 @@
+import { ChannelSource, VideoPlaybackUpdateMessage } from "../types/Messages";
+
+type ParseResult = {
+  trackingDetails: VideoPlaybackUpdateMessage;
+  videoElement: HTMLVideoElement;
+};
+
+export const getDomDetailsForYoutube = (): ParseResult | null => {
+  const searchParams = new URLSearchParams(window.location.search);
+  if (!searchParams.has("v")) {
+    return null;
+  }
+  const userLink = document.querySelector(
+    ".ytd-watch-metadata .ytd-channel-name a"
+  ) as HTMLAnchorElement;
+  const videoElement = document.querySelector(
+    "#movie_player video"
+  ) as HTMLVideoElement;
+  if (!userLink || !videoElement) {
+    return null;
+  }
+  const newTrackingDetails = {
+    videoID: searchParams.get("v") || "",
+    videoName:
+      (document.querySelector('meta[name="title"]') as HTMLMetaElement)
+        ?.content ||
+      document.querySelector("title")?.textContent ||
+      "",
+    channelID: userLink.href.slice(
+      userLink.href.indexOf("/channel/") + "/channel/".length
+    ),
+    channelName: userLink.textContent || "",
+    channelSource: ChannelSource.youtube,
+    progress: 0,
+    duration: videoElement?.duration || 0,
+    isPlaying: !videoElement.paused,
+  };
+  return { trackingDetails: newTrackingDetails, videoElement };
+};
+
+export const getDomDetailsForTwitch = (): ParseResult | null => {
+  let videoID = "livestream";
+  if (window.location.pathname.includes("/videos/")) {
+    const index = window.location.pathname.lastIndexOf("/videos/");
+    videoID = window.location.pathname.slice(index + "/videos/".length);
+    // TODO(Jeremy): If we only care about live, probably just return null here.
+  }
+
+  // There may be a better way to do this, but the class names in twitch are obfuscated :-/.
+  const userLink = Array.from(
+    document.querySelectorAll(".channel-info-content a")
+  ).filter((it) => {
+    return it.classList.length === 0;
+  })[0] as HTMLAnchorElement;
+  const videoElement = document.querySelector(
+    ".video-player video"
+  ) as HTMLVideoElement;
+
+  const newTrackingDetails = {
+    videoID: videoID,
+    videoName:
+      document.querySelector('*[data-a-target="stream-title"]')?.textContent ||
+      "",
+    channelID: userLink?.href?.slice(userLink?.href.lastIndexOf("/") + 1) || "",
+    channelName: userLink?.textContent || "",
+    channelSource: ChannelSource.twitch,
+    progress: 0,
+    duration: videoElement?.duration || 0,
+    isPlaying: !videoElement.paused,
+  };
+  return { trackingDetails: newTrackingDetails, videoElement };
+};
+
+export const getDomDetailsForLighstparkDemo = (): ParseResult | null => {
+  const videoElement = document.querySelector(
+    "video#stream-sats-video"
+  ) as HTMLVideoElement;
+  if (!videoElement) {
+    return null;
+  }
+  const newTrackingDetails = {
+    videoID: "ls_demo",
+    videoName: "Lightspark Streaming Demo",
+    channelID: "ls",
+    channelName: "Lightspark",
+    channelSource: ChannelSource.lightspark,
+    progress: 0,
+    duration: videoElement?.duration || 0,
+    isPlaying: !videoElement.paused,
+  };
+  return { trackingDetails: newTrackingDetails, videoElement };
+};

package/examples/streaming-wallet-extension/src/index.css

@@ -0,0 +1,16 @@
+body {
+  width: 300px;
+  height: 380px;
+  margin: 0;
+  font-family: "Montserrat", sans-serif;
+  font-weight: 500;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#root {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}

package/examples/streaming-wallet-extension/src/index.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+import "./index.css";
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById("root")
+);