From fbb67abf827d642e7574a182db8770ecd7b81179 Mon Sep 17 00:00:00 2001
From: Ivan Vershigora <ivan.vershigora@gmail.com>
Date: Tue, 29 Nov 2022 16:11:39 +0000
Subject: [PATCH] feat: draggable widgets

---
 index.js                                      |  11 +-
 src/assets/icons/wallet.ts                    |   3 +
 src/components/AuthWidget.tsx                 |  51 +++--
 src/components/BlocksWidget.tsx               |   9 +-
 src/components/FactsWidget.tsx                |  51 +++--
 src/components/FeedWidget.tsx                 |  62 ++---
 src/components/HeadlinesWidget.tsx            |  66 +++---
 .../{BitfinexWidget.tsx => PriceWidget.tsx}   |  13 +-
 src/components/Widgets.tsx                    | 211 +++++++++++-------
 src/screens/Wallets/Send/AutoRebalance.tsx    |   2 +-
 src/screens/Wallets/index.tsx                 |  16 +-
 src/screens/Widgets/WidgetFeedEdit.tsx        |   4 +-
 src/store/actions/actions.ts                  |   1 +
 src/store/actions/widgets.ts                  |   7 +
 src/store/index.ts                            |   2 +-
 src/store/reducers/widgets.ts                 |   6 +
 src/store/shapes/widgets.ts                   |   1 +
 src/store/types/widgets.ts                    |   1 +
 src/styles/components.ts                      |   8 +
 19 files changed, 326 insertions(+), 199 deletions(-)
 rename src/components/{BitfinexWidget.tsx => PriceWidget.tsx} (95%)

diff --git a/index.js b/index.js
index 72a480f61..a8e0e6655 100644
--- a/index.js
+++ b/index.js
@@ -10,7 +10,14 @@ Text.defaultProps.allowFontScaling = false;
 TextInput.defaultProps = TextInput.defaultProps || {};
 TextInput.defaultProps.allowFontScaling = false;
 
-// TEMP: ignore <Dialog /> warning on iOS
-LogBox.ignoreLogs(['Modal with']);
+LogBox.ignoreLogs([
+	'Require cycle',
+	// TEMP: ignore <Dialog /> warning on iOS
+	'Modal with',
+	// we have react-native-draggable-flatlist inside <ScrollView /> on main screen
+	// unfortunalty, there is not good way to hide this error yet
+	// https://github.com/computerjazz/react-native-draggable-flatlist/issues/422
+	'VirtualizedLists should never be nested inside plain ScrollViews',
+]);
 
 AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(Root));
