-
Notifications
You must be signed in to change notification settings - Fork 182
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
wip: initial prgression of permit2 ui
- Loading branch information
1 parent
ed932ac
commit 704938a
Showing
11 changed files
with
245 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
94 changes: 94 additions & 0 deletions
94
...ents/MultiHopTrade/components/MultiHopTradeConfirm/components/Permit2Step/Permit2Step.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| import type { TradeQuote, TradeQuoteStep } from '@shapeshiftoss/swapper' | ||
| import { assertUnreachable } from '@shapeshiftoss/utils' | ||
| import { useMemo } from 'react' | ||
| import { FaThumbsUp } from 'react-icons/fa' | ||
| import { selectHopExecutionMetadata } from 'state/slices/tradeQuoteSlice/selectors' | ||
| import { HopExecutionState, TransactionExecutionState } from 'state/slices/tradeQuoteSlice/types' | ||
| import { useAppSelector } from 'state/store' | ||
|
|
||
| import { ErrorMsg } from '../SharedApprovalStep/components/SharedApprovalDescription' | ||
| import { SharedApprovalStepComplete } from '../SharedApprovalStep/components/SharedApprovalStepComplete' | ||
| import { StatusIcon } from '../StatusIcon' | ||
| import { Permit2StepPending } from './components/Permit2StepPending' | ||
|
|
||
| export type Permit2StepProps = { | ||
| tradeQuoteStep: TradeQuoteStep | ||
| hopIndex: number | ||
| isLoading?: boolean | ||
| activeTradeId: TradeQuote['id'] | ||
| } | ||
|
|
||
| const defaultIcon = <FaThumbsUp /> | ||
|
|
||
| export const Permit2Step = ({ | ||
| tradeQuoteStep, | ||
| hopIndex, | ||
| isLoading, | ||
| activeTradeId, | ||
| }: Permit2StepProps) => { | ||
| const hopExecutionMetadataFilter = useMemo(() => { | ||
| return { | ||
| tradeId: activeTradeId, | ||
| hopIndex, | ||
| } | ||
| }, [activeTradeId, hopIndex]) | ||
| const { state: hopExecutionState, permit2 } = useAppSelector(state => | ||
| selectHopExecutionMetadata(state, hopExecutionMetadataFilter), | ||
| ) | ||
|
|
||
| const stepIndicator = useMemo(() => { | ||
| const txStatus = (() => { | ||
| switch (hopExecutionState) { | ||
| case HopExecutionState.Pending: | ||
| case HopExecutionState.AwaitingApprovalReset: | ||
| case HopExecutionState.AwaitingApproval: | ||
| return TransactionExecutionState.AwaitingConfirmation | ||
| case HopExecutionState.AwaitingPermit2: | ||
| return permit2.state === TransactionExecutionState.Failed | ||
| ? TransactionExecutionState.Failed | ||
| : TransactionExecutionState.Pending | ||
| case HopExecutionState.AwaitingSwap: | ||
| case HopExecutionState.Complete: | ||
| return TransactionExecutionState.Complete | ||
| default: | ||
| assertUnreachable(hopExecutionState) | ||
| } | ||
| })() | ||
|
|
||
| return <StatusIcon txStatus={txStatus} defaultIcon={defaultIcon} /> | ||
| }, [hopExecutionState, permit2.state]) | ||
|
|
||
| const completedDescription = useMemo(() => { | ||
| return ( | ||
| <ErrorMsg | ||
| isError={permit2.state === TransactionExecutionState.Failed} | ||
| errorTranslation={'trade.permit2.error'} | ||
| /> | ||
| ) | ||
| }, [permit2.state]) | ||
|
|
||
| const isComplete = useMemo(() => { | ||
| return [HopExecutionState.AwaitingSwap, HopExecutionState.Complete].includes(hopExecutionState) | ||
| }, [hopExecutionState]) | ||
|
|
||
| // separate component for completed states to simplify hook dismount | ||
| return isComplete ? ( | ||
| <SharedApprovalStepComplete | ||
| titleTranslation={'trade.permit2.title'} | ||
| isLoading={isLoading} | ||
| transactionExecutionState={permit2.state} | ||
| description={completedDescription} | ||
| stepIndicator={stepIndicator} | ||
| /> | ||
| ) : ( | ||
| <Permit2StepPending | ||
| tradeQuoteStep={tradeQuoteStep} | ||
| hopIndex={hopIndex} | ||
| isLoading={isLoading} | ||
| activeTradeId={activeTradeId} | ||
| stepIndicator={stepIndicator} | ||
| hopExecutionState={hopExecutionState} | ||
| transactionExecutionState={permit2.state} | ||
| /> | ||
| ) | ||
| } |
100 changes: 100 additions & 0 deletions
100
.../components/MultiHopTradeConfirm/components/Permit2Step/components/Permit2StepPending.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| import { Button, Card, CircularProgress, VStack } from '@chakra-ui/react' | ||
| import type { TradeQuoteStep } from '@shapeshiftoss/swapper' | ||
| import { useCallback, useMemo } from 'react' | ||
| import { useTranslate } from 'react-polyglot' | ||
| import { HopExecutionState, TransactionExecutionState } from 'state/slices/tradeQuoteSlice/types' | ||
|
|
||
| import { StepperStep } from '../../StepperStep' | ||
|
|
||
| export type Permit2StepPendingProps = { | ||
| tradeQuoteStep: TradeQuoteStep | ||
| hopIndex: number | ||
| isLoading?: boolean | ||
| activeTradeId: string | ||
| hopExecutionState: HopExecutionState | ||
| transactionExecutionState: TransactionExecutionState | ||
| stepIndicator: JSX.Element | ||
| } | ||
|
|
||
| export const Permit2StepPending = ({ | ||
| tradeQuoteStep, | ||
| hopIndex, | ||
| isLoading, | ||
| activeTradeId, | ||
| stepIndicator, | ||
| hopExecutionState, | ||
| transactionExecutionState, | ||
| }: Permit2StepPendingProps) => { | ||
| const translate = useTranslate() | ||
|
|
||
| const isPermit2MutationLoading = false | ||
| // const { permit2Mutation, isLoading: isPermit2MutationLoading } = usePermit2Mutation( | ||
| // tradeQuoteStep, | ||
| // hopIndex, | ||
| // allowanceType, | ||
| // true, | ||
| // activeTradeId, | ||
| // ) | ||
|
|
||
| const handleSignPermit2Message = useCallback(() => { | ||
| try { | ||
| // TODO: | ||
| // await permit2Mutation.mutateAsync() | ||
| } catch (error) { | ||
| console.error(error) | ||
| } | ||
| }, []) | ||
|
|
||
| const content = useMemo(() => { | ||
| const isAwaitingPermit2 = hopExecutionState === HopExecutionState.AwaitingPermit2 | ||
|
|
||
| // only render the permit2 button when the component is active | ||
| if (!isAwaitingPermit2) return | ||
|
|
||
| const isDisabled = | ||
| isPermit2MutationLoading || | ||
| !isAwaitingPermit2 || | ||
| transactionExecutionState !== TransactionExecutionState.AwaitingConfirmation | ||
|
|
||
| return ( | ||
| <Card p='2' width='full'> | ||
| <VStack width='full'> | ||
| <Button | ||
| width='full' | ||
| size='sm' | ||
| colorScheme='blue' | ||
| isDisabled={isDisabled} | ||
| isLoading={isPermit2MutationLoading} | ||
| onClick={handleSignPermit2Message} | ||
| > | ||
| {transactionExecutionState !== TransactionExecutionState.AwaitingConfirmation && ( | ||
| <CircularProgress isIndeterminate size={2} mr={2} /> | ||
| )} | ||
| {translate('trade.permit2.signMessage')} | ||
| </Button> | ||
| </VStack> | ||
| </Card> | ||
| ) | ||
| }, [ | ||
| handleSignPermit2Message, | ||
| hopExecutionState, | ||
| isPermit2MutationLoading, | ||
| transactionExecutionState, | ||
| translate, | ||
| ]) | ||
|
|
||
| return ( | ||
| <StepperStep | ||
| title={translate('trade.permit2.title')} | ||
| description={translate('trade.permit2.description', { | ||
| symbol: tradeQuoteStep.sellAsset.symbol, | ||
| })} | ||
| stepIndicator={stepIndicator} | ||
| content={content} | ||
| isLastStep={false} | ||
| isLoading={isLoading} | ||
| isError={transactionExecutionState === TransactionExecutionState.Failed} | ||
| isPending={transactionExecutionState === TransactionExecutionState.Pending} | ||
| /> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters