am/connectors (#25)

* Add gnosis connector

* Add magic connector

* Add autoconnect option

* Magic support for autoconnect

* v2.0.6-0

* Update connector

* v2.0.6-1

* Update connector name

* v2.0.6-2

* Reinstantiate magic every time

* it works now

* v2.0.6-3

* add switch Network support

* v2.0.6-4

* slightly better handling of autoconnect?

* v2.0.6-5

Co-authored-by: Jonas Daniels <jonas.daniels@outlook.com>

Author: adam-maj

docs/react.md

@@ -14,6 +14,7 @@
 |  [useDisconnect()](./react.usedisconnect.md) |  |
 |  [useEdition(contractAddress)](./react.useedition.md) | Returns a Edition contract instance |
 |  [useEditionDrop(contractAddress)](./react.useeditiondrop.md) | Returns a Edition Drop contract instance |
+|  [useMagic()](./react.usemagic.md) | Convienience hook for connecting to magic link |
 |  [useMarketplace(contractAddress)](./react.usemarketplace.md) | Returns a Marketplace contract instance |
 |  [useMetamask()](./react.usemetamask.md) | Convienience hook for connecting to a metamask (or any injected) wallet |
 |  [useNetworkMismatch()](./react.usenetworkmismatch.md) |  |

docs/react.thirdwebprovider.md

@@ -9,7 +9,7 @@ The `<ThirdwebProvider />` component, you need to wrap your application with thi
 <b>Signature:</b>
 
 ```typescript
-ThirdwebProvider: <TSupportedChain extends SupportedChain = SupportedChain>({ sdkOptions, chainRpc, supportedChains, walletConnectors, dAppMeta, desiredChainId, storageInterface, children, }: React.PropsWithChildren<ThirdwebProviderProps<TSupportedChain>>) => JSX.Element
+ThirdwebProvider: <TSupportedChain extends SupportedChain = SupportedChain>({ sdkOptions, chainRpc, supportedChains, walletConnectors, dAppMeta, desiredChainId, storageInterface, autoConnect, children, }: React.PropsWithChildren<ThirdwebProviderProps<TSupportedChain>>) => JSX.Element
 ```
 
 ## Example

docs/react.thirdwebproviderprops.autoconnect.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@thirdweb-dev/react](./react.md) &gt; [ThirdwebProviderProps](./react.thirdwebproviderprops.md) &gt; [autoConnect](./react.thirdwebproviderprops.autoconnect.md)
+
+## ThirdwebProviderProps.autoConnect property
+
+Whether or not to attempt auto-connect to a wallet.
+
+<b>Signature:</b>
+
+```typescript
+autoConnect?: boolean;
+```

docs/react.thirdwebproviderprops.md

@@ -16,6 +16,7 @@ export interface ThirdwebProviderProps<TSupportedChain extends SupportedChain =
 
 |  Property | Type | Description |
 |  --- | --- | --- |
+|  [autoConnect?](./react.thirdwebproviderprops.autoconnect.md) | boolean | <i>(Optional)</i> Whether or not to attempt auto-connect to a wallet. |
 |  [chainRpc?](./react.thirdwebproviderprops.chainrpc.md) | Partial&lt;ChainRpc&lt;TSupportedChain&gt;&gt; | <i>(Optional)</i> A partial map of chainIds to rpc urls to use for certain chains If not provided, will default to the rpcUrls of the chain objects for the supported chains |
 |  [dAppMeta?](./react.thirdwebproviderprops.dappmeta.md) | [DAppMetaData](./react.dappmetadata.md) | <i>(Optional)</i> Metadata to pass to wallet connect and walletlink wallet connect. (Used to show \*which\* dApp is being connected to in mobile wallets that support it) Defaults to just the name being passed as <code>thirdweb powered dApp</code>. |
 |  [desiredChainId](./react.thirdwebproviderprops.desiredchainid.md) | TSupportedChain extends Chain ? TSupportedChain\["id"\] : TSupportedChain \| undefined | The chainId that your dApp is running on. While this \*can\* be <code>undefined</code> it is required to be passed. Passing <code>undefined</code> will cause no SDK to be instantiated. When passing a chainId, it \*\*must\*\* be part of the <code>supportedChains</code> array. |

docs/react.usemagic.md

@@ -0,0 +1,22 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@thirdweb-dev/react](./react.md) &gt; [useMagic](./react.usemagic.md)
+
+## useMagic() function
+
+Convienience hook for connecting to magic link
+
+<b>Signature:</b>
+
+```typescript
+export declare function useMagic(): (configuration: LoginWithMagicLinkConfiguration) => Promise<{
+    data?: import("wagmi-core").ConnectorData<any> | undefined;
+    error?: Error | undefined;
+}>;
+```
+<b>Returns:</b>
+
+(configuration: LoginWithMagicLinkConfiguration) =&gt; Promise&lt;{ data?: import("wagmi-core").ConnectorData&lt;any&gt; \| undefined; error?: Error \| undefined; }&gt;
+
+a function that will prompt the user to connect their magic link
+

