feat: Add TokenPocket Wallet support

packages/connectkit/src/assets/logos.tsx

@@ -987,6 +987,33 @@ const Rabby = ({ ...props }) => (
   </svg>
 );
 
+const TokenPocket = ({ ...props }) => (
+  <svg
+    {...props}
+    width="88px" height="88px" viewBox="0 0 88 88" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient x1="107.511425%" y1="50.0147427%" x2="0.0459570557%" y2="50.0147427%" id="linearGradient-1">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0.3233" offset="96.67%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0.3" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="tokenpocket" fill-rule="nonzero">
+            <polygon fill="#2980FE" points="87.9604864 0 0 0 0 88 87.9604864 88"></polygon>
+            <g transform="translate(16.052385, 23.804688)">
+                <path d="M19.6653508,13.8911953 L19.6784508,13.8911953 C19.6653508,13.8236484 19.6653508,13.7448437 19.6653508,13.6772969 L19.6653508,13.8911953 Z" fill="#29AEFF"></path>
+                <path d="M41.1271993,16.0301797 L29.2440711,16.0301797 L29.2440711,38.4205938 C29.2440711,39.4787422 30.0635659,40.3343359 31.0771712,40.3343359 L39.2940168,40.3343359 C40.3077044,40.3343359 41.1271993,39.4787422 41.1271993,38.4205938 L41.1271993,16.0301797 Z" fill="#FFFFFF"></path>
+                <path d="M23.5075248,0 L23.1085201,0 L1.83318241,0 C0.819494855,0 0,0.855507812 0,1.91374219 L0,9.68111719 C0,10.7393516 0.819494855,11.5948594 1.83318241,11.5948594 L6.82580355,11.5948594 L8.80996071,11.5948594 L8.80996071,13.8912813 L8.80996071,38.4768828 C8.80996071,39.5351172 9.62945557,40.390625 10.6430608,40.390625 L18.4502002,40.390625 C19.4638054,40.390625 20.2833003,39.5351172 20.2833003,38.4768828 L20.2833003,13.8912813 L20.2833003,13.6774688 L20.2833003,11.5948594 L22.2674574,11.5948594 L23.0761684,11.5948594 L23.4751731,11.5948594 C26.5376389,11.5948594 29.0285575,8.99447656 29.0285575,5.79742969 C29.0609093,2.60038281 26.5699906,0 23.5075248,0 Z" fill="#FFFFFF"></path>
+                <path d="M41.1381478,16.0301797 L41.1381478,31.6550781 C41.5479364,31.7563984 41.9684266,31.8352031 42.399783,31.90275 C43.0036819,31.9928125 43.6290664,32.0491016 44.2545332,32.0603594 C44.2868849,32.0603594 44.3192367,32.0603594 44.3623723,32.0603594 L44.3623723,19.6324219 C42.5615416,19.5085859 41.1381478,17.9438359 41.1381478,16.0301797 Z" fill="url(#linearGradient-1)"></path>
+                <path d="M44.5993714,0 C36.1237942,0 29.2440711,7.18205469 29.2440711,16.0301797 C29.2440711,23.6400312 34.3229635,30.0115234 41.1379832,31.6550781 L41.1379832,16.0301797 C41.1379832,14.0376328 42.6907839,12.4165937 44.5993714,12.4165937 C46.5080412,12.4165937 48.0608419,14.0376328 48.0608419,16.0301797 C48.0608419,17.7075078 46.9717493,19.1146484 45.483652,19.5198437 C45.2032703,19.5986484 44.9013209,19.6436797 44.5993714,19.6436797 L44.5993714,32.0603594 C44.9013209,32.0603594 45.1924864,32.0491016 45.483652,32.0378438 C53.5495229,31.5537578 59.9547666,24.5743438 59.9547666,16.0301797 C59.9655379,7.18205469 53.0858148,0 44.5993714,0 Z" fill="#FFFFFF"></path>
+                <path d="M44.5992891,32.0603594 L44.5992891,19.6436797 C44.5131001,19.6436797 44.4376127,19.6436797 44.3513414,19.6324219 L44.3513414,32.0603594 C44.4376127,32.0603594 44.523884,32.0603594 44.5992891,32.0603594 Z" fill="#FFFFFF"></path>
+            </g>
+        </g>
+    </g>
+  </svg>
+);
+
 export const OtherWallets = ({ ...props }) => {
   const column: React.CSSProperties = {
     position: 'relative',
@@ -1053,4 +1080,5 @@ export default {
   Frame,
   Dawn,
   Rabby,
+  TokenPocket,
 };

packages/connectkit/src/utils/index.ts

@@ -118,6 +118,9 @@ const isMetaMask = () => {
   const isRabby = Boolean(ethereum.isRabby);
   if (isRabby) return false;
 
+  const isTokenPocket = Boolean(ethereum.isTokenPocket);
+  if (isTokenPocket) return false;
+
   if (isPhantom()) return false;
 
   return true;
@@ -174,6 +177,13 @@ const isRabby = () => {
   );
 };
 
+const isTokenPocket = () => {
+  if (typeof window === 'undefined') return false;
+  const { ethereum } = window;
+
+  return Boolean(ethereum?.isTokenPocket);
+}
+
 type ReactChildArray = ReturnType<typeof React.Children.toArray>;
 function flattenChildren(children: React.ReactNode): ReactChildArray {
   const childrenArray = React.Children.toArray(children);
@@ -220,5 +230,6 @@ export {
   isFrame,
   isPhantom,
   isRabby,
+  isTokenPocket,
   flattenChildren,
 };

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

@@ -0,0 +1,27 @@
+import { WalletProps } from '../wallet';
+
+import { isTokenPocket } from '../../utils';
+import Logos from '../../assets/logos';
+
+export const tokenPocket = (): WalletProps => {
+  const isInstalled = isTokenPocket();
+
+  return {
+    id: 'tokenPocket',
+    name: 'TokenPocket Wallet',
+    logos: {
+      default: <Logos.TokenPocket />
+    },
+    logoBackground: '#2980FE',
+    scannable: false,
+    downloadUrls: {
+      website: 'https://www.tokenpocket.pro/en/download/app',
+      download: 'https://www.tokenpocket.pro/en/download/app',
+      android: 'https://play.google.com/store/apps/details?id=vip.mytokenpocket',
+      ios: 'https://apps.apple.com/us/app/tp-global-wallet/id6444625622',
+      chrome:
+        'https://chrome.google.com/webstore/detail/tokenpocket/mfgccjchihfkkindfppnaooecgfneiii',
+    },
+    installed: isInstalled,
+  };
+};

packages/connectkit/src/wallets/index.ts

@@ -20,6 +20,7 @@ import { frame } from './connectors/frame';
 import { phantom } from './connectors/phantom';
 import { dawn } from './connectors/dawn';
 import { rabby } from './connectors/rabby';
+import { tokenPocket } from './connectors/tokenPocket';
 
 export const getWallets = () => {
   return [
@@ -47,5 +48,6 @@ export const getWallets = () => {
     phantom(),
     dawn(),
     rabby(),
+    tokenPocket(),
   ];
 };

packages/connectkit/src/wallets/useDefaultWallets.tsx

@@ -33,7 +33,8 @@ function useDefaultWallets(): WalletProps[] | any {
     'frame',
     'phantom',
     'dawn',
-    'rabby'
+    'rabby',
+    'tokenPocket'
   );
 
   const wallets = getWallets();