From 7d21e3a710f52d52d50db696a21c0bc7c465f305 Mon Sep 17 00:00:00 2001 From: David Totraev Date: Fri, 29 Nov 2024 15:52:20 +0500 Subject: [PATCH] feat: change wallet connection flow --- .changeset/tame-carrots-cheat.md | 5 ++++ src/components/Chains/container.tsx | 5 ++-- src/components/Chains/index.tsx | 5 ++-- .../WalletProvider/components/Screen.tsx | 5 +++- .../components/WalletDialog.tsx | 29 +++++++++++++++++-- .../WalletProvider/index.stories.tsx | 2 +- src/hooks/useWalletConnect.ts | 7 +++-- src/state/state.tsx | 5 ++++ src/state/types.ts | 2 ++ 9 files changed, 53 insertions(+), 12 deletions(-) create mode 100644 .changeset/tame-carrots-cheat.md diff --git a/.changeset/tame-carrots-cheat.md b/.changeset/tame-carrots-cheat.md new file mode 100644 index 0000000..5818ab1 --- /dev/null +++ b/.changeset/tame-carrots-cheat.md @@ -0,0 +1,5 @@ +--- +"@babylonlabs-io/bbn-wallet-connect": patch +--- + +feat: change wallet connection flow diff --git a/src/components/Chains/container.tsx b/src/components/Chains/container.tsx index 04746c2..860739d 100644 --- a/src/components/Chains/container.tsx +++ b/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 ( ; 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) => (
Connect to both Bitcoin and Babylon Chain Wallets @@ -53,7 +54,7 @@ export const Chains = memo( Cancel - diff --git a/src/components/WalletProvider/components/Screen.tsx b/src/components/WalletProvider/components/Screen.tsx index af7d64b..9a1e325 100644 --- a/src/components/WalletProvider/components/Screen.tsx +++ b/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) => ( ), - CHAINS: ({ className, onClose }: ScreenProps) => , + CHAINS: ({ className, onClose, onConfirm }: ScreenProps) => ( + + ), WALLETS: ({ className, widgets, onClose, onSelectWallet }: ScreenProps) => ( ), diff --git a/src/components/WalletProvider/components/WalletDialog.tsx b/src/components/WalletProvider/components/WalletDialog.tsx index 1966405..ad1b9e3 100644 --- a/src/components/WalletProvider/components/WalletDialog.tsx +++ b/src/components/WalletProvider/components/WalletDialog.tsx @@ -13,8 +13,20 @@ interface WalletDialogProps { widgets?: Record; } +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 ( - + = { component: WalletProvider, diff --git a/src/hooks/useWalletConnect.ts b/src/hooks/useWalletConnect.ts index 21aff49..e5c5d1e 100644 --- a/src/hooks/useWalletConnect.ts +++ b/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,7 +13,7 @@ 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]); @@ -21,7 +21,8 @@ export function useWalletConnect() { }, [chainMap, selectedWallets]); return { - connected, + selected, + connected: selected && confirmed, open, disconnect, }; diff --git a/src/state/state.tsx b/src/state/state.tsx index 9fbeae2..b850bb3 100644 --- a/src/state/state.tsx +++ b/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 })); + }, }), [], ); diff --git a/src/state/types.ts b/src/state/types.ts index d9042be..77036b5 100644 --- a/src/state/types.ts +++ b/src/state/types.ts @@ -13,6 +13,7 @@ export type Screens = | Screen<"INSCRIPTIONS">; export interface State { + confirmed: boolean; visible: boolean; screen: Screens; selectedWallets: Record; @@ -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; }