<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Dominique Blomsma</title>
    <description>The latest articles on DEV Community by Dominique Blomsma (@dominiqueblomsma).</description>
    <link>https://dev.to/dominiqueblomsma</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F918478%2F9a1a46cd-6476-49fe-92dc-5d7dd47e5e2c.png</url>
      <title>DEV Community: Dominique Blomsma</title>
      <link>https://dev.to/dominiqueblomsma</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/dominiqueblomsma"/>
    <language>en</language>
    <item>
      <title>XUMM .NET SDK Tutorial</title>
      <dc:creator>Dominique Blomsma</dc:creator>
      <pubDate>Wed, 31 Aug 2022 15:25:33 +0000</pubDate>
      <link>https://dev.to/dominiqueblomsma/xumm-net-sdk-tutorial-b22</link>
      <guid>https://dev.to/dominiqueblomsma/xumm-net-sdk-tutorial-b22</guid>
      <description>&lt;h1&gt;
  
  
  Server-side Blazor App tutorial
&lt;/h1&gt;

&lt;p&gt;The &lt;a href="https://github.com/XRPL-Labs/XUMM.NET.SDK"&gt;XUMM.NET.SDK&lt;/a&gt; repository contains a server-side Blazor App including examples for all the Xumm API endpoints.&lt;/p&gt;

&lt;p&gt;Configuring the sample project is done in 4 easy steps explained below.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Clone Repository
&lt;/h2&gt;

&lt;p&gt;Clone the &lt;a href="https://github.com/XRPL-Labs/XUMM.NET.SDK.git"&gt;XUMM.NET.SDK&lt;/a&gt; repository to get started.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Xumm API Credentials
&lt;/h2&gt;

&lt;p&gt;You need to &lt;a href="https://apps.xumm.dev/create-application"&gt;create a new application&lt;/a&gt; in the Xumm Developer Console. If this will be your first application you need to register an account or continue with GitHub or Xumm.&lt;/p&gt;

&lt;p&gt;After creating your new application, you will be redirected to a page showing your &lt;code&gt;API Key&lt;/code&gt; and &lt;code&gt;API Secret&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--8t405cjg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/blf8zyevusbvtikcmjrg.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--8t405cjg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/blf8zyevusbvtikcmjrg.PNG" alt="API Credentials" width="880" height="238"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Configure API Credentials
&lt;/h2&gt;

&lt;p&gt;Navigate to &lt;code&gt;~/examples/XUMM.Net.ServerApp/&lt;/code&gt; and open &lt;code&gt;appsettings.json&lt;/code&gt; or create a copy to &lt;code&gt;appsettings.Development.json&lt;/code&gt;. Paste your API Key and Secret in the designated fields so you will have a configuration file such as:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"Xumm"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"RestClientAddress"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"https://xumm.app/api/v1"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"ApiKey"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"0d1049ef-8f0b-4ea4-bcab-4b96fa7bdcc5"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"ApiSecret"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"a4733bb3-4cbd-4e70-871c-6ab891f9f6db"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="err"&gt;...&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  4. Explore the calls
&lt;/h2&gt;

&lt;p&gt;Run the &lt;code&gt;XUMM.NET.ServerApp&lt;/code&gt; project by for example opening the solution file &lt;code&gt;~/src/XUMM.NET.SDK.sln&lt;/code&gt; in Visual Studio and set the project &lt;code&gt;XUMM.NET.ServerApp&lt;/code&gt; as startup project and hit F5.&lt;br&gt;
You can now play around with the implemented Xumm API calls.&lt;/p&gt;
&lt;h3&gt;
  
  
  User Sign In
&lt;/h3&gt;

&lt;p&gt;You can find an example of the User Sign In method that also subscribe to a payload specific websocket to receive live &lt;a href="https://xumm.readme.io/docs/payload-status"&gt;status updates&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--fs2pGMKr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oeaffd2ehjvrbxxdryk5.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--fs2pGMKr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oeaffd2ehjvrbxxdryk5.PNG" alt="Scanned QR" width="880" height="389"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A message box will be shown indicating if the user signed or rejected the sign in request as shown below.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--KoJq2cJ9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6g1vwtz3nkm4uj57gs1.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--KoJq2cJ9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6g1vwtz3nkm4uj57gs1.PNG" alt="Signed" width="880" height="388"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can deploy the Blazor App and configure a Webhook URL in the Application Details sections of the &lt;a href="https://apps.xumm.dev/"&gt;Xumm Developer Console&lt;/a&gt; to receive &lt;a href="https://xumm.readme.io/docs/payload-status#webhook"&gt;webhooks&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;The default pattern of the webhook URL is &lt;code&gt;/Xumm/Webhook&lt;/code&gt; but this can be changed in &lt;code&gt;Program.cs&lt;/code&gt; by changing &lt;code&gt;app.MapXummControllerRoute();&lt;/code&gt; to anything like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight csharp"&gt;&lt;code&gt;&lt;span class="n"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;MapXummControllerRoute&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;pattern&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s"&gt;"/Webhooks/Xumm"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A simple implementation of caching the &lt;code&gt;USER_TOKEN&lt;/code&gt; is done in &lt;code&gt;XummWebhookProcessor&lt;/code&gt; to set an example on how the &lt;code&gt;IXummWebhookProcessor&lt;/code&gt; can be implemented.&lt;/p&gt;

</description>
      <category>dotnet</category>
      <category>sdk</category>
      <category>xrpl</category>
      <category>xumm</category>
    </item>
  </channel>
</rss>
