From f4526b1106c675a93d6d55ec2117c8f60d4bb72c Mon Sep 17 00:00:00 2001
From: Wietse Wind <mail@wietse.com>
Date: Wed, 9 Nov 2022 02:30:25 +0100
Subject: [PATCH] Improve sample & readme

---
 README.md         | 47 ++++++++++++++++++++++++++++++++++++++++++++++-
 sample/index.html | 24 +++++++++++++++++++-----
 2 files changed, 65 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 6937966..9bd43bb 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,52 @@ NPM:
 
 ## Sample:
 
-https://github.com/XRPL-Labs/XummPkce/blob/main/sample/index.html
+#### Promise based sample
+
+```javascript
+const xumm = new XummPkce("uuid-uuid-uuid-uuid");
+
+const xummSignInHandler = (state) => {
+  const { sdk, me } = state;
+  console.log("state", me);
+  // Also: sdk » xumm-sdk (npm)
+};
+// To pick up on mobile client redirects:
+xumm.on("retrieved", async () => {
+  console.log("Retrieved: from localStorage or mobile browser redirect");
+  xummSignInHandler(await xumm.state());
+});
+
+// E.g. when clicking a button:
+document.getElementById("somebutton").onclick = () => {
+  xumm.authorize().then((session) => {
+    xummSignInHandler(session);
+  });
+};
+```
+
+#### Event based sample
+
+```javascript
+const xumm = new XummPkce("uuid-uuid-uuid-uuid");
+
+xumm.on("error", (error) => {
+  console.log("error", error);
+});
+
+xumm.on("success", async () => {
+  const state = await xumm.state();
+  console.log("success:", state.me);
+  // Also: state.sdk » xumm-sdk (npm)
+});
+
+xumm.on("retrieved", async () => {
+  console.log("Retrieved: from localStorage or mobile browser redirect");
+  const state = await xumm.state();
+  console.log("retrieved:", state.me);
+  // Also: state.sdk » xumm-sdk (npm)
+});
+```
 
 ### CDN (browser):
 
diff --git a/sample/index.html b/sample/index.html
index 9e06014..a62aefa 100644
--- a/sample/index.html
+++ b/sample/index.html
@@ -66,13 +66,19 @@ <h2>Hello, world!</h2>
       var sdk = null
 
       auth.on('error', error => {
-        alert(
-          'error: ' + error
-          ?.message)
+        console.log('error', error)
       })
 
       auth.on('success', async () => {
-        alert('success: ' + JSON.stringify((await auth.state()).me))
+        // alert('success: ' + JSON.stringify((await auth.state()).me))
+        console.log('success')
+        auth
+          .state()
+          .then(r => {
+            if (r.me) {
+              console.log('success, me', JSON.stringify(r.me))
+            }
+          })
       })
 
       auth.on('retrieved', async () => {
@@ -84,7 +90,15 @@ <h2>Hello, world!</h2>
 
         go()
 
-        alert('retrieved: ' + JSON.stringify((await auth.state()).me))
+        // alert('retrieved: ' + JSON.stringify((await auth.state()).me))
+        console.log('retrieved')
+        auth
+          .state()
+          .then(r => {
+            if (r.me) {
+              console.log('retrieved, me', JSON.stringify(r.me))
+            }
+          })
       })
 
       /**