Merge pull request #44 from lightninglabs/main

[Releases] v0.0.1-alpha.rc2

.github/workflows/npm.yml

@@ -0,0 +1,18 @@
+name: Publish Package to npmjs
+on:
+  release:
+    types: [created]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      # Setup .npmrc file to publish to npm
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16.x'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm ci
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

README.md

@@ -2,6 +2,10 @@
 
 ## A npm module for Lightning Node Connect
 
+## Install
+
+`npm i @lightninglabs/lnc-web`
+
 ## API Design
 
 #### Set-up and connection
@@ -62,20 +66,23 @@ lnc.disconnect();
 
 #### Base functions
 
-All of the services (lnd, loop, pool, faraday) will be objects under the main lnc object. Each services’ sub-services will be underneath each service object, and each sub-service function below that (except in the case of faraday which only has one service - its functions will live directly under it). All service names and function names will be camel-cased.
+All of the services (lnd, loop, pool, faraday) will be objects under the main lnc object. Each services’ sub-services will be underneath each service object, and each sub-service function below that (except in the case of faraday which only has one service - its functions will live directly under it). All service, function, and param names will be camel-cased.
 
 ```
 const { lnd, loop, pool, faraday } = lnc;
 
 // all functions on the base object should have proper types
 // sub-servers exist as objects on each main service
 lnd.lightning.listInvoices();
-lnd.lightning.connectPeer(‘03aa49c1e98ff4f216d886c09da9961c516aca22812c108af1b187896ded89807e@m3keajflswtfq3bw4kzvxtbru7r4z4cp5stlreppdllhp5a7vuvjzqyd.onion:9735’);
+lnd.lightning.connectPeer({ addr: ‘03aa49c1e98ff4f216d886c09da9961c516aca22812c108af1b187896ded89807e@m3keajflswtfq3bw4kzvxtbru7r4z4cp5stlreppdllhp5a7vuvjzqyd.onion:9735’ });
 
 const signature = lnd.signer.signMessage({...params});
 
 const swaps = await loop.swapClient.listSwaps();
-const poolAccount = await pool.trader.initAccount(100000000, 1000);
+const poolAccount = await pool.trader.initAccount({
+   accountValue: 100000000,
+   relativeHeight: 1000
+ });
 
 const insights = await faraday.channelInsights();
 ```
@@ -123,3 +130,7 @@ npm run update-protos
 # format schemas
 npm run generate
 ```
+
+## Further documentation
+
+- https://docs.lightning.engineering/lightning-network-tools/lightning-terminal/lnc-npm

demos/connect-demo/README.md

@@ -21,8 +21,104 @@ accessible that you can obtain a pairing phrase from.
    ```sh
    $ npm start
    ```
-   Your browser should open to http://localhost:3000 and you should see the home page
-   below
+   Your browser should open to http://localhost:3000 and you will see the home page.
+
+## LNC Relevant Code
+
+The `LNC` object in this app can be access from any component via the custom React hook
+[useLNC](https://github.com/lightninglabs/lnc-web/blob/main/demos/connect-demo/src/hooks/useLNC.ts).
+This hook returns three variables.
+
+- `lnc` - the global `LNC` instance with full access to all of the `litd` RPC endpoints
+  ```ts
+  const lnc = new LNC({});
+  ```
+- `connect` - a helper function that sets the `pairingPhrase` on the `lnc` object, then
+  attempts to connect to the node. If the connections is successful (`listChannels`
+  succeeds), then it will set the `password` on the `lnc` object which encrypts and stores
+  the keys in the browser's `localStorage`.
+  ```ts
+  const connect = useCallback(async (pairingPhrase: string, password: string) => {
+    lnc.credentials.pairingPhrase = pairingPhrase;
+    await lnc.connect();
+    // verify we can fetch data
+    await lnc.lnd.lightning.listChannels();
+    // set the password after confirming the connection works
+    lnc.credentials.password = password;
+  }, []);
+  ```
+- `login` - a helper function that sets the `password` on the `lnc` object, which is used
+  to decrypt the data stored in `localStorage`. If the password is valid, the connection
+  is made.
+  ```ts
+  const login = useCallback(async (password: string) => {
+    lnc.credentials.password = password;
+    await lnc.connect();
+  }, []);
+  ```
+
+On the [Home](./src/pages/Home.tsx) page, we can detect if the user has connected to the
+node via the `isConnected` field.
+
+```ts
+const { lnc } = useLNC();
+
+return (
+  <Page>
+    <h2 className="text-center">Welcome to lnc-web</h2>
+    <p className="text-center">
+      {lnc.isConnected
+        ? 'You are now connected to your Lightning node.'
+        : 'Connect or Login to view your Lightning node info.'}
+    </p>
+    <GetInfo />
+  </Page>
+);
+```
+
+In the [Page](./src/components/Page.tsx) component that displays the navbar, we can detect
+whether to display a button to Connect, Login, or Logout based on the `lnc.isConnected`
+and `lnc.credentials.isPaired` fields.
+
+```ts
+<Nav className="ml-auto">
+  {lnc.isConnected ? (
+    <>
+      <Navbar.Text>Connected</Navbar.Text>
+      <a href="/">
+        <Button variant="link">Logout</Button>
+      </a>
+    </>
+  ) : lnc.credentials.isPaired ? (
+    <Link to="/login">
+      <Button>Login</Button>
+    </Link>
+  ) : (
+    <Link to="/connect">
+      <Button>Connect</Button>
+    </Link>
+  )}
+</Nav>
+```
+
+In the [GetInfo](./src/components/GetInfo.tsx) component, we call the
+`lnc.lnd.lightning.GetInfo` RPC to fetch the node's information if the user has connected.
+Once the info is set, it is rendered in the table.
+
+```ts
+const { lnc } = useLNC();
+const [info, setInfo] = useState<any>();
+
+useEffect(() => {
+  if (lnc.isConnected) {
+    const sendRequest = async () => {
+      const res = await lnc.lnd.lightning.getInfo();
+      setInfo(res);
+    };
+    sendRequest();
+  }
+}, [lnc.isConnected, lnc.lnd.lightning]);
+```
 
 ## Screenshots