etc/react.api.md

@@ -6,6 +6,7 @@
 
 import type { Chain as Chain_2 } from 'wagmi';
 import { ChainId } from '@thirdweb-dev/sdk';
+import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet';
 import { Connector } from 'wagmi';
 import { ConnectorData } from 'wagmi';
 import { ConnectorData as ConnectorData_2 } from 'wagmi-core';
@@ -18,6 +19,8 @@ import { EditionDrop } from '@thirdweb-dev/sdk';
 import { InjectedConnector } from 'wagmi/connectors/injected';
 import { IpfsStorage } from '@thirdweb-dev/sdk';
 import { IStorage } from '@thirdweb-dev/sdk';
+import { LoginWithMagicLinkConfiguration } from 'magic-sdk';
+import { MagicSDKAdditionalConfiguration } from 'magic-sdk';
 import { Marketplace } from '@thirdweb-dev/sdk';
 import { NFTCollection } from '@thirdweb-dev/sdk';
 import { NFTDrop } from '@thirdweb-dev/sdk';
@@ -33,7 +36,6 @@ import { useAccount } from 'wagmi';
 import { useNetwork } from 'wagmi';
 import { Vote } from '@thirdweb-dev/sdk';
 import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';
-import { WalletLinkConnector } from 'wagmi/connectors/walletLink';
 
 export { ChainId }
 
@@ -67,6 +69,14 @@ export type InjectedConnectorType = "injected" | "metamask" | {
 
 export { IpfsStorage }
 
+// Warning: (ae-internal-missing-underscore) The name "MagicConnectorType" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export type MagicConnectorType = "magic" | {
+    name: "magic";
+    options: Omit<MagicConnectorArguments, "network">;
+};
+
 // @public
 export const MediaRenderer: React_2.ForwardRefExoticComponent<MediaRendererProps & React_2.RefAttributes<HTMLMediaElement>>;
 
@@ -108,10 +118,11 @@ export interface ThirdwebNftMediaProps extends SharedMediaProps {
 }
 
 // @public
