npm - @lightsparkdev/lightspark-sdk - Versions diffs - 0.1.6 → 0.2.0 - Mend

@lightsparkdev/lightspark-sdk 0.1.6 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (123) hide show

package/examples/streaming-wallet-extension/package.json DELETED Viewed

@@ -1,77 +0,0 @@
-{
-  "name": "@lightsparkdev/lightspark-streaming-example",
-  "version": "1.0.1",
-  "private": true,
-  "dependencies": {
-    "@babel/core": "^7.16.0",
-    "@craco/craco": "^7.0.0",
-    "@emotion/css": "^11.10.5",
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "@lightsparkdev/lightspark-sdk": "file:../../",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
-    "@svgr/webpack": "^5.5.0",
-    "babel-loader": "^8.2.3",
-    "babel-plugin-named-asset-import": "^0.3.8",
-    "babel-preset-react-app": "^10.0.1",
-    "browserslist": "^4.18.1",
-    "case-sensitive-paths-webpack-plugin": "^2.4.0",
-    "css-loader": "^6.5.1",
-    "css-minimizer-webpack-plugin": "^3.2.0",
-    "dotenv": "^10.0.0",
-    "dotenv-expand": "^5.1.0",
-    "eslint": "^8.3.0",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-webpack-plugin": "^3.1.1",
-    "html-webpack-plugin": "^5.5.0",
-    "react": "^17.0.2",
-    "react-app-polyfill": "^3.0.0",
-    "react-dev-utils": "^12.0.1",
-    "react-dom": "^17.0.2",
-    "react-refresh": "^0.11.0",
-    "resolve": "^1.20.0",
-    "resolve-url-loader": "^4.0.0",
-    "sass-loader": "^12.3.0",
-    "source-map-loader": "^3.0.0",
-    "style-loader": "^3.3.1",
-    "terser-webpack-plugin": "^5.2.5",
-    "typescript": "^4.5.4",
-    "uuid": "^9.0.0",
-    "webpack": "^5.64.4",
-    "webpack-dev-server": "^4.6.0",
-    "webpack-manifest-plugin": "^4.0.2",
-    "workbox-webpack-plugin": "^6.4.1"
-  },
-  "scripts": {
-    "start": "craco start",
-    "build": "INLINE_RUNTIME_CHUNK=false craco build",
-    "package": "rm -f streaming-extension.zip && INLINE_RUNTIME_CHUNK=false craco build && zip -r streaming-extension.zip build",
-    "test": "craco test"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@types/chrome": "^0.0.213",
-    "@types/uuid": "^9.0.1",
-    "@types/jest": "^27.4.0",
-    "@types/node": "^16.11.17",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11"
-  }
-}

package/examples/streaming-wallet-extension/public/index.html DELETED Viewed

@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Lightspark Lightning Wallet" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link
-      rel="preload"
-      href="https://fonts.googleapis.com/css?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
-      as="style"
-    />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
-    />
-    <title>Lightspark Wallet</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
-</html>

package/examples/streaming-wallet-extension/public/lightspark_full.png DELETED Viewed

Binary file

package/examples/streaming-wallet-extension/public/lightspark_icon_circle.png DELETED Viewed

Binary file

package/examples/streaming-wallet-extension/public/manifest.json DELETED Viewed

