Improve connect button styles

secretkeylabs · Jul 1, 2024 · 2de7e8e · 2de7e8e
1 parent 4a5cb0d
commit 2de7e8e
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 12 deletions.
diff --git a/example/package-lock.json b/example/package-lock.json
diff --git a/example/package.json b/example/package.json
@@ -22,6 +22,7 @@
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "sats-connect": "file:..",
+    "styled-components": "6.1.11",
     "typescript": "^4.9.5"
   },
   "eslintConfig": {

diff --git a/example/src/App.styles.ts b/example/src/App.styles.ts
@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const ConnectButtonsContainer = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.5rem',
+});
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -12,6 +12,7 @@ import { useLocalStorage } from './hooks';
 import { useCallback, useState } from 'react';
 import GetBtcBalance from './components/GetBtcBalance';
 import GetRunesBalance from './components/GetRunesBalance';
+import { ConnectButtonsContainer } from './App.styles';
 
 function App() {
   const [network, setNetwork] = useLocalStorage<BitcoinNetworkType>(
@@ -22,7 +23,7 @@ function App() {
 
   const isConnected = addressInfo.length > 0;
 
-  const onConnect = async () => {
+  const onConnectLegacy = async () => {
     const response = await Wallet.request('getAccounts', {
       purposes: [AddressPurpose.Payment, AddressPurpose.Ordinals, AddressPurpose.Stacks],
       message: 'Cool app wants to know your addresses!',
@@ -32,7 +33,7 @@ function App() {
     }
   };
 
-  const onConnect2 = useCallback(async () => {
+  const onConnect = useCallback(async () => {
     const res = await Wallet.request('wallet_requestPermissions', undefined);
     if (res.status === 'error') {
       console.error('Error connecting to wallet, details in terminal.');
@@ -76,8 +77,10 @@ function App() {
           <img className="logo" src="/sats-connect.svg" alt="SatsConnect" />
           <NetworkSelector network={network} setNetwork={setNetwork} />
           <p>Click the button to connect your wallet</p>
-          <button onClick={onConnect}>Connect</button>
-          <button onClick={onConnect2}>Connect2</button>
+          <ConnectButtonsContainer>
+            <button onClick={onConnect}>Connect</button>
+            <button onClick={onConnectLegacy}>Connect (Legacy)</button>
+          </ConnectButtonsContainer>
         </header>
       </div>
     );