feat: add external connectors

package.json

@@ -33,17 +33,16 @@
     "@cosmjs/stargate": "^0.32.4",
     "@keplr-wallet/types": "^0.12.156",
     "buffer": "^6.0.3",
-    "nanoevents": "^9.1.0",
-    "react-icons": "^5.3.0"
+    "nanoevents": "^9.1.0"
   },
   "files": [
     "dist"
   ],
   "peerDependencies": {
+    "@babylonlabs-io/bbn-core-ui": "^0.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "tailwind-merge": "^2.5.4",
-    "@babylonlabs-io/bbn-core-ui": "^0.2.0"
+    "tailwind-merge": "^2.5.4"
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.9",

src/components/Chains/container.tsx

@@ -10,6 +10,7 @@ interface ContainerProps {
   className?: string;
   onClose?: () => void;
   onConfirm?: () => void;
+  onDisconnectWallet?: (chainId: string) => void;
 }
 
 export default function ChainsContainer(props: ContainerProps) {

src/components/Chains/index.tsx

@@ -2,7 +2,7 @@ import { memo } from "react";
 import { twMerge } from "tailwind-merge";
 import { Button, DialogBody, DialogFooter, DialogHeader, Text } from "@babylonlabs-io/bbn-core-ui";
 
-import ConnectedWallet from "@/components/ConnectedWallet/container";
+import { ConnectedWallet } from "@/components/ConnectedWallet";
 import { ChainButton } from "@/components/ChainButton";
 import type { IChain, IWallet } from "@/core/types";
 
@@ -13,11 +13,21 @@ interface ChainsProps {
   selectedWallets?: Record<string, IWallet | undefined>;
   onClose?: () => void;
   onConfirm?: () => void;
+  onDisconnectWallet?: (chainId: string) => void;
   onSelectChain?: (chain: IChain) => void;
 }
 
 export const Chains = memo(
-  ({ disabled = false, chains, selectedWallets = {}, className, onClose, onConfirm, onSelectChain }: ChainsProps) => (
+  ({
+    disabled = false,
+    chains,
+    selectedWallets = {},
+    className,
+    onClose,
+    onConfirm,
+    onSelectChain,
+    onDisconnectWallet,
+  }: ChainsProps) => (
     <div className={twMerge("b-flex b-flex-1 b-flex-col", className)}>
       <DialogHeader className="b-mb-10" title="Connect Wallets" onClose={onClose}>
         <Text>Connect to both Bitcoin and Babylon Chain Wallets</Text>
@@ -42,6 +52,7 @@ export const Chains = memo(
                   logo={selectedWallet.icon}
                   name={selectedWallet.name}
                   address={selectedWallet.account?.address ?? ""}
+                  onDisconnect={onDisconnectWallet}
                 />
               )}
             </ChainButton>

src/components/WalletProvider/components/Screen.tsx

@@ -6,14 +6,15 @@ import { TermsOfService } from "@/components/TermsOfService";
 import { LoaderScreen } from "@/components/Loader";
 
 import type { IChain, IWallet } from "@/core/types";
-import type { Screen } from "@/state/types";
+import type { Screen } from "@/context/State.context";
 
 interface ScreenProps {
   className?: string;
   current: Screen;
   lockInscriptions?: boolean;
   widgets?: Record<string, JSX.Element | undefined>;
   onSelectWallet?: (chain: IChain, wallet: IWallet) => void;
+  onDisconnectWallet?: (chainId: string) => void;
   onAccepTermsOfService?: () => void;
   onToggleInscriptions?: (value: boolean, showAgain: boolean) => void;
   onClose?: () => void;
@@ -24,8 +25,8 @@ const SCREENS = {
   TERMS_OF_SERVICE: ({ className, onClose, onAccepTermsOfService }: ScreenProps) => (
     <TermsOfService className={className} onClose={onClose} onSubmit={onAccepTermsOfService} />
   ),
-  CHAINS: ({ className, onClose, onConfirm }: ScreenProps) => (
-    <Chains className={className} onClose={onClose} onConfirm={onConfirm} />
+  CHAINS: ({ className, onClose, onConfirm, onDisconnectWallet }: ScreenProps) => (
+    <Chains className={className} onClose={onClose} onConfirm={onConfirm} onDisconnectWallet={onDisconnectWallet} />
   ),
   WALLETS: ({ className, widgets, onClose, onSelectWallet }: ScreenProps) => (
     <Wallets widgets={widgets} className={className} onClose={onClose} onSelectWallet={onSelectWallet} />