Update deposit flow #401
Update deposit flow #401
Conversation
✅ Deploy Preview for acre-dapp-testnet ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
kkosiorowska
force-pushed
the
clean-deposit-flow
branch
from
c531a41 to
d4ea05b
Compare
kkosiorowska
force-pushed
the
clean-deposit-flow
branch
from
4a69d58 to
8d94038
Compare
| ActionFlowType, | ||
| { | ||
| header: string | ||
| FormComponent: ( |
There was a problem hiding this comment.
Let's keep the key in camel case. It's confusing.
To use it in JSX you can always rename it while destructuring.
const { foo: Foo } = barThere was a problem hiding this comment.
hmm this was a special trick to make it clear that it should be used as a component. However, if there is any doubt I can simplify it.
| > = { | ||
| stake: { | ||
| header: "Deposit", | ||
| FormComponent: StakeFormModal, |
| }, | ||
| unstake: { | ||
| header: "Withdraw", | ||
| FormComponent: UnstakeFormModal, |
| @@ -20,16 +11,36 @@ import { logPromiseFailure } from "#/utils" | |||
| import StakeFormModal from "./ActiveStakingStep/StakeFormModal" | |||
| import UnstakeFormModal from "./ActiveUnstakingStep/UnstakeFormModal" | |||
|
|
|||
| const TABS = Object.values(ACTION_FLOW_TYPES) | |||
| const FORM_DATA: Record< | |||
There was a problem hiding this comment.
I'd rename "header" to "heading". By header we usually mean the very top component on a page. It's a little confusing
Also we don't need such strict type safety for formComponent. It's declared only once for private use of the component only. Just React.ReactNode is enough.,
There was a problem hiding this comment.
I'd rename "header" to "heading". By header we usually mean the very top component on a page. It's a little confusing
Sure, let's change it. 0a420d1
Also we don't need such strict type safety for formComponent. It's declared only once for private use of the component only. Just React.ReactNode is enough.,
We call the content in the component and need to pass the necessary props. Therefore, we need to declare it in such a way as to pass the right props to the component. So even though this is called once I think we need to declare the type here. As a result, when calling renderComponent, we get a suggestion of what props should be given.
However, I have simplified the definition of form component type. - a14030f
| useEffect(() => { | ||
| setStatus(PROCESS_STATUSES.PENDING) | ||
| }, [setStatus]) | ||
|
|
||
| const onSignMessageSuccess = useCallback(() => { |
There was a problem hiding this comment.
To keep it consistent:
| const onSignMessageSuccess = useCallback(() => { | |
| const onSignMessageSuccess = React.useCallback(() => { |
There was a problem hiding this comment.
I will stay with useCallback. From what I can see, most of our modal components just use this convention. However, I think this is a matter of preference and I would leave a freedom of choice.
| @@ -118,6 +125,8 @@ export default function TokenBalanceInput({ | |||
| valueRef.current = value ? userAmountToBigInt(value, decimals) : undefined | |||
| } | |||
|
|
|||
| const showConversionBalance = amount !== undefined && !!fiatCurrency | |||
There was a problem hiding this comment.
| const showConversionBalance = amount !== undefined && !!fiatCurrency | |
| const shouldShowConversionBalance = amount !== undefined && !!fiatCurrency |
|
Leaving the final approval to @kpyszkowski. |
Ref #394
This PR updates the deposit flow. It removes some of the unneeded components and updates the styles for the new modals. This is only part of the fixes that need to be done. What has been done:
TransactionModalandActionFormModal. - There is no need to save the type of flow in the context. The user is no longer able to switch the flow fromActionFormModal.DepositBTCModalandSidebarTokenBalanceInputcomponent