Merge pull request #2326 from Emurgo/add-drag-and-drop-feature-wallets

Add drag and drop feature wallets

packages/yoroi-extension/app/actions/profile-actions.js

@@ -9,5 +9,8 @@ export default class ProfileActions extends BaseProfileActions {
   acceptTermsOfUse: AsyncAction<void> = new AsyncAction();
   acceptUriScheme: AsyncAction<void> = new AsyncAction();
   toggleSidebar: AsyncAction<void> = new AsyncAction();
+  updateSortedWalletList: AsyncAction<{|
+    sortedWallets: Array<number>,
+  |}> = new AsyncAction();
   setSelectedNetwork: Action<void | $ReadOnly<NetworkRow>> = new Action();
 }

packages/yoroi-extension/app/api/localStorage/index.js

@@ -30,6 +30,7 @@ const storageKeys = {
   COIN_PRICE_PUB_KEY_DATA: networkForLocalStorage + '-COIN-PRICE-PUB-KEY-DATA',
   EXTERNAL_STORAGE: networkForLocalStorage + '-EXTERNAL-STORAGE',
   TOGGLE_SIDEBAR: networkForLocalStorage + '-TOGGLE-SIDEBAR',
+  SORTED_WALLETS: networkForLocalStorage + '-SORTED-WALLET',
   // ========== CONNECTOR   ========== //
   ERGO_CONNECTOR_WHITELIST: 'connector_whitelist',
 };
@@ -277,6 +278,17 @@ export default class LocalStorageApi {
     }
   }
 
+
+  // ========== Sort wallets - Revamp ========== //
+  getSortedWallets: void => Promise<?Array<number>> = async () => {
+    const result = await getLocalItem(storageKeys.SORTED_WALLETS);
+    if (result === undefined || result === null) return undefined;
+    return JSON.parse(result);
+  };
+
+  setSortedWallets: (Array<number>) => Promise<void> = value =>
+    setLocalItem(storageKeys.SORTED_WALLETS, JSON.stringify(value ?? []));
+
   async reset(): Promise<void> {
     await this.unsetUserLocale();
     await this.unsetTermsOfUseAcceptance();

packages/yoroi-extension/app/components/topbar/NavWalletDetailsRevamp.js

@@ -6,12 +6,10 @@ import classnames from 'classnames';
 import { intlShape } from 'react-intl';
 import { splitAmount, truncateToken } from '../../utils/formatters';
 
-// import globalMessages from '../../i18n/global-messages';
 import styles from './NavWalletDetailsRevamp.scss';
 import IconEyeOpen from '../../assets/images/my-wallets/icon_eye_open.inline.svg';
 import IconEyeClosed from '../../assets/images/my-wallets/icon_eye_closed.inline.svg';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
-// import WalletCurrency from '../wallet/my-wallets/WalletCurrency';
 import { hiddenAmount } from '../../utils/strings';
 import { MultiToken } from '../../api/common/lib/MultiToken';
 import type { TokenLookupKey } from '../../api/common/lib/MultiToken';
@@ -111,14 +109,12 @@ export default class NavWalletDetailsRevamp extends Component<Props> {
               })}
             </div>
             <div className={styles.fixedAmount}>
