Merge pull request #67 from InjectiveLabs/feat/test-magic

Feat/test magic

layer/icons/wallet-new/magic.vue

@@ -0,0 +1,13 @@
+<template>
+  <template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+    >
+      <path
+        d="M12 2a5 5 0 1 0 5 5 5 5 0 0 0-5-5zm0 8a3 3 0 1 1 3-3 3 3 0 0 1-3 3zm9 11v-1a7 7 0 0 0-7-7h-4a7 7 0 0 0-7 7v1h2v-1a5 5 0 0 1 5-5h4a5 5 0 0 1 5 5v1z"
+      />
+    </svg>
+  </template>
+</template>

layer/icons/wallet/magic.vue

@@ -0,0 +1,13 @@
+<template>
+  <template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+    >
+      <path
+        d="M12 2a5 5 0 1 0 5 5 5 5 0 0 0-5-5zm0 8a3 3 0 1 1 3-3 3 3 0 0 1-3 3zm9 11v-1a7 7 0 0 0-7-7h-4a7 7 0 0 0-7 7v1h2v-1a5 5 0 0 1 5-5h4a5 5 0 0 1 5 5v1z"
+      />
+    </svg>
+  </template>
+</template>

layer/store/wallet.ts

@@ -14,6 +14,7 @@ import { StatusType } from '@injectivelabs/utils'
 import {
   Wallet,
   isEthWallet,
+  MagicProvider,
   isCosmosWallet,
   isCosmosBrowserWallet
 } from '@injectivelabs/wallet-ts'
@@ -234,8 +235,13 @@ export const useSharedWalletStore = defineStore('sharedWallet', {
     async init() {
       const walletStore = useSharedWalletStore()
 
+      walletStore.walletConnectStatus = WalletConnectStatus.idle
       await walletStrategy.setWallet(walletStore.wallet)
 
+      if (walletStore.wallet === Wallet.Magic && !walletStore.isUserConnected) {
+        await walletStore.connectMagic()
+      }
+
       if (walletStore.isAutoSignEnabled) {
         walletStore.connectWallet(Wallet.PrivateKey, {
           privateKey: walletStore.autoSign?.privateKey as string,
@@ -664,6 +670,37 @@ export const useSharedWalletStore = defineStore('sharedWallet', {
       await walletStore.onConnect()
     },
 
+    async connectMagic(provider?: MagicProvider, email?: string) {
+      const walletStore = useSharedWalletStore()
+
+      await walletStore.connectWallet(Wallet.Magic)
+
+      try {
+        const addresses = await getAddresses({ email, provider })
+
+        if (!addresses.length) {
+          return
+        }
+
+        const [address] = addresses
+        const session = await walletStrategy.getSessionOrConfirm(address)
+
+        walletStore.$patch({
+          address,
+          addresses,
+          addressConfirmation: await walletStrategy.getSessionOrConfirm(
+            address
+          ),
+          injectiveAddress: address,
+          session
+        })
+
+        await walletStore.onConnect()
+      } catch {
+        walletStore.walletConnectStatus = WalletConnectStatus.idle
+      }
+    },
+
     async connectAddress(injectiveAddress: string) {
       const walletStore = useSharedWalletStore()
 
@@ -926,6 +963,8 @@ export const useSharedWalletStore = defineStore('sharedWallet', {
     async logout() {
       const walletStore = useSharedWalletStore()
 
+      walletStore.walletConnectStatus = WalletConnectStatus.disconnecting
+
       await walletStrategy.disconnect()
 
       walletStore.$patch({

layer/types/enum/index.ts

@@ -16,7 +16,8 @@ export enum WalletConnectStatus {
   idle = 'Idle',
   connected = 'Connected',
   connecting = 'Connecting',
-  disconnected = 'Disconnected'
+  disconnected = 'Disconnected',
+  disconnecting = 'disconnecting'
 }
 
 export enum SharedAmplitudeEvent {

layer/utils/constant/setup.ts

@@ -133,6 +133,7 @@ export const PROXY_DETECTION_API_KEY =
   import.meta.env.VITE_PROXY_DETECTION_API_KEY || ''
 export const HOTJAR_KEY = import.meta.env.VITE_HOTJAR_KEY_DEV as string
 export const MIXPANEL_KEY = import.meta.env.VITE_MIXPANEL_KEY || ''
+export const MAGIC_APK_KEY = import.meta.env.VITE_MAGIC_APK_KEY || ''
 export const GOOGLE_MAPS_KEY = import.meta.env.VITE_GOOGLE_MAPS_KEY || ''
 
 export const VPN_CHECKS_ENABLED: boolean =
@@ -141,9 +142,10 @@ export const GEO_IP_RESTRICTIONS_ENABLED: boolean =
   import.meta.env.VITE_GEO_IP_RESTRICTIONS_ENABLED === 'true'
 
 export const CW20_ADAPTER_CONTRACT = getCw20AdapterContractForNetwork(NETWORK)
-export const APP_NAME = env.VITE_NAME
-export const APP_BASE_URL = env.VITE_BASE_URL
-export const WALLET_CONNECT_PROJECT_ID = env.VITE_WALLET_CONNECT_PROJECT_ID
+export const APP_NAME = env.VITE_NAME as string
+export const APP_BASE_URL = env.VITE_BASE_URL as string
+export const WALLET_CONNECT_PROJECT_ID =
+  env.VITE_WALLET_CONNECT_PROJECT_ID as string
 
 if (VPN_CHECKS_ENABLED && !GOOGLE_MAPS_KEY) {
   throw new Error('GOOGLE_MAPS_KEY is required when VPN_CHECKS_ENABLED')

layer/wallet/wallet-strategy.ts

@@ -3,12 +3,14 @@ import {
   CHAIN_ID,
   IS_MAINNET,
   ALCHEMY_KEY,
+  MAGIC_APK_KEY,
   ETHEREUM_CHAIN_ID,
   ALCHEMY_SEPOLIA_KEY
 } from './../utils/constant'
 import { alchemyRpcEndpoint } from './alchemy'
 import {
   APP_NAME,
+  ENDPOINTS,
   APP_BASE_URL,
   WALLET_CONNECT_PROJECT_ID
 } from './../utils/constant'
@@ -21,6 +23,10 @@ export const walletStrategy = new WalletStrategy({
   },
   options: {
     metadata: {
+      magic: {
+        apiKey: MAGIC_APK_KEY as string,
+        rpcEndpoint: ENDPOINTS.rpc as string
+      },
       name: APP_NAME,
       url: APP_BASE_URL,
       projectId: WALLET_CONNECT_PROJECT_ID,

layer/wallet/wallet.ts

@@ -5,8 +5,8 @@ import {
 } from '@injectivelabs/exceptions'
 import { walletStrategy } from './wallet-strategy'
 
-export const getAddresses = async (): Promise<string[]> => {
-  const addresses = await walletStrategy.enableAndGetAddresses()
+export const getAddresses = async (args?: unknown): Promise<string[]> => {
+  const addresses = await walletStrategy.enableAndGetAddresses(args)
 
   if (addresses.length === 0) {
     throw new WalletException(

layer/yarn.lock

@@ -11289,16 +11289,7 @@ strict-uri-encode@^2.0.0:
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
   integrity sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -11339,7 +11330,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -11353,13 +11344,6 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -12548,7 +12532,7 @@ wordwrapjs@^4.0.0:
     reduce-flatten "^2.0.0"
     typical "^5.2.0"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -12575,15 +12559,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"