add phantom wallet (#182)

* add phantom wallet

* detect metamask mimicking

* bump wagmi to version that has phantom name mapping

wevm/references@4d2c90a

* bump wagmi in rollup

* bump all wagmi references to 0.12.2

* change install flag to check window.phantom

* Add Optional chaining to isPhantom Check

---------

Co-authored-by: Lochie Axon <[email protected]>

packages/connectkit/src/assets/logos.tsx

@@ -757,6 +757,87 @@ export const Zerion = ({ ...props }) => (
     />
   </svg>
 );
+
+export const Phantom = () => (
+  <svg
+    width="128"
+    height="128"
+    viewBox="0 0 128 128"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_51_1414)">
+      <circle cx="64" cy="64" r="64" fill="url(#paint0_linear_51_1414)" />
+      <g filter="url(#filter0_d_51_1414)">
+        <path
+          d="M110.584 64.9142H99.1422C99.1422 41.7651 80.1732 23 56.7725 23C33.6614 23 14.8718 41.3057 14.412 64.0583C13.9362 87.577 36.2412 108 60.0188 108H63.0096C83.9725 108 112.069 91.7667 116.459 71.9874C117.27 68.3413 114.359 64.9142 110.584 64.9142ZM39.769 65.9454C39.769 69.0411 37.2097 71.5729 34.0804 71.5729C30.9511 71.5729 28.3917 69.0399 28.3917 65.9454V56.8414C28.3917 53.7457 30.9511 51.2139 34.0804 51.2139C37.2097 51.2139 39.769 53.7457 39.769 56.8414V65.9454ZM59.5226 65.9454C59.5226 69.0411 56.9633 71.5729 53.834 71.5729C50.7046 71.5729 48.1453 69.0399 48.1453 65.9454V56.8414C48.1453 53.7457 50.7058 51.2139 53.834 51.2139C56.9633 51.2139 59.5226 53.7457 59.5226 56.8414V65.9454Z"
+          fill="url(#paint1_linear_51_1414)"
+        />
+      </g>
+    </g>
+    <defs>
+      <filter
+        id="filter0_d_51_1414"
+        x="6.76403"
+        y="15.3596"
+        width="117.472"
+        height="100.281"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset />
+        <feGaussianBlur stdDeviation="3.82022" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_51_1414"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect1_dropShadow_51_1414"
+          result="shape"
+        />
+      </filter>
+      <linearGradient
+        id="paint0_linear_51_1414"
+        x1="64"
+        y1="0"
+        x2="64"
+        y2="128"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#534BB1" />
+        <stop offset="1" stop-color="#551BF9" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_51_1414"
+        x1="65.5"
+        y1="23"
+        x2="65.5"
+        y2="108"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="white" />
+        <stop offset="1" stop-color="white" stop-opacity="0.82" />
+      </linearGradient>
+      <clipPath id="clip0_51_1414">
+        <rect width="128" height="128" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
 export const PlaceHolder = () => {
   return <div style={{ width: 80, height: 80, background: '#555' }}></div>;
 };
@@ -847,6 +928,7 @@ export default {
   GnosisSafe,
   Frontier,
   Zerion,
+  Phantom,
   PlaceHolder,
   Dawn,
 };

packages/connectkit/src/utils/index.ts

@@ -112,6 +112,8 @@ const isMetaMask = () => {
   const isTokenary = Boolean(ethereum.isTokenary);
   if (isTokenary) return false;
 
+  if (isPhantom()) return false;
+
   return true;
 };
 
@@ -136,6 +138,14 @@ const isCoinbaseWallet = () => {
   );
 };
 
+const isPhantom = () => {
+  if (typeof window === 'undefined') return false;
+  const { phantom } = window as any;
+  const isPhantom = Boolean(phantom?.ethereum?.isPhantom);
+  if (isPhantom) return true;
+  return false;
+};
+
 type ReactChildArray = ReturnType<typeof React.Children.toArray>;
 function flattenChildren(children: React.ReactNode): ReactChildArray {
   const childrenArray = React.Children.toArray(children);
@@ -179,5 +189,6 @@ export {
   isMetaMask,
   isDawn,
   isCoinbaseWallet,
+  isPhantom,
   flattenChildren,
 };

packages/connectkit/src/wallets/connectors/phantom.tsx

@@ -0,0 +1,16 @@
+import { WalletProps } from '../wallet';
+
+import { isPhantom } from '../../utils';
+import Logos from '../../assets/logos';
+
+export const phantom = (): WalletProps => {
+  const isInstalled = isPhantom();
+  return {
+    id: 'phantom',
+    name: 'Phantom',
+    shortName: 'Phantom',
+    scannable: false,
+    logos: { default: <Logos.Phantom /> },
+    installed: Boolean(isInstalled),
+  };
+};

packages/connectkit/src/wallets/index.ts

@@ -15,8 +15,10 @@ import { onto } from './connectors/onto';
 import { gnosisSafe } from './connectors/gnosisSafe';
 import { frontier } from './connectors/frontier';
 import { zerion } from './connectors/zerion';
+import { phantom } from './connectors/phantom';
 import { dawn } from './connectors/dawn';
 
+
 export const getWallets = () => {
   return [
     injected(),
@@ -36,6 +38,7 @@ export const getWallets = () => {
     onto(),
     frontier(),
     zerion(),
-    dawn()
+    phantom(),
+    dawn(),
   ];
 };

packages/connectkit/src/wallets/useDefaultWallets.tsx

@@ -29,7 +29,8 @@ function useDefaultWallets(): WalletProps[] | any {
     'gnosisSafe',
     'frontier',
     'zerion',
-    'dawn'
+    'phantom',
+    'dawn',
   );
 
   const wallets = getWallets();