@@ -1,43 +0,0 @@
-{
-  "name": "Lightspark Streaming Money Wallet Demo",
-  "description": "A Lightspark demo that shows money streaming in real-time using the Lightning Network.",
-  "version": "1.0.4",
-  "manifest_version": 3,
-  "action": {
-    "default_popup": "index.html",
-    "default_title": "Lightspark Streaming Money Wallet Demo",
-    "default_icon": "lightspark_icon_circle.png"
-  },
-  "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAx4PZEKMOT+8wEFd8QMoSC++lYxhxf45Wo8zB4DO/ZzEMHPdr5ugvttK8G11L7RVnWQcN2lzKIGbR1S1a5XNnEuv+SlOqv/qKMF+LBao5DOShWQbAg9ImDutSGqPIslQHYurayV8GcZY876NpaOkpCPnKDVddNmSn8MSRB6uYuqlHWn1xk5VDHi6/hDTIcDihEZkRvp/N1UQbjNTCgpCPbejoJ3SFMuCjD9joYo52NOwmEOcrJL4dlFnAnMWlWavlZD5dTol8Yh4VyLZP5thZUZ4IEUG0gpLFV9nue+qvJmge3dJmNYjOSg8QEr7D3feRqhWFRu2O6S5PHMSdd1O06QIDAQAB",
-  "permissions": ["activeTab", "tabs", "storage"],
-  "icons": {
-    "16": "lightspark_icon_circle.png",
-    "32": "lightspark_icon_circle.png",
-    "48": "lightspark_icon_circle.png",
-    "128": "lightspark_icon_circle.png"
-  },
-  "host_permissions": [
-    "https://api.dev.dev.sparkinfra.net/",
-    "https://api.lightspark.com/"
-  ],
-  "content_scripts": [
-    {
-      "matches": [
-        "https://localhost:3000/demos/streaming*",
-        "https://dev.dev.sparkinfra.net/demos/streaming*",
-        "https://app.lightspark.com/demos/streaming*"
-      ],
-      "js": ["./static/js/content.js"]
-    }
-  ],
-  "externally_connectable": {
-    "matches": [
-      "https://localhost:3000/demos/streaming*",
-      "https://dev.dev.sparkinfra.net/demos/streaming*",
-      "https://app.lightspark.com/demos/streaming*"
-    ]
-  },
-  "background": {
-    "service_worker": "./static/js/background.js"
-  }
-}

package/examples/streaming-wallet-extension/public/robots.txt DELETED Viewed

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

package/examples/streaming-wallet-extension/src/App.css DELETED Viewed

