Merge pull request #1 from tian000/noah

Noah
rainbow-me · Jan 31, 2023 · ae948e4 · ae948e4
2 parents a920c2e + d79fba5
commit ae948e4
Show file tree

Hide file tree

Showing 10 changed files with 153 additions and 14 deletions.
diff --git a/.changeset/funny-suns-poke.md b/.changeset/funny-suns-poke.md
@@ -0,0 +1,7 @@
+---
+'example': patch
+'@rainbow-me/rainbowkit': patch
+'site': patch
+---
+
+Add Phantom wallet support
diff --git a/examples/with-next/pages/_app.tsx b/examples/with-next/pages/_app.tsx
@@ -10,6 +10,7 @@ import {
   argentWallet,
   trustWallet,
   ledgerWallet,
+  phantomWallet,
 } from '@rainbow-me/rainbowkit/wallets';
 import { configureChains, createClient, WagmiConfig } from 'wagmi';
 import { mainnet, polygon, optimism, arbitrum, goerli } from 'wagmi/chains';
@@ -43,6 +44,7 @@ const connectors = connectorsForWallets([
       argentWallet({ chains }),
       trustWallet({ chains }),
       ledgerWallet({ chains }),
+      phantomWallet({ chains }),
     ],
   },
 ]);

diff --git a/packages/example/pages/_app.tsx b/packages/example/pages/_app.tsx
@@ -19,6 +19,7 @@ import {
   imTokenWallet,
   ledgerWallet,
   omniWallet,
+  phantomWallet,
   trustWallet,
 } from '@rainbow-me/rainbowkit/wallets';
 
@@ -106,6 +107,7 @@ const connectors = connectorsForWallets([
       argentWallet({ chains }),
       imTokenWallet({ chains }),
       ledgerWallet({ chains }),
+      phantomWallet({ chains }),
       omniWallet({ chains }),
       trustWallet({ chains }),
     ],

diff --git a/packages/rainbowkit/src/components/ConnectOptions/ConnectDetails.tsx b/packages/rainbowkit/src/components/ConnectOptions/ConnectDetails.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useContext, useEffect } from 'react';
+import React, { ReactNode, useContext, useEffect, useState } from 'react';
 import { touchableStyles } from '../../css/touchableStyles';
 import { useWindowSize } from '../../hooks/useWindowSize';
 import { BrowserType, getBrowser, isSafari } from '../../utils/browsers';
