chore: add ui elements to storybook (#370)

Co-authored-by: janniks <janniks@users.noreply.github.com>
hirosystems · Mar 2, 2024 · 3aa29f0 · 3aa29f0
1 parent 23a1970
commit 3aa29f0
Showing 1 changed file with 72 additions and 13 deletions.
diff --git 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
         }}