@lightsparkdev/lightspark-sdk 0.1.6 → 0.2.0

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

@@ -1,151 +0,0 @@
-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

@@ -1,95 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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

@@ -1,123 +0,0 @@
-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

@@ -1,113 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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")
-);