fix: disabled JoyID connector

README.md

@@ -18,9 +18,9 @@ the creation and transfer of clusters, as well as minting, transferring, and mel
 This project currently supports the following wallets:
 
 - [MetaMask](https://metamask.io) - A crypto wallet & gateway to blockchain apps.
-- [JoyID](https://joy.id) - Universal Account Protocol for Web3 Mass-adoption.
+- ~~[JoyID](https://joy.id) - Universal Account Protocol for Web3 Mass-adoption.~~ (We temporarily disable JoyID in the demo to avoid confusion. It will be re-added when we can fully support JoyID. See [issue#69](https://github.com/sporeprotocol/spore-demo/issues/69))
 
-> This project integrates MetaMask and JoyID through the use of [Omnilock](https://blog.cryptape.com/omnilock-a-universal-lock-that-powers-interoperability-1) for now.
+> This project integrates MetaMask ~~and JoyID~~ through the use of [Omnilock](https://blog.cryptape.com/omnilock-a-universal-lock-that-powers-interoperability-1) for now.
 
 ## Installation
 

src/components/ConnectModal.tsx

@@ -1,7 +1,8 @@
 import CKBConnector from '@/connectors/base';
 import { showError } from '@/utils/notifications';
-import { Button, Flex, createStyles } from '@mantine/core';
+import { Text, Alert, Button, Flex, createStyles } from '@mantine/core';
 import Image from 'next/image';
+import Link from 'next/link';
 import { useState } from 'react';
 
 export interface ConnectModalProps {
@@ -27,8 +28,8 @@ const useStyles = createStyles((theme) => ({
 
     '&.joyid': {
       borderRadius: '12px',
-      border: `0.5px solid ${theme.colors.background[0]}`
-    }
+      border: `0.5px solid ${theme.colors.background[0]}`,
+    },
   },
 }));
 
@@ -49,13 +50,28 @@ export default function ConnectModal(props: ConnectModalProps) {
 
   return (
     <Flex direction="column" gap="md">
+      <Alert variant="filled" color="brand.1" title="JoyID deprecated">
+        {`We've deprecate the JoyID (Omnilock) option because it is more recommended to connect to JoyID using the JoyId lock instead of Omnilock.`}
+        <Link
+          href="https://github.com/sporeprotocol/spore-demo/issues/69"
+          target="_blank"
+          style={{
+            textDecoration: 'none',
+          }}
+        >
+          <Text color="brand.0">See spore-demo issue #69</Text>
+        </Link>
+      </Alert>
       {connectors.map((connector) => (
         <Button
           key={connector.type}
           className={classes.button}
+          style={{
+            cursor: connector.enabled ? 'pointer' : 'not-allowed',
+          }}
           onClick={() => connect(connector)}
           loading={connectingConnector === connector.type}
-          disabled={!connector.enable}
+          disabled={!connector.enabled}
         >
           <Flex align="center" gap="xs">
             <Image
@@ -65,7 +81,7 @@ export default function ConnectModal(props: ConnectModalProps) {
               width="24"
               height="24"
             />
-            {connector.type} {connector.enable ? '' : '(Coming Soon)'}
+            {connector.type}
           </Flex>
         </Button>
       ))}

src/connectors/base.ts

@@ -4,7 +4,7 @@ import { Script, Transaction, config, helpers } from '@ckb-lumos/lumos';
 
 export default abstract class CKBConnector {
   private _isConnected: boolean = false;
-  private _enable: boolean = true;
+  private _enabled: boolean = true;
   protected store = store;
   abstract type: string;
   abstract icon: string;
@@ -17,12 +17,12 @@ export default abstract class CKBConnector {
     return this._isConnected;
   }
 
-  protected set enable(val: boolean) {
-    this._enable = val;
+  protected set enabled(val: boolean) {
+    this._enabled = val;
   }
 
-  public get enable() {
-    return this._enable;
+  public get enabled() {
+    return this._enabled;
   }
 
   public get lock(): Script | undefined {

src/connectors/joyId.ts

@@ -20,6 +20,7 @@ export default class JoyIdConnector extends CKBConnector {
       name: 'Spore Demo',
       joyidAppURL: 'https://testnet.joyid.dev',
     });
+    this.enabled = false;
   }
 
   private setAddress(ethAddress: `0x${string}` | undefined) {