feat: add active wallet integration

.storybook/preview.tsx

@@ -7,25 +7,50 @@ import { mainnet } from 'wagmi/chains'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { HyperPlayDesignProvider } from '@hyperplay/ui'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { createAppKit } from '@reown/appkit/react'
+import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
 
 import '@mantine/core/styles.css'
 import '@hyperplay/ui/style.css'
+import { ConnectWallet } from '../src/components/ConnectWallet'
 
 const queryClient = new QueryClient()
 
-const config = createConfig({
-  chains: [mainnet],
-  transports: {
-    [mainnet.id]: http()
-  }
+// 1. Get projectId from https://cloud.reown.com
+const projectId = '878099c5ebd1a07a3785ec7ebee59ba6'
+
+// 3. Set the networks
+const networks = [mainnet]
+
+// 4. Create Wagmi Adapter
+const wagmiAdapter = new WagmiAdapter({
+  networks,
+  projectId,
+  ssr: true
 })
 
+// 5. Create modal
+createAppKit({
+  adapters: [wagmiAdapter],
+  networks: [mainnet],
+  projectId,
+  themeMode: 'dark',
+  features: {
+    email: false,
+    socials: false,
+    onramp: false,
+    analytics: false
+  }
+})
 const preview: Preview = {
   decorators: [
     (Story) => (
-      <WagmiProvider config={config}>
+      <WagmiProvider config={wagmiAdapter.wagmiConfig}>
         <QueryClientProvider client={queryClient}>
           <HyperPlayDesignProvider>
+            <div style={{ position: 'absolute', top: 10, right: 10 }}>
+              <ConnectWallet />
+            </div>
             <Story />
           </HyperPlayDesignProvider>
           <ReactQueryDevtools initialIsOpen={false} />

package.json

@@ -32,6 +32,8 @@
     "@hyperplay/ui": "^1.8.21",
     "@hyperplay/utils": "^0.3.7",
     "@mantine/core": "^7.5.1",
+    "@reown/appkit": "^1.6.2",
+    "@reown/appkit-adapter-wagmi": "^1.6.2",
     "@storybook/addon-essentials": "^8.3.4",
     "@storybook/addon-interactions": "^8.3.4",
     "@storybook/addon-links": "^8.3.4",
@@ -54,6 +56,7 @@
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-storybook": "^0.9.0",
+    "ethers": "^6.13.5",
     "i18next": "^23.12.3",
     "jest": "^29.7.0",
     "mobx": "^6.13.3",
@@ -65,6 +68,7 @@
     "react": "^18.3.1",
     "react-i18next": "^15.0.1",
     "sass-embedded": "^1.77.8",
+    "siwe": "^2.3.2",
     "storybook": "^8.3.4",
     "ts-jest": "^29.2.5",
     "viem": "^2.19.4",

src/components/ActiveWalletSection/index.module.scss

@@ -0,0 +1,96 @@
+.newWalletDetectedContainer {
+  display: flex;
+  gap: var(--space-md);
+  padding: var(--space-xs) var(--space-md);
+  border-radius: var(--space-xs-fixed);
+  background-color: var(--color-tertiary-400);
+  color: var(--color-neutral-800);
+}
+
+.verifyText {
+  font-weight: var(--bold);
+}
+
+.infoIconContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+.infoIcon {
+  width: 24px;
+  height: 24px;
+  fill: var(--color-neutral-800);
+}
+
+.infoTextContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2xs);
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2xs);
+}
+
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+}
+
+.walletContainer {
+  display: flex;
+  padding: var(--space-xs) var(--space-sm);
+  border-radius: var(--space-xs-fixed);
+  border: 1px solid var(--color-stroke-01);
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--color-neutral-700);
+}
+
+.noWallet {
+  color: var(--color-neutral-500);
+}
+
+.activeWallet {
+  color: var(--color-success-300);
+}
+
+.inputLikeContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2xs);
+}
+
+.setActiveWalletContainer {
+  display: flex;
+  gap: var(--space-2xs);
+}
+
+.setConnectedWalletInput {
+  flex: 1;
+}
+
+.setButton {
+  min-width: 120px;
+}
+
+.walletIcon {
+  width: 18px;
+  height: 18px;
+  fill: var(--color-neutral-400);
+}
+
+.label {
+  font-weight: var(--semibold);
+  color: var(--color-neutral-400);
+}
+
+.loadingSpinner {
+  font-size: var(--text-xs);
+}