feat: change wallet connection flow

.changeset/tame-carrots-cheat.md

@@ -0,0 +1,5 @@
+---
+"@babylonlabs-io/bbn-wallet-connect": patch
+---
+
+feat: change wallet connection flow

package.json

@@ -30,7 +30,6 @@
     "release": "npm run build && changeset publish"
   },
   "dependencies": {
-    "@babylonlabs-io/bbn-core-ui": "^0.2.0",
     "@cosmjs/stargate": "^0.32.4",
     "@keplr-wallet/types": "^0.12.156",
     "buffer": "^6.0.3",
@@ -43,7 +42,8 @@
   "peerDependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "tailwind-merge": "^2.5.4"
+    "tailwind-merge": "^2.5.4",
+    "@babylonlabs-io/bbn-core-ui": "^0.2.0"
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.9",

src/components/Chains/container.tsx

@@ -9,11 +9,12 @@ import { useWalletConnect } from "@/hooks/useWalletConnect";
 interface ContainerProps {
   className?: string;
   onClose?: () => void;
+  onConfirm?: () => void;
 }
 
 export default function ChainsContainer(props: ContainerProps) {
   const { chains, selectedWallets, displayWallets } = useWidgetState();
-  const { connected } = useWalletConnect();
+  const { selected } = useWalletConnect();
 
   const chainArr = useMemo(() => Object.values(chains), [chains]);
 
@@ -26,7 +27,7 @@ export default function ChainsContainer(props: ContainerProps) {
 
   return (
     <Chains
-      disabled={!connected}
+      disabled={!selected}
       chains={chainArr}
       selectedWallets={selectedWallets}
       onSelectChain={handleSelectChain}

src/components/Chains/index.tsx

@@ -12,11 +12,12 @@ interface ChainsProps {
   className?: string;
   selectedWallets?: Record<string, IWallet | undefined>;
   onClose?: () => void;
+  onConfirm?: () => void;
   onSelectChain?: (chain: IChain) => void;
 }
 
 export const Chains = memo(
-  ({ disabled = false, chains, selectedWallets = {}, className, onClose, onSelectChain }: ChainsProps) => (
+  ({ disabled = false, chains, selectedWallets = {}, className, onClose, onConfirm, onSelectChain }: 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>
@@ -53,7 +54,7 @@ export const Chains = memo(
           Cancel
         </Button>
 
-        <Button disabled={disabled} fluid onClick={onClose}>
+        <Button disabled={disabled} fluid onClick={onConfirm}>
           Done
         </Button>
       </DialogFooter>

src/components/WalletProvider/components/Screen.tsx

@@ -17,13 +17,16 @@ interface ScreenProps {
   onAccepTermsOfService?: () => void;
   onToggleInscriptions?: (value: boolean, showAgain: boolean) => void;
   onClose?: () => void;
+  onConfirm?: () => void;
 }
 
 const SCREENS = {
   TERMS_OF_SERVICE: ({ className, onClose, onAccepTermsOfService }: ScreenProps) => (
     <TermsOfService className={className} onClose={onClose} onSubmit={onAccepTermsOfService} />
   ),
-  CHAINS: ({ className, onClose }: ScreenProps) => <Chains className={className} onClose={onClose} />,
+  CHAINS: ({ className, onClose, onConfirm }: ScreenProps) => (
+    <Chains className={className} onClose={onClose} onConfirm={onConfirm} />
+  ),
   WALLETS: ({ className, widgets, onClose, onSelectWallet }: ScreenProps) => (
     <Wallets widgets={widgets} className={className} onClose={onClose} onSelectWallet={onSelectWallet} />
   ),

src/components/WalletProvider/components/WalletDialog.tsx

@@ -13,8 +13,20 @@ interface WalletDialogProps {
   widgets?: Record<string, JSX.Element | undefined>;
 }
 
+const ANIMATION_DELAY = 1000;
+
 export function WalletDialog({ widgets, onError }: WalletDialogProps) {
-  const { visible, screen, close, selectWallet, displayLoader, displayChains, displayInscriptions } = useWidgetState();
+  const {
+    visible,
+    screen,
+    close,
+    reset = () => {},
+    confirm,
+    selectWallet,
+    displayLoader,
+    displayChains,
+    displayInscriptions,
+  } = useWidgetState();
   const { showAgain, toggleShowAgain, toggleLockInscriptions } = useInscriptionProvider();
   const connectors = useChainProviders();
 
@@ -52,13 +64,24 @@ export function WalletDialog({ widgets, onError }: WalletDialogProps) {
     [toggleShowAgain, toggleLockInscriptions, displayChains],
   );
 
+  const handleClose = useCallback(() => {
+    close?.();
+    setTimeout(reset, ANIMATION_DELAY);
+  }, [close, reset]);
+
+  const handleConfirm = useCallback(() => {
+    confirm?.();
+    close?.();
+  }, [confirm]);
+
   return (
-    <Dialog open={visible} onClose={close}>
+    <Dialog open={visible} onClose={handleClose}>
       <Screen
         current={screen}
         widgets={widgets}
         className="b-size-[600px]"
-        onClose={close}
+        onClose={handleClose}
+        onConfirm={handleConfirm}
         onSelectWallet={handleSelectWallet}
         onAccepTermsOfService={displayChains}
         onToggleInscriptions={handleToggleInscriptions}

src/components/WalletProvider/index.stories.tsx

@@ -3,9 +3,9 @@ import { Button, ScrollLocker } from "@babylonlabs-io/bbn-core-ui";
 
 import { useWidgetState } from "@/hooks/useWidgetState";
 import { Network } from "@/core/types";
+import { bbnDevnet } from "@/core/chains/bbnDevnet";
 
 import { WalletProvider } from "./index";
-import { bbnDevnet } from "@/core/chains/bbnDevnet";
 
 const meta: Meta<typeof WalletProvider> = {
   component: WalletProvider,

src/hooks/useWalletConnect.ts

@@ -2,7 +2,7 @@ import { useCallback, useMemo } from "react";
 import { useWidgetState } from "./useWidgetState";
 
 export function useWalletConnect() {
-  const { chains: chainMap, selectedWallets, open: openModal, close, reset } = useWidgetState();
+  const { confirmed, chains: chainMap, selectedWallets, open: openModal, close, reset } = useWidgetState();
 
   const open = useCallback(() => {
     reset?.();
@@ -13,15 +13,16 @@ export function useWalletConnect() {
     reset?.();
   }, [close]);
 
-  const connected = useMemo(() => {
+  const selected = useMemo(() => {
     const chains = Object.values(chainMap).filter(Boolean);
     const result = chains.map((chain) => selectedWallets[chain.id]);
 
     return result.every(Boolean);
   }, [chainMap, selectedWallets]);
 
   return {
-    connected,
+    selected,
+    connected: selected && confirmed,
     open,
     disconnect,
   };

src/state/state.tsx

@@ -4,6 +4,7 @@ import { IChain, IWallet } from "@/core/types";
 import { Actions, type State } from "./types";
 
 const defaultState: State = {
+  confirmed: false,
   visible: false,
   screen: { type: "TERMS_OF_SERVICE" },
   chains: {},
@@ -66,6 +67,10 @@ export function StateProvider({ children }: PropsWithChildren) {
       addChain: (chain: IChain) => {
         setState((state) => ({ ...state, chains: { ...state.chains, [chain.id]: chain } }));
       },
+
+      confirm: () => {
+        setState((state) => ({ ...state, confirmed: true }));
+      },
     }),
     [],
   );

src/state/types.ts

@@ -13,6 +13,7 @@ export type Screens =
   | Screen<"INSCRIPTIONS">;
 
 export interface State {
+  confirmed: boolean;
   visible: boolean;
   screen: Screens;
   selectedWallets: Record<string, IWallet | undefined>;
@@ -30,5 +31,6 @@ export interface Actions {
   selectWallet?: (chain: string, wallet: IWallet) => void;
   removeWallet?: (chain: string) => void;
   addChain?: (chain: IChain) => void;
+  confirm?: () => void;
   reset?: () => void;
 }