feat: add active wallet integration (#42)

* tech(active-wallet): initial wallet layout * tech(active-wallet): add query and mutations * tech(active-wallet): add connect wallet example * tech(active-wallet): use appkit for wallet example * tech(active-wallet): use correct label when active * chore: format * tech(active-wallet): add spinner and error state * tech(active-wallet): use scss vars * tech(active-wallet): use signature and message * chore: update version * feat(active-wallet): add error message for already existing wallet * chore: format * feat(active-wallet): add toast * chore: add mantine hooks and core to peer dependecies * feat(active-wallet): add missing component * chore: add i18n translations * chore: prettier * chore: update i18n keys * chore: update i18n keys
HyperPlay-Gaming · Jan 28, 2025 · 3461db9 · 3461db9
1 parent 440af60
commit 3461db9
Show file tree

Hide file tree

Showing 12 changed files with 1,556 additions and 56 deletions.
diff --git a/.storybook/i18n.js b/.storybook/i18n.js
@@ -0,0 +1,31 @@
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+
+// the translations
+// (tip move them in a JSON file and import them,
+// or even better, manage them separated from your code: https://react.i18next.com/guides/multiple-translation-files)
+const resources = {
+  en: {
+    translation: {
+      gameplayWallet: {
+        info: {
+          title: 'What is a Gameplay Wallet?',
+          description:
+            'Your progress for each Quest is based on the Gameplay wallet you use to start the game.<br/><br/> This allows game studios to properly sync and issue Rewards, regardless if they are in-game or off-chain.<br/><br/>Switching wallets? No problem. Your progress will be saved to each Gameplay wallet address separately.'
+        }
+      }
+    }
+  }
+}
+
+i18n
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .init({
+    resources,
+    lng: 'en', // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
+    interpolation: {
+      escapeValue: false // react already safes from xss
+    }
+  })
+
+export default i18n
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -2,35 +2,65 @@ import React from 'react'
 
 import { Preview } from '@storybook/react'
 
-import { createConfig, http, WagmiProvider } from 'wagmi'
+import { WagmiProvider } from 'wagmi'
 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'
+
+import i18n from './i18n'
+import { I18nextProvider } from 'react-i18next'
 
 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}>
-        <QueryClientProvider client={queryClient}>
-          <HyperPlayDesignProvider>
-            <Story />
-          </HyperPlayDesignProvider>
-          <ReactQueryDevtools initialIsOpen={false} />
-        </QueryClientProvider>
-      </WagmiProvider>
+      <I18nextProvider i18n={i18n}>
+        <WagmiProvider config={wagmiAdapter.wagmiConfig}>
+          <QueryClientProvider client={queryClient}>
+            <HyperPlayDesignProvider>
+              <div style={{ position: 'absolute', top: 10, right: 10 }}>
+                <ConnectWallet />
+              </div>
+              <Story />
+            </HyperPlayDesignProvider>
+            <ReactQueryDevtools initialIsOpen={false} />
+          </QueryClientProvider>
+        </WagmiProvider>
+      </I18nextProvider>
     )
   ]
 }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hyperplay/quests-ui",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -31,7 +31,10 @@
     "@hyperplay/chains": "^0.3.0",
     "@hyperplay/ui": "^1.8.21",
     "@hyperplay/utils": "^0.3.7",
-    "@mantine/core": "^7.5.1",
+    "@mantine/core": "^7.12.0",
+    "@mantine/hooks": "^7.12.0",
+    "@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 +57,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 +69,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",
@@ -76,6 +81,8 @@
     "@hyperplay/chains": "^0.3.0",
     "@hyperplay/ui": "^1.8.21",
     "@hyperplay/utils": "^0.3.4",
+    "@mantine/core": "^7.12.0",
+    "@mantine/hooks": "^7.12.0",
     "@tanstack/query-core": "^5.59.20",
     "@tanstack/react-query": "^5.59.20",
     "i18next": "^23.12.3",