A-1207665592108162: MLS-01 token integration (#115)

* token integration * send tokens functionality * format wasm_wrappers.d.ts --------- Co-authored-by: Andrei Yunkevich <[email protected]>
mintlayer · Jun 26, 2024 · cc2516e · cc2516e
1 parent 6de2989
commit cc2516e
Show file tree

Hide file tree

Showing 36 changed files with 2,022 additions and 263 deletions.
diff --git a/BlueComponents.js b/BlueComponents.js
@@ -402,9 +402,9 @@ export const BlueListItem = React.memo((props) => {
 
   return (
     <ListItem containerStyle={props.containerStyle ?? { backgroundColor: 'transparent' }} Component={props.Component ?? TouchableOpacity} bottomDivider={props.bottomDivider !== undefined ? props.bottomDivider : true} topDivider={props.topDivider !== undefined ? props.topDivider : false} testID={props.testID} onPress={props.onPress} onLongPress={props.onLongPress} disabled={props.disabled} accessible={props.switch === undefined}>
-      {props.leftAvatar && <Avatar>{props.leftAvatar}</Avatar>}
+      {props.leftAvatar && <Avatar {...props.leftAvatarProps}>{props.leftAvatar}</Avatar>}
       {props.leftIcon && <Avatar icon={props.leftIcon} />}
-      <ListItem.Content>
+      <ListItem.Content style={props.contentStyle}>
         <ListItem.Title
           style={{
             color: props.disabled ? colors.buttonDisabledTextColor : colors.foregroundColor,
@@ -434,10 +434,25 @@ export const BlueListItem = React.memo((props) => {
         )}
       </ListItem.Content>
       {props.rightTitle && (
-        <ListItem.Content right>
+        <ListItem.Content right style={props.rightContentStyle}>
           <ListItem.Title style={props.rightTitleStyle} numberOfLines={0} right>
             {props.rightTitle}
           </ListItem.Title>
+          {props.rightSubtitle && (
+            <ListItem.Subtitle
+              numberOfLines={props.subtitleNumberOfLines ?? 1}
+              accessible={props.switch === undefined}
+              style={{
+                flexWrap: 'wrap',
+                writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+                color: colors.alternativeTextColor,
+                fontWeight: '400',
+                fontSize: 14,
+              }}
+            >
+              {props.rightSubtitle}
+            </ListItem.Subtitle>
+          )}
         </ListItem.Content>
       )}
       {props.isLoading ? (
@@ -952,6 +967,102 @@ export const BlueTransactionOnchainIcon = (props) => {
   );
 };
 
+export const MlCoinLogo = () => {
+  const { colors } = useTheme();
+  const stylesMlLogoHooks = StyleSheet.create({
+    img: {
+      tintColor: colors.inverseForegroundColor,
+    },
+    imgContainer: {
+      backgroundColor: colors.buttonBackgroundColor,
+    },
+  });
+  return (
+    <View>
+      <View style={[stylesMlLogo.imgContainer, stylesMlLogoHooks.imgContainer]}>
+        <Image source={create_wallet} style={[stylesMlLogo.img, stylesMlLogoHooks.img]} />
+      </View>
+    </View>
+  );
+};
+
+const stylesMlLogo = StyleSheet.create({
+  imgContainer: {
+    height: 42,
+    width: 42,
+    borderRadius: 50,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  img: {
+    height: 20,
+    width: 20,
+  },
+});
+
+export const TokenLogo = ({ text }) => {
+  const { colors } = useTheme();
+  const stylesTokenLogoHooks = StyleSheet.create({
+    container: {
+      backgroundColor: colors.buttonBackgroundColor,
+    },
+    text: {
+      color: colors.inverseForegroundColor,
+    },
+    img: {
+      backgroundColor: colors.buttonBackgroundColor,
+      tintColor: colors.inverseForegroundColor,
+    },
+    imgContainer: {
+      backgroundColor: colors.buttonBackgroundColor,
+      borderColor: colors.inverseForegroundColor,
+      tintColor: colors.inverseForegroundColor,
+    },
+  });
+  return (
+    <View>
+      <View style={[stylesTokenLogo.container, stylesTokenLogoHooks.container]}>
+        <Text style={[stylesTokenLogo.text, stylesTokenLogoHooks.text]}>{text}</Text>
+        <View style={[stylesTokenLogo.imgContainer, stylesTokenLogoHooks.imgContainer]}>
+          <Image source={create_wallet} style={[stylesTokenLogo.img, stylesTokenLogoHooks.img]} />
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const stylesTokenLogo = StyleSheet.create({
+  container: {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 42,
+    width: 42,
+    borderRadius: 50,
+  },
+  text: {
+    textTransform: 'uppercase',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  imgContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'absolute',
+    right: -5,
+    bottom: -5,
+    height: 20,
+    width: 20,
+    borderRadius: 50,
+    borderWidth: 2,
+  },
+  img: {
+    height: 8,
+    width: 8,
+  },
+});
+
 export const BlueTransactionOffchainIcon = (props) => {
   const { colors } = useTheme();
   const stylesBlueIconHooks = StyleSheet.create({

diff --git a/Navigation.js b/Navigation.js
@@ -2,8 +2,9 @@ import React from 'react';
 import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import { Platform, useWindowDimensions, Dimensions, I18nManager, Image, StyleSheet, View, Text, Touchable, TouchableOpacity } from 'react-native';
-import { useTheme } from '@react-navigation/native';
+import { useRoute, useTheme } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
 
 import Settings from './screen/settings/settings';
 import About from './screen/settings/about';
@@ -26,6 +27,9 @@ import TestMode from './screen/settings/testmode';
 
 import WalletsList from './screen/wallets/list';
 import WalletTransactions from './screen/wallets/transactions';
+import WalletTransactionsHeader from './screen/wallets/transactions-header';
+import MLWalletTransactions from './screen/wallets/ml-transactions';
+import MLWalletTokens from './screen/wallets/ml-tokens';
 import AddWallet from './screen/wallets/add';
 import WalletsAddMultisig from './screen/wallets/addMultisig';
 import WalletsAddMultisigStep2 from './screen/wallets/addMultisigStep2';
@@ -535,6 +539,31 @@ const BottomTab = () => {
   );
 };
 
+const TopTab = createMaterialTopTabNavigator();
+
+function MlWalletRoot() {
+  const { walletID } = useRoute().params;
+  const { colors } = useTheme();
+  const tabBarOptions = {
+    labelStyle: { fontSize: 18, fontWeight: 'bold', textTransform: 'none' },
+    indicatorStyle: { backgroundColor: colors.mainColor },
+    activeTintColor: colors.foregroundColor,
+    tabStyle: { padding: 2 },
+    style: { marginTop: 8, marginHorizontal: 16, elevation: 0 },
+    pressColor: colors.background,
+  };
+
+  return (
+    <View style={styles.flex}>
+      <WalletTransactionsHeader />
+      <TopTab.Navigator tabBarOptions={tabBarOptions}>
+        <TopTab.Screen name="Transactions" component={MLWalletTransactions} initialParams={{ walletID }} />
+        <TopTab.Screen name="Tokens" component={MLWalletTokens} initialParams={{ walletID }} />
+      </TopTab.Navigator>
+    </View>
+  );
+}
+
 const Navigation = () => {
   const theme = useTheme();
 
@@ -554,6 +583,7 @@ const Navigation = () => {
       <RootStack.Screen name="HodlHodlWebview" component={HodlHodlWebview} options={HodlHodlWebview.navigationOptions(theme)} />
 
       <RootStack.Screen name="WalletTransactions" component={WalletTransactions} options={WalletTransactions.navigationOptions(theme)} />
+      <RootStack.Screen name="MLWalletTransactions" component={MlWalletRoot} options={WalletTransactions.navigationOptions(theme)} />
       <WalletsStack.Screen name="WalletDetails" component={WalletDetails} options={WalletDetails.navigationOptions(theme)} />
       <WalletsStack.Screen name="WalletAddresses" component={WalletAddresses} options={WalletAddresses.navigationOptions(theme)} />
 
@@ -589,6 +619,9 @@ const Navigation = () => {
 };
 
 const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
   marginTopTab: {
     marginTop: 20,
   },

diff --git a/android/link-assets-manifest.json b/android/link-assets-manifest.json
@@ -15,7 +15,7 @@
     },
     {
       "path": "assets/mintlayer/wasm_wrappers_bg.wasm",
-      "sha1": "fec25b2cc459a2a7866029751541b43f2edf0852"
+      "sha1": "930db0e06806224c26edd6d0c0b7c87f49000de5"
     }
   ]
 }
diff --git a/assets/mintlayer/wasm_wrappers_bg.wasm b/assets/mintlayer/wasm_wrappers_bg.wasm
diff --git a/blue_modules/Mintlayer.js b/blue_modules/Mintlayer.js
@@ -9,6 +9,7 @@ const MINTLAYER_ENDPOINTS = {
   GET_ADDRESS_DELEGATIONS: '/address/:address/delegations',
   GET_DELEGATION: '/delegation/:delegation',
   GET_CHAIN_TIP: '/chain/tip',
+  GET_TOKEN_DATA: '/token/:token',
 };
 
 const ML_NETWORK_TYPES = {
@@ -22,6 +23,7 @@ const TransactionType = {
   CreateDelegationId: 'CreateDelegationId',
   DelegateStaking: 'DelegateStaking',
   CreateStakePool: 'CreateStakePool',
+  TokenTransfer: 'TokenTransfer',
 };
 
 const ML_ATOMS_PER_COIN = 100000000000;
@@ -110,4 +112,9 @@ const broadcastTransaction = (transaction, network) => {
   return tryServers({ endpoint: MINTLAYER_ENDPOINTS.POST_TRANSACTION, body: transaction, network });
 };
 
-export { TransactionType, getAddressData, getTransactionData, getAddressUtxo, getWalletUtxos, broadcastTransaction, getFeesEstimates, getChainTip, MINTLAYER_ENDPOINTS, ML_NETWORK_TYPES, ML_ATOMS_PER_COIN };
+const getTokenData = async (token, network) => {
+  const endpoint = MINTLAYER_ENDPOINTS.GET_TOKEN_DATA.replace(':token', token);
+  return tryServers({ endpoint, network });
+};
+
+export { TransactionType, getAddressData, getTransactionData, getAddressUtxo, getWalletUtxos, broadcastTransaction, getFeesEstimates, getChainTip, getTokenData, MINTLAYER_ENDPOINTS, ML_NETWORK_TYPES, ML_ATOMS_PER_COIN };
diff --git a/blue_modules/currency.js b/blue_modules/currency.js
@@ -250,6 +250,14 @@ function fiatToBTC(fiatFloat) {
   return b;
 }
 
+function getAmountInCoins(amointInAtoms, atomsPerCoin = ML_ATOMS_PER_COIN) {
+  return amointInAtoms / atomsPerCoin;
+}
+
+function getAmountInAtoms(amountInCoins, atomsPerCoin = ML_ATOMS_PER_COIN) {
+  return BigInt(Math.round(amountInCoins * atomsPerCoin));
+}
+
 function coinsToML(coins) {
   let b = new BigNumber(coins);
   b = b.dividedBy(ML_ATOMS_PER_COIN);
@@ -294,6 +302,8 @@ module.exports.init = init;
 module.exports.mlCoinsToLocalCurrency = mlCoinsToLocalCurrency;
 module.exports.satoshiToLocalCurrency = satoshiToLocalCurrency;
 module.exports.fiatToBTC = fiatToBTC;
+module.exports.getAmountInCoins = getAmountInCoins;
+module.exports.getAmountInAtoms = getAmountInAtoms;
 module.exports.coinsToML = coinsToML;
 module.exports.mlToCoins = mlToCoins;
 module.exports.fiatToML = fiatToML;

diff --git a/blue_modules/mintlayer/@mintlayerlib-js/package.json b/blue_modules/mintlayer/@mintlayerlib-js/package.json
@@ -1,9 +1,9 @@
 {
   "name": "wasm-wrappers",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "license": "MIT",
   "files": [
-    "../../../assets/mintlayer/wasm_wrappers_bg.wasm",
+    "wasm_wrappers_bg.wasm",
     "wasm_wrappers.js",
     "wasm_wrappers.d.ts"
   ],