diff --git a/src/assets/icons/wallet.ts b/src/assets/icons/wallet.ts
index 5f7136433..7141e5f3b 100644
--- a/src/assets/icons/wallet.ts
+++ b/src/assets/icons/wallet.ts
@@ -277,3 +277,6 @@ export const plusCircledIcon = (color = '#75BF72'): string =>
 	<path fill-rule="evenodd" clip-rule="evenodd" d="M10 16C10 15.7239 10.2239 15.5 10.5 15.5H21.5C21.7761 15.5 22 15.7239 22 16C22 16.2761 21.7761 16.5 21.5 16.5H10.5C10.2239 16.5 10 16.2761 10 16Z" fill=${color}/>
 	<path fill-rule="evenodd" clip-rule="evenodd" d="M16 10C16.2761 10 16.5 10.2239 16.5 10.5V21.5C16.5 21.7761 16.2761 22 16 22C15.7239 22 15.5 21.7761 15.5 21.5V10.5C15.5 10.2239 15.7239 10 16 10Z" fill=${color}/>
 	</svg>`;
+
+export const keyIcon = (color = 'white'): string =>
+	`<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill=${color}><path d="m11.646 15.3541c-.7709-1.9228-.8542-4.0528-.2359-6.02992.6183-1.97714 1.9002-3.68017 3.6292-4.82123 1.729-1.14105 3.7989-1.65014 5.8599-1.44122 2.061.20893 3.9866 1.12306 5.4515 2.58787 1.4648 1.46482 2.3789 3.39047 2.5878 5.4515.2089 2.061-.3002 4.1309-1.4412 5.8599-1.1411 1.7289-2.8441 3.0109-4.8213 3.6292-1.9771.6182-4.1071.5349-6.0299-.236l.0001-.0002-1.646 1.646h-3v3h-2.99996v3h-5v-5l7.64596-7.646z" opacity=".2"/><path d="m22.5 11c.8284 0 1.5-.6716 1.5-1.5 0-.82843-.6716-1.5-1.5-1.5s-1.5.67157-1.5 1.5c0 .8284.6716 1.5 1.5 1.5z"/><path clip-rule="evenodd" d="m20.7983 4.05664c-1.8318-.1857-3.6715.26678-5.2082 1.28094s-2.6761 2.52779-3.2256 4.28506c-.547 1.74936-.4761 3.63326.2005 5.33616.1592.3699.0823.8084-.2116 1.1023l-7.35316 7.3531v3.5858h3v-2c0-.5523.44772-1 1-1h1.99996v-2c0-.5523.4478-1 1-1h2.5858l1.3531-1.3531c.2931-.2931.7307-.3708 1.1005-.2123 1.7034.6772 3.588.7484 5.338.2012 1.7573-.5496 3.2709-1.689 4.2851-3.2257 1.0141-1.5366 1.4666-3.3764 1.2809-5.2082-.1857-1.83177-.9981-3.54327-2.3-4.84519-1.302-1.30191-3.0135-2.11438-4.8453-2.30007zm-3.8945 17.45406c1.9657.639 4.0874.6541 6.0707.0339 2.197-.687 4.0895-2.1116 5.3574-4.0328 1.268-1.9213 1.8337-4.2214 1.6015-6.5116-.2321-2.29018-1.2479-4.42998-2.8756-6.0577s-3.7675-2.64351-6.0577-2.87567-4.5904.33355-6.5116 1.6015c-1.9213 1.26795-3.3458 3.16037-4.0328 5.35739-.62024 1.98328-.60511 4.10498.0338 6.07078l-7.19636 7.1964c-.18754.1875-.2929.4419-.2929.7071v5c0 .5523.44772 1 1 1h5c.55229 0 .99996-.4477.99996-1v-2h2c.5523 0 1-.4477 1-1v-2h2c.2653 0 .5196-.1054.7071-.2929z" fill-rule="evenodd"/></g></svg>`;
diff --git a/src/components/AuthWidget.tsx b/src/components/AuthWidget.tsx
index 409ad9c18..7b389f0c5 100644
--- a/src/components/AuthWidget.tsx
+++ b/src/components/AuthWidget.tsx
@@ -10,6 +10,8 @@ import { Client } from '@synonymdev/slashtags-auth';
 
 import { useProfile, useSelectedSlashtag } from '../hooks/slashtags';
 import {
+	KeyIcon,
+	ListIcon,
 	Text01M,
 	TouchableOpacity,
 	TrashIcon,
@@ -25,9 +27,15 @@ import Dialog from './Dialog';
 const AuthWidget = ({
 	url,
 	widget,
+	isEditing = false,
+	onLongPress,
+	onPressIn,
 }: {
 	url: string;
 	widget: IWidget;
+	isEditing?: boolean;
+	onLongPress?: () => void;
+	onPressIn?: () => void;
 }): ReactElement => {
 	const [showButtons, setShowButtons] = useState(false);
 	const [showDialog, setShowDialog] = useState(false);
@@ -72,6 +80,8 @@ const AuthWidget = ({
 		<TouchableOpacity
 			style={styles.container}
 			onPress={switchShowButtons}
+			onLongPress={onLongPress}
+			onPressIn={onPressIn}
 			activeOpacity={0.9}>
 			<View style={styles.left}>
 				<ProfileImage
@@ -83,21 +93,28 @@ const AuthWidget = ({
 				<Text01M>{profile?.name || ' '}</Text01M>
 			</View>
 			<View style={styles.right}>
-				{showButtons ? (
+				{showButtons && widget.magiclink && !isEditing && (
 					<View style={styles.buttonsContainer}>
-						{widget.magiclink && (
-							<>
-								<Button
-									style={styles.deleteButton}
-									icon={<TrashIcon width={20} />}
-									onPress={onDelete}
-								/>
-								<Button text="Sign in" onPress={openMagicLink} />
-							</>
-						)}
+						<Button
+							text="Sign in"
+							onPress={openMagicLink}
+							icon={<KeyIcon color="brand" width={20} height={20} />}
+						/>
+					</View>
+				)}
+				{isEditing && (
+					<View style={styles.buttonsContainer}>
+						<TouchableOpacity style={styles.actionButton} onPress={onDelete}>
+							<TrashIcon width={22} />
+						</TouchableOpacity>
+						<TouchableOpacity
+							style={styles.actionButton}
+							onLongPress={onLongPress}
+							onPressIn={onPressIn}
+							activeOpacity={0.9}>
+							<ListIcon color="white" width={24} />
+						</TouchableOpacity>
 					</View>
-				) : (
-					<View />
 				)}
 			</View>
 			<Dialog
@@ -145,9 +162,11 @@ const styles = StyleSheet.create({
 		flexDirection: 'row',
 		alignItems: 'center',
 	},
-	deleteButton: {
-		minWidth: 0,
-		marginHorizontal: 8,
+	actionButton: {
+		paddingHorizontal: 10,
+		height: '100%',
+		alignItems: 'center',
+		justifyContent: 'center',
 	},
 });
 
diff --git a/src/components/BlocksWidget.tsx b/src/components/BlocksWidget.tsx
index 9d365a7b3..2679dbfad 100644
--- a/src/components/BlocksWidget.tsx
+++ b/src/components/BlocksWidget.tsx
@@ -10,12 +10,14 @@ const BlocksWidget = ({
 	url,
 	widget,
 	isEditing = false,
-	onPress,
+	onLongPress,
+	onPressIn,
 }: {
 	url: string;
 	widget: IWidget;
 	isEditing?: boolean;
-	onPress?: () => void;
+	onLongPress?: () => void;
+	onPressIn?: () => void;
 }): ReactElement => {
 	const { value } = useFeedWidget({ url, feed: widget.feed });
 
@@ -26,7 +28,8 @@ const BlocksWidget = ({
 			label={value?.height || ''}
 			icon={<CubeIcon width={32} height={32} />}
 			isEditing={isEditing}
-			onPress={onPress}
+			onLongPress={onLongPress}
+			onPressIn={onPressIn}
 			right={
 				<View style={styles.numbers}>
 					{value && (
diff --git a/src/components/FactsWidget.tsx b/src/components/FactsWidget.tsx
index cdf1b90e2..b30a454d7 100644
--- a/src/components/FactsWidget.tsx
+++ b/src/components/FactsWidget.tsx
@@ -4,28 +4,30 @@ import { SlashURL } from '@synonymdev/slashtags-sdk';
 import b4a from 'b4a';
 
 import {
-	View,
-	Text01M,
 	Caption13M,
 	GearIcon,
-	TrashIcon,
 	LightBulbIcon,
+	ListIcon,
+	Text01M,
+	TrashIcon,
+	View,
 } from '../styles/components';
 import { useSlashtagsSDK } from './SlashtagsProvider';
 import { showErrorNotification } from '../utils/notifications';
 import { navigate } from '../navigation/root/RootNavigator';
-import Button from './Button';
 import Dialog from './Dialog';
 import { deleteWidget } from '../store/actions/widgets';
 
 const FactsWidget = ({
 	url,
 	isEditing = false,
-	onPress,
+	onLongPress,
+	onPressIn,
 }: {
 	url: string;
 	isEditing?: boolean;
-	onPress?: () => void;
+	onLongPress?: () => void;
+	onPressIn?: () => void;
 }): ReactElement => {
 	const [showDialog, setShowDialog] = useState(false);
 	const [fact, setFact] = useState<string | undefined>();
@@ -96,7 +98,8 @@ const FactsWidget = ({
 			<TouchableOpacity
 				style={styles.root}
 				activeOpacity={0.9}
-				onPress={onPress}>
+				onLongPress={onLongPress}
+				onPressIn={onPressIn}>
 				<View style={styles.icon}>
 					{<LightBulbIcon width={32} height={32} />}
 				</View>
@@ -116,16 +119,19 @@ const FactsWidget = ({
 
 			{isEditing && (
 				<View style={styles.buttonsContainer}>
-					<Button
-						style={styles.deleteButton}
-						icon={<TrashIcon width={20} />}
-						onPress={onDelete}
-					/>
-					<Button
-						style={styles.settingsButton}
-						icon={<GearIcon width={20} />}
-						onPress={onEdit}
-					/>
+					<TouchableOpacity style={styles.actionButton} onPress={onDelete}>
+						<TrashIcon width={22} />
+					</TouchableOpacity>
+					<TouchableOpacity style={styles.actionButton} onPress={onEdit}>
+						<GearIcon width={22} />
+					</TouchableOpacity>
+					<TouchableOpacity
+						style={styles.actionButton}
+						onLongPress={onLongPress}
+						onPressIn={onPressIn}
+						activeOpacity={0.9}>
+						<ListIcon color="white" width={24} />
+					</TouchableOpacity>
 				</View>
 			)}
 			<Dialog
@@ -184,12 +190,11 @@ const styles = StyleSheet.create({
 		justifyContent: 'center',
 		alignItems: 'center',
 	},
-	deleteButton: {
-		minWidth: 0,
-		marginHorizontal: 8,
-	},
-	settingsButton: {
-		minWidth: 0,
+	actionButton: {
+		paddingHorizontal: 10,
+		height: '100%',
+		alignItems: 'center',
+		justifyContent: 'center',
 	},
 });
 
diff --git a/src/components/FeedWidget.tsx b/src/components/FeedWidget.tsx
index 3d9d59762..240188465 100644
--- a/src/components/FeedWidget.tsx
+++ b/src/components/FeedWidget.tsx
@@ -3,14 +3,14 @@ import { StyleSheet } from 'react-native';
 
 import { navigate } from '../navigation/root/RootNavigator';
 import {
+	Caption13M,
 	GearIcon,
-	TouchableOpacity,
-	View,
+	ListIcon,
 	Text01M,
-	Caption13M,
+	TouchableOpacity,
 	TrashIcon,
+	View,
 } from '../styles/components';
-import Button from './Button';
 import ProfileImage from './ProfileImage';
 import { IWidget } from '../store/types/widgets';
 import { useFeedWidget } from '../hooks/widgets';
@@ -27,14 +27,14 @@ export const FeedWidget = ({
 	icon,
 	name,
 	isEditing = false,
-	onPress,
+	onLongPress,
 }: {
 	url: string;
 	widget: IWidget;
 	icon?: ReactElement;
 	name?: string;
 	isEditing?: boolean;
-	onPress?: () => void;
+	onLongPress?: () => void;
 }): ReactElement => {
 	const { value } = useFeedWidget({ url, feed: widget.feed });
 
@@ -44,7 +44,7 @@ export const FeedWidget = ({
 			name={name || widget.feed.name}
 			label={widget.feed.field.name}
 			isEditing={isEditing}
-			onPress={onPress}
+			onLongPress={onLongPress}
 			right={<DefaultRightComponent value={value?.toString()} />}
 			icon={
 				icon || (
@@ -67,8 +67,9 @@ export const BaseFeedWidget = ({
 	label,
 	right = <View />,
 	middle,
-	isEditing = false,
-	onPress,
+	isEditing,
+	onLongPress,
+	onPressIn,
 }: {
 	url: string;
 	name?: string;
@@ -77,7 +78,8 @@ export const BaseFeedWidget = ({
 	right?: ReactElement;
 	middle?: ReactElement;
 	isEditing?: boolean;
-	onPress?: () => void;
+	onLongPress?: () => void;
+	onPressIn?: () => void;
 }): ReactElement => {
 	const [showDialog, setShowDialog] = useState(false);
 
@@ -90,7 +92,11 @@ export const BaseFeedWidget = ({
 	};
 
 	return (
-		<TouchableOpacity style={styles.root} activeOpacity={0.9} onPress={onPress}>
+		<TouchableOpacity
+			style={styles.root}
+			activeOpacity={0.9}
+			onLongPress={onLongPress}
+			onPressIn={onPressIn}>
 			<View style={styles.infoContainer}>
 				<View style={styles.icon}>{icon}</View>
 				<View style={styles.labelsContainer}>
@@ -103,16 +109,19 @@ export const BaseFeedWidget = ({
 
 			{isEditing ? (
 				<>
-					<Button
-						style={styles.deleteButton}
-						icon={<TrashIcon width={20} />}
-						onPress={onDelete}
-					/>
-					<Button
-						style={styles.settingsButton}
-						icon={<GearIcon width={20} />}
-						onPress={onEdit}
-					/>
+					<TouchableOpacity style={styles.actionButton} onPress={onDelete}>
+						<TrashIcon width={22} />
+					</TouchableOpacity>
+					<TouchableOpacity style={styles.actionButton} onPress={onEdit}>
+						<GearIcon width={22} />
+					</TouchableOpacity>
+					<TouchableOpacity
+						style={styles.actionButton}
+						onLongPress={onLongPress}
+						onPressIn={onPressIn}
+						activeOpacity={0.9}>
+						<ListIcon color="white" width={24} />
+					</TouchableOpacity>
 				</>
 			) : (
 				<View style={styles.dataContainer}>
@@ -179,12 +188,11 @@ const styles = StyleSheet.create({
 		flexDirection: 'row',
 		justifyContent: 'flex-end',
 	},
-	deleteButton: {
-		minWidth: 0,
-		marginHorizontal: 8,
-	},
-	settingsButton: {
-		minWidth: 0,
+	actionButton: {
+		paddingHorizontal: 10,
+		height: '100%',
+		alignItems: 'center',
+		justifyContent: 'center',
 	},
 });
 
diff --git a/src/components/HeadlinesWidget.tsx b/src/components/HeadlinesWidget.tsx
index be70e7395..d8e419e67 100644
--- a/src/components/HeadlinesWidget.tsx
+++ b/src/components/HeadlinesWidget.tsx
@@ -3,19 +3,19 @@ import { TouchableOpacity, Linking, StyleSheet } from 'react-native';
 import { SlashURL } from '@synonymdev/slashtags-sdk';
 
 import {
-	View,
-	Text01M,
 	Caption13M,
-	NewspaperIcon,
 	GearIcon,
+	ListIcon,
+	NewspaperIcon,
+	Text01M,
 	TrashIcon,
+	View,
 } from '../styles/components';
 import { IWidget } from '../store/types/widgets';
 import { useSlashtagsSDK } from './SlashtagsProvider';
 import { showErrorNotification } from '../utils/notifications';
 import { decodeJSON } from '../utils/slashtags';
 import { navigate } from '../navigation/root/RootNavigator';
-import Button from './Button';
 import Dialog from './Dialog';
 import { deleteWidget } from '../store/actions/widgets';
 
@@ -23,12 +23,14 @@ const HeadlinesWidget = ({
 	url,
 	widget,
 	isEditing = false,
-	onPress,
+	onLongPress,
+	onPressIn,
 }: {
 	url: string;
 	widget: IWidget;
 	isEditing?: boolean;
-	onPress?: () => void;
+	onLongPress?: () => void;
+	onPressIn?: () => void;
 }): ReactElement => {
 	const [showDialog, setShowDialog] = useState(false);
 	const [article, setArticle] = useState<{
@@ -98,7 +100,11 @@ const HeadlinesWidget = ({
 			<TouchableOpacity
 				style={styles.root}
 				activeOpacity={0.9}
-				onPress={onPress}>
+				onPress={(): void => {
+					!isEditing && article?.link && Linking.openURL(article.link);
+				}}
+				onLongPress={onLongPress}
+				onPressIn={onPressIn}>
 				<View style={styles.icon}>
 					{<NewspaperIcon width={32} height={32} />}
 				</View>
@@ -108,15 +114,9 @@ const HeadlinesWidget = ({
 					</Text01M>
 					<View style={styles.row}>
 						<View style={styles.linkContainer}>
-							<TouchableOpacity
-								activeOpacity={0.9}
-								onPress={(): void => {
-									article?.link && Linking.openURL(article.link);
-								}}>
-								<Caption13M color="gray1" numberOfLines={1}>
-									{article?.link}
-								</Caption13M>
-							</TouchableOpacity>
+							<Caption13M color="gray1" numberOfLines={1}>
+								{article?.link}
+							</Caption13M>
 						</View>
 						<View style={styles.authorContainer}>
 							<Caption13M style={styles.author} color="gray1" numberOfLines={1}>
@@ -129,16 +129,19 @@ const HeadlinesWidget = ({
 
 			{isEditing && (
 				<View style={styles.buttonsContainer}>
-					<Button
-						style={styles.deleteButton}
-						icon={<TrashIcon width={20} />}
-						onPress={onDelete}
-					/>
-					<Button
-						style={styles.settingsButton}
-						icon={<GearIcon width={20} />}
-						onPress={onEdit}
-					/>
+					<TouchableOpacity style={styles.actionButton} onPress={onDelete}>
+						<TrashIcon width={22} />
+					</TouchableOpacity>
+					<TouchableOpacity style={styles.actionButton} onPress={onEdit}>
+						<GearIcon width={22} />
+					</TouchableOpacity>
+					<TouchableOpacity
+						style={styles.actionButton}
+						onLongPress={onLongPress}
+						onPressIn={onPressIn}
+						activeOpacity={0.9}>
+						<ListIcon color="white" width={24} />
+					</TouchableOpacity>
 				</View>
 			)}
 			<Dialog
@@ -203,12 +206,11 @@ const styles = StyleSheet.create({
 		justifyContent: 'center',
 		alignItems: 'center',
 	},
-	deleteButton: {
-		minWidth: 0,
-		marginHorizontal: 8,
-	},
-	settingsButton: {
-		minWidth: 0,
+	actionButton: {
+		paddingHorizontal: 10,
+		height: '100%',
+		alignItems: 'center',
+		justifyContent: 'center',
 	},
 });
 
diff --git a/src/components/BitfinexWidget.tsx b/src/components/PriceWidget.tsx
similarity index 95%
rename from src/components/BitfinexWidget.tsx
rename to src/components/PriceWidget.tsx
index 3c39349b1..37cd3a186 100644
--- a/src/components/BitfinexWidget.tsx
+++ b/src/components/PriceWidget.tsx
@@ -85,16 +85,18 @@ const Chart = ({
 	);
 };
 
-const BitfinexWidget = ({
+const PriceWidget = ({
 	url,
 	widget,
 	isEditing = false,
-	onPress,
+	onLongPress,
+	onPressIn,
 }: {
 	url: string;
 	widget: IWidget;
 	isEditing?: boolean;
-	onPress?: () => void;
+	onLongPress?: () => void;
+	onPressIn?: () => void;
 }): ReactElement => {
 	const { value, drive } = useFeedWidget({ url, feed: widget.feed });
 	const [pastValues, setPastValues] = useState<number[]>([]);
@@ -143,7 +145,6 @@ const BitfinexWidget = ({
 			label={widget.feed.field.name}
 			icon={<ChartLineIcon width={32} height={32} />}
 			isEditing={isEditing}
-			onPress={onPress}
 			middle={<Chart color={change.color} values={pastValues} />}
 			right={
 				<View style={styles.numbers}>
@@ -155,6 +156,8 @@ const BitfinexWidget = ({
 					</Caption13M>
 				</View>
 			}
+			onLongPress={onLongPress}
+			onPressIn={onPressIn}
 		/>
 	);
 };
@@ -178,6 +181,6 @@ const styles = StyleSheet.create({
 	},
 });
 
-export default memo(BitfinexWidget);
+export default memo(PriceWidget);
 
 function noop(): void {}
diff --git a/src/components/Widgets.tsx b/src/components/Widgets.tsx
index 34629e34a..8ba016c16 100644
--- a/src/components/Widgets.tsx
+++ b/src/components/Widgets.tsx
@@ -1,6 +1,19 @@
-import React, { memo, ReactElement, useState, useCallback } from 'react';
+import React, {
+	ReactElement,
+	useState,
+	useCallback,
+	useMemo,
+	memo,
+} from 'react';
 import { StyleSheet } from 'react-native';
 import { useSelector } from 'react-redux';
+import {
+	NestableDraggableFlatList,
+	NestableScrollContainer,
+	RenderItemParams,
+	ScaleDecorator,
+} from 'react-native-draggable-flatlist';
+import { useFocusEffect } from '@react-navigation/native';
 
 import { navigate } from '../navigation/root/RootNavigator';
 import Store from '../store/types';
@@ -10,105 +23,134 @@ import {
 	Text01M,
 	TouchableOpacity,
 	View,
+	ListIcon,
+	XIcon,
 } from '../styles/components';
-import BitfinexWidget from './BitfinexWidget';
+import { SUPPORTED_FEED_TYPES } from '../utils/widgets';
+import { setWidgetsSortOrder } from '../store/actions/widgets';
+
+import PriceWidget from './PriceWidget';
 import AuthWidget from './AuthWidget';
 import FeedWidget from './FeedWidget';
 import HeadlinesWidget from './HeadlinesWidget';
-import { SUPPORTED_FEED_TYPES } from '../utils/widgets';
 import BlocksWidget from './BlocksWidget';
-import { useFocusEffect } from '@react-navigation/native';
 import FactsWidget from './FactsWidget';
 
-export const Widgets = (): ReactElement => {
+export const Widgets = ({ onEditStart, onEditEnd }): ReactElement => {
 	const widgets = useSelector((state: Store) => state.widgets.widgets);
-	const [editing, setEditing] = useState<string | null>();
+	const sortOrder = useSelector(
+		(state: Store) => state.widgets.sortOrder ?? [],
+	);
+	const widgetsArray = useMemo(
+		() =>
+			Object.entries(widgets).sort(
+				([a], [b]) => sortOrder.indexOf(a) - sortOrder.indexOf(b),
+			),
+		[widgets, sortOrder],
+	);
+	const [editing, setEditing] = useState<boolean>(false);
 
-	useFocusEffect(useCallback(() => setEditing(null), []));
+	const handleEditStart = useCallback((): void => {
+		setEditing(true);
+		onEditStart();
+	}, [onEditStart]);
+	const handleEditEnd = useCallback((): void => {
+		setEditing(false);
+		onEditEnd();
+	}, [onEditEnd]);
 
-	const onPress = (url: string): void => {
-		if (editing === url) {
-			setEditing(null);
-		} else {
-			setEditing(url);
-		}
-	};
+	useFocusEffect(useCallback(handleEditEnd, [handleEditEnd]));
 
-	const onAdd = (): void => {
+	const handleDragEnd = useCallback(({ data }) => {
+		const order = data.map((i): string => i[0]);
+		setWidgetsSortOrder(order);
+	}, []);
+
+	const renderItem = useCallback(
+		({
+			// isActive,
+			item,
+			drag,
+		}: RenderItemParams<Array<any>>): ReactElement => {
+			const [url, widget] = item;
+
+			if (!widget.feed) {
+				return (
+					<ScaleDecorator>
+						<AuthWidget
+							url={url}
+							widget={widget}
+							isEditing={editing}
+							onLongPress={editing ? drag : handleEditStart}
+							onPressIn={editing ? drag : undefined}
+						/>
+					</ScaleDecorator>
+				);
+			}
+
+			let Component;
+			switch (widget.feed.type) {
+				case SUPPORTED_FEED_TYPES.PRICE_FEED:
+					Component = PriceWidget;
+					break;
+				case SUPPORTED_FEED_TYPES.HEADLINES_FEED:
+					Component = HeadlinesWidget;
+					break;
+				case SUPPORTED_FEED_TYPES.BLOCKS_FEED:
+					Component = BlocksWidget;
+					break;
+				case SUPPORTED_FEED_TYPES.FACTS_FEED:
+					Component = FactsWidget;
+					break;
+				default:
+					Component = FeedWidget;
+			}
+
+			return (
+				<ScaleDecorator>
+					<Component
+						url={url}
+						widget={widget}
+						isEditing={editing}
+						onLongPress={editing ? drag : handleEditStart}
+						onPressIn={editing ? drag : undefined}
+					/>
+				</ScaleDecorator>
+			);
+		},
+		[editing, handleEditStart],
+	);
+
+	const onAdd = useCallback((): void => {
 		navigate('WidgetsRoot');
-	};
+	}, []);
 
 	return (
-		<>
-			<Subtitle style={styles.title}>Widgets</Subtitle>
-			<View>
-				{Object.entries(widgets).map(([url, widget]) =>
-					widget.feed ? (
-						((): ReactElement => {
-							switch (widget.feed.type) {
-								case SUPPORTED_FEED_TYPES.PRICE_FEED:
-									return (
-										<BitfinexWidget
-											key={url}
-											url={url}
-											widget={widget}
-											isEditing={editing === url}
-											onPress={(): void => onPress(url)}
-										/>
-									);
-								case SUPPORTED_FEED_TYPES.HEADLINES_FEED:
-									return (
-										<HeadlinesWidget
-											key={url}
-											url={url}
-											widget={widget}
-											isEditing={editing === url}
-											onPress={(): void => onPress(url)}
-										/>
-									);
-								case SUPPORTED_FEED_TYPES.BLOCKS_FEED:
-									return (
-										<BlocksWidget
-											key={url}
-											url={url}
-											widget={widget}
-											isEditing={editing === url}
-											onPress={(): void => onPress(url)}
-										/>
-									);
-								case SUPPORTED_FEED_TYPES.FACTS_FEED:
-									return (
-										<FactsWidget
-											key={url}
-											url={url}
-											isEditing={editing === url}
-											onPress={(): void => onPress(url)}
-										/>
-									);
-								default:
-									return (
-										<FeedWidget
-											key={url}
-											url={url}
-											widget={widget}
-											isEditing={editing === url}
-											onPress={(): void => onPress(url)}
-										/>
-									);
-							}
-						})()
+		<NestableScrollContainer>
+			<View style={styles.title}>
+				<Subtitle>Widgets</Subtitle>
+				<TouchableOpacity onPress={editing ? handleEditEnd : handleEditStart}>
+					{editing ? (
+						<XIcon width={24} height={24} color="gray1" />
 					) : (
-						<AuthWidget key={url} url={url} widget={widget} />
-					),
-				)}
-				<TouchableOpacity style={styles.add} onPress={onAdd}>
-					<View color="green16" style={styles.iconCircle}>
-						<PlusIcon height={16} color="green" />
-					</View>
-					<Text01M>Add Widget</Text01M>
+						<ListIcon color="gray1" />
+					)}
 				</TouchableOpacity>
 			</View>
-		</>
+			<NestableDraggableFlatList
+				data={widgetsArray}
+				keyExtractor={(item): string => item[0]}
+				renderItem={renderItem}
+				onDragEnd={handleDragEnd}
+				{...(editing ? { activationDistance: 1 } : {})}
+			/>
+			<TouchableOpacity style={styles.add} onPress={onAdd}>
+				<View color="green16" style={styles.iconCircle}>
+					<PlusIcon height={16} color="green" />
+				</View>
+				<Text01M>Add Widget</Text01M>
+			</TouchableOpacity>
+		</NestableScrollContainer>
 	);
 };
 
@@ -116,6 +158,9 @@ const styles = StyleSheet.create({
 	title: {
 		marginTop: 32,
 		marginBottom: 8,
+		flexDirection: 'row',
+		alignItems: 'center',
+		justifyContent: 'space-between',
 	},
 	add: {
 		height: 88,
diff --git a/src/screens/Wallets/Send/AutoRebalance.tsx b/src/screens/Wallets/Send/AutoRebalance.tsx
index 575a2c131..6d5b1c9d4 100644
--- a/src/screens/Wallets/Send/AutoRebalance.tsx
+++ b/src/screens/Wallets/Send/AutoRebalance.tsx
@@ -61,7 +61,7 @@ const AutoRebalance = ({
 				<Button
 					style={styles.button2}
 					size="large"
-					text={`Yes (Cost: )`}
+					text="Yes (Cost: )"
 					onPress={onContinue}
 				/>
 			</View>
diff --git a/src/screens/Wallets/index.tsx b/src/screens/Wallets/index.tsx
index 6aa576e13..1e7ec529f 100644
--- a/src/screens/Wallets/index.tsx
+++ b/src/screens/Wallets/index.tsx
@@ -1,4 +1,4 @@
-import React, { memo, ReactElement, useState } from 'react';
+import React, { memo, ReactElement, useState, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import { StyleSheet } from 'react-native';
 import { RefreshControl, ScrollView } from 'react-native-gesture-handler';
@@ -24,11 +24,12 @@ import Assets from '../../components/Assets';
 
 const Wallets = ({ navigation }: TabScreenProps<'Wallets'>): ReactElement => {
 	const [refreshing, setRefreshing] = useState(false);
+	const [scrollEnabled, setScrollEnabled] = useState(true);
 	const hideBalance = useSelector((state: Store) => state.settings.hideBalance);
 	const hideOnboardingSetting = useSelector(
 		(state: Store) => state.settings.hideOnboardingMessage,
 	);
-	const widgets = useSelector((state: Store) => state.widgets?.widgets || {});
+	const widgets = useSelector((state: Store) => state.widgets.widgets);
 	const empty = useNoTransactions() && Object.values(widgets).length === 0;
 	const colors = useColors();
 
@@ -51,6 +52,9 @@ const Wallets = ({ navigation }: TabScreenProps<'Wallets'>): ReactElement => {
 		setRefreshing(false);
 	};
 
+	const handleWidgetsEditStart = useCallback(() => setScrollEnabled(false), []);
+	const handleWidgetsEditEnd = useCallback(() => setScrollEnabled(true), []);
+
 	const hideOnboarding = hideOnboardingSetting || !empty;
 
 	return (
@@ -69,7 +73,8 @@ const Wallets = ({ navigation }: TabScreenProps<'Wallets'>): ReactElement => {
 							onRefresh={onRefresh}
 							tintColor={colors.refreshControl}
 						/>
-					}>
+					}
+					scrollEnabled={scrollEnabled}>
 					<DetectSwipe
 						onSwipeLeft={toggleHideBalance}
 						onSwipeRight={toggleHideBalance}>
@@ -84,7 +89,10 @@ const Wallets = ({ navigation }: TabScreenProps<'Wallets'>): ReactElement => {
 							<View style={styles.content}>
 								<ConnectivityIndicator />
 								<Assets navigation={navigation} />
-								<Widgets />
+								<Widgets
+									onEditStart={handleWidgetsEditStart}
+									onEditEnd={handleWidgetsEditEnd}
+								/>
 								<ActivityListShort />
 								<BetaWarning />
 							</View>
diff --git a/src/screens/Widgets/WidgetFeedEdit.tsx b/src/screens/Widgets/WidgetFeedEdit.tsx
index 7e5d2f2c2..09f02f53d 100644
--- a/src/screens/Widgets/WidgetFeedEdit.tsx
+++ b/src/screens/Widgets/WidgetFeedEdit.tsx
@@ -33,7 +33,7 @@ import {
 import Divider from '../../components/Divider';
 import HourglassSpinner from '../../components/HourglassSpinner';
 import { SlashtagURL } from '../../components/SlashtagURL';
-import BitfinexWidget from '../../components/BitfinexWidget';
+import PriceWidget from '../../components/PriceWidget';
 import HeadlinesWidget from '../../components/HeadlinesWidget';
 import BlocksWidget from '../../components/BlocksWidget';
 import FeedWidget from '../../components/FeedWidget';
@@ -283,7 +283,7 @@ export const WidgetFeedEdit = ({
 									switch (config.type) {
 										case SUPPORTED_FEED_TYPES.PRICE_FEED:
 											return (
-												<BitfinexWidget
+												<PriceWidget
 													key={url}
 													url={url}
 													widget={previewWidget}
diff --git a/src/store/actions/actions.ts b/src/store/actions/actions.ts
index 4b9c1a205..371e1d06b 100644
--- a/src/store/actions/actions.ts
+++ b/src/store/actions/actions.ts
@@ -109,6 +109,7 @@ const actions = {
 	DELETE_SLASHTAGS_WIDGET: 'DELETE_SLASHTAGS_WIDGET',
 	RESET_WIDGETS_STORE: 'RESET_WIDGETS_STORE',
 	SET_WIDGETS_ONBAORDING: 'SET_WIDGETS_ONBAORDING',
+	SET_WIDGETS_SORT_ORDER: 'SET_WIDGETS_SORT_ORDER',
 
 	// Settings
 	UPDATE_SETTINGS: 'UPDATE_SETTINGS',
diff --git a/src/store/actions/widgets.ts b/src/store/actions/widgets.ts
index d3037b081..e969dde98 100644
--- a/src/store/actions/widgets.ts
+++ b/src/store/actions/widgets.ts
@@ -46,3 +46,10 @@ export const setWidgetsOnboarding = (onboardedWidgets: boolean): void => {
 		payload: { onboardedWidgets },
 	});
 };
+
+export const setWidgetsSortOrder = (sortOrder: Array<number>): void => {
+	dispatch({
+		type: actions.SET_WIDGETS_SORT_ORDER,
+		payload: { sortOrder },
+	});
+};
diff --git a/src/store/index.ts b/src/store/index.ts
index 6d4a10d95..23e5fa51c 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -44,7 +44,7 @@ const persistConfig = {
 	key: 'root',
 	storage: mmkvStorage,
 	// increase version after store shape changes
-	version: 1,
+	version: 2,
 	migrate: createMigrate(migrations, { debug: false }),
 };
 const persistedReducer = persistReducer(persistConfig, reducers);
diff --git a/src/store/reducers/widgets.ts b/src/store/reducers/widgets.ts
index 15362d945..395cf2d81 100644
--- a/src/store/reducers/widgets.ts
+++ b/src/store/reducers/widgets.ts
@@ -48,6 +48,12 @@ const slashtags = (state: IWidgets = defaultWidgetsShape, action): IWidgets => {
 				onboardedWidgets: action.payload.onboardedWidgets,
 			};
 
+		case actions.SET_WIDGETS_SORT_ORDER:
+			return {
+				...state,
+				sortOrder: action.payload.sortOrder,
+			};
+
 		default:
 			return state;
 	}
diff --git a/src/store/shapes/widgets.ts b/src/store/shapes/widgets.ts
index e62f217d2..1fd58012f 100644
--- a/src/store/shapes/widgets.ts
+++ b/src/store/shapes/widgets.ts
@@ -3,4 +3,5 @@ import { IWidgets } from '../types/widgets';
 export const defaultWidgetsShape: IWidgets = {
 	widgets: {},
 	onboardedWidgets: false,
+	sortOrder: [],
 };
diff --git a/src/store/types/widgets.ts b/src/store/types/widgets.ts
index 76f29be98..1f8089451 100644
--- a/src/store/types/widgets.ts
+++ b/src/store/types/widgets.ts
@@ -26,4 +26,5 @@ export interface IWidget {
 export interface IWidgets {
 	widgets: { [url: string]: IWidget };
 	onboardedWidgets: boolean;
+	sortOrder: Array<string>;
 }
diff --git a/src/styles/components.ts b/src/styles/components.ts
index 4b30f9fce..0895ec7e0 100644
--- a/src/styles/components.ts
+++ b/src/styles/components.ts
@@ -72,6 +72,7 @@ import {
 	lightbulbIcon,
 	minusCircledIcon,
 	plusCircledIcon,
+	keyIcon,
 } from '../assets/icons/wallet';
 import {
 	chevronRightIcon,
@@ -1044,3 +1045,10 @@ export const PlusCircledIcon = styled(SvgXml).attrs((props) => ({
 	width: props?.width ?? '64px',
 	color: undefined,
 }))({});
+
+export const KeyIcon = styled(SvgXml).attrs((props) => ({
+	xml: keyIcon(props.theme.colors[props.color]),
+	height: props?.height ?? '24px',
+	width: props?.width ?? '24px',
+	color: undefined,
+}))({});