-              <p>
-                {/* TODO: fix value to USD */}
-                {this.renderAmountDisplay({
-                  shouldHideBalance,
-                  amount: totalAmount,
-                })}{' '}
-                USD
-              </p>
+              {/* TODO: fix value to USD */}
+              {this.renderAmountDisplay({
+                shouldHideBalance,
+                amount: totalAmount,
+              })}{' '}
+              USD
             </div>
           </div>
           {totalAmount != null && showEyeIconSafe && (

packages/yoroi-extension/app/components/topbar/NoWalletsAccessList.js

@@ -5,6 +5,7 @@ import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 import styles from './NoWalletsAccessList.scss';
+import StarIcon from '../../assets/images/add-wallet/wallet-list/stared.inline.svg';
 
 const messages = defineMessages({
   quickAccess: {
@@ -32,11 +33,10 @@ export default class NoWalletsAccessList extends Component<Props> {
   render(): Node {
     const { intl } = this.context;
 
-    // ;
-
     return (
       <div className={styles.wrapper}>
         <div className={styles.header}>
+          <StarIcon />
           <h3>{intl.formatMessage(messages.quickAccess)}</h3>
         </div>
         <div className={styles.content}>

packages/yoroi-extension/app/components/topbar/NoWalletsAccessList.scss

@@ -5,11 +5,16 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: 40px;
+  padding: 40px 36px;
   text-align: center;
   font-family: var(--font-regular);
 }
 .header {
+  display: flex;
+  align-items: center;
+  svg {
+    margin-right: 8px;
+  }
   h3 {
     font-size: 24px;
     color: var(--theme-wallet-dropdown-main-text-color);

packages/yoroi-extension/app/components/topbar/WalletCard.js

@@ -25,7 +25,9 @@ import { getTokenName } from '../../stores/stateless/tokenHelpers';
 import { hiddenAmount } from '../../utils/strings';
 import type { TokenLookupKey } from '../../api/common/lib/MultiToken';
 import type { TokenRow } from '../../api/ada/lib/storage/database/primitives/tables';
-import RandomIcon from '../../assets/images/sidebar/revamp/wallet.inline.svg';
+import DragIcon from '../../assets/images/add-wallet/wallet-list/drag.inline.svg';
+import StarIcon from '../../assets/images/add-wallet/wallet-list/star.inline.svg';
+import { Draggable } from 'react-beautiful-dnd';
 
 const messages = defineMessages({
   tokenTypes: {
@@ -62,6 +64,8 @@ type Props = {|
   +getTokenInfo: ($ReadOnly<Inexact<TokenLookupKey>>) => $ReadOnly<TokenRow>,
   +isCurrentWallet?: boolean,
   +onSelect?: void => void,
+  +walletId: string,
+  +idx: number,
 |};
 
 type State = {| +isActionsShow: boolean |};
@@ -140,7 +144,7 @@ export default class WalletCard extends Component<Props, State> {
 
   render(): Node {
     const { intl } = this.context;
-    const { shouldHideBalance } = this.props;
+    const { shouldHideBalance, walletId, idx } = this.props;
     const { isActionsShow } = this.state;
 
     const [, iconComponent] = this.props.plate
@@ -153,70 +157,75 @@ export default class WalletCard extends Component<Props, State> {
       .join(' - ');
     const totalAmount = this.getTotalAmount();
 
-    const wrapperClassname = classnames(
-      styles.cardWrapper,
-      this.props.isCurrentWallet !== null &&
-        this.props.isCurrentWallet === true &&
-        styles.currentCardWrapper
-    );
-
     return (
-      <button
-        className={wrapperClassname}
-        type="button"
-        onClick={this.props.onSelect}
-        onMouseEnter={this.showActions}
-        onMouseLeave={this.hideActions}
-      >
-        <div className={styles.main}>
-          <div className={styles.header}>
-            <h5 className={styles.name}>{this.props.wallet.conceptualWalletName}</h5>
-            {' ·  '}
-            <div className={styles.type}>{typeText}</div>
-          </div>
-          <div className={styles.body}>
-            <div>{iconComponent}</div>
-            <div className={styles.content}>
-              <div className={styles.amount}>
-                {this.renderAmountDisplay({
-                  shouldHideBalance,
-                  amount: totalAmount,
-                })}
+      <Draggable draggableId={walletId.toString()} index={idx}>
+        {(provided, snapshot) => (
+          <div
+            tabIndex="0"
+            role="button"
+            className={classnames(
+              styles.cardWrapper,
+              this.props.isCurrentWallet === true && styles.currentCardWrapper,
+              snapshot.isDragging === true && styles.isDragging
+            )}
+            onClick={this.props.onSelect}
+            onKeyDown={this.props.onSelect}
+            onMouseEnter={this.showActions}
+            onMouseLeave={this.hideActions}
+            {...provided.draggableProps}
+            ref={provided.innerRef}
+          >
+            <div className={styles.main}>
+              <div className={styles.header}>
+                <h5 className={styles.name}>{this.props.wallet.conceptualWalletName}</h5>
+                {' ·  '}
+                <div className={styles.type}>{typeText}</div>
               </div>
-              <div className={styles.fixedAmount}>
-                <p>
-                  {/* TODO: fix value to USD */}
-                  {this.renderAmountDisplay({
-                    shouldHideBalance,
-                    amount: totalAmount,
-                  })}{' '}
-                  USD
-                </p>
+              <div className={styles.body}>
+                <div>{iconComponent}</div>
+                <div className={styles.content}>
+                  <div className={styles.amount}>
+                    {this.renderAmountDisplay({
+                      shouldHideBalance,
+                      amount: totalAmount,
+                    })}
+                  </div>
+                  <div className={styles.fixedAmount}>
+                    {/* TODO: fix value to USD */}
+                    {this.renderAmountDisplay({
+                      shouldHideBalance,
+                      amount: totalAmount,
+                    })}{' '}
+                    USD
+                  </div>
+                </div>
+                <div className={styles.extraInfo}>
+                  <p className={styles.label}>
+                    {intl.formatMessage(messages.tokenTypes)}{' '}
+                    <span className={styles.value}>20</span>
+                  </p>
+                  <p className={styles.label}>
+                    NFTs <span className={styles.value}>2</span>
+                  </p>
+                </div>
               </div>
             </div>
-            <div className={styles.extraInfo}>
-              <p className={styles.label}>
-                {intl.formatMessage(messages.tokenTypes)} <span className={styles.value}>20</span>
-              </p>
-              <p className={styles.label}>
-                NFTs <span className={styles.value}>2</span>
-              </p>
-            </div>
-          </div>
-        </div>
-        <div className={styles.actions}>
-          {isActionsShow ? (
-            <>
-              <button type="button" onClick={() => {}}>
-                <RandomIcon />
-              </button>
+            <div
+              className={classnames(
+                styles.actions,
+                (isActionsShow === true || snapshot.isDragging === true) && styles.showActions
+              )}
+            >
+              <div {...provided.dragHandleProps}>
+                <DragIcon />
+              </div>
               <button type="button" onClick={() => {}}>
-                <RandomIcon />
+                <StarIcon />
               </button>
-            </>
-          ) : null}
-        </div>
-      </button>
+            </div>
+          </div>
+        )}
+      </Draggable>
     );
   }
 

packages/yoroi-extension/app/components/topbar/WalletCard.scss

@@ -79,21 +79,28 @@
 }
 .actions {
   min-width: 80px;
+  opacity: 0;
+  transition: opacity 0.3s;
   svg {
     max-width: 24px;
     max-height: 24px;
     color: #6b7384;
   }
-  button {
+  & > * {
     width: 40px;
     height: 40px;
     border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     &:hover {
       background: #eaedf2;
     }
   }
 }
-
+.showActions {
+  opacity: 1;
+}
 .cardWrapper {
   padding: 16px;
   display: flex;
@@ -113,6 +120,10 @@
   }
 }
 
+.isDragging {
+  border: 1px solid #eaedf2;
+}
+
 .currentCardWrapper {
   border: 1px solid #3154cb;