@@ -171,7 +171,7 @@ export function ConnectDetail({
     iconUrl,
     name,
     qrCode,
-    ready,
+    ready: wasReady,
     showWalletConnectModal,
   } = wallet;
   const getDesktopDeepLink = wallet.desktop?.getUri;
@@ -181,6 +181,22 @@ export function ConnectDetail({
     downloadUrls?.qrCode && downloadUrls?.browserExtension;
   const hasQrCode = qrCode && qrCodeUri;
 
+  const [isReady, setIsReady] = useState<boolean>(false);
+
+  // Check on component mount if the wallet is ready.
+  useEffect(() => {
+    wallet.connector.getProvider().then(provider => {
+      const isReady = provider;
+      if (!wasReady && isReady) {
+        // If the wallet was not ready, but now is ready attempt to connect
+        reconnect(wallet);
+      }
+      setIsReady(isReady);
+    });
+  }, [wallet.connector, reconnect, wallet, wasReady]);
+
+  const ready = wasReady || isReady;
+
   const secondaryAction: {
     description: string;
     label: string;

diff --git a/packages/rainbowkit/src/components/ConnectOptions/DesktopOptions.tsx b/packages/rainbowkit/src/components/ConnectOptions/DesktopOptions.tsx
@@ -68,19 +68,17 @@ export function DesktopOptions({ onClose }: { onClose: () => void }) {
 
   const connectToWallet = (wallet: WalletConnector) => {
     setConnectionError(false);
-    if (wallet.ready) {
-      wallet?.connect?.()?.catch(() => {
-        setConnectionError(true);
-      });
+    wallet?.connect?.()?.catch(() => {
+      setConnectionError(true);
+    });
 
-      const getDesktopDeepLink = wallet.desktop?.getUri;
-      if (getDesktopDeepLink) {
-        // if desktop deep link, wait for uri
-        setTimeout(async () => {
-          const uri = await getDesktopDeepLink();
-          window.open(uri, safari ? '_blank' : '_self');
-        }, 0);
-      }
+    const getDesktopDeepLink = wallet.desktop?.getUri;
+    if (getDesktopDeepLink) {
+      // if desktop deep link, wait for uri
+      setTimeout(async () => {
+        const uri = await getDesktopDeepLink();
+        window.open(uri, safari ? '_blank' : '_self');
+      }, 0);
     }
   };
 

diff --git a/packages/rainbowkit/src/wallets/walletConnectors/index.ts b/packages/rainbowkit/src/wallets/walletConnectors/index.ts
@@ -6,6 +6,7 @@ import { injectedWallet } from './injectedWallet/injectedWallet';
 import { ledgerWallet } from './ledgerWallet/ledgerWallet';
 import { metaMaskWallet } from './metaMaskWallet/metaMaskWallet';
 import { omniWallet } from './omniWallet/omniWallet';
+import { phantomWallet } from './phantomWallet/phantomWallet';
 import { rainbowWallet } from './rainbowWallet/rainbowWallet';
 import { trustWallet } from './trustWallet/trustWallet';
 import { walletConnectWallet } from './walletConnectWallet/walletConnectWallet';
@@ -19,6 +20,7 @@ export {
   ledgerWallet,
   metaMaskWallet,
   omniWallet,
+  phantomWallet,
   rainbowWallet,
   trustWallet,
   walletConnectWallet,

diff --git a/packages/rainbowkit/src/wallets/walletConnectors/phantomWallet/phantomWallet.svg b/packages/rainbowkit/src/wallets/walletConnectors/phantomWallet/phantomWallet.svg
diff --git a/packages/rainbowkit/src/wallets/walletConnectors/phantomWallet/phantomWallet.ts b/packages/rainbowkit/src/wallets/walletConnectors/phantomWallet/phantomWallet.ts
@@ -0,0 +1,69 @@
+import { InjectedConnector } from 'wagmi/connectors/injected';
+import { Chain } from '../../../components/RainbowKitProvider/RainbowKitChainContext';
+import { Wallet } from '../../Wallet';
+
+export interface PhantomWalletOptions {
+  chains: Chain[];
+  shimDisconnect?: boolean;
+}
+
+export const phantomWallet = ({
+  chains,
+  shimDisconnect,
+}: PhantomWalletOptions): Wallet => {
+  return {
+    createConnector: () => {
+      const getProvider = () =>
+        typeof window !== 'undefined'
+          ? ((window as any).phantom as any)?.ethereum
+          : undefined;
+
+      const connector = new InjectedConnector({
+        chains,
+        options: { getProvider, shimDisconnect },
+      });
+
+      return {
+        connector,
+        extension: {
+          instructions: {
+            steps: [
+              {
+                description:
+                  'We recommend pinning Phantom to your taskbar for easier access to your wallet.',
+                step: 'install',
+                title: 'Install the Phantom extension',
+              },
+              {
+                description:
+                  'Be sure to back up your wallet using a secure method. Never share your secret recovery phrase with anyone.',
+                step: 'create',
+                title: 'Create or Import a Wallet',
+              },
+              {
+                description:
+                  'Once you set up your wallet, click below to refresh the browser and load up the extension.',
+                step: 'refresh',
+                title: 'Refresh your browser',
+              },
+            ],
+          },
+          learnMoreUrl: 'https://help.phantom.app',
+        },
+      };
+    },
+    downloadUrls: {
+      android: 'https://play.google.com/store/apps/details?id=app.phantom',
+      browserExtension: 'https://phantom.app/download',
+      ios: 'https://apps.apple.com/app/phantom-solana-wallet/1598432977',
+    },
+    iconBackground: '#551BF9',
+    iconUrl: async () => (await import('./phantomWallet.svg')).default,
+    id: 'phantom',
+    installed:
+      (typeof window !== 'undefined' &&
+        !!((window as any).phantom as any)?.ethereum) ||
+      undefined,
+    name: 'Phantom',
+  };
+};
diff --git a/site/components/Provider/Provider.tsx b/site/components/Provider/Provider.tsx
@@ -7,6 +7,7 @@ import {
   imTokenWallet,
   ledgerWallet,
   omniWallet,
+  phantomWallet,
   trustWallet,
 } from '@rainbow-me/rainbowkit/wallets';
 import React from 'react';
@@ -38,6 +39,7 @@ const connectors = connectorsForWallets([
       omniWallet({ chains }),
       imTokenWallet({ chains }),
       ledgerWallet({ chains }),
+      phantomWallet({ chains }),
     ],
   },
 ]);

diff --git a/site/data/docs/custom-wallet-list.mdx b/site/data/docs/custom-wallet-list.mdx
@@ -169,6 +169,17 @@ omniWallet(options: {
 });
 ```
 
+#### Phantom
+
+```tsx
+import { phantomWallet } from '@rainbow-me/rainbowkit/wallets';
+
+phantomWallet(options: {
+  chains: Chain[];
+  shimDisconnect?: boolean;
+});
+```
+
 #### Rainbow
 
 ```tsx