Skip to content

Commit

Permalink
MetaSwaps Alpha (#2060)
Browse files Browse the repository at this point in the history 
* Squashed commit of the following:

commit d552524
Author: Pedro Pablo Aste Kompen <[email protected]>
Date:   Tue Nov 17 14:05:22 2020 -0300

    Remove unnecessary styling

commit 24b5456
Author: Pedro Pablo Aste Kompen <[email protected]>
Date:   Tue Nov 17 13:13:16 2020 -0300

    Update tokens dependency for effect

commit 1662700
Author: Esteban Mino <[email protected]>
Date:   Tue Nov 17 12:50:48 2020 -0300

    bumpcontrollers

commit 94a14dd
Author: Pedro Pablo Aste Kompen <[email protected]>
Date:   Mon Nov 16 13:52:01 2020 -0300

    Update main navigation snapshot

commit f9ba8af
Author: Pedro Pablo Aste Kompen <[email protected]>
Date:   Mon Nov 16 13:43:14 2020 -0300

    Add TokenSelectButton label prop to test

commit 637452f
Author: Pedro Pablo Aste Kompen <[email protected]>
Date:   Mon Nov 16 13:34:37 2020 -0300

    Add i18n to swaps amount view

commit 6dfd9a4
Author: Pedro Pablo Aste Kompen <[email protected]>
Date:   Fri Nov 13 15:52:21 2020 -0300

    Fix TokenIcon border radius

commit 54c17c2
Author: Pedro Pablo Aste Kompen <[email protected]>
Date:   Fri Nov 13 13:30:16 2020 -0300

    Remove unused key in token search for swaps

commit 4bb4bcb
Author: Pedro Pablo Aste Kompen <[email protected]>
Date:   Thu Nov 12 23:30:58 2020 -0300

    Add asset balance in swaps amount view

commit b262b4e
Author: Pedro Pablo Aste Kompen <[email protected]>
Date:   Thu Nov 12 22:48:36 2020 -0300

    Add token balances in token search modal list

commit 6ca34c9
Author: Pedro Pablo Aste Kompen <[email protected]>
Date:   Thu Nov 12 14:04:33 2020 -0300

    Add invalid decimal warning

commit 539d1e7
Author: Pedro Pablo Aste Kompen <[email protected]>
Date:   Wed Nov 11 23:11:26 2020 -0300

    Add empty list message and clear search on modal hide

commit 65a31a6
Author: Esteban Mino <[email protected]>
Date:   Wed Nov 11 22:00:20 2020 -0300

    bumpcontrollers

commit 36a2289
Author: Pedro Pablo Aste Kompen <[email protected]>
Date:   Wed Nov 11 19:18:40 2020 -0300

    Update Receiver Modal snapshot, it uses ModalHandler now

commit c69c414
Author: Pedro Pablo Aste Kompen <[email protected]>
Date:   Wed Nov 11 19:13:31 2020 -0300

    Add tokens from SwapsController

commit 4f4e87f
Author: Esteban Mino <[email protected]>
Date:   Tue Nov 10 21:57:42 2020 -0300

    inception

commit 2367393
Author: Esteban Mino <[email protected]>
Date:   Tue Nov 10 19:09:15 2020 -0300

    package

commit 707b491
Author: Pedro Pablo Aste Kompen <[email protected]>
Date:   Wed Nov 11 17:49:41 2020 -0300

    Add Initial Token Selector with dummy tokens

commit 8644be0
Author: Pedro Pablo Aste Kompen <[email protected]>
Date:   Tue Nov 10 12:40:34 2020 -0300

    Switch Swaps feature flag to false

commit 0696f10
Author: Pedro Pablo Aste Kompen <[email protected]>
Date:   Mon Nov 9 20:40:44 2020 -0300

    Add Keypad rules and swap token button

commit 3173290
Author: Pedro Pablo Aste Kompen <[email protected]>
Date:   Fri Nov 6 17:08:56 2020 -0300

    Update snapshot for main nav

commit 5f03198
Author: Pedro Pablo Aste Kompen <[email protected]>
Date:   Fri Nov 6 12:41:01 2020 -0300

    Add SWAPS.ACTIVE flag

* Disable flag

* Remove console.log

* Fix linting

* bump and getch quotes

* bump

* bump

* fetchingcorrectly

* fetchQuotesfetchQuotes

* Use SwapsController state

* Add initial generic error view

* bumpcontroller

* Add swaps app utils

* Add ratio and values from top quote

* bump

* bump

* bump

* effect

* Add gas price

* Remove console.log

* Add quotes modal and i18n

* tradefees

* bump

* tradefees

* orderedtradesfees

* bump

* bumpcontrolker

* snaps

* walletaddress

* bump

* bump

* quotevalues

* Order quotes by overall quote value

* Add enable asset text row

* bump

* bump

* 500

* Swaps amount view: use max for tokens (#2052)

* Add slider button component (#2046)

* Add slider buttons and useBalance

useBalance should be used to show balance alerts

* detecting

* bump

* REVERTTHISVALIDATION

* Add Alert component (#2061)

* Add balance alert to quotes view

* fixsendto

* networkfix

* Fix use max handler usecallback deps

* Add Slippage Slider Component (#2068)

Co-authored-by: Pedro Pablo Aste Kompen <[email protected]>

* controllers

* circle

* circlerevert

* 9

* bumpcontrollers

* CURRENT_PROJECT_VERSION

* Refactor slider button

* Add visual feedback

- Nav title
- Spacing
- Text color and size

* Adjust token symbol text colors

* Update ios/MetaMask.xcodeproj/project.pbxproj

* Update ios/MetaMask.xcodeproj/project.pbxproj

* Fix SliderButton infinite effect

* Update ios/MetaMask.xcodeproj/project.pbxproj

* Update ios/MetaMask.xcodeproj/project.pbxproj

* gasprice

* 561

* Make onComplete optional

* averagegas

* 42

* Add touchable ratio switcher

* Add default 3% slippage constant

* Add fee variable to fee modal

* Add hitSlop area to modal close buttons

* Add quotes overview string

* Add error views styling

* merge

* networkupdated

Co-authored-by: Pedro Pablo Aste Kompen <[email protected]>
Co-authored-by: tlip <[email protected]>
Co-authored-by: tlip <[email protected]>
  • Loading branch information
@estebanmino @wachunei
@flamingyawn @tlip
4 people authored Jan 21, 2021
1 parent d47221e commit f26a383
Show file tree
Hide file tree
Showing 39 changed files with 2,704 additions and 199 deletions.
22 changes: 18 additions & 4 deletions app/components/Base/hooks/useModalHandler.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,24 @@
import { useState } from 'react';
import { useCallback, useState } from 'react';

/**
* @typedef {Boolean} isVisible boolean value that represent wether the modal is visible or not
* @typedef {Function} toggleModal function that toggles the isVisible boolean value
* @typedef {Function} showModal function that sets isVisible boolean to true
* @typedef {Function} hideModal function that sets isVisible boolean to false
* @typedef {[isVisible, toggleModal, showModal, hideModal]} Handlers
*/

/**
* Hook to handle modal visibility state
* @param {Boolean} initialState Initial state of the modal, if true modal will be visible
* @return {Handlers} Handlers `[isVisible, toggleModal, showModal, hideModal]`
*/
function useModalHandler(initialState = false) {
const [isVisible, setVisible] = useState(initialState);

const showModal = () => setVisible(true);
const hideModal = () => setVisible(true);
const toggleModal = () => setVisible(!isVisible);
const showModal = useCallback(() => setVisible(true), []);
const hideModal = useCallback(() => setVisible(false), []);
const toggleModal = useCallback(() => setVisible(visible => !visible), []);

return [isVisible, toggleModal, showModal, hideModal];
}
Expand Down
4 changes: 3 additions & 1 deletion app/components/Nav/Main/MainNavigator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ import PaymentMethodApplePay from '../../UI/FiatOrders/PaymentMethodApplePay';
import TransakWebView from '../../UI/FiatOrders/TransakWebView';
import ActivityView from '../../Views/ActivityView';
import SwapsAmountView from '../../UI/Swaps';
import SwapsQuotesView from '../../UI/Swaps/QuotesView';

const styles = StyleSheet.create({
headerLogo: {
Expand Down Expand Up @@ -275,7 +276,8 @@ export default createStackNavigator(
},
Swaps: {
screen: createStackNavigator({
SwapsAmountView: { screen: SwapsAmountView }
SwapsAmountView: { screen: SwapsAmountView },
SwapsQuotesView: { screen: SwapsQuotesView }
})
},
SetPasswordFlow: {
Expand Down
2 changes: 2 additions & 0 deletions app/components/Nav/Main/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,6 +251,7 @@ exports[`Main should render correctly 1`] = `
"Swaps": Object {
"childRouters": Object {
"SwapsAmountView": null,
"SwapsQuotesView": null,
},
"getActionCreators": [Function],
"getActionForPathAndParams": [Function],
Expand Down Expand Up @@ -585,6 +586,7 @@ exports[`Main should render correctly 1`] = `
"Swaps": Object {
"childRouters": Object {
"SwapsAmountView": null,
"SwapsQuotesView": null,
},
"getActionCreators": [Function],
"getActionForPathAndParams": [Function],
Expand Down
44 changes: 42 additions & 2 deletions app/components/Nav/Main/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@ import {
getMethodData,
TOKEN_METHOD_TRANSFER,
decodeTransferData,
APPROVE_FUNCTION_SIGNATURE
APPROVE_FUNCTION_SIGNATURE,
decodeApproveData
} from '../../../util/transactions';
import { BN, isValidAddress } from 'ethereumjs-util';
import { isENS, safeToChecksumAddress } from '../../../util/address';
Expand All @@ -61,6 +62,7 @@ import ProtectYourWalletModal from '../../UI/ProtectYourWalletModal';
import MainNavigator from './MainNavigator';
import PaymentChannelApproval from '../../UI/PaymentChannelApproval';
import SkipAccountSecurityModal from '../../UI/SkipAccountSecurityModal';
import { swapsUtils } from '@estebanmino/controllers';

const styles = StyleSheet.create({
flex: {
Expand Down Expand Up @@ -194,14 +196,51 @@ const Main = props => {
[props.navigation, props.transactions]
);

const autoSign = useCallback(
async transactionMeta => {
const { TransactionController } = Engine.context;
try {
TransactionController.hub.once(`${transactionMeta.id}:finished`, transactionMeta => {
if (transactionMeta.status === 'submitted') {
props.navigation.pop();
NotificationManager.watchSubmittedTransaction({
...transactionMeta,
assetType: transactionMeta.transaction.assetType
});
} else {
throw transactionMeta.error;
}
});
await TransactionController.approveTransaction(transactionMeta.id);
} catch (error) {
Alert.alert(strings('transactions.transaction_error'), error && error.message, [
{ text: strings('navigation.ok') }
]);
Logger.error(error, 'error while trying to send transaction (Main)');
}
},
[props.navigation]
);

const onUnapprovedTransaction = useCallback(
async transactionMeta => {
if (transactionMeta.origin === TransactionTypes.MMM) return;

const to = safeToChecksumAddress(transactionMeta.transaction.to);
const networkId = Networks[props.providerType].networkId;
const { data } = transactionMeta.transaction;

// if approval data includes metaswap contract
// if destination address is metaswap contract

if (
to === safeToChecksumAddress(swapsUtils.SWAPS_CONTRACT_ADDRESS) ||
(data &&
data.substr(0, 10) === APPROVE_FUNCTION_SIGNATURE &&
decodeApproveData(data).spenderAddress === swapsUtils.SWAPS_CONTRACT_ADDRESS)
) {
autoSign(transactionMeta);
} else if (
props.paymentChannelsEnabled &&
AppConstants.CONNEXT.SUPPORTED_NETWORKS.includes(props.providerType) &&
transactionMeta.transaction.data &&
Expand Down Expand Up @@ -279,7 +318,8 @@ const Main = props => {
setEtherTransaction,
setTransactionObject,
toggleApproveModal,
toggleDappTransactionModal
toggleDappTransactionModal,
autoSign
]
);

Expand Down
28 changes: 27 additions & 1 deletion app/components/UI/Navbar/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -888,7 +888,7 @@ export function getTransakWebviewNavbar(navigation) {
}

export function getSwapsAmountNavbar(navigation) {
const title = navigation.getParam('title', 'Swaps');
const title = navigation.getParam('title', 'Swap');
const rightAction = navigation.dismiss;

return {
Expand All @@ -902,3 +902,29 @@ export function getSwapsAmountNavbar(navigation) {
)
};
}
export function getSwapsQuotesNavbar(navigation) {
const title = navigation.getParam('title', 'Swap');
const rightAction = navigation.dismiss;
const leftAction = navigation.getParam('leftAction', strings('navigation.back'));

return {
headerTitle: <NavbarTitle title={title} disableNetwork translate={false} />,
headerLeft: Device.isAndroid() ? (
// eslint-disable-next-line react/jsx-no-bind
<TouchableOpacity onPress={() => navigation.pop()} style={styles.backButton}>
<IonicIcon name={'md-arrow-back'} size={24} style={styles.backIcon} />
</TouchableOpacity>
) : (
// eslint-disable-next-line react/jsx-no-bind
<TouchableOpacity onPress={() => navigation.pop()} style={styles.closeButton}>
<Text style={styles.closeButtonText}>{leftAction}</Text>
</TouchableOpacity>
),
headerRight: (
// eslint-disable-next-line react/jsx-no-bind
<TouchableOpacity onPress={rightAction} style={styles.closeButton}>
<Text style={styles.closeButtonText}>{strings('navigation.cancel')}</Text>
</TouchableOpacity>
)
};
}
182 changes: 182 additions & 0 deletions app/components/UI/SliderButton/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`SliderButton should render correctly 1`] = `
<View
onLayout={[Function]}
style={
Array [
Object {
"elevation": 0,
"shadowColor": "#75C4FD",
"shadowOffset": Object {
"height": 3,
"width": 0,
},
"shadowOpacity": 0.5,
"shadowRadius": 8,
},
undefined,
]
}
>
<View
style={
Object {
"alignItems": "center",
"backgroundColor": "#0074C8",
"borderRadius": 60,
"height": 60,
"justifyContent": "center",
"overflow": "hidden",
"position": "relative",
"width": "100%",
}
}
>
<Image
resizeMode="stretch"
source={
Object {
"testUri": "../../../app/components/UI/SliderButton/assets/slider_button_gradient.png",
}
}
style={
Array [
Object {
"height": "100%",
"position": "absolute",
"width": "100%",
},
false,
]
}
/>
<ForwardRef(AnimatedComponentWrapper)
resizeMode="contain"
source={
Object {
"testUri": "../../../app/components/UI/SliderButton/assets/slider_button_shine.png",
}
}
style={
Array [
Object {
"height": "200%",
"left": 0,
"position": "absolute",
},
Object {
"opacity": 1,
"transform": Array [
Object {
"translateX": -142,
},
],
},
]
}
/>
<ForwardRef(AnimatedComponentWrapper)
style={
Object {
"opacity": 1,
}
}
>
<Text
style={
Object {
"color": "#FFFFFF",
"fontFamily": "EuclidCircularB-Regular",
"fontSize": 16,
"fontWeight": "400",
}
}
>
Incomplete Text
</Text>
</ForwardRef(AnimatedComponentWrapper)>
</View>
<ForwardRef(AnimatedComponentWrapper)
style={
Array [
Object {
"borderRadius": 60,
"height": "100%",
"overflow": "hidden",
"position": "absolute",
},
Object {
"backgroundColor": "rgba(2, 96, 164, 1)",
"width": 60,
},
]
}
>
<View
style={
Array [
Object {
"alignItems": "center",
"height": "100%",
"justifyContent": "center",
"position": "absolute",
"width": "100%",
},
Object {
"width": 0,
},
]
}
>
<Text
style={
Object {
"color": "#FFFFFF",
"fontFamily": "EuclidCircularB-Regular",
"fontSize": 16,
"fontWeight": "400",
}
}
>
Complete Text
</Text>
</View>
</ForwardRef(AnimatedComponentWrapper)>
<ForwardRef(AnimatedComponentWrapper)
onMoveShouldSetResponder={[Function]}
onMoveShouldSetResponderCapture={[Function]}
onResponderEnd={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderReject={[Function]}
onResponderRelease={[Function]}
onResponderStart={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
onStartShouldSetResponderCapture={[Function]}
style={
Array [
Object {
"backgroundColor": "#FFFFFF",
"borderColor": "#0260A4",
"borderRadius": 60,
"borderWidth": 9.6,
"height": 60,
"position": "absolute",
"width": 60,
},
Object {
"opacity": 1,
"transform": Array [
Object {
"translateX": 0,
},
],
},
]
}
/>
</View>
`;
Binary file added app/components/UI/SliderButton/assets/slider_button_gradient.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/components/UI/SliderButton/assets/slider_button_shine.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit f26a383

Please sign in to comment.