Skip to content

Commit

Permalink
refactor: Update connect-mode -> variant
Browse files Browse the repository at this point in the history
  • Loading branch information
wenty22 committed Oct 25, 2023
1 parent e76e1d7 commit 57e5ceb
Show file tree
Hide file tree
Showing 13 changed files with 45 additions and 32 deletions.
2 changes: 1 addition & 1 deletion packages/walletkit/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@totejs/walletkit",
"version": "0.1.1",
"version": "0.1.2",
"type": "module",
"files": [
"dist",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
import React, { useCallback } from 'react';
import { useOpenModal } from '../../../hooks/useOpenModal';
import { ConnectMode, useWalletKitContext } from '../../WalletKitProvider/context';
import { ConnectVariant, useWalletKitContext } from '../../WalletKitProvider/context';
import { cx } from '../../../utils/css';
import { Button, ButtonProps } from '../../base/Button';
import { walletkitButton } from './styles.css';

export interface ConnectButtonProps extends ButtonProps {
connectMode?: ConnectMode;
variant?: ConnectVariant;
}

export const ConnectButton = React.forwardRef((props: ConnectButtonProps, ref: any) => {
const { className, children, connectMode = 'default', onClick, ...restProps } = props;
const { className, children, variant = 'default', onClick, ...restProps } = props;

const { setConnectMode } = useWalletKitContext();
const { setConnectVariant } = useWalletKitContext();
const { onOpenModal } = useOpenModal();

const onClickButton = useCallback(
(e: React.MouseEvent<HTMLButtonElement>) => {
setConnectMode(connectMode);
setConnectVariant(variant);

onOpenModal();
onClick?.(e);
},
[connectMode, onClick, onOpenModal, setConnectMode],
[variant, onClick, onOpenModal, setConnectVariant],
);

return (
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import { Chain, useAccount, useNetwork } from 'wagmi';
import { useIsMounted } from '../../../hooks/useIsMounted';
import { useWalletKitContext } from '../../WalletKitProvider/context';
import { ConnectVariant, useWalletKitContext } from '../../WalletKitProvider/context';
import { useOpenModal } from '../../../hooks/useOpenModal';
import { useCallback } from 'react';

export interface ConnectButtonRendererProps {
variant?: ConnectVariant;

children?: (renderProps: {
show: () => void;
hide: () => void;
Expand All @@ -18,21 +21,26 @@ export interface ConnectButtonRendererProps {
}

export function ConnectButtonRenderer(props: ConnectButtonRendererProps) {
const { children } = props;
const { variant = 'default', children } = props;

const isMounted = useIsMounted();
const { isOpen, onClose } = useWalletKitContext();
const { isOpen, onClose, setConnectVariant } = useWalletKitContext();
const { onOpenModal } = useOpenModal();

const { chain } = useNetwork();
const { address } = useAccount();

const onOpen = useCallback(() => {
setConnectVariant(variant);
onOpenModal();
}, [onOpenModal, setConnectVariant, variant]);

if (!children || !isMounted) return null;

return (
<>
{children({
show: onOpenModal,
show: onOpen,
hide: onClose,
chain: chain,
unsupported: !!chain?.unsupported,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { createContext, useContext } from 'react';
import { Connector } from 'wagmi';
import { ChainProps } from '../../chains/types';

export type ConnectMode = 'add-network' | 'default';
export type ConnectVariant = 'add-network' | 'default';

export type WalletErrorProps = {
description?: string;
Expand All @@ -27,8 +27,8 @@ export interface WalletKitContextProps {
onOpen: () => void;
onClose: () => void;

connectMode: ConnectMode;
setConnectMode: (mode: ConnectMode) => void;
connectVariant: ConnectVariant;
setConnectVariant: (variant: ConnectVariant) => void;

selectedConnector: Connector;
setSelectedConnector: (connector: Connector) => void;
Expand Down
15 changes: 10 additions & 5 deletions packages/walletkit/src/components/WalletKitProvider/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import { useMemo, useState } from 'react';
import { Connector } from 'wagmi';
import { ConnectMode, WalletKitContext, WalletKitContextProps, WalletKitOptions } from './context';
import {
ConnectVariant,
WalletKitContext,
WalletKitContextProps,
WalletKitOptions,
} from './context';
import { useDisclosure } from '../../hooks/useDisclosure';
import { useChains } from '../../hooks/useChains';
import { getDefaultProviderOptions } from '../../defaultConfig/getDefaultProviderOptions';
Expand Down Expand Up @@ -30,7 +35,7 @@ export const WalletKitProvider = (props: WalletKitProviderProps) => {
customTheme,
} = props;

const [connectMode, setConnectMode] = useState<ConnectMode>('default');
const [connectVariant, setConnectVariant] = useState<ConnectVariant>('default');
const [selectedConnector, setSelectedConnector] = useState<Connector>({} as Connector);

const { isOpen, onOpen, onClose } = useDisclosure();
Expand All @@ -46,15 +51,15 @@ export const WalletKitProvider = (props: WalletKitProviderProps) => {
isOpen,
onOpen,
onClose,
connectMode,
setConnectMode,
connectVariant,
setConnectVariant,
selectedConnector,
setSelectedConnector,
// eslint-disable-next-line @typescript-eslint/no-empty-function
log: debugMode ? console.log : () => {},
};
return finalValue;
}, [options, chains, isOpen, onOpen, onClose, connectMode, selectedConnector, debugMode]);
}, [options, chains, isOpen, onOpen, onClose, connectVariant, selectedConnector, debugMode]);

return (
<WalletKitContext.Provider value={value}>
Expand Down
4 changes: 2 additions & 2 deletions packages/walletkit/src/pages/Connecting/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const states = {
};

export function ConnectingPage() {
const { selectedConnector, options, connectMode, log } = useWalletKitContext();
const { selectedConnector, options, connectVariant, log } = useWalletKitContext();

const wallet = useWalletConfig(selectedConnector);

Expand Down Expand Up @@ -71,7 +71,7 @@ export function ConnectingPage() {
if (
options.initialChainId &&
data.chain.id === options.initialChainId &&
connectMode === 'add-network'
connectVariant === 'add-network'
) {
options.onChainAlreadyAdded?.(selectedConnector, options.initialChainId);
}
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 57e5ceb

Please sign in to comment.