From 4318d1df611fa93438ee5758470535e6c77a35a3 Mon Sep 17 00:00:00 2001
From: ahonn <ahonn95@outlook.com>
Date: Thu, 8 Feb 2024 13:35:30 +1100
Subject: [PATCH 1/6] fix: hide JoyID connector

---
 src/components/ConnectModal.tsx | 4 +++-
 src/connectors/base.ts          | 1 +
 src/connectors/joyId.ts         | 1 +
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/ConnectModal.tsx b/src/components/ConnectModal.tsx
index 216ae9c..818795c 100644
--- a/src/components/ConnectModal.tsx
+++ b/src/components/ConnectModal.tsx
@@ -47,9 +47,11 @@ export default function ConnectModal(props: ConnectModalProps) {
     }
   };
 
+  const visibleConnectors = connectors.filter((connector) => connector.visible !== false);
+
   return (
     <Flex direction="column" gap="md">
-      {connectors.map((connector) => (
+      {visibleConnectors.map((connector) => (
         <Button
           key={connector.type}
           className={classes.button}
diff --git a/src/connectors/base.ts b/src/connectors/base.ts
index 8236875..537c275 100644
--- a/src/connectors/base.ts
+++ b/src/connectors/base.ts
@@ -8,6 +8,7 @@ export default abstract class CKBConnector {
   protected store = store;
   abstract type: string;
   abstract icon: string;
+  public visible: boolean = true;
 
   protected set isConnected(val: boolean) {
     this._isConnected = val;
diff --git a/src/connectors/joyId.ts b/src/connectors/joyId.ts
index 77a7a52..b22431b 100644
--- a/src/connectors/joyId.ts
+++ b/src/connectors/joyId.ts
@@ -12,6 +12,7 @@ import { bytes } from '@ckb-lumos/codec';
 export default class JoyIdConnector extends CKBConnector {
   public type: string = 'JoyID';
   public icon = '/images/joyid-icon.png';
+  public visible = false;
 
   constructor() {
     super();

From 18e897fc7eecda6b180ad41f5398e7b606da7237 Mon Sep 17 00:00:00 2001
From: ahonn <ahonn95@outlook.com>
Date: Thu, 8 Feb 2024 13:54:11 +1100
Subject: [PATCH 2/6] docs: update README

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index c82713c..296b74d 100644
--- a/README.md
+++ b/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#67](https://github.com/sporeprotocol/spore-demo/issues/67))
 
-> 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
 

From a968dc24a4c5b8d576f28ffa14ca70a125c2f5a4 Mon Sep 17 00:00:00 2001
From: ahonn <ahonn95@outlook.com>
Date: Thu, 8 Feb 2024 14:56:17 +1100
Subject: [PATCH 3/6] feat: disabled JoyID connector and add deprecated alert

---
 src/components/ConnectModal.tsx | 30 +++++++++++++++++++++---------
 src/connectors/base.ts          | 11 +++++------
 src/connectors/joyId.ts         |  2 +-
 3 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/components/ConnectModal.tsx b/src/components/ConnectModal.tsx
index 818795c..55e7143 100644
--- a/src/components/ConnectModal.tsx
+++ b/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]}`,
+    },
   },
 }));
 
@@ -47,17 +48,28 @@ export default function ConnectModal(props: ConnectModalProps) {
     }
   };
 
-  const visibleConnectors = connectors.filter((connector) => connector.visible !== false);
-
   return (
     <Flex direction="column" gap="md">
-      {visibleConnectors.map((connector) => (
+      <Alert variant="filled" color="brand.1" title="JoyID deprecated">
+        We are 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}
+          className={`${classes.button} ${!connector.enabled ? 'disabled' : ''}`}
           onClick={() => connect(connector)}
           loading={connectingConnector === connector.type}
-          disabled={!connector.enable}
+          disabled={!connector.enabled}
         >
           <Flex align="center" gap="xs">
             <Image
@@ -67,7 +79,7 @@ export default function ConnectModal(props: ConnectModalProps) {
               width="24"
               height="24"
             />
-            {connector.type} {connector.enable ? '' : '(Coming Soon)'}
+            {connector.type}
           </Flex>
         </Button>
       ))}
diff --git a/src/connectors/base.ts b/src/connectors/base.ts
index 537c275..45e19ea 100644
--- a/src/connectors/base.ts
+++ b/src/connectors/base.ts
@@ -4,11 +4,10 @@ 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;
-  public visible: boolean = true;
 
   protected set isConnected(val: boolean) {
     this._isConnected = val;
@@ -18,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 {
diff --git a/src/connectors/joyId.ts b/src/connectors/joyId.ts
index b22431b..b58c4a7 100644
--- a/src/connectors/joyId.ts
+++ b/src/connectors/joyId.ts
@@ -12,7 +12,6 @@ import { bytes } from '@ckb-lumos/codec';
 export default class JoyIdConnector extends CKBConnector {
   public type: string = 'JoyID';
   public icon = '/images/joyid-icon.png';
-  public visible = false;
 
   constructor() {
     super();
@@ -21,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) {

From 72c6e0d9aef2f8af26fe85faf461a22715f1cb33 Mon Sep 17 00:00:00 2001
From: ahonn <ahonn95@outlook.com>
Date: Thu, 8 Feb 2024 15:00:16 +1100
Subject: [PATCH 4/6] docs: update README

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 296b74d..2f4d487 100644
--- a/README.md
+++ b/README.md
@@ -18,7 +18,7 @@ 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.~~ (We temporarily disable JoyID in the demo to avoid confusion. It will be re-added when we can fully support JoyID. See [issue#67](https://github.com/sporeprotocol/spore-demo/issues/67))
+- ~~[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.
 

From de5d1c2ce99f6055402ca33e92f31ffda881a7b9 Mon Sep 17 00:00:00 2001
From: ahonn <ahonn95@outlook.com>
Date: Thu, 8 Feb 2024 15:04:21 +1100
Subject: [PATCH 5/6] feat: add connect button cursor styling

---
 src/components/ConnectModal.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/ConnectModal.tsx b/src/components/ConnectModal.tsx
index 55e7143..0f23660 100644
--- a/src/components/ConnectModal.tsx
+++ b/src/components/ConnectModal.tsx
@@ -66,7 +66,10 @@ export default function ConnectModal(props: ConnectModalProps) {
       {connectors.map((connector) => (
         <Button
           key={connector.type}
-          className={`${classes.button} ${!connector.enabled ? 'disabled' : ''}`}
+          className={classes.button}
+          style={{
+            cursor: connector.enabled ? 'pointer' : 'not-allowed',
+          }}
           onClick={() => connect(connector)}
           loading={connectingConnector === connector.type}
           disabled={!connector.enabled}

From 33ab9d164ef84b50405e08eb9a01777cc013c5b8 Mon Sep 17 00:00:00 2001
From: ahonn <ahonn95@outlook.com>
Date: Thu, 8 Feb 2024 15:15:01 +1100
Subject: [PATCH 6/6] fix: fix grammar error

---
 src/components/ConnectModal.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/ConnectModal.tsx b/src/components/ConnectModal.tsx
index 0f23660..e0d98d4 100644
--- a/src/components/ConnectModal.tsx
+++ b/src/components/ConnectModal.tsx
@@ -51,8 +51,7 @@ export default function ConnectModal(props: ConnectModalProps) {
   return (
     <Flex direction="column" gap="md">
       <Alert variant="filled" color="brand.1" title="JoyID deprecated">
-        We are deprecate the JoyID (Omnilock) option because it is more recommended to connect to
-        JoyID using the JoyId lock instead of Omnilock.
+        {`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"