Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add transaction require signing inside ledger ACK component #7601

Merged
merged 2 commits into from
Aug 25, 2024
Merged

feat: add transaction require signing inside ledger ACK component #7601

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7dec834
feat: add transaction require signing inside ledger ACK componenet
NeOMakinG Aug 22, 2024
df93da2
fix: review
NeOMakinG Aug 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/assets/translations/en/main.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1880,7 +1880,8 @@
},
"ledgerOpenApp": {
"title": "Open the %{appName} App",
"description": "To continue, you will need to open the %{appName} app on your Ledger device."
"description": "To continue, you will need to open the %{appName} app on your Ledger device.",
"signingDescription": "Your transaction will require signing on-device after you open the app"
Copy link
Contributor

@gomesalexandre gomesalexandre Aug 22, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: summoning @twblack88 here but feels like this should be more along the lines of "Signing prompt will automatically pop-up in your device after opening the app"

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

Here we go df93da2

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Beautiful. Happy with this if @twblack88 is.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will merge to keep things moving, @twblack88 please make a request if you'd like this copy to be something else.

},
"loremIpsum": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed lectus efficitur, iaculis sapien eu, luctus tellus. Maecenas eget sapien dignissim, finibus mauris nec, mollis ipsum. Donec sodales sit amet felis sagittis vestibulum. Ut in consectetur lacus. Suspendisse potenti. Aenean at massa consequat lectus semper pretium. Cras sed bibendum enim. Mauris euismod sit amet dolor in placerat.",
"transactionHistory": {
Expand Down
2 changes: 1 addition & 1 deletion src/components/ManageAccountsDrawer/ManageAccountsDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const ManageAccountsDrawer = ({
const [step, setStep] = useState<ManageAccountsStep>('selectChain')
const [selectedChainId, setSelectedChainId] = useState<ChainId | null>(null)

const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp()
const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp({ isSigning: false })

const handleClose = useCallback(() => {
setStep('selectChain')
Expand Down
12 changes: 9 additions & 3 deletions src/components/Modals/LedgerOpenApp/LedgerOpenAppModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,10 @@ import { useLedgerAppDetails } from './hooks/useLedgerAppDetails'
export type LedgerOpenAppModalProps = {
chainId: ChainId
onCancel: () => void
isSigning: boolean
}

export const LedgerOpenAppModal = ({ chainId, onCancel }: LedgerOpenAppModalProps) => {
export const LedgerOpenAppModal = ({ chainId, onCancel, isSigning }: LedgerOpenAppModalProps) => {
const { close: closeModal, isOpen } = useModal('ledgerOpenApp')
const translate = useTranslate()

Expand All @@ -50,12 +51,17 @@ export const LedgerOpenAppModal = ({ chainId, onCancel }: LedgerOpenAppModalProp
</ModalHeader>
<ModalBody>
<VStack spacing={2}>
<RawText color='whiteAlpha.600'>
<RawText color='whiteAlpha.600' textAlign='center'>
{translate('ledgerOpenApp.description', {
appName,
})}
</RawText>
<Spinner size='lg' />
{isSigning ? (
<RawText color='whiteAlpha.600' textAlign='center'>
gomesalexandre marked this conversation as resolved.
Show resolved Hide resolved
{translate('ledgerOpenApp.signingDescription')}
</RawText>
) : null}
<Spinner mt={4} size='lg' />
</VStack>
</ModalBody>
<ModalFooter justifyContent='center' pb={6}>
Expand Down
2 changes: 1 addition & 1 deletion src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/ApprovalStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ const ApprovalStepPending = ({
// Default to exact allowance for LiFi due to contract vulnerabilities
const [isExactAllowance, toggleIsExactAllowance] = useToggle(isLifiStep ? true : false)

const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp()
const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp({ isSigning: true })
const hopExecutionMetadataFilter = useMemo(() => {
return {
tradeId: activeTradeId,
Expand Down
2 changes: 1 addition & 1 deletion ...omponents/MultiHopTrade/components/MultiHopTradeConfirm/components/HopTransactionStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export const HopTransactionStep = ({
} = useLocaleFormatter()
const translate = useTranslate()

const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp()
const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp({ isSigning: true })

const hopExecutionMetadataFilter = useMemo(() => {
return {
Expand Down
2 changes: 1 addition & 1 deletion src/components/MultiHopTrade/components/VerifyAddresses/VerifyAddresses.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,7 @@ export const VerifyAddresses = () => {
],
)

const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp()
const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp({ isSigning: true })

const handleBuyVerify = useCallback(async () => {
// Only proceed to verify the buy address if the promise is resolved, i.e the user has opened
Expand Down
10 changes: 7 additions & 3 deletions src/hooks/useLedgerOpenApp/useLedgerOpenApp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,14 +50,18 @@ export const getSlip44KeyFromChainId = (chainId: ChainId): Slip44Key | undefined
}
}

type UseLedgerOpenAppProps = {
isSigning: boolean
}

/**
* This hook provides a function that can be used to check if the Ledger app is open for the given chainId.
*
* If the app is not open, it will display a modal to prompt the user to open the app.
*
* The function will resolve when the app is open, or reject if the user cancels the request.
*/
export const useLedgerOpenApp = () => {
export const useLedgerOpenApp = ({ isSigning }: UseLedgerOpenAppProps) => {
const { close: closeModal, open: openModal } = useModal('ledgerOpenApp')

const wallet = useWallet().state.wallet
Expand Down Expand Up @@ -113,10 +117,10 @@ export const useLedgerOpenApp = () => {
}

// Display the request to open the Ledger app
openModal({ chainId, onCancel })
openModal({ chainId, onCancel, isSigning })
})
},
[checkIsCorrectAppOpen, closeModal, openModal, wallet],
[checkIsCorrectAppOpen, closeModal, openModal, wallet, isSigning],
)

return checkLedgerApp
Expand Down
2 changes: 1 addition & 1 deletion src/pages/RFOX/components/ChangeAddress/ChangeAddressConfirm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export const ChangeAddressConfirm: React.FC<
() => (feeAsset ? assertGetEvmChainAdapter(fromAssetId(feeAsset.assetId).chainId) : undefined),
[feeAsset],
)
const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp()
const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp({ isSigning: true })

const stakingAssetAccountAddress = useMemo(
() => fromAccountId(confirmedQuote.stakingAssetAccountId).account,
Expand Down
2 changes: 1 addition & 1 deletion src/pages/RFOX/components/Claim/ClaimConfirm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export const ClaimConfirm: FC<Pick<ClaimRouteProps, 'headerComponent'> & ClaimCo
const history = useHistory()
const translate = useTranslate()
const wallet = useWallet().state.wallet
const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp()
const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp({ isSigning: true })

const handleGoBack = useCallback(() => {
history.push(ClaimRoutePaths.Select)
Expand Down
2 changes: 1 addition & 1 deletion src/pages/RFOX/components/Stake/Bridge/BridgeConfirm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const CustomRow: React.FC<RowProps> = props => <Row fontSize='sm' fontWeight='me
export const BridgeConfirm: FC<BridgeRouteProps & BridgeConfirmProps> = ({ confirmedQuote }) => {
const history = useHistory()
const translate = useTranslate()
const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp()
const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp({ isSigning: true })

const {
sellAsset,
Expand Down
2 changes: 1 addition & 1 deletion src/pages/RFOX/components/Stake/Bridge/BridgeStatus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const BridgeStatus: React.FC<BridgeRouteProps & BridgeStatusProps> = ({
}) => {
const translate = useTranslate()
const history = useHistory()
const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp()
const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp({ isSigning: true })

const {
sellAsset,
Expand Down
2 changes: 1 addition & 1 deletion src/pages/RFOX/components/Stake/StakeConfirm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export const StakeConfirm: React.FC<StakeConfirmProps & StakeRouteProps> = ({
const queryClient = useQueryClient()
const history = useHistory()
const translate = useTranslate()
const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp()
const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp({ isSigning: true })

const stakingAsset = useAppSelector(state =>
selectAssetById(state, confirmedQuote.stakingAssetId),
Expand Down
2 changes: 1 addition & 1 deletion src/pages/RFOX/components/Unstake/UnstakeConfirm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export const UnstakeConfirm: React.FC<UnstakeRouteProps & UnstakeConfirmProps> =
}) => {
const history = useHistory()
const translate = useTranslate()
const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp()
const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp({ isSigning: true })

const stakingAsset = useAppSelector(state =>
selectAssetById(state, confirmedQuote.stakingAssetId),
Expand Down
Loading