Skip to content

Repository files navigation

Nano Stream Tip

Nano Stream Tip lets you accept XNO (Nano currency) using NanoPay.me, and then sends an alert which will be displayed live on your Twitch or Youtube stream via Streamer.bot.

image

Server config

The server settings are configurable with a .env file.

I have included an EXAMPLE.ENV, but basically this needs to contain the following:

NANOPAY_TOKEN= This should be your NanoPay.me API token.
COINKGECKO_API_KEY= This should be your Coingecko API token...
STREAMERBOT_ACTION_ID= Right click on your Action in streamer.bot and copy/paste the ID
STREAMERBOT_ACTION_NAME= The name of the Action in streamer.bot
STREAMERBOT_URL= URL for your tunnel to streamer.bot
NANO_ADDRESS= Your Nano wallet address, as in... the wallet you want the funds to be sent to.
REDIRECT_URL= The website you want the viewer to be redirected to after they have payed.
STREAM_CHANNEL= Your twitch channel, like twitch.tv/jenoki. Don't need the https here.

Sign up with NanoPay.me to get your own API token.
You'll also need to create a Webhook in NanoPay.Me, and set the "Hook URL" to your backend, followed by /nanopay_webhook e.g. https://yourbackend.url/nanopay_webhook

Streamer.bot config

You'll need to create an "Action" in streamer bot
Name it "Nano Tip Alert"
(and while you're at it, right click on the name and copy the Action ID, as you'll need it for your .env)
In the "Sub-Actions" section, right click and go to Add>Core>C# Execute C# Code
Replace everything in that box with the following

using System;

public class CPHInline
{
    public bool Execute()
    {
        string tipName    = args["tipName"].ToString();
        string tipAmount  = args["tipAmount"].ToString();
        string tipAmountUsd = args["tipAmountUsd"].ToString();
        string tipMessage = args["tipMessage"].ToString();

        string jsonPayload = $@"{{
            ""event"": ""nano_tip"",
            ""name"": ""{tipName}"",
            ""amount"": ""{tipAmount}"",
            ""amountUsd"": ""{tipAmountUsd}"",
            ""message"": ""{tipMessage}""
        }}";

        CPH.WebsocketBroadcastJson(jsonPayload);
        return true;
    }
}

Click Compile, then Compile and Save.

Enable WebSocket Server

Set to Auto Start
Address: 127.0.0.1
Port: 8080
Start Server

Enable HTTP Server

Set to Auto Start
Address: 127.0.0.1
Port: 7474 Start Server

Frontend Config (Your tip page!)

The frontend is the images folder and the index.html.
You can edit and style index.html, and add images/logos as you see fit!

You'll certainly need to change the following line in index.html:

const backendURL = "https://api.jenoki.net"; // Change this to wherever you're hosting your backend.
You'll need to point this to wherever you're hosting the server.js etc.

Change the channel/user who is being tipped:

<h1>Tip Jenoki<br>with Ӿ (Nano)!</h1>
Change that to your own channel name!

I would recommend changing the minimum tip amount to whatever you'd prefer

<input type="number" id="amount" placeholder="Amount in Ӿ (XNO)" min="0.01" step="0.01" required><br>
On this line change the min="0.01" to whatever value you like.

Overlay Alert

image

I've included a very basic example alert overlay (nano-tip-alert-demo.html).
You can check the source and have a look at the WebSocket section.
That's how the tip info will be sent from streamer.bot into your overlay.

See it live in action, maybe...

I sometimes stream on https://twitch.tv/jenoki
what? i gotta plug my channel somehwere ok?

About

A NanoPay.me / Streamer.bot tip integration for Twitch streams.

Topics

Resources

Stars

8 stars

Watchers

1 watching

Forks

Releases

Packages

Used by

Contributors

Languages