feat(connect-kit): add joyid support

packages/connect-kit/package.json

@@ -40,6 +40,7 @@
  "@crossbell/util-hooks": "^1.5.20",
  "@crossbell/util-metadata": "^1.5.20",
  "@emotion/react": "^11",
+ "@joyid/wagmi": "^0.1.0",
  "@mantine/core": "^6",
  "@mantine/hooks": "^6",
  "@mantine/notifications": "^6",

packages/connect-kit/src/components/icons/index.tsx

@@ -341,3 +341,43 @@ export const OKXIcon = (props: React.SVGAttributes<SVGSVGElement>) => (
  </g>
  </svg>
 );
+
+export const JoyidIcon = (props: React.SVGAttributes<SVGSVGElement>) => (
+ <svg
+ viewBox="0 0 204 172"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ width="1em"
+ height="1em"
+ {...props}
+ >
+ <path
+ d="M146.997 83.8265C152.856 83.8265 157.606 79.0803 157.606 73.2255C157.606 67.3707 152.856 62.6245 146.997 62.6245C141.138 62.6245 136.389 67.3707 136.389 73.2255C136.389 79.0803 141.138 83.8265 146.997 83.8265Z"
+ fill="#8CDD00"
+ />
+ <path
+ d="M75.5773 62.6245C70.267 62.6245 65.9561 66.9323 65.9561 72.2388C65.9561 77.5453 70.267 81.8531 75.5773 81.8531C80.8877 81.8531 85.1987 77.5453 85.1987 72.2388C85.1866 66.9323 80.8877 62.6245 75.5773 62.6245Z"
+ fill="#8CDD00"
+ />
+ <path
+ d="M104.574 54.7432L93.9416 105.257C92.9542 109.974 88.7276 113.392 83.911 113.392C80.7922 113.392 77.8901 111.996 75.9273 109.577C74.3981 107.688 73.6274 105.366 73.6635 102.983L54.457 107.941C55.2759 112.97 57.347 117.772 60.6465 121.875C66.3422 128.938 74.8195 132.993 83.8989 132.993C97.9395 132.993 110.222 123.03 113.112 109.3L124.6 54.7551H104.574V54.7432Z"
+ fill="#C1C1C1"
+ />
+ <path
+ d="M194.575 18.8487C188.132 10.919 178.571 6.37061 168.348 6.37061H144.686L140.556 25.9602H168.348C172.635 25.9602 176.645 27.8614 179.342 31.1945C182.039 34.5156 183.087 38.8354 182.208 43.0228L178.077 62.6245H198.115L201.402 47.066C203.497 37.0666 201.017 26.7784 194.575 18.8487Z"
+ fill="#8CDD00"
+ />
+ <path
+ d="M164.71 126.134C161.82 139.852 149.55 149.803 135.521 149.803H114.46L110.33 169.393H135.521C158.762 169.393 179.112 152.895 183.893 130.165L187.361 113.68H167.323L164.71 126.134Z"
+ fill="#8CDD00"
+ />
+ <path
+ d="M20.2964 45.5976L16.708 62.6362H36.7453L39.4788 49.6406C42.3688 35.9231 54.6392 25.9719 68.6678 25.9719H88.8496L92.9799 6.38233H68.6678C45.4273 6.3703 25.0769 22.8674 20.2964 45.5976Z"
+ fill="#8CDD00"
+ />
+ <path
+ d="M24.847 144.557C22.1497 141.235 21.1021 136.916 21.9812 132.728L25.6418 115.365L4.44842 120.828L2.78674 128.697C0.679446 138.697 3.17205 148.985 9.61434 156.914C16.0566 164.844 25.6177 169.393 35.8411 169.393H58.6239L62.7542 149.803H35.8411C31.5542 149.791 27.5443 147.89 24.847 144.557Z"
+ fill="#8CDD00"
+ />
+ </svg>
+);

packages/connect-kit/src/create-wagmi-config.ts

@@ -10,6 +10,7 @@ import { InjectedConnector } from "wagmi/connectors/injected";
 import { MetaMaskConnector } from "wagmi/connectors/metaMask";
 import { w3mProvider } from "@web3modal/ethereum";
 import compact from "lodash.compact";
+import { JoyIdConnector } from "@joyid/wagmi";
 
 import {
  CoinbaseWalletConnector,
@@ -70,6 +71,15 @@ export function createWagmiConfig({
  headlessMode: true,
  },
  }),
+ new JoyIdConnector({
+ chains,
+ options: {
+ name: "Crossbell",
+ logo: "https://crossbell.io/logos/crossbell.svg",
+ joyidAppURL: "https://testnet.joyid.dev", // Used for testing
+ // joyidAppURL: "https://app.joy.id",
+ },
+ }),
  walletConnectV2ProjectId
  ? new WalletConnectConnector({
  options: {

packages/connect-kit/src/wallets/wallets/index.ts

@@ -2,6 +2,7 @@ import React from "react";
 import { Connector, useConfig } from "wagmi";
 import compact from "lodash.compact";
 
+import type { JoyIdConnector } from "@joyid/wagmi";
 import type { MetaMaskConnector } from "wagmi/connectors/metaMask";
 import type { CoinbaseWalletConnector } from "wagmi/connectors/coinbaseWallet";
 import type { InjectedConnector } from "wagmi/connectors/injected";
@@ -12,13 +13,15 @@ import { metaMaskWallet } from "./meta-mask-wallet";
 import { coinbaseWallet } from "./coinbase-wallet";
 import { okxWallet } from "./okx-wallet";
 import { browserWallet } from "./browser-wallet";
+import { joyidWallet } from "./joyid-wallet";
 
 enum KnownConnector {
  metaMask = "metaMask",
  okx = "okx",
  coinbaseWallet = "coinbaseWallet",
  injected = "injected",
  walletConnect = "walletConnect",
+ joyid = "joyid",
 }
 
 type ConnectorMap = Partial<{
@@ -27,6 +30,7 @@ type ConnectorMap = Partial<{
  [KnownConnector.coinbaseWallet]: CoinbaseWalletConnector;
  [KnownConnector.injected]: InjectedConnector;
  [KnownConnector.walletConnect]: WalletConnectConnector;
+ [KnownConnector.joyid]: JoyIdConnector;
 }>;
 
 export function useWalletConnectors() {
@@ -41,6 +45,7 @@ export function useWalletConnectors() {
  compact([
  okxWallet(connectorMap.okx),
  metaMaskWallet(connectorMap.metaMask, connectorMap.walletConnect),
+ joyidWallet(connectorMap.joyid),
  coinbaseWallet(connectorMap.coinbaseWallet),
  browserWallet(connectorMap.injected),
  ]),

packages/connect-kit/src/wallets/wallets/joyid-wallet/index.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import type { JoyIdConnector } from "@joyid/wagmi";
+
+import { JoyidIcon } from "../../../components";
+import { Wallet } from "../../types";
+
+import styles from "../coinbase-wallet/index.module.css";
+
+export const joyidWallet = (connector?: JoyIdConnector): Wallet | null => {
+ if (!connector) return null;
+
+ const installed = typeof window !== "undefined";
+
+ return installed
+ ? {
+ id: "joyid",
+ name: "JoyID",
+ installed: installed,
+ icon: <JoyidIcon className={styles.icon} />,
+ createConnector: () => ({ connector }),
+ }
+ : null;
+};