From 3aa29f03939198bd97922cecd5273bd72a880e4b Mon Sep 17 00:00:00 2001
From: janniks <6362150+janniks@users.noreply.github.com>
Date: Sat, 2 Mar 2024 12:47:05 +0100
Subject: [PATCH] chore: add ui elements to storybook (#370)

Co-authored-by: janniks <janniks@users.noreply.github.com>
---
 packages/connect/src/stories/ConnectPage.tsx | 85 +++++++++++++++++---
 1 file changed, 72 insertions(+), 13 deletions(-)

diff --git a/packages/connect/src/stories/ConnectPage.tsx b/packages/connect/src/stories/ConnectPage.tsx
index e04a084d..f58bb567 100644
--- a/packages/connect/src/stories/ConnectPage.tsx
+++ b/packages/connect/src/stories/ConnectPage.tsx
@@ -1,23 +1,82 @@
-import { clearSelectedProviderId } from '@stacks/connect-ui';
-import { showConnect } from '../ui';
+import { getSelectedProviderId } from '@stacks/connect-ui';
+import { useReducer } from 'react';
+import { disconnect, showConnect, showSignMessage } from '../ui';
 
 export const ConnectPage = ({ children }: { children?: any }) => {
-  function connect() {
-    showConnect({
-      appDetails: {
-        name: 'Connect Demo',
-        icon: window.location.origin + '/favicon.ico',
-      },
-    });
-  }
+  const refresh = useReducer(x => x + 1, 0)[1];
+
+  const selectedProviderId = getSelectedProviderId();
 
   return (
-    <div>
-      <button onClick={connect}>Connect Wallet</button>
-      <button onClick={() => clearSelectedProviderId()}>Disconnect</button>
+    <div style={{ fontFamily: 'monospace' }}>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '16px',
+        }}
+      >
+        <div>
+          <code>selectedProviderId</code>:{' '}
+          {typeof selectedProviderId === 'undefined'
+            ? 'undefined'
+            : JSON.stringify(selectedProviderId)}{' '}
+          <button onClick={() => refresh()}>
+            <code>Rerender</code>
+          </button>
+        </div>
+
+        <button
+          onClick={() => {
+            showConnect({
+              appDetails: {
+                name: 'Connect Demo',
+                icon: window.location.origin + '/favicon.ico',
+              },
+              onFinish: d => {
+                alert(JSON.stringify(d, null, 2));
+                refresh();
+              },
+              onCancel: () => refresh(),
+            });
+          }}
+        >
+          <code>showConnect()</code>
+        </button>
+
+        <button
+          onClick={() => {
+            showSignMessage({
+              appDetails: {
+                name: 'Connect Demo',
+                icon: window.location.origin + '/favicon.ico',
+              },
+              message: 'test',
+              onFinish: d => {
+                alert(JSON.stringify(d, null, 2));
+                refresh();
+              },
+              onCancel: () => refresh(),
+            });
+          }}
+        >
+          <code>showSignMessage()</code>
+        </button>
+
+        <button
+          onClick={() => {
+            disconnect();
+            refresh();
+          }}
+        >
+          <code>disconnect()</code>
+        </button>
+      </div>
+
       {children}
       <div
         style={{
+          marginTop: '16px',
           backgroundColor: '#f0f0f0',
           height: '2000px', // very high, to test scrolling
         }}