Skip to content

Commit

Permalink
feat: STAKE-803 integrate unstake method from sdk (#11962)
Browse files Browse the repository at this point in the history 
<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
This PR adds the ability to unstake natively within the MetaMask mobile
app.

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Related issues**

Jira Ticket: [FE] [Unstake flow] Integrate unstake method from sdk -
([link](https://consensyssoftware.atlassian.net/browse/STAKE-803))

## **Manual testing steps**

prerequisite: if you don't have any Ethereum staked, you'll need to
stake some in order to unstake.

1. Add `export MM_POOLED_STAKING_UI_ENABLED=true` to `.js.env` file.
2. Click on Ethereum from the asset list page
3. Click on "Unstake"
4. Enter a valid amount to unstake and click "Review"
5. Click "Continue" to initiate the transaction-controller flow.

## Figma Designs

- Staking UX
([link](https://www.figma.com/design/1c0Y9jDJe6p0j82jydJDcs/Staking-UX?node-id=2979-19504&m=dev))

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

https://github.com/user-attachments/assets/bd1919d3-dcc6-4443-b08c-7944e183914c

### **After**

<!-- [screenshots/recordings] -->


https://github.com/user-attachments/assets/924905b1-405a-49f9-aa9e-eb0cbeaf872e


## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
  • Loading branch information
@Matt561
Matt561 authored Oct 24, 2024
1 parent ea176e9 commit e721d23
Show file tree
Hide file tree
Showing 23 changed files with 1,586 additions and 527 deletions.
6 changes: 6 additions & 0 deletions app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { backgroundState } from '../../../../../util/test/initial-root-state';
import configureMockStore from 'redux-mock-store';
import { Provider } from 'react-redux';
import { StakeConfirmationViewProps } from './StakeConfirmationView.types';
import { MOCK_POOL_STAKING_SDK } from '../../__mocks__/mockData';

jest.mock('../../../../hooks/useIpfsGateway', () => jest.fn());

Expand Down Expand Up @@ -60,6 +61,11 @@ jest.mock('../../hooks/usePoolStakedDeposit', () => ({
}),
}));

jest.mock('../../hooks/useStakeContext', () => ({
__esModule: true,
useStakeContext: jest.fn(() => MOCK_POOL_STAKING_SDK),
}));

jest.mock('../../hooks/usePooledStakes', () => ({
__esModule: true,
default: () => ({
Expand Down
143 changes: 137 additions & 6 deletions ...ts/UI/Stake/Views/StakeConfirmationView/__snapshots__/StakeConfirmationView.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -638,18 +638,146 @@ exports[`StakeConfirmationView render matches snapshot 1`] = `
}
}
>
<SvgMock
color="#141618"
height={16}
name="Question"
<View
style={
{
"backgroundColor": "#ffffff",
"borderRadius": 8,
"height": 16,
"overflow": "hidden",
"width": 16,
}
}
width={16}
/>
>
<View
style={
[
{
"overflow": "hidden",
},
{
"backgroundColor": "#1593F2",
"borderRadius": 8,
"height": 16,
"width": 16,
},
undefined,
]
}
>
<RNSVGSvgView
bbHeight={16}
bbWidth={16}
focusable={false}
height={16}
style={
[
{
"backgroundColor": "transparent",
"borderWidth": 0,
},
{
"flex": 0,
"height": 16,
"width": 16,
},
]
}
width={16}
>
<RNSVGGroup
fill={
{
"payload": 4278190080,
"type": 0,
}
}
>
<RNSVGRect
fill={
{
"payload": 4280574177,
"type": 0,
}
}
height={16}
matrix={
[
-0.14608302856241107,
0.9892723329629884,
-0.9892723329629884,
-0.14608302856241107,
18.877507984599454,
-1.41266974682138,
]
}
propList={
[
"fill",
]
}
width={16}
x={0}
y={0}
/>
<RNSVGRect
fill={
{
"payload": 4294395137,
"type": 0,
}
}
height={16}
matrix={
[
-0.02094241988335673,
-0.9997806834748455,
0.9997806834748455,
-0.02094241988335673,
-7.512435753557014,
20.161960644608932,
]
}
propList={
[
"fill",
]
}
width={16}
x={0}
y={0}
/>
<RNSVGRect
fill={
{
"payload": 4294736640,
"type": 0,
}
}
height={16}
matrix={
[
-0.458649554484315,
0.8886172326549487,
-0.8886172326549487,
-0.458649554484315,
14.2400072574634,
19.300266514976617,
]
}
propList={
[
"fill",
]
}
width={16}
x={0}
y={0}
/>
</RNSVGGroup>
</RNSVGSvgView>
</View>
</View>
<View
accessible={false}
style={
Expand Down Expand Up @@ -1342,6 +1470,7 @@ exports[`StakeConfirmationView render matches snapshot 1`] = `
accessibilityRole="button"
accessible={true}
activeOpacity={1}
disabled={false}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
Expand Down Expand Up @@ -1383,6 +1512,8 @@ exports[`StakeConfirmationView render matches snapshot 1`] = `
accessibilityRole="button"
accessible={true}
activeOpacity={1}
disabled={false}
loading={false}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
Expand Down
8 changes: 4 additions & 4 deletions app/components/UI/Stake/Views/StakeInputView/__snapshots__/StakeInputView.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -545,15 +545,15 @@ exports[`StakeInputView render matches snapshot 1`] = `
>
<SvgMock
color="#6a737d"
height={20}
height={16}
name="Question"
style={
{
"height": 20,
"width": 20,
"height": 16,
"width": 16,
}
}
width={20}
width={16}
/>
</TouchableOpacity>
</View>
Expand Down
6 changes: 6 additions & 0 deletions app/components/UI/Stake/Views/UnstakeConfirmationView/UnstakeConfirmationView.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { Image } from 'react-native';
import { createMockAccountsControllerState } from '../../../../../util/test/accountsControllerTestUtils';
import { backgroundState } from '../../../../../util/test/initial-root-state';
import { UnstakeConfirmationViewProps } from './UnstakeConfirmationView.types';
import { MOCK_POOL_STAKING_SDK } from '../../__mocks__/mockData';

const MOCK_ADDRESS_1 = '0x0';
const MOCK_ADDRESS_2 = '0x1';
Expand Down Expand Up @@ -58,6 +59,11 @@ jest.mock('../../hooks/usePooledStakes', () => ({
}),
}));

jest.mock('../../hooks/useStakeContext', () => ({
__esModule: true,
useStakeContext: jest.fn(() => MOCK_POOL_STAKING_SDK),
}));

describe('UnstakeConfirmationView', () => {
it('render matches snapshot', () => {
const props: UnstakeConfirmationViewProps = {
Expand Down
143 changes: 137 additions & 6 deletions ...I/Stake/Views/UnstakeConfirmationView/__snapshots__/UnstakeConfirmationView.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -863,18 +863,146 @@ exports[`UnstakeConfirmationView render matches snapshot 1`] = `
}
}
>
<SvgMock
color="#141618"
height={16}
name="Question"
<View
style={
{
"backgroundColor": "#ffffff",
"borderRadius": 8,
"height": 16,
"overflow": "hidden",
"width": 16,
}
}
width={16}
/>
>
<View
style={
[
{
"overflow": "hidden",
},
{
"backgroundColor": "#1593F2",
"borderRadius": 8,
"height": 16,
"width": 16,
},
undefined,
]
}
>
<RNSVGSvgView
bbHeight={16}
bbWidth={16}
focusable={false}
height={16}
style={
[
{
"backgroundColor": "transparent",
"borderWidth": 0,
},
{
"flex": 0,
"height": 16,
"width": 16,
},
]
}
width={16}
>
<RNSVGGroup
fill={
{
"payload": 4278190080,
"type": 0,
}
}
>
<RNSVGRect
fill={
{
"payload": 4280574177,
"type": 0,
}
}
height={16}
matrix={
[
-0.14608302856241107,
0.9892723329629884,
-0.9892723329629884,
-0.14608302856241107,
18.877507984599454,
-1.41266974682138,
]
}
propList={
[
"fill",
]
}
width={16}
x={0}
y={0}
/>
<RNSVGRect
fill={
{
"payload": 4294395137,
"type": 0,
}
}
height={16}
matrix={
[
-0.02094241988335673,
-0.9997806834748455,
0.9997806834748455,
-0.02094241988335673,
-7.512435753557014,
20.161960644608932,
]
}
propList={
[
"fill",
]
}
width={16}
x={0}
y={0}
/>
<RNSVGRect
fill={
{
"payload": 4294736640,
"type": 0,
}
}
height={16}
matrix={
[
-0.458649554484315,
0.8886172326549487,
-0.8886172326549487,
-0.458649554484315,
14.2400072574634,
19.300266514976617,
]
}
propList={
[
"fill",
]
}
width={16}
x={0}
y={0}
/>
</RNSVGGroup>
</RNSVGSvgView>
</View>
</View>
<View
accessible={false}
style={
Expand Down Expand Up @@ -1303,6 +1431,7 @@ exports[`UnstakeConfirmationView render matches snapshot 1`] = `
accessibilityRole="button"
accessible={true}
activeOpacity={1}
disabled={false}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
Expand Down Expand Up @@ -1344,6 +1473,8 @@ exports[`UnstakeConfirmationView render matches snapshot 1`] = `
accessibilityRole="button"
accessible={true}
activeOpacity={1}
disabled={false}
loading={false}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
Expand Down
Loading

0 comments on commit e721d23

Please sign in to comment.