-export const ThirdwebProvider: <TSupportedChain extends SupportedChain = SupportedChain>({ sdkOptions, chainRpc, supportedChains, walletConnectors, dAppMeta, desiredChainId, storageInterface, children, }: React_2.PropsWithChildren<ThirdwebProviderProps<TSupportedChain>>) => JSX.Element;
+export const ThirdwebProvider: <TSupportedChain extends SupportedChain = SupportedChain>({ sdkOptions, chainRpc, supportedChains, walletConnectors, dAppMeta, desiredChainId, storageInterface, autoConnect, children, }: React_2.PropsWithChildren<ThirdwebProviderProps<TSupportedChain>>) => JSX.Element;
 
 // @public
 export interface ThirdwebProviderProps<TSupportedChain extends SupportedChain = SupportedChain> {
+    autoConnect?: boolean;
     // Warning: (ae-incompatible-release-tags) The symbol "chainRpc" is marked as @public, but its signature references "ChainRpc" which is marked as @internal
     chainRpc?: Partial<ChainRpc<TSupportedChain>>;
     dAppMeta?: DAppMetaData;
@@ -172,6 +183,12 @@ export function useEdition(contractAddress?: string): Edition | undefined;
 // @public
 export function useEditionDrop(contractAddress?: string): EditionDrop | undefined;
 
+// @public
+export function useMagic(): (configuration: LoginWithMagicLinkConfiguration) => Promise<{
+    data?: ConnectorData_2<any> | undefined;
+    error?: Error | undefined;
+}>;
+
 // @public
 export function useMarketplace(contractAddress?: string): Marketplace | undefined;
 
@@ -250,16 +267,20 @@ export type WalletConnectConnectorType = "walletConnect" | {
 // Warning: (ae-internal-missing-underscore) The name "WalletConnector" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal (undocumented)
-export type WalletConnector = InjectedConnectorType | WalletConnectConnectorType | WalletLinkConnectorType;
+export type WalletConnector = InjectedConnectorType | WalletConnectConnectorType | WalletLinkConnectorType | MagicConnectorType;
 
 // Warning: (ae-internal-missing-underscore) The name "WalletLinkConnectorType" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal (undocumented)
 export type WalletLinkConnectorType = "walletLink" | "coinbase" | {
     name: "walletLink" | "coinbase";
-    options: WalletLinkConnector["options"];
+    options: CoinbaseWalletConnector["options"];
 };
 
+// Warnings were encountered during analysis:
+//
+// dist/Provider.d.ts:34:5 - (ae-forgotten-export) The symbol "MagicConnectorArguments" needs to be exported by the entry point index.d.ts
+
 // (No @packageDocumentation comment for this package)
 
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thirdweb-dev/react",
-  "version": "2.0.5",
+  "version": "2.0.6-5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com:thirdweb-dev/react.git"
@@ -55,11 +55,14 @@
     "vitest": "^0.9.3"
   },
   "dependencies": {
+    "@gnosis.pm/safe-apps-provider": "^0.11.0",
+    "@gnosis.pm/safe-apps-sdk": "^7.3.0",
+    "magic-sdk": "^8.1.1",
     "mime": "^3.0.0",
     "react-cool-dimensions": "^2.0.7",
     "swr": "^1.2.2",
     "tiny-invariant": "^1.2.0",
-    "wagmi": "0.2.26"
+    "wagmi": "^0.2.28"
   },
   "peerDependencies": {
     "@thirdweb-dev/sdk": "^2.0.15",

src/Provider.tsx

@@ -1,3 +1,4 @@
+import { MagicConnector, MagicConnectorArguments } from "./connectors/magic";
 import {
   Chain,
   SupportedChain,
@@ -12,9 +13,9 @@ import {
   ProviderProps as WagmiproviderProps,
   useProvider,
 } from "wagmi";
+import { CoinbaseWalletConnector } from "wagmi/connectors/coinbaseWallet";
 import { InjectedConnector } from "wagmi/connectors/injected";
 import { WalletConnectConnector } from "wagmi/connectors/walletConnect";
-import { WalletLinkConnector } from "wagmi/connectors/walletLink";
 
 /**
  * @internal
@@ -39,7 +40,17 @@ export type WalletLinkConnectorType =
   | "coinbase"
   | {
       name: "walletLink" | "coinbase";
-      options: WalletLinkConnector["options"];
+      options: CoinbaseWalletConnector["options"];
+    };
+
+/**
+ * @internal
+ */
+export type MagicConnectorType =
+  | "magic"
+  | {
+      name: "magic";
+      options: Omit<MagicConnectorArguments, "network">;
     };
 
 /**
@@ -48,7 +59,8 @@ export type WalletLinkConnectorType =
 export type WalletConnector =
   | InjectedConnectorType
   | WalletConnectConnectorType
-  | WalletLinkConnectorType;
+  | WalletLinkConnectorType
+  | MagicConnectorType;
 
 /**
  * @internal
@@ -130,6 +142,11 @@ export interface ThirdwebProviderProps<
    * The storage interface to use with the sdk.
    */
   storageInterface?: IStorage;
+
+  /**
+   * Whether or not to attempt auto-connect to a wallet.
+   */
+  autoConnect?: boolean;
 }
 
 const defaultChainRpc: ChainRpc<SupportedChain> = defaultSupportedChains.reduce(
@@ -180,6 +197,7 @@ export const ThirdwebProvider = <
   dAppMeta = defaultdAppMeta,
   desiredChainId,
   storageInterface,
+  autoConnect = true,
   children,
 }: React.PropsWithChildren<ThirdwebProviderProps<TSupportedChain>>) => {
   // construct the wagmi options
@@ -221,7 +239,7 @@ export const ThirdwebProvider = <
     };
 
     return {
-      autoConnect: true,
+      autoConnect,
       connectorStorageKey: "tw:provider:connectors",
       connectors: ({ chainId }: { chainId?: number }) => {
         return walletConnectors
@@ -275,7 +293,7 @@ export const ThirdwebProvider = <
                   connector.name === "walletLink"))
             ) {
               const jsonRpcUrl = _rpcUrlMap[chainId || desiredChainId || 1];
-              return new WalletLinkConnector({
+              return new CoinbaseWalletConnector({
                 chains: _supporrtedChains,
                 options:
                   typeof connector === "string"
@@ -290,6 +308,17 @@ export const ThirdwebProvider = <
                       },
               });
             }
+            if (typeof connector === "object" && connector.name === "magic") {
+              const jsonRpcUrl = _rpcUrlMap[chainId || desiredChainId || 1];
+              return new MagicConnector({
+                chains: _supporrtedChains,
+                options: {
+                  ...connector.options,
+                  network: { rpcUrl: jsonRpcUrl, chainId: desiredChainId || 1 },
+                  rpcUrls: _rpcUrlMap,
+                },
+              });
+            }
             return null;
           })
           .filter((c) => c !== null);