fix(magic): remove non-type Magic.link imports (#136)

* fix(magic): remove non-type Magic.link imports

The library should not import any SDKs/dependencies for wallet providers (besides type imports). This should be handled by the consuming application on an opt-in basis, depending on which wallets it supports.

The Magic Algorand extension is now (optionally) passed to the `useInitializeProviders` hook's configuration object.

Closes: Build fails if @magic-ext/algorand is not installed #135

* docs: update README full config example

Author: drichar

README.md

@@ -504,10 +504,9 @@ useEffect(() => {
 - Website - https://lute.app/
 - Install dependency - `npm install lute-connect`
 
-
 ### Kibisis Wallet
 
-***NOTE:** Kibisis is in active development and currently only supports betanet and testnet.*
+**\*NOTE:** Kibisis is in active development and currently only supports betanet and testnet.\*
 
 - Website - https://kibis.is
 - Download - https://kibis.is/#download
@@ -660,7 +659,8 @@ import { PeraWalletConnect } from '@perawallet/connect'
 import { DaffiWalletConnect } from '@daffiwallet/connect'
 import { WalletConnectModalSign } from '@walletconnect/modal-sign-html'
 import LuteConnect from 'lute-connect'
-import { Magic } from 'magic-sdk';
+import { Magic } from 'magic-sdk'
+import { AlgorandExtension } from '@magic-ext/algorand'
 
 export default function App() {
   const providers = useInitializeProviders({
@@ -694,9 +694,10 @@ export default function App() {
       },
       {
         id: PROVIDER_ID.MAGIC,
-        getDynamicClient: Magic,
-        clientOptions: { apiKey: 'API_KEY' },
-      },
+        clientStatic: Magic,
+        extensionStatic: AlgorandExtension,
+        clientOptions: { apiKey: '<API_KEY>' }
+      }
     ],
     nodeConfig: {
       network: 'mainnet',

src/clients/magic/client.ts

@@ -7,12 +7,12 @@ import BaseClient from '../base'
 import { DEFAULT_NETWORK, PROVIDER_ID } from '../../constants'
 import { debugLog } from '../../utils/debugLog'
 import { ICON } from './constants'
+import type { AlgorandExtension } from '@magic-ext/algorand'
+import type { SDKBase, InstanceWithExtensions } from '@magic-sdk/provider'
 import type { DecodedSignedTransaction, DecodedTransaction, Network } from '../../types/node'
 import type { InitParams } from '../../types/providers'
 import type { Wallet } from '../../types/wallet'
 import type { MagicAuthTransaction, MagicAuthConstructor, MagicAuthConnectOptions } from './types'
-import { AlgorandExtension } from '@magic-ext/algorand'
-import { SDKBase, InstanceWithExtensions } from '@magic-sdk/provider'
 
 class MagicAuth extends BaseClient {
   #client: InstanceWithExtensions<
@@ -51,6 +51,8 @@ class MagicAuth extends BaseClient {
     algodOptions,
     clientStatic,
     getDynamicClient,
+    extensionStatic,
+    getDynamicExtension,
     algosdkStatic,
     network = DEFAULT_NETWORK
   }: InitParams<PROVIDER_ID.MAGIC>): Promise<BaseClient | null> {
@@ -62,20 +64,33 @@ class MagicAuth extends BaseClient {
         Magic = clientStatic
       } else if (getDynamicClient) {
         Magic = await getDynamicClient()
-      } else if (!clientOptions || !clientOptions.apiKey) {
+      } else {
         throw new Error(
-          'Magic provider missing API Key to be passed by required property: clientOptions'
+          'Magic provider missing required property: clientStatic or getDynamicClient'
         )
+      }
+
+      let AlgorandExtension
+      if (extensionStatic) {
+        AlgorandExtension = extensionStatic
+      } else if (getDynamicExtension) {
+        AlgorandExtension = await getDynamicExtension()
       } else {
         throw new Error(
-          'Magic provider missing required property: clientStatic or getDynamicClient'
+          'Magic provider missing required property: extensionStatic or getDynamicExtension'
+        )
+      }
+
+      if (!clientOptions || !clientOptions.apiKey) {
+        throw new Error(
+          'Magic provider missing API Key to be passed by required property: clientOptions'
         )
       }
 
       const algosdk = algosdkStatic || (await Algod.init(algodOptions)).algosdk
       const algodClient = getAlgodClient(algosdk, algodOptions)
 
-      const magic = new Magic(clientOptions?.apiKey as string, {
+      const magic = new Magic(clientOptions?.apiKey, {
         extensions: {
           algorand: new AlgorandExtension({
             rpcUrl: ''

src/clients/magic/types.ts

@@ -1,8 +1,8 @@
+import type { AlgorandExtension } from '@magic-ext/algorand'
+import type { SDKBase, InstanceWithExtensions } from '@magic-sdk/provider'
 import type algosdk from 'algosdk'
 import type { Network } from '../../types/node'
 import type { Metadata } from '../../types/wallet'
-import { SDKBase, InstanceWithExtensions } from '@magic-sdk/provider'
-import { AlgorandExtension } from '@magic-ext/algorand'
 
 export type MagicAuthConnectOptions = {
   apiKey: string

src/components/Example/Example.tsx

@@ -1,3 +1,4 @@
+import algosdk from 'algosdk'
 import React from 'react'
 import { DeflyWalletConnect } from '@blockshake/defly-connect'
 import { DaffiWalletConnect } from '@daffiwallet/connect'
@@ -6,10 +7,10 @@ import { WalletProvider, PROVIDER_ID, useInitializeProviders, Network } from '..
 import Account from './Account'
 import Connect from './Connect'
 import Transact from './Transact'
-import algosdk from 'algosdk'
 import { ManualGoalSigningAlertPromptProvider } from './TestManualProvider'
 
 const DUMMY_MAGIC_PK = 'pk_live_D17FD8D89621B5F3'
+
 const getDynamicPeraWalletConnect = async () => {
   const PeraWalletConnect = (await import('@perawallet/connect')).PeraWalletConnect
   return PeraWalletConnect
@@ -20,6 +21,11 @@ const getDynamicMagic = async () => {
   return Magic
 }
 
+const getDynamicAlgoExtension = async () => {
+  const AlgorandExtension = (await import('@magic-ext/algorand')).AlgorandExtension
+  return AlgorandExtension
+}
+
 export default function ConnectWallet() {
   const walletProviders = useInitializeProviders({
     providers: [
@@ -31,6 +37,7 @@ export default function ConnectWallet() {
       {
         id: PROVIDER_ID.MAGIC,
         getDynamicClient: getDynamicMagic,
+        getDynamicExtension: getDynamicAlgoExtension,
         clientOptions: { apiKey: DUMMY_MAGIC_PK }
       },
       {

src/testUtils/mockClients.ts

@@ -4,6 +4,8 @@ import { DaffiWalletConnect } from '@daffiwallet/connect'
 import { PeraWalletConnect } from '@perawallet/connect'
 import MyAlgoConnect from '@randlabs/myalgo-connect'
 import LuteConnect from 'lute-connect'
+import { Magic } from 'magic-sdk'
+import { AlgorandExtension } from '@magic-ext/algorand'
 import { WalletConnectModalSign } from '@walletconnect/modal-sign-html'
 import algosdk from 'algosdk'
 import AlgoSignerClient from '../clients/algosigner/client'
@@ -23,8 +25,6 @@ import type { Exodus } from '../clients/exodus/types'
 import type { Account, ClientOptions } from '../types'
 import CustomWalletClient from '../clients/custom/client'
 import MagicAuthClient from '../clients/magic/client'
-import { AlgorandExtension } from '@magic-ext/algorand'
-import { Magic } from 'magic-sdk'
 
 type ClientTypeMap = {
   [PROVIDER_ID.ALGOSIGNER]: AlgoSignerClient

src/types/providers.ts

@@ -3,6 +3,8 @@ import type { PeraWalletConnect } from '@perawallet/connect'
 import type { DeflyWalletConnect } from '@blockshake/defly-connect'
 import type { DaffiWalletConnect } from '@daffiwallet/connect'
 import type LuteConnect from 'lute-connect'
+import type { Magic } from 'magic-sdk'
+import type { AlgorandExtension } from '@magic-ext/algorand'
 import type MyAlgoConnect from '@randlabs/myalgo-connect'
 import type {
   WalletConnectModalSign,
@@ -20,7 +22,6 @@ import type { DaffiWalletConnectOptions } from '../clients/daffi/types'
 import type { NonEmptyArray } from './utilities'
 import type BaseClient from '../clients/base'
 import type { CustomOptions } from '../clients/custom/types'
-import { Magic } from 'magic-sdk'
 
 export type ProviderConfigMapping = {
   [PROVIDER_ID.PERA]: {
@@ -87,6 +88,8 @@ export type ProviderConfigMapping = {
     clientOptions?: { apiKey: string }
     clientStatic?: undefined
     getDynamicClient?: () => Promise<typeof Magic>
+    extensionStatic?: typeof AlgorandExtension
+    getDynamicExtension?: () => Promise<typeof AlgorandExtension>
   }
 }
 
@@ -132,10 +135,25 @@ type DynamicClient<T> = {
 
 type OneOfStaticOrDynamicClient<T> = StaticClient<T> | DynamicClient<T>
 
+type StaticAlgoExtension<T> = {
+  extensionStatic: T
+  getDynamicExtension?: undefined
+}
+
+type DynamicAlgoExtension<T> = {
+  extensionStatic?: undefined
+  getDynamicExtension: () => Promise<T>
+}
+
+type OneOfStaticOrDynamicAlgoExtension<T> = StaticAlgoExtension<T> | DynamicAlgoExtension<T>
+
 type ProviderDef =
   | (ProviderConfig<PROVIDER_ID.PERA> & OneOfStaticOrDynamicClient<typeof PeraWalletConnect>)
   | (ProviderConfig<PROVIDER_ID.MAGIC> &
-      OneOfStaticOrDynamicClient<typeof Magic> & { clientOptions: { apiKey: string } })
+      OneOfStaticOrDynamicClient<typeof Magic> &
+      OneOfStaticOrDynamicAlgoExtension<typeof AlgorandExtension> & {
+        clientOptions: { apiKey: string }
+      })
   | (ProviderConfig<PROVIDER_ID.DEFLY> & OneOfStaticOrDynamicClient<typeof DeflyWalletConnect>)
   | (ProviderConfig<PROVIDER_ID.DAFFI> & OneOfStaticOrDynamicClient<typeof DaffiWalletConnect>)
   | (ProviderConfig<PROVIDER_ID.LUTE> &