DEV Community

loading...
Cover image for XUMM SDK: 2. Prepare your project and start coding ๐Ÿ”จ

XUMM SDK: 2. Prepare your project and start coding ๐Ÿ”จ

Wietse Wind
Building on the XRP ledger. โ™ฅ Wife, kids, ๐Ÿฆœ & programming (TS, nodejs, Linux ...) - BDFL at @XRPLLabs
ใƒปUpdated on ใƒป3 min read

Previous: 1. Get your XUMM API credentials ๐Ÿ”‘

For this example we will use a Javascript (node) environment. More experienced developers will probably use Typescript or Deno, but to keep this tutorial simple we will use plain Javascript.

  1. Open Visual Studio Code, or your prefrred code editor, and create a new file - File ยป New file
  2. Save your newly created file - File ยป Save. Create a new folder in a suitable project location e.g., xumm-sdk-tutorial and save your new file as index.js
  3. Install the XUMM SDK in your project using the 'node package manager'. Open the terminal - Terminal ยป New terminal and at the prompt enter npm install xumm-sdk
  4. Copy then paste the following boilerplate code into your index.js file:
const {XummSdk} = require('xumm-sdk')
const Sdk = new XummSdk('Your-API-Id', 'Your-API-Secret')

const main = async () => {
  console.log(`Hi! This is where we'll be writing some code`)
}

main()
Enter fullscreen mode Exit fullscreen mode

Please replace Your-API-Id and Your-API-Secret in the code with the credentials obtained from the XUMM Developer Console when you registered your app.

What does this code actually do?

  • First, we 'import' the XUMM SDK that we installed using npm into our code - step 3 above. We are using the xumm-sdk package, and we are calling it XummSdk in our code.
  • we then initialize a new instance of the SDK, which we call Sdk. We will use this one later in the project as we don't interact with the XUMM SDK just yet. While not needed yet in the project the dummy API Key and API Secret need to be inserted here.
  • We then define a function called main and we 'tell' node that this function is asynchronous (async); meaning we can run code, wait for a response, then continue running more code.
  • In the function we have just created, we then tell the code to output a message to the terminal, using the console.log method.
  • Lastly, we call our main function so the code will actually run.

Now let's run this code. In the terminal panel, type:

node index.js
Enter fullscreen mode Exit fullscreen mode

This will tell node to run all code in your index.js file. You should receive the message Hi! This is where we'll be writing some code in your terminal and be back at the prompt awaiting furher instruction.

Run your code :)

If you have your API Key and API Secret in place (see placeholder values in code above) you can check if everything is working by asking the XUMM Platform to return your registered XUMM app name.

Replace the line of code containing console.log(...) with a ping request to the XUMM platform:

const appInfo = await Sdk.ping()
Enter fullscreen mode Exit fullscreen mode

This line of code calls the ping method of the XUMM SDK. We await the results, as it may take a brief moment to connect to the XUMM platform and get a response. When we get a response, we are making the results accessible under the name appInfo.

Now let us return the application name we retrieved from the XUMM platform to the console by using console.log once again. When you start typing, Visual Studio Code will suggest available properties:

Code autocomplete

Our main code should now look like this:

const main = async () => {
  const appInfo = await Sdk.ping()
  console.log(appInfo.application.name)
}
Enter fullscreen mode Exit fullscreen mode

Let's test the code:
Sample code

It looks like we are able to reach the XUMM platform ๐ŸŽ‰ ๐Ÿ˜Ž

Next:

3. Your first payload ๐Ÿ””

4. Verify the results โ›‘ and push ๐Ÿš€
5. Security & finishing touch ๐ŸŽ‰

Resources ๐Ÿ“š

If you want to learn more about the XUMM SDK, platform, documentation, etc., make sure to check out:

Discussion (0)