From 059f87cb50ea7ac45ec3684fff06ccd80d2c8e68 Mon Sep 17 00:00:00 2001 From: David Totraev Date: Fri, 29 Nov 2024 15:23:05 +0500 Subject: [PATCH 1/2] feat: move core-ui to peer dependecies --- package-lock.json | 7 ++++--- package.json | 4 ++-- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index e198e68..d78a023 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,14 +1,13 @@ { "name": "@babylonlabs-io/bbn-wallet-connect", - "version": "0.0.17", + "version": "0.0.18", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@babylonlabs-io/bbn-wallet-connect", - "version": "0.0.17", + "version": "0.0.18", "dependencies": { - "@babylonlabs-io/bbn-core-ui": "^0.2.0", "@cosmjs/stargate": "^0.32.4", "@keplr-wallet/types": "^0.12.156", "buffer": "^6.0.3", @@ -51,6 +50,7 @@ "vite-plugin-dts": "^4.3.0" }, "peerDependencies": { + "@babylonlabs-io/bbn-core-ui": "^0.2.0", "react": "^18.3.1", "react-dom": "^18.3.1", "tailwind-merge": "^2.5.4" @@ -409,6 +409,7 @@ "version": "0.2.0", "resolved": "https://registry.npmjs.org/@babylonlabs-io/bbn-core-ui/-/bbn-core-ui-0.2.0.tgz", "integrity": "sha512-dM3GDBXfDgsjJxd8aB1pTOng5piKOYdRtQMq0PkgS3Q80ikvU8MdH4EZoLzUGusLoed/EcH40ei8QSPwa9RaRA==", + "peer": true, "peerDependencies": { "react": "^18.3.1", "react-dom": "^18.3.1", diff --git a/package.json b/package.json index bedce2c..3b400de 100644 --- a/package.json +++ b/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", From 7d21e3a710f52d52d50db696a21c0bc7c465f305 Mon Sep 17 00:00:00 2001 From: David Totraev Date: Fri, 29 Nov 2024 15:52:20 +0500 Subject: [PATCH 2/2] 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; }