Set-up native SIWX button

react/react-wagmi-cloudSIWX/package.json

@@ -13,6 +13,7 @@
     "@reown/appkit": "1.7.9",
     "@reown/appkit-adapter-wagmi": "1.7.9",
     "@reown/appkit-siwx": "1.7.9",
+    "@shopify/polaris": "^13.9.5",
     "@tanstack/react-query": "^5.56.2",
     "react": "19.0.0",
     "react-dom": "19.0.0",

react/react-wagmi-cloudSIWX/src/App.tsx

@@ -4,12 +4,14 @@ import { WagmiProvider } from 'wagmi'
 import { useState } from 'react'
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { ActionButtonList } from './components/ActionButtonList'
-import { SmartContractActionButtonList } from './components/SmartContractActionButtonList'
 import { InfoList } from './components/InfoList'
 import { projectId, metadata, networks, wagmiAdapter } from './config'
 
 import { CloudAuthSIWX } from '@reown/appkit-siwx'
+import { AppProvider } from '@shopify/polaris';
+import '@shopify/polaris/build/esm/styles.css';
+import { ConnectButton } from './components/ConnectButton'
+import enTranslations from '@shopify/polaris/locales/en.json';
 
 import "./App.css"
 
@@ -36,43 +38,24 @@ createAppKit({
 })
 
 export function App() {
-  const [transactionHash, setTransactionHash] = useState<`0x${string}` | undefined>(undefined);
-  const [signedMsg, setSignedMsg] = useState('');
-  const [balance, setBalance] = useState('');
-
-  const receiveHash = (hash: `0x${string}`) => {
-    setTransactionHash(hash); // Update the state with the transaction hash
-  };
-
-  const receiveSignedMsg = (signedMsg: string) => {
-    setSignedMsg(signedMsg); // Update the state with the transaction hash
-  };
-
-  const receivebalance = (balance: string) => {
-    setBalance(balance)
-  }
-
+  const [transactionHash] = useState<`0x${string}` | undefined>(undefined);
+  const [signedMsg] = useState('');
+  const [balance] = useState('');
 
   return (
-    <div className={"pages"}>
-      <img src="/reown.svg" alt="Reown" style={{ width: '150px', height: '150px' }} />
-      <h1>AppKit Wagmi + SIWXReact dApp Example</h1>
-      <WagmiProvider config={wagmiAdapter.wagmiConfig}>
-        <QueryClientProvider client={queryClient}>
-            <appkit-button />
-            <ActionButtonList sendHash={receiveHash} sendSignMsg={receiveSignedMsg} sendBalance={receivebalance}/>
-            <SmartContractActionButtonList />
-            <div className="advice">
-              <p>
-                This projectId only works on localhost. <br/>
-                Go to <a href="https://cloud.reown.com" target="_blank" className="link-button" rel="Reown Cloud">Reown Cloud</a> to get your own.
-              </p>
-            </div>
-            <InfoList hash={transactionHash} signedMsg={signedMsg} balance={balance}/>
-        </QueryClientProvider>
-      </WagmiProvider>
-    </div>
-  )
+    <AppProvider i18n={enTranslations}>
+      <div className={"pages"}>
+        <img src="/reown.svg" alt="Reown" style={{ width: '150px', height: '150px' }} />
+        <h1>AppKit Wagmi + SIWXReact dApp Example</h1>
+        <WagmiProvider config={wagmiAdapter.wagmiConfig}>
+          <QueryClientProvider client={queryClient}>
+              <ConnectButton />
+              <InfoList hash={transactionHash} signedMsg={signedMsg} balance={balance}/>
+          </QueryClientProvider>
+        </WagmiProvider>
+      </div>
+    </AppProvider>
+  );
 }
 
 export default App

react/react-wagmi-cloudSIWX/src/components/ConnectButton.tsx

@@ -0,0 +1,41 @@
+import { Button } from '@shopify/polaris';
+import { useAppKit, useAppKitAccount, useAppKitState, useDisconnect } from '@reown/appkit/react';
+import { useEffect, useState, useRef } from 'react';
+
+export const ConnectButton = () => {
+  const { open } = useAppKit();
+  const { isConnected, address, status } = useAppKitAccount();
+  const { initialized } = useAppKitState();
+  const [hasLoaded, setHasLoaded] = useState(false);
+  const { disconnect } = useDisconnect();
+  const hasDisconnected = useRef(false);
+
+  useEffect(() => {
+    if (status === 'disconnected' || status === 'connected') {
+      setHasLoaded(true);
+    }
+  }, [status]);
+
+  useEffect(() => {
+    if (initialized && !hasDisconnected.current) {
+      console.log("Disconnecting");
+      hasDisconnected.current = true;
+      disconnect();
+    }
+  }, [initialized, disconnect]);
+
+  const handleClick = () => {
+    open();
+  };
+
+  return (
+    <Button
+      onClick={handleClick}
+      variant={isConnected ? "plain" : "primary"}
+      disabled={!hasLoaded}
+    >
+      {!hasLoaded ? 'Loading...' : 
+       isConnected ? `Connected: ${address?.slice(0, 6)}...${address?.slice(-4)}` : 'Connect Wallet'}
+    </Button>
+  );
+}; 

react/react-wagmi-cloudSIWX/src/components/InfoList.tsx

@@ -1,10 +1,7 @@
 import { useEffect } from 'react'
 import {
-    useAppKitState,
-    useAppKitTheme,
     useAppKitEvents,
     useAppKitAccount,
-    useWalletInfo
      } from '@reown/appkit/react'
 import { useWaitForTransactionReceipt } from 'wagmi'
 
@@ -15,11 +12,8 @@ interface InfoListProps {
 }
 
 export const InfoList = ({ hash, signedMsg, balance }: InfoListProps) => {
-    const kitTheme = useAppKitTheme(); // AppKit hook to get the theme information and theme actions 
-    const state = useAppKitState(); // AppKit hook to get the state
     const {address, caipAddress, isConnected, status, embeddedWalletInfo } = useAppKitAccount(); // AppKit hook to get the account information
     const events = useAppKitEvents() // AppKit hook to get the events
-    const { walletInfo } = useWalletInfo() // AppKit hook to get the wallet info
 
     const { data: receipt } = useWaitForTransactionReceipt({ hash, confirmations: 2,  // Wait for at least 2 confirmation
         timeout: 300000,    // Timeout in milliseconds (5 minutes)
@@ -70,30 +64,6 @@ export const InfoList = ({ hash, signedMsg, balance }: InfoListProps) => {
                 {embeddedWalletInfo?.authProvider && (`Provider: ${embeddedWalletInfo?.authProvider}\n`)}
             </pre>
         </section>
-
-        <section>
-            <h2>Theme</h2>
-            <pre>
-                Theme: {kitTheme.themeMode}<br />
-            </pre>
-        </section>
-
-        <section>
-            <h2>State</h2>
-            <pre>
-                activeChain: {state.activeChain}<br />
-                loading: {state.loading.toString()}<br />
-                open: {state.open.toString()}<br />
-                selectedNetworkId: {state.selectedNetworkId?.toString()}<br />
-            </pre>
-        </section>
-
-        <section>
-            <h2>WalletInfo</h2>
-            <pre>
-                Name: {JSON.stringify(walletInfo)}<br />
-            </pre>
-        </section>
     </>
   )
 }