Make Your own LNC-powered Application
Build the LNC demo app and and learn how to use it to build your own.
Lightning Node Connect (LNC) is a standard to create an end-to-end encrypted connection between your node and a web or mobile app. It is used by Lightning Terminal, Alby and Zeus to give convenient access to your node across a firewall or NAT.
LNC is bundled in litd and is available as a standalone npm package for React Native and web.
In this demonstration we are going to use the LNC demo web app to build our own application that connects to our Lightning node.
Intro
In the initial state, this demo app allows a user to enter their node alias into a form. This alias is then used to generate a Lightning meme. This guide will walk you through the process of adding LNC to the web app to allow users to connect their node and automatically pull in their node alias to be used to generate custom images.
You will need to have an LND Lightning node with litd available.
Installation
NodeJS is required to install the demo application.
Clone the repo and checkout the pre-lnc branch
git clone https://github.com/HannahMR/lnc-web/
cd lnc-web/meme-demo
git checkout pre-lnc
Install the dependencies
Start the web app
Your browser should open to http://localhost:3000 where you will see the application’s landing page.
First we are going to a look at the structure of this simple web app. Notable are components and pages. By default only one page is available: Home.tsx. There is one component for our page, and one that the node alias into the form to generate our meme.
Upgrade with LNC
We’re going to make the changes that automatically pull the node alias.
First we’ll add lnc-web as a dependency by adding the below line the the list of dependencies in the package.json
file.
@lightninglabs/lnc-web": "0.2.1-alpha",
npm install
And for this project we’ve created a useLNC hook. We’ll need to create a new directory inside src called hooks, and add the useLNC.ts
file.
useLNC.ts
We’ll add two new pages, Login and Connect, which give users the forms they need to enter their connection info and then pass that info along to the LNC module.
Login.tsx
Connect.tsx
App.tsx
We’ll also need to make sure that our App file knows about these new pages. We’ll import the two new pages.
import Connect from './pages/Connect';
import Login from './pages/Login';
Next we’ll add these paths to our routes.
<Route path="connect" element={<Connect />} /> <Route path="login" element={<Login />} />
Now we will need to update our MakeMeme component, we’ll alter that to import the useLNC hook, check that we are connected to a node, and then remove the form we had been using to collect node alias data, and replace it with the alias of the node that we are connected to.
First, adding the useLNC hook.
import useLNC from '../hooks/useLNC';
Then we’ll add two constants to MakeMeme.
const {lnc} = useLNC();
const [info, setInfo] = useState<any>();
We’ll now also need to remove some obsolete code.
We no longer need to track memeText as we will be pulling that in from our connection to the node.
const [memeText, setMemeText] = useState(null);
We can remove most of our form as we no longer need to directly collect this information from our users.
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
<Form.Label><strong>Write your LNC Node here</strong></Form.Label>
<Form.Control
as="textarea"
rows={2}
placeholder="Paste your node alias here, then click generate"
onChange={(e) => setMemeText(e.target.value)}
/>
</Form.Group>
We’ll add a useEffect function adding the below code just after our constants at about line 15.
useEffect(() => {
if (lnc.isConnected) {
const sendRequest = async () => {
const res = await lnc.lnd.lightning.getInfo();
setInfo(res);
};
sendRequest();
}
}, [lnc.isConnected, lnc.lnd.lightning]);
if (!lnc.isConnected || !info) return null;
We’ll need to update the variable we are using for the text that we will be adding to our meme in two spots. On what is likely now line 54 and line 89 we’ll change
{memeText}
to
{info.alias}
Page.tsx
We’ll need to update our Page component as well. First we are importing our useLNC hook.
import useLNC from '../hooks/useLNC';
Then we’ll add a constant for LNC to Page.
const { lnc } = useLNC();
We add the below inside Navbar.Collapse
<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>
Home.tsx
Of course our home page will need to know about our new connect option.
Again we’ll import the useLNC hook
import useLNC from '../hooks/useLNC';
Add we’ll add a constant inside Home.
const { lnc } = useLNC();
Inside the page div we’ll add a paragraph that displays instructions based upon if a user is connected to our web app.
<p className="text-center">
{lnc.isConnected
? 'You are now connected to your Lightning node.'
: 'Connect or Login to view your Lightning node info.'}
</p>
Connect your node to the upgraded app
After all these changes we should be able to refresh our app and receive a message asking us to connect our node.
This is where we need to head over to our node and use litd to generate a connection string.
litcli --lndtlscertpath ~/.lit/tls.cert sessions add --label=”LNC Connect!”
Note that you may need to adjust this connection to suit your node, for example by adding the --testnet
flag if you are operating there. Be sure to omit the --type admin
flag so that a read only connection string is generated. We should only require the permissions that we absolutely need.
After entering your litd UI password you can find your connection string in the output labeled as “pairing_secret_mnemonic.”
We can then head back to our web app, click the connect button, enter our connection phrase, set a password and connect!
Once we are connected we’ll see the option to generate a meme:
Push the button and see what meme you get!
Congratulations!
Last updated