A-1207203856760647: UI update

mintlayer · Jul 12, 2024 · 541bf8d · 541bf8d
1 parent c1e8fd3
commit 541bf8d
Show file tree

Hide file tree

Showing 11 changed files with 223 additions and 117 deletions.
diff --git a/Navigation.js b/Navigation.js
@@ -104,6 +104,7 @@ import NativeAssets from './screen/NativeAssets';
 import Staking from './screen/staking/staking';
 import StakingDelegationDetails from './screen/staking/delegationDetails';
 import StakingConfirm from './screen/staking/confirm';
+import StakingSuccess from './screen/staking/success';
 
 import { sendBottom, settingBottom, walletBottom, create_wallet, ic_back_black } from './theme/Images';
 import { COLORS } from './theme/Colors';
@@ -577,6 +578,7 @@ function MlWalletRoot() {
       <TopTab.Navigator tabBarOptions={tabBarOptions}>
         <TopTab.Screen name="Transactions" component={MLWalletTransactions} initialParams={{ walletID }} />
         <TopTab.Screen name="Tokens" component={MLWalletTokens} initialParams={{ walletID }} />
+        <TopTab.Screen name="Stake ML" component={Staking} initialParams={{ walletID }} />
       </TopTab.Navigator>
     </View>
   );
@@ -624,6 +626,10 @@ const Navigation = () => {
       <RootStack.Screen name="RBFBumpFee" component={RBFBumpFee} options={RBFBumpFee.navigationOptions(theme)} />
       <RootStack.Screen name="RBFCancel" component={RBFCancel} options={RBFCancel.navigationOptions(theme)} />
 
+      <StakingStack.Screen name="Delegation" component={StakingDelegationDetails} options={Staking.navigationOptions(theme)} />
+      <StakingStack.Screen name="Confirm" component={StakingConfirm} options={Staking.navigationOptions(theme)} />
+      <StakingStack.Screen name="Success" component={StakingSuccess} options={{ headerShown: false, gestureEnabled: false }} />
+
       <RootStack.Screen
         name="ScanQRCodeRoot"
         component={ScanQRCodeRoot}

diff --git a/class/wallets/mintlayer-wallet.js b/class/wallets/mintlayer-wallet.js
@@ -587,7 +587,10 @@ export class MintLayerWallet extends AbstractHDWallet {
     let ret = [];
 
     if (this._utxo?.length !== 0) {
-      const usedUtxo = this._unconfirmedTxs.flatMap(({ usedUtxo }) => usedUtxo);
+      const usedUtxo = this._unconfirmedTxs.flatMap(({ usedUtxo }) => usedUtxo).filter((utxo) => utxo);
+
+      console.log('usedUtxo:', JSON.stringify(usedUtxo, null, 2));
+
       const unusedUtxo = this._utxo.map((utxo) => {
         return utxo.filter(({ outpoint: { source_id, index } }) => {
           return !usedUtxo.some(({ outpoint }) => outpoint.source_id === source_id && outpoint.index === index);

diff --git a/components/TransactionsNavigationHeader.js b/components/TransactionsNavigationHeader.js
@@ -13,6 +13,10 @@ import ToolTipMenu from './TooltipMenu';
 import { BluePrivateBalance } from '../BlueComponents';
 import { MintLayerWallet } from '../class/wallets/mintlayer-wallet';
 import { type } from '../theme/Fonts';
+import { COLORS } from '../theme/Colors';
+import { Icon } from 'react-native-elements';
+
+const SHOW_STAKING = false;
 
 export default class TransactionsNavigationHeader extends Component {
   static propTypes = {
@@ -154,6 +158,16 @@ export default class TransactionsNavigationHeader extends Component {
     this.props.onManageFundsPressed(id);
   };
 
+  navigateToStake = () => {
+    console.log('this.props', this.props);
+    this.props.navigation('StakingRoot', {
+      screen: 'Staking',
+      params: {
+        walletID: this.state.wallet.getID(),
+      },
+    });
+  };
+
   onPressMenuItem = (id) => {
     if (id === TransactionsNavigationHeader.actionKeys.WalletBalanceVisibility) {
       this.handleBalanceVisibility();
@@ -286,6 +300,14 @@ export default class TransactionsNavigationHeader extends Component {
             </View>
           </TouchableOpacity>
         )}
+        {SHOW_STAKING && this.state.wallet.allowStaking() && (
+          <TouchableOpacity accessibilityRole="button" onPress={this.navigateToStake}>
+            <View style={styles.stakeButton}>
+              <Icon name="pie-chart" size={18} type="font-awesome" color={COLORS.green_shade} />
+              <Text style={styles.stakeButtonText}>Stake ML</Text>
+            </View>
+          </TouchableOpacity>
+        )}
       </LinearGradient>
     );
   }
@@ -341,4 +363,25 @@ const styles = StyleSheet.create({
     color: '#FFFFFF',
     padding: 12,
   },
+  stakeButton: {
+    position: 'absolute',
+    right: 0,
+    bottom: 85,
+    backgroundColor: 'rgba(255,255,255,0.8)',
+    borderRadius: 9,
+    paddingHorizontal: 15,
+    paddingVertical: 5,
+    display: 'flex',
+    flexDirection: 'row',
+    zIndex: 999,
+
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  stakeButtonText: {
+    fontSize: 14,
+    color: COLORS.black,
+    fontWeight: '700',
+    marginLeft: 5,
+  },
 });
diff --git a/loc/en.json b/loc/en.json
@@ -271,7 +271,11 @@
     "problem_with_psbt": "Problem with PSBT"
   },
   "stake": {
-    "header": "Stake"
+    "header": "Stake",
+    "pool_id": "Pool ID",
+    "add_funds": "Add Funds",
+    "withdraw": "Withdraw",
+    "add_delegation": "Add new delegation"
   },
   "settings": {
     "about": "About",

diff --git a/screen/staking/confirm.js b/screen/staking/confirm.js
@@ -22,11 +22,9 @@ const Confirm = () => {
   const { wallets, fetchAndSaveWalletTransactions, isElectrumDisabled, isTorDisabled, isTestMode } = useContext(BlueStorageContext);
   const [isBiometricUseCapableAndEnabled, setIsBiometricUseCapableAndEnabled] = useState(false);
   const { params } = useRoute();
-  const { recipients = [], walletID, fee, memo, tx, satoshiPerByte, psbt, requireUtxo, tokenInfo } = params;
+  const { recipients = [], walletID, fee, memo, tx, satoshiPerByte, psbt, requireUtxo, tokenInfo, action } = params;
   const [isLoading, setIsLoading] = useState(false);
-  const [isPayjoinEnabled, setIsPayjoinEnabled] = useState(false);
   const wallet = wallets.find((wallet) => wallet.getID() === walletID);
-  const payjoinUrl = wallet.allowPayJoin() ? params.payjoinUrl : false;
   const isMintlayerWallet = wallet.type === MintLayerWallet.type;
   const formattedFee = new Bignumber(fee).multipliedBy(isMintlayerWallet ? ML_ATOMS_PER_COIN : 100000000).toNumber();
   const { navigate, setOptions } = useNavigation();
@@ -63,39 +61,6 @@ const Confirm = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  useEffect(() => {
-    !isMintlayerWallet &&
-      setOptions({
-        headerRight: () => (
-          <TouchableOpacity
-            accessibilityRole="button"
-            testID="TransactionDetailsButton"
-            style={[styles.txDetails, stylesHook.txDetails]}
-            onPress={async () => {
-              if (isBiometricUseCapableAndEnabled) {
-                if (!(await Biometric.unlockWithBiometrics())) {
-                  return;
-                }
-              }
-
-              navigate('CreateTransaction', {
-                fee,
-                recipients,
-                memo,
-                tx,
-                satoshiPerByte,
-                wallet,
-                formattedFee,
-              });
-            }}
-          >
-            <Text style={[styles.txText, stylesHook.valueUnit]}>{loc.send.create_details}</Text>
-          </TouchableOpacity>
-        ),
-      });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [colors, fee, formattedFee, isBiometricUseCapableAndEnabled, memo, recipients, satoshiPerByte, tx, wallet, isMintlayerWallet]);
-
   const sendMl = async () => {
     setIsLoading(true);
     try {
@@ -132,6 +97,18 @@ const Confirm = () => {
         amount,
         amountUnit: tokenInfo ? tokenInfo.token_ticker.string : isTestMode ? MintlayerUnit.TML : MintlayerUnit.ML,
         feeUnit: isTestMode ? MintlayerUnit.TML : MintlayerUnit.ML,
+        action,
+        onDonePressed: () => {
+          if (action === 'CreateDelegation') {
+            navigate('Stake ML', { walletID });
+          }
+          if (action === 'addFunds') {
+            navigate('Stake ML', { walletID });
+          }
+          if (action === 'withdrawFunds') {
+            navigate('Stake ML', { walletID });
+          }
+        },
       });
 
       setIsLoading(false);
@@ -173,13 +150,17 @@ const Confirm = () => {
 
     return (
       <>
-        <View style={styles.valueWrap}>
-          <Text testID="TransactionValue" style={[styles.valueValue, stylesHook.valueValue]}>
-            {amount}
-          </Text>
-          <Text style={[styles.valueUnit, stylesHook.valueValue]}>{' ' + unit}</Text>
-        </View>
-        {!tokenInfo && <Text style={[styles.transactionAmountFiat, stylesHook.transactionAmountFiat]}>{toLocalCurrencyFn(item.value)}</Text>}
+        {action !== 'CreateDelegation' && (
+          <>
+            <View style={styles.valueWrap}>
+              <Text testID="TransactionValue" style={[styles.valueValue, stylesHook.valueValue]}>
+                {amount}
+              </Text>
+              <Text style={[styles.valueUnit, stylesHook.valueValue]}>{' ' + unit}</Text>
+            </View>
+            <Text style={[styles.transactionAmountFiat, stylesHook.transactionAmountFiat]}>{toLocalCurrencyFn(item.value)}</Text>
+          </>
+        )}
         <BlueCard>
           <Text style={[styles.transactionDetailsTitle, stylesHook.transactionDetailsTitle]}>{loc.send.create_to}</Text>
           <Text testID="TransactionAddress" style={[styles.transactionDetailsSubtitle, stylesHook.transactionDetailsSubtitle]}>
@@ -188,7 +169,7 @@ const Confirm = () => {
         </BlueCard>
         {item.poolId && (
           <BlueCard>
-            <Text style={[styles.transactionDetailsTitle, stylesHook.transactionDetailsTitle]}>{loc.send.create_to}</Text>
+            <Text style={[styles.transactionDetailsTitle, stylesHook.transactionDetailsTitle]}>{loc.stake.pool_id}</Text>
             <Text testID="TransactionAddress" style={[styles.transactionDetailsSubtitle, stylesHook.transactionDetailsSubtitle]}>
               {item.poolId}
             </Text>

diff --git a/screen/staking/delegationDetails.js b/screen/staking/delegationDetails.js
@@ -23,6 +23,11 @@ import { ML_ATOMS_PER_COIN } from '../../blue_modules/Mintlayer';
 import currency from '../../blue_modules/currency';
 import AmountInputML from '../../components/amount_input/AmountInputML';
 import BigInt from 'big-integer';
+import { FButton, FContainer } from '../../components/FloatButtons';
+import { Chain } from '../../models/bitcoinUnits';
+import { Icon } from 'react-native-elements';
+import { COLORS } from '../../theme/Colors';
+import { WatchOnlyWallet } from '../../class';
 
 const StakingDelegationDetails = () => {
   const navigation = useNavigation();
@@ -364,23 +369,49 @@ const StakingDelegationDetails = () => {
     <View style={[styles.root]} onLayout={(e) => setWidth(e.nativeEvent.layout.width)}>
       <StatusBar barStyle="light-content" />
       <View>
-        <View>
-          <Text>Delegation details</Text>
-        </View>
-        <View>
-          <Text>Balance: {balance / 1e11} ML</Text>
-        </View>
-        <View>
-          <Text>Pool Id: </Text>
-        </View>
-        <View>
-          <Button onPress={handleClickAddFunds} text="Add funds">
-            Add funds to delegation
-          </Button>
-          <Button onPress={handleClickWithdraw} text="Withdraw from delegation">
-            Withdraw from delegation
-          </Button>
+        <View style={styles.infoDetails}>
+          <View>
+            <Text style={styles.listHeaderText}>Delegation details</Text>
+          </View>
+          <View>
+            <Text>Delegation ID:</Text>
+            <Text>{delegation.delegation_id}</Text>
+          </View>
+          <View>
+            <Text>Pool Id:</Text>
+            <Text>{delegation.pool_id}</Text>
+          </View>
+
+          <View style={styles.balance}>
+            <Text style={styles.balanceLabel}>Balance:</Text>
+            <Text style={styles.balanceValue}>{delegation.balance / 1e11} ML</Text>
+          </View>
         </View>
+
+        <FContainer>
+          <FButton
+            testID="ReceiveButton"
+            text={loc.stake.add_funds}
+            onPress={handleClickAddFunds}
+            icon={
+              <View style={styles.receiveIcon}>
+                <Icon name="arrow-down" size={20} type="font-awesome" color={COLORS.white} />
+              </View>
+            }
+          />
+          <FButton
+            onLongPress={handleClickWithdraw}
+            onPress={handleClickWithdraw}
+            text={loc.stake.withdraw}
+            testID="SendButton"
+            icon={
+              <View style={styles.sendIcon}>
+                <Icon name="arrow-down" size={20} type="font-awesome" color={COLORS.white} />
+              </View>
+            }
+          />
+        </FContainer>
+
         {renderAddFundsModal()}
         {renderWithdrawModal()}
       </View>

diff --git a/screen/staking/staking.js b/screen/staking/staking.js
@@ -24,6 +24,9 @@ import MlNetworkTransactionFees, { MlNetworkTransactionFee } from '../../models/
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import BigNumber from 'bignumber.js';
 import { ML_ATOMS_PER_COIN } from '../../blue_modules/Mintlayer';
+import { FButton, FContainer } from '../../components/FloatButtons';
+import { Icon } from 'react-native-elements';
+import { COLORS } from '../../theme/Colors';
 
 const Staking = () => {
   const navigation = useNavigation();
@@ -149,17 +152,19 @@ const Staking = () => {
         }}
       >
         <View style={styles.delegationItem}>
-          <View>
-            <Text>Balance: {item.balance / 1e11} ML</Text>
-          </View>
-          <View>
-            <Text>Delegation ID: {item.delegation_id}</Text>
-          </View>
-          <View>
-            <Text>Pool ID: {item.pool_id}</Text>
+          <View style={styles.info}>
+            <View style={styles.delegationId}>
+              <Text style={styles.delegationIdText}>{item.delegation_id.slice(0, 12) + '...' + item.delegation_id.slice(-12)}</Text>
+            </View>
+            <View style={styles.delegationPoolId}>
+              <Text style={styles.delegationPoolIdText}>Pool ID: {item.pool_id.slice(0, 8) + '...' + item.pool_id.slice(-8)}</Text>
+            </View>
+            <View style={styles.delegationDate}>
+              <Text style={styles.delegationDateText}>{dayjs(item.creation_time * 1000).format('YYYY-MM-DD HH:mm')}</Text>
+            </View>
           </View>
-          <View>
-            <Text>Created: {dayjs(item.creation_time * 1000).format('YYYY-MM-DD HH:mm:ss')}</Text>
+          <View style={styles.delegationBalance}>
+            <Text style={styles.delegationBalanceText}>{item.balance / 1e11} ML</Text>
           </View>
         </View>
       </TouchableOpacity>
@@ -222,6 +227,7 @@ const Staking = () => {
     const recipients = outputs.filter(({ address }) => address !== changeAddress);
 
     navigation.navigate('Confirm', {
+      action: 'CreateDelegation',
       fee: new BigNumber(fee).dividedBy(ML_ATOMS_PER_COIN).toNumber(),
       walletID: wallet.getID(),
       tx,
@@ -299,13 +305,13 @@ const Staking = () => {
       <StatusBar barStyle="light-content" />
       <View>
         <FlatList
-          ListHeaderComponent={
-            <View style={styles.listHeader}>
-              <View style={styles.listHeaderTextRow}>
-                <Text style={styles.listHeaderText}>Your delegation list</Text>
-              </View>
-            </View>
-          }
+          // ListHeaderComponent={
+          //   <View style={styles.listHeader}>
+          //     <View style={styles.listHeaderTextRow}>
+          //       <Text style={styles.listHeaderText}>Your delegation list</Text>
+          //     </View>
+          //   </View>
+          // }
           ListFooterComponent={<View style={styles.listFooter} />}
           onEndReachedThreshold={0.3}
           onEndReached={async () => {
@@ -325,11 +331,18 @@ const Staking = () => {
           refreshing={isLoading}
         />
 
-        <View style={styles.addButton}>
-          <Button onPress={handleClickAddDelegation} text="Add new delegation">
-            Add new delegation
-          </Button>
-        </View>
+        <FContainer>
+          <FButton
+            testID="ReceiveButton"
+            text={loc.stake.add_delegation}
+            onPress={handleClickAddDelegation}
+            icon={
+              <View>
+                <Icon name="plus" size={20} type="font-awesome" color={COLORS.white} />
+              </View>
+            }
+          />
+        </FContainer>
         {renderAddDelegationModal()}
       </View>
       <BlueDismissKeyboardInputAccessory />