The new designs for confirmation screen can be seen in this figma: https://www.figma.com/file/dzapXt5s0pKBxb9lZkIoDM/%231352---Confirm-transactions?node-id=916%3A125
Each of the confirmation screen has information about the dapp requesting confirmation displayed like this:
That exact same pattern - icon, dapp origin and selected network - is used in multiple places.
The task is to put those three pieces together into a component. Styles should match the above screenshot and the designs in figma.
Also as part of the task, this new component should be used in the existing signature request screen. That screen currently looks like:
The middle section contains the dapp icon, the dapp name and the dapp origin. The code for this is in the renderPageInformation method of metamask-mobile/app/components/UI/SignatureRequest/index.js
Replace that code and the use of the renderPageInformation method with the new component described above that contains the icon, origin and network and matches the new styles.
Do not implement the rest of the signature request screen redesigns as part of this task. Just the dapp info/header component.
The new designs for confirmation screen can be seen in this figma: https://www.figma.com/file/dzapXt5s0pKBxb9lZkIoDM/%231352---Confirm-transactions?node-id=916%3A125
Each of the confirmation screen has information about the dapp requesting confirmation displayed like this:
That exact same pattern - icon, dapp origin and selected network - is used in multiple places.
The task is to put those three pieces together into a component. Styles should match the above screenshot and the designs in figma.
Also as part of the task, this new component should be used in the existing signature request screen. That screen currently looks like:
The middle section contains the dapp icon, the dapp name and the dapp origin. The code for this is in the
renderPageInformationmethod ofmetamask-mobile/app/components/UI/SignatureRequest/index.jsReplace that code and the use of the
renderPageInformationmethod with the new component described above that contains the icon, origin and network and matches the new styles.Do not implement the rest of the signature request screen redesigns as part of this task. Just the dapp info/header component.