Dapp confirmation designs transitions #1620
Conversation
EtDu
force-pushed
the
dapp-confirmation-designs
branch
2 times, most recently
from
f6d7eb1
to
5bd460d
Compare
EtDu
force-pushed
the
dapp-confirmation-designs-transitions
branch
from
9710dd6
to
ea812f7
Compare
EtDu
force-pushed
the
dapp-confirmation-designs
branch
from
4a35777
to
127230c
Compare
EtDu
force-pushed
the
dapp-confirmation-designs-transitions
branch
from
ea812f7
to
3fb0105
Compare
EtDu
force-pushed
the
dapp-confirmation-designs
branch
from
127230c
to
8c6a73a
Compare
EtDu
force-pushed
the
dapp-confirmation-designs-transitions
branch
from
3fb0105
to
5658bb2
Compare
app/components/UI/CustomGas/index.js
Outdated
| /** | ||
| * Width of the device | ||
| */ | ||
| width: PropTypes.number, |
There was a problem hiding this comment.
any reason for getting this through props instead of calling Dimensions.get('window')?
There was a problem hiding this comment.
Thought since I computed the width once I could just just pass it through. Is it better to call Dimensions.get('window') or Device.getDeviceWidth()?
There was a problem hiding this comment.
for these two... I'm thinking if we use it somewhere else in the future is gonna be coupled to whichever parent it uses. I'd say Device.getDeviceWidth() since we have a util for it
app/components/UI/CustomGas/index.js
Outdated
| /** | ||
| * Height of custom gas and data modal | ||
| */ | ||
| customGasHeight: PropTypes.number, |
There was a problem hiding this comment.
same question for this, seems like a style passed through props?
There was a problem hiding this comment.
This value is created via the onLayout function on the root CustomGas view. It is needed to compute the proper transforms for the animations.
It's needed inside of TransactionEditor as well which is why I didn't just compute it and leave it in CustomGas
| !this.state.headerHeight && this.setState({ headerHeight: event.nativeEvent.layout.height }); | ||
|
|
||
| saveGasInputHeight = event => { | ||
| !this.state.gasInputHeight && this.setState({ gasInputHeight: event.nativeEvent.layout.height }); |
There was a problem hiding this comment.
hm this could be the answer to my questions before?
There was a problem hiding this comment.
Yep, saveCustomGasHeight called by onLayout from the root CustomGas view
| let xTranslationValue; | ||
| if (xTranslationName === 'reviewToEdit') xTranslationValue = reviewToEditValue; | ||
| else if (xTranslationName === 'editToAdvanced') xTranslationValue = editToAdvancedValue; | ||
| else if (xTranslationName === 'reviewToData') xTranslationValue = reviewToDataValue; |
There was a problem hiding this comment.
I see many constants here, maybe could be a good idea to put these on the top of the file
There was a problem hiding this comment.
Made an object that maps the strings to the state vars and put it at the top of component
| xTranslationName === 'reviewToData' && | ||
| xTranslationEndValue === 0 && | ||
| this.setState({ | ||
| hideData: true |
There was a problem hiding this comment.
seems like https://github.com/MetaMask/metamask-mobile/pull/1620/files#diff-fc12bc5d7b49a26e971be23e01a8c79cR626 is the same code but the boolean than here ... can we put that in a method?
| style={[ | ||
| styles.root, | ||
| this.generateTransform('modal', [ | ||
| Device.isIphoneX() ? rootHeight - customGasHeight : rootHeight - customGasHeight + 24, |
There was a problem hiding this comment.
I beleieve I saw this 3 times on this file, can we use a method?
ibrahimtaveras00
added
the
needs-qa
EtDu
force-pushed
the
dapp-confirmation-designs-transitions
branch
from
c4ec334
to
47e924d
Compare
|
Issue 1 from #1559: I now see that android is having issues with the keyboard blocking the text input field; seen here = http://recordit.co/FNMCosZIMK Also in the above screencast notice how the padding is off on both OS's
I'm not sure if this is related to this fix/change, but on normal send flow, when I tap the Edit button to the right of Network fee nothing happens
Issue 2 from #1559 seems resolved here 👍 Issue 4 from #1559 seems resolved here 👍 Other Issues on this PR
I also tried to check if approve shows the hex data but I see the old approve still (assuming develop needs to be merged into this PR and I see a conflict above)
|
ibrahimtaveras00
added
QA'd - Issues Found
EtDu
force-pushed
the
dapp-confirmation-designs
branch
from
7831366
to
87105b5
Compare
EtDu
force-pushed
the
dapp-confirmation-designs-transitions
branch
from
273b0af
to
eccdabc
Compare
EtDu
force-pushed
the
dapp-confirmation-designs
branch
2 times, most recently
from
4f6d250
to
e1c0f24
Compare
EtDu
force-pushed
the
dapp-confirmation-designs-transitions
branch
from
97c95f9
to
03ac0c3
Compare
…t, clean up in CustomGas
… some animation logic
…tion from selectors
…utton because of it
…Main mount explicitly
… advanced custom gas editor
EtDu
force-pushed
the
dapp-confirmation-designs-transitions
branch
from
d0d40d8
to
008cbc1
Compare
* Move handleFetchBasicEstimates from CustomGas to TransactionEditor, pass down basicGasEstimates, can only edit gas from review screen if basic estimates done, instead of calculating after pressing edit & showing a loader * CustomGas: compute height of root view and sent to TransactionEditor via saveCustomGasHeight() * TransactionEdit: pass through saveCustomGasHeight * TransactionEditor: Implement animations for review --> edit mode, remove redundant functions goToEdit & handleCustomBackPress * TransactionEditor & CustomGas: move advancedCustomGas state variable to TransactionEditor * TransactionEditor: invert start & end animation values, 0 --> 1 to 1 --> 0 * TransactionEditor: use a unique animation value for root modal: y axis, custom gas: x axis, advanced custom gas: x axis, animation will always be root modal + (custom gas OR advanced custom gas) * TransactionEditor/CustomGas: enable vertical modal animation for edit --> advanced * TransactionEditor: Modal moves to correct height from review --> edit if advanced is selected * TransactionEditor/CustomGas: create proper animation for edit --> advanced custom gas, give selectors absolute positioning, hide them when they are off the screen * TransactionEditor/CustomGas: All animations work together * TransactionEditor/CustomGas: animation works identically on non iphoneX ++ devices * TransactionEditor: change animation time to 250ms, apply easing * TransactionReviewData: ensure data box is correct height * CustomGas & TransactionEdit: pass through customGasHeight & rootHeight, clean up in CustomGas * TransactionReview: add in animated views * TransactionEditor: implement animation for transaction data, refactor some animation logic * TransactionReview: fix invalid proptype * Test fixes * TransactionEditor: set default gas fee to average on mount * TransactionReviewInformation: fix gas not updating after saving selection from selectors * CustomGas: fix advanced CG total not reflecting the one selected via the selectors * TransactionEditor: map xtranslation strings with state vars * TransactionEditor: use hideComponents method * TxEditor & CustomGas: use getTransformValue to avoid repetition * TransactionEditor: fix animation glitch with tx data * CustomGas: add gas price extremely low error, but don't disable the button because of it * Use Device.getDeviceWidth instead of passing width as props * TransactionEditor: use keyboard aware scrollview * snapshop update * yet another snapshot update yo * allow explicitly hiding or showing dappTransactionModal, hide on Nav/Main mount explicitly * CustomGas: modify styles to fix padding * TransactionReviewFeeCard: fix disabled edit button, fix paddings for custom gas * TransactionReviewData: fix padding * snapshot updatessss * snapshot to the moon * CustomGas: display basic gas estimate avergae gas price by default on advanced custom gas editor
Description
Implement screen transitions for
dapp-confirmation-designsChecklist