@@ -1,53 +0,0 @@
-.app-wrapper {
-  background-color: white;
-  color: black;
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.app-logo {
-  display: inline-block;
-  margin-inline-end: 8px;
-  object-fit: contain;
-  width: 180px;
-}
-.loading-text {
-  display: flex;
-  font-size: 32px;
-  text-align: center;
-  overflow-wrap: break-word;
-  width: 100%;
-  height: 100%;
-  justify-content: center;
-  align-items: center;
-}
-.content-wrapper {
-  flex: 1;
-  width: 100%;
-  overflow: auto;
-}
-.header {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  height: 100px;
-  width: 100%;
-  padding: 32px 24px;
-  box-sizing: border-box;
-  align-items: center;
-}
-.header button {
-  width: 40px;
-  height: 100%;
-  border: none;
-  background: none;
-  color: black;
-  font-size: 26px;
-}

package/examples/streaming-wallet-extension/src/App.tsx DELETED Viewed

@@ -1,425 +0,0 @@
-import styled from "@emotion/styled";
-import {
-  AccountTokenAuthProvider,
-  BitcoinNetwork,
-  CurrencyAmount,
-  CurrencyUnit,
-  LightsparkClient,
-  Transaction,
-  WalletDashboard,
-} from "@lightsparkdev/lightspark-sdk";
-import React from "react";
-import "./App.css";
-import AccountStorage from "./auth/AccountStorage";
-import { reserveStreamingDemoAccountCredentials } from "./auth/DemoAccountProvider";
-import StreamingDemoAccountCredentials from "./auth/StreamingDemoCredentials";
-import VideoProgressCache from "./background/VideoProgressCache";
-import { clearStorageKeepingInstanceId } from "./common/storage";
-import { findActiveStreamingDemoTabs } from "./common/streamingTabs";
-import { Maybe } from "./common/types";
-import CirclePlusIcon from "./components/CirclePlusIcon";
-import CurrencyAmountElement from "./components/CurrencyAmount";
-import CurrencyAmountRaw from "./components/CurrencyAmountRaw";
-import LeftArrow from "./components/LeftArrow";
-import { LoadingSpinner } from "./components/Loading";
-import StreamingTransactionChip from "./components/StreamingTransactionChip";
-import TransactionRow from "./components/TransactionRow";
-import { getWalletClient } from "./lightsparkClientProvider";
-enum Screen {
-  Balance,
-  Transactions,
-  Login,
-}
-const DEMO_VIDEO_ID = "ls_demo";
-function App() {
-  const [walletDashboard, setWalletDashboard] =
-    React.useState<WalletDashboard>();
-  const [transactions, setTransactions] = React.useState<Transaction[]>([]);
-  const [screen, setScreen] = React.useState<Screen>(Screen.Login);
-  const [lightsparkClient, setLightsparkClient] =
-    React.useState<LightsparkClient>();
-  const [credentials, setCredentials] =
-    React.useState<StreamingDemoAccountCredentials | null>();
-  const [isStreaming, setIsStreaming] = React.useState(false);
-  const [demoStreamingDuration, setDemoStreamingDuration] = React.useState(0);
-  React.useEffect(() => {
-    chrome.storage.local
-      .get(["walletDashboard"])
-      .then(async (cachedBalance) => {
-        if (cachedBalance) {
-          setWalletDashboard(cachedBalance.walletDashboard);
-        }
-        const accountStorage = new AccountStorage();
-        let credentials = await accountStorage.getAccountCredentials();
-        if (credentials && Date.now() > credentials.expiresAt) {
-          await clearStorageKeepingInstanceId();
-          credentials = null;
-        }
-        setCredentials(credentials);
-        const client = await getWalletClient(accountStorage);
-        setLightsparkClient(client);
-      });
-    const progressCache = new VideoProgressCache();
-    progressCache.listenForProgressChanges((videoId) => {
-      if (videoId === DEMO_VIDEO_ID) {
-        setDemoStreamingDuration(
-          progressCache.getPlayedDuration(DEMO_VIDEO_ID)
-        );
-      }
-    });
-    progressCache.whenLoaded().then(() => {
-      setDemoStreamingDuration(progressCache.getPlayedDuration(DEMO_VIDEO_ID));
-    });
-    chrome.runtime.onMessage.addListener((message, _sender, _sendResponse) => {
-      if (message.id === "video_play" || message.id === "video_pause") {
-        setIsStreaming(message.isPlaying);
-      } else if (message.id === "video_progress") {
-        progressCache.addProgress(
-          message.videoID,
-          message.prevProgress || 0,
-          message.progress
-        );
-      } else if (message.id === "transactions_updated") {
-        setTransactions(message.transactions);
-      }
-    });
-    findActiveStreamingDemoTabs().then((tabs) => {
-      if (tabs.length === 0) return;
-      chrome.tabs.sendMessage(
-        tabs[0].id!,
-        { id: "is_video_playing" },
-        (isPlaying) => {
-          setIsStreaming(isPlaying);
-        }
-      );
-    });
-  }, []);
-  const joinedTransactions = React.useMemo(() => {
-    const transactionMap = new Map<string, Transaction>();
-    walletDashboard?.recentTransactions.forEach((t) =>
-      transactionMap.set(t.id, t)
-    );
-    transactions.forEach((t) => transactionMap.set(t.id, t));
-    return Array.from(transactionMap.values());
-  }, [walletDashboard, transactions]);
-  const balance = React.useMemo(() => {
-    if (!walletDashboard || !walletDashboard.totalLocalBalance) return null;
-    const baseBalance = walletDashboard.totalLocalBalance;
-    const transactionsInBalance = new Set<string>();
-    walletDashboard?.recentTransactions.forEach((t) =>
-      transactionsInBalance.add(t.id)
-    );
-    const streamingTransactions = transactions.filter(
-      (t) => !transactionsInBalance.has(t.id)
-    );
-    return streamingTransactions.reduce((acc, t) => {
-      if (t.typename !== "OutgoingPayment") return acc;
-      if (
-        t.amount.preferredCurrencyUnit !== baseBalance.preferredCurrencyUnit ||
-        t.amount.originalUnit !== baseBalance.originalUnit
-      ) {
-        console.warn("Transaction amount units do not match wallet balance");
-        return acc;
-      }
-      return {
-        ...acc,
-        originalValue: acc.originalValue - t.amount.originalValue,
-        preferredCurrencyValueApprox:
-          acc.preferredCurrencyValueApprox -
-          t.amount.preferredCurrencyValueApprox,
-        preferredCurrencyValueRounded:
-          acc.preferredCurrencyValueRounded -
-          t.amount.preferredCurrencyValueRounded,
-      };
-    }, baseBalance);
-  }, [walletDashboard, transactions]);
-  React.useEffect(() => {
-    if (!lightsparkClient || !credentials) {
-      return;
-    }
-    setScreen(Screen.Balance);
-    lightsparkClient
-      .getSingleNodeDashboard(
-        credentials.viewerWalletId,
-        BitcoinNetwork.REGTEST,
-        credentials.allocationTime
-      )
-      .then(async (dashboard) => {
-        setWalletDashboard(dashboard);
-        await chrome.storage.local.set({ walletDashboard: dashboard });
-      });
-  }, [lightsparkClient, credentials]);
-  const body = !lightsparkClient ? (
-    <></>
-  ) : screen === Screen.Balance ? (
-    <BalanceScreen
-      balance={balance}
-      transactions={joinedTransactions}
-      streamingDuration={demoStreamingDuration}
-      isStreaming={isStreaming}
-    />
-  ) : screen === Screen.Transactions ? (
-    <TransactionsScreen transactions={joinedTransactions} />
-  ) : (
-    <LoginScreen
-      lightsparkClient={lightsparkClient}
-      onCreatedAccount={async (credentials) => {
-        lightsparkClient?.setAuthProvider(
-          new AccountTokenAuthProvider(
-            credentials.clientId,
-            credentials.clientSecret
-          )
-        );
-        await new AccountStorage().saveAccountCredentials(credentials);
-        setCredentials(credentials);
-      }}
-    />
-  );
-  return (
-    <div className="app-wrapper">
-      {Header(screen, setScreen)}
-      <div className="content-wrapper">{body}</div>
-    </div>
-  );
-}
-function Header(screen: Screen, setScreen: (screen: Screen) => void) {
-  if (screen === Screen.Balance) {
-    return (
-      <div className="header">
-        <img
-          src="lightspark_full.png"
-          className="app-logo"
-          alt="Lightspark logo"
-        />
-        {/* Disabled for now, but goes to the transaction list screen: */}
-        {/* <button onClick={() => setScreen(Screen.Transactions)}>☰</button> */}
-      </div>
-    );
-  } else if (screen === Screen.Transactions) {
-    return (
-      <div className="header">
-        <button onClick={() => setScreen(Screen.Balance)}>
-          <LeftArrow />
-        </button>
-        <HeaderBackText>Transactions</HeaderBackText>
-      </div>
-    );
-  }
-  return (
-    <div className="header">
-      <img
-        src="lightspark_full.png"
-        className="app-logo"
-        alt="Lightspark logo"
-      />
-    </div>
-  );
-}
-function BalanceScreen(props: {
-  balance: Maybe<CurrencyAmount>;
-  transactions: Transaction[];
-  streamingDuration: number;
-  isStreaming: boolean;
-}) {
-  const screenContent = !props.balance ? (
-    <LoadingWrapper>
-      <LoadingSpinner size={48} />
-    </LoadingWrapper>
-  ) : (
-    <>
-      <BalanceLabel>Balance</BalanceLabel>
-      <BigBalance>
-        <CurrencyAmountElement
-          useLocaleString
-          shortUnit
-          amount={props.balance}
-          displayUnit={CurrencyUnit.SATOSHI}
-          symbol
-        />
-      </BigBalance>
-      <SmallBalance>
-        <CurrencyAmountRaw
-          shortNumber
-          shortUnit
-          value={props.balance?.preferredCurrencyValueApprox}
-          unit={props.balance?.preferredCurrencyUnit}
-          symbol
-        />
-      </SmallBalance>
-      {props.transactions.length > 0 ? (
-        <StreamingTransactionChip
-          transactions={props.transactions}
-          streamingDuration={props.streamingDuration}
-          isStreaming={props.isStreaming}
-        />
-      ) : (
-        <InstructionsText style={{ fontSize: "16px" }}>
-          Your wallet is now set up.
-        </InstructionsText>
-      )}
-    </>
-  );
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "end",
-        padding: "0 24px",
-        height: "100%",
-      }}
-    >
-      {screenContent}
-    </div>
-  );
-}
-function LoginScreen(props: {
-  lightsparkClient: LightsparkClient | undefined;
-  onCreatedAccount: (credentials: StreamingDemoAccountCredentials) => void;
-}) {
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [errorText, setErrorText] = React.useState<string | undefined>(
-    undefined
-  );
-  const createWallet = async () => {
-    setIsLoading(true);
-    const creds = await reserveStreamingDemoAccountCredentials();
-    if (creds) {
-      props.onCreatedAccount(creds);
-      setErrorText(undefined);
-    } else {
-      setErrorText("Failed to create wallet.");
-      setTimeout(() => {
-        setErrorText(undefined);
-      }, 3000);
-    }
-    setIsLoading(false);
-  };
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "end",
-        padding: "0 24px",
-        height: "100%",
-      }}
-    >
-      <LoginHeader>One more step</LoginHeader>
-      <InstructionsText>
-        Create a wallet in test mode and we’ll load test funds for the demo.
-      </InstructionsText>
-      <CreateWalletButton onClick={createWallet} disabled={isLoading}>
-        {!isLoading ? (
-          <span style={{ marginInlineEnd: "8px", height: "13px" }}>
-            <CirclePlusIcon />
-          </span>
-        ) : (
-          <></>
-        )}
-        {isLoading ? "Loading..." : "Create Wallet"}
-      </CreateWalletButton>
-      {errorText ? <ErrorText>{errorText}</ErrorText> : <></>}
-    </div>
-  );
-}
-function TransactionsScreen(props: { transactions: Transaction[] }) {
-  return (
-    <div style={{ width: "100%" }}>
-      {props.transactions.map((transaction) => (
-        <TransactionRow transaction={transaction} />
-      ))}
-    </div>
-  );
-}
-const LoadingWrapper = styled.div`
-  display: flex;
-  width: 100%;
-  height: 100%;
-  justify-content: center;
-  align-items: center;
-`;
-const BalanceLabel = styled.p`
-  font-size: 18px;
-  font-weight: 600;
-  color: #666666;
-  margin-bottom: 4px;
-`;
-const BigBalance = styled.div`
-  overflow-wrap: break-word;
-  font-size: 48px;
-  font-weight: 800;
-`;
-const SmallBalance = styled.div`
-  overflow-wrap: break-word;
-  font-size: 16px;
-  font-weight: 500;
-  color: #666666;
-`;
-const InstructionsText = styled.p`
-  font-size: 14px;
-  font-weight: 500;
-  color: #666666;
-  margin-bottom: 32px;
-`;
-const ErrorText = styled.p`
-  font-size: 10px;
-  font-weight: 700;
-  color: red;
-  margin-bottom: 8px;
-`;
-const LoginHeader = styled.p`
-  font-size: 21px;
-  font-weight: 700;
-  color: black;
-  margin-bottom: 0;
-`;
-const HeaderBackText = styled.span`
-  font-size: 18px;
-  color: black;
-  font-weight: 700;
-`;
-const CreateWalletButton = styled.button`
-  background: black;
-  color: white;
-  display: flex;
-  border: none;
-  border-radius: 32px;
-  padding: 14px 24px;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  margin-bottom: 46px;
-  width: 162px;
-  justify-content: center;
-  align-items: center;
-`;
-export default App;

package/examples/streaming-wallet-extension/src/auth/AccountStorage.ts DELETED Viewed

@@ -1,28 +0,0 @@
-import autoBind from "auto-bind";
-import StreamingDemoAccountCredentials from "./StreamingDemoCredentials";
-export default class AccountStorage {
-  constructor() {
-    autoBind(this);
-  }
-  saveAccountCredentials(
-    credentials: StreamingDemoAccountCredentials
-  ): Promise<void> {
-    return chrome.storage.local.set({ credentials });
-  }
-  async getAccountCredentials(): Promise<StreamingDemoAccountCredentials | null> {
-    const savedCreds = (await chrome.storage.local.get("credentials"))
-      ?.credentials;
-    if (
-      !savedCreds ||
-      !savedCreds.clientId ||
-      !savedCreds.clientSecret ||
-      !savedCreds.viewerWalletId
-    ) {
-      return null;
-    }
-    return savedCreds as StreamingDemoAccountCredentials;
-  }
-}