Skip to content

Commit

Permalink
fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@zerts
zerts committed Jul 8, 2024
1 parent 02a25a0 commit 1f55be1
Show file tree
Hide file tree
Showing 2 changed files with 142 additions and 144 deletions.
280 changes: 138 additions & 142 deletions src/ui/components/SignMessageButton/SignMessageButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,165 +31,161 @@ export interface SignMsgBtnHandle {
signTypedData_v4: (params: SignTypedDataParams) => Promise<string>;
}

export const SignMessageButton = React.forwardRef(
function SignTransactionButton(
{
wallet,
children,
buttonTitle,
buttonKind = 'primary',
onClick,
holdToSign,
...buttonProps
}: React.ButtonHTMLAttributes<HTMLButtonElement> & {
wallet: ExternallyOwnedAccount;
buttonTitle?: React.ReactNode;
buttonKind?: ButtonKind;
holdToSign: boolean | null;
},
ref: React.Ref<SignMsgBtnHandle>
) {
const hardwareSignRef = useRef<SignMessageHandle | null>(null);

const { mutateAsync: personalSignInner, ...personalSignMutationInner } =
useMutation({
mutationFn: async (params: PersonalSignParams) => {
if (isDeviceAccount(wallet)) {
const { params: methodParams, ...messageContextParams } = params;
const [message] = methodParams;
invariant(
hardwareSignRef.current,
'HardwareSignMessage must be mounted'
);
const signature = await hardwareSignRef.current.personalSign(
message
);
walletPort.request('registerPersonalSign', {
message,
address: wallet.address,
...messageContextParams,
});
return signature;
} else {
return await walletPort.request('personalSign', params);
}
},
});
export const SignMessageButton = React.forwardRef(function SignMessageButton(
{
wallet,
children,
buttonTitle,
buttonKind = 'primary',
onClick,
holdToSign,
...buttonProps
}: React.ButtonHTMLAttributes<HTMLButtonElement> & {
wallet: ExternallyOwnedAccount;
buttonTitle?: React.ReactNode;
buttonKind?: ButtonKind;
holdToSign: boolean | null;
},
ref: React.Ref<SignMsgBtnHandle>
) {
const hardwareSignRef = useRef<SignMessageHandle | null>(null);

const { mutateAsync: personalSign, ...personalSignMutation } = useMutation({
const { mutateAsync: personalSignInner, ...personalSignMutationInner } =
useMutation({
mutationFn: async (params: PersonalSignParams) => {
const result = await personalSignInner(params);
if (!isDeviceAccount(wallet) && holdToSign) {
wait(500);
}
return result;
},
});

const {
mutateAsync: signTypedData_v4Inner,
...signTypedData_v4MutationInner
} = useMutation({
mutationFn: async (params: SignTypedDataParams) => {
if (isDeviceAccount(wallet)) {
const { typedData, ...messageContextParams } = params;
const { params: methodParams, ...messageContextParams } = params;
const [message] = methodParams;
invariant(
hardwareSignRef.current,
'HardwareSignMessage must be mounted'
);
const signature = await hardwareSignRef.current.signTypedData_v4(
typedData
);
walletPort.request('registerTypedDataSign', {
typedData,
const signature = await hardwareSignRef.current.personalSign(message);
walletPort.request('registerPersonalSign', {
message,
address: wallet.address,
...messageContextParams,
});
return signature;
} else {
return await walletPort.request('signTypedData_v4', params);
return await walletPort.request('personalSign', params);
}
},
});

const { mutateAsync: signTypedData_v4, ...signTypedData_v4Mutation } =
useMutation({
mutationFn: async (params: SignTypedDataParams) => {
const result = await signTypedData_v4Inner(params);
if (!isDeviceAccount(wallet) && holdToSign) {
await wait(500);
}
return result;
},
});
const { mutateAsync: personalSign, ...personalSignMutation } = useMutation({
mutationFn: async (params: PersonalSignParams) => {
const result = await personalSignInner(params);
if (!isDeviceAccount(wallet) && holdToSign) {
await wait(500);
}
return result;
},
});

useImperativeHandle(ref, () => ({ personalSign, signTypedData_v4 }));
const {
mutateAsync: signTypedData_v4Inner,
...signTypedData_v4MutationInner
} = useMutation({
mutationFn: async (params: SignTypedDataParams) => {
if (isDeviceAccount(wallet)) {
const { typedData, ...messageContextParams } = params;
invariant(
hardwareSignRef.current,
'HardwareSignMessage must be mounted'
);
const signature = await hardwareSignRef.current.signTypedData_v4(
typedData
);
walletPort.request('registerTypedDataSign', {
typedData,
address: wallet.address,
...messageContextParams,
});
return signature;
} else {
return await walletPort.request('signTypedData_v4', params);
}
},
});

const { mutateAsync: signTypedData_v4, ...signTypedData_v4Mutation } =
useMutation({
mutationFn: async (params: SignTypedDataParams) => {
const result = await signTypedData_v4Inner(params);
if (!isDeviceAccount(wallet) && holdToSign) {
await wait(500);
}
return result;
},
});

const isLoading =
personalSignMutation.isLoading || signTypedData_v4Mutation.isLoading;
const isLoadingInner =
personalSignMutationInner.isLoading ||
signTypedData_v4MutationInner.isLoading;
const isSuccess =
personalSignMutationInner.isSuccess ||
signTypedData_v4MutationInner.isSuccess;
const isError =
personalSignMutation.isError || signTypedData_v4Mutation.isError;
useImperativeHandle(ref, () => ({ personalSign, signTypedData_v4 }));

const title = buttonTitle || 'Sign';
const isLoading =
personalSignMutation.isLoading || signTypedData_v4Mutation.isLoading;
const isLoadingInner =
personalSignMutationInner.isLoading ||
signTypedData_v4MutationInner.isLoading;
const isSuccess =
personalSignMutationInner.isSuccess ||
signTypedData_v4MutationInner.isSuccess;
const isError =
personalSignMutation.isError || signTypedData_v4Mutation.isError;

return isDeviceAccount(wallet) ? (
<HardwareSignMessage
ref={hardwareSignRef}
derivationPath={wallet.derivationPath}
isSigning={isLoading}
children={children}
buttonTitle={buttonTitle}
buttonKind={buttonKind}
onClick={onClick}
{...buttonProps}
/>
) : (
<WithReadonlyWarningDialog
address={wallet.address}
onClick={onClick}
render={({ handleClick }) =>
holdToSign ? (
<HoldableButton
text={`Hold to ${title}`}
successText={
<HStack gap={4} alignItems="center">
<CheckIcon
style={{
width: 20,
height: 20,
color: 'var(--positive-500)',
}}
/>
<span>Signed</span>
</HStack>
}
submittingText="Sending..."
onClick={handleClick}
success={isSuccess}
submitting={isLoadingInner}
disabled={isLoading}
error={isError}
kind={buttonKind}
{...buttonProps}
/>
) : (
<Button
disabled={isLoading}
onClick={handleClick}
kind={buttonKind}
{...buttonProps}
>
{children || (isLoading ? 'Signing...' : title)}
</Button>
)
}
/>
);
}
);
const title = buttonTitle || 'Sign';

return isDeviceAccount(wallet) ? (
<HardwareSignMessage
ref={hardwareSignRef}
derivationPath={wallet.derivationPath}
isSigning={isLoading}
children={children}
buttonTitle={buttonTitle}
buttonKind={buttonKind}
onClick={onClick}
{...buttonProps}
/>
) : (
<WithReadonlyWarningDialog
address={wallet.address}
onClick={onClick}
render={({ handleClick }) =>
holdToSign ? (
<HoldableButton
text={`Hold to ${title}`}
successText={
<HStack gap={4} alignItems="center">
<CheckIcon
style={{
width: 20,
height: 20,
color: 'var(--positive-500)',
}}
/>
<span>Signed</span>
</HStack>
}
submittingText="Sending..."
onClick={handleClick}
success={isSuccess}
submitting={isLoadingInner}
disabled={isLoading}
error={isError}
kind={buttonKind}
{...buttonProps}
/>
) : (
<Button
disabled={isLoading}
onClick={handleClick}
kind={buttonKind}
{...buttonProps}
>
{children || (isLoading ? 'Signing...' : title)}
</Button>
)
}
/>
);
});
6 changes: 4 additions & 2 deletions src/ui/ui-kit/Button/HoldableButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,9 @@ const ButtonElement = <As extends ElementType = 'button'>(
ref: React.Ref<ComponentPropsWithRef<As>['ref']>
) => {
const realButtonRef = useRef<HTMLButtonElement | null>(null);
const [innerState, setInnerState] = useState<'idle' | 'hold'>('idle');
const [innerState, setInnerState] = useState<'idle' | 'hold' | 'submitting'>(
'idle'
);
const [showHint, setShowHint] = useState(false);

const state: State = submitting
Expand All @@ -104,7 +106,6 @@ const ButtonElement = <As extends ElementType = 'button'>(
holdDurationCounter.current = Date.now();
holdTimerRef.current = setTimeout(() => {
realButtonRef.current?.click();
setInnerState('idle');
}, holdDuration + HOLD_DURATION_MARGIN);
}, [holdDuration]);

Expand All @@ -124,6 +125,7 @@ const ButtonElement = <As extends ElementType = 'button'>(
}, [displayHint]);

const isButton = as == null || as === 'button';

return (
<>
<UIText
Expand Down

0 comments on commit 1f55be1

Please sign in to comment.