Skip to content

Commit

Permalink
Closes #223 - Token balances are updated on the main page. A new obje…
Browse files Browse the repository at this point in the history 
…ct was created - completeTokenObject in the index state. This collects all price data, token info, and user's token holdings and saves it into a single variable that becomes the data source needed by the flat list. This solves this initial refactor problem of holding all the token data needed for the main flat list.
  • Loading branch information
@chrisfenos
chrisfenos committed Oct 9, 2018
1 parent 7dbfd5b commit 15df1cc
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 67 deletions.
11 changes: 2 additions & 9 deletions src/actions/FetchCoinData.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,6 @@ export function setWalletTokenBalances(usersTokensWithBalances) {
*/
export function calculateWalletBalance(tokenBalances, tokenConversionMatrix) {
return (dispatch) => {
console.log('token balance', tokenBalances);
console.log('tokenconversion matrix', tokenConversionMatrix);

const tokenKeys = Object.keys(tokenConversionMatrix);
let walletBalanceObject = {
USD: 0,
Expand All @@ -76,10 +73,8 @@ export function calculateWalletBalance(tokenBalances, tokenConversionMatrix) {
ETH: 0,
};
let individualTokens = [];

for (let i = 0; i < tokenBalances.length; i++) {
const currentTokenKey = tokenKeys[i];
console.log('currentTokenKey', currentTokenKey);
const currentTokenKey = tokenKeys[i];
let tokenPriceObject = {
USD: 0,
CAD: 0,
Expand All @@ -96,9 +91,7 @@ export function calculateWalletBalance(tokenBalances, tokenConversionMatrix) {
tokenPriceObject.CAD = tokenBalances[i].amount * tokenConversionMatrix[currentTokenKey].CAD;
tokenPriceObject.EUR = tokenBalances[i].amount * tokenConversionMatrix[currentTokenKey].EUR;
tokenPriceObject.BTC = tokenBalances[i].amount * tokenConversionMatrix[currentTokenKey].BTC;
tokenPriceObject.ETH = tokenBalances[i].amount * tokenConversionMatrix[currentTokenKey].ETH;
console.log('token Obj Price', tokenPriceObject);

tokenPriceObject.ETH = tokenBalances[i].amount * tokenConversionMatrix[currentTokenKey].ETH;
individualTokens.push(tokenPriceObject);
}
dispatch({ type: CALCULATE_WALLET_BALANCE, payload: { walletBalanceObject, individualTokens }});
Expand Down
141 changes: 83 additions & 58 deletions src/screens/main/portfolio/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,9 @@ class Portfolio extends Component {
currency: this.props.currencyOptions,
apiRequestString: '',
tokenBalances: {},
tokenAmounts: null,
tokenPrices: [],
x: [],
completeTokenObject: null,
currentWallet: this.props.hotWallet.wallet,
currentWalletName: this.props.wallets[0].name,
}
Expand All @@ -53,24 +54,25 @@ class Portfolio extends Component {
* The Balance (soon to be Wallet) reducer then updates state -> { ...state, walletBalance: walletBalanceObject, tokenBalances: individualTokens };
*/
async componentDidMount() {
console.log('current wallet from hot wallet', this.state.currentWallet);
const { tokenSymbolString, tokenBalances } = await this.formatTokens(this.state.data);
const { tokenSymbolString, tokenBalances } = await this.formatTokens(this.state.data);
console.log('token balance in mount', tokenBalances);

await this.props.fetchCoinData(tokenSymbolString);
await this.props.calculateWalletBalance(tokenBalances, this.props.tokenConversions);
await this.props.calculateWalletBalance(tokenBalances, this.props.tokenConversions); //amount of tokens and symbol -> token balance, conversions -> matrix of prices
await this.setState({
apiRequestString: tokenSymbolString,
walletBalance: this.props.walletBalance,
tokenPrices: this.props.tokenBalances
});

for (let index = 0; index < data.length; index++) {
const element = data[index];
console.log(element);
}

tokenPrices: this.props.tokenBalances,
tokenAmounts: tokenBalances,
});
this.showTokens();
}

/**
* tokens are passed into the function where their symbols and addresses are parsed out and stored in an array,
* which is then passed to processAllTokenBalances. The return is the concatenated string of symbols in wallet, and the amount
* of each token the user has for a given private key.
*/
formatTokens = async (tokenList) => {
let tokenObjectList = [];
let privateKey;
Expand All @@ -84,8 +86,21 @@ class Portfolio extends Component {
return { tokenSymbolString, tokenBalances } = await processAllTokenBalances(privateKey, tokenObjectList);
}

/**
* After all price data has loaded, a new array will be created with all token info -> amount of tokens, price matrix of tokens,
* and token info. This will be the data source for the flat list.
*/
showTokens = () => {
if (Object.prototype.hasOwnProperty.call(this.state.walletBalance, 'USD')) this.setState({ pricesLoaded: true });
let cTokenObjectList = [];
for(let i = 0; i < this.props.tokens.length; i++) {
let cto = {};
cto.tokenInfo = this.props.tokens[i];
cto.tokenPriceInfo = this.props.tokenBalances[i];
cto.tokenAmounts = this.state.tokenAmounts[i];
cTokenObjectList.push(cto);
}
this.setState({ completeTokenObject: cTokenObjectList });
}

navigate = () => {
Expand All @@ -99,49 +114,52 @@ class Portfolio extends Component {
};

renderRow = (token) => {
const { tokenInfo, tokenPriceInfo, tokenAmounts } = token;
return (
<TouchableOpacity
onPress={() => {
this.props.addTokenInfo(token);
this.props.navigation.navigate('TokenFunctionality');
}}
style={styles.listItemParentContainer}
>
<View>
<BoxShadowCard customStyles={styles.boxShadowContainer}>
<View style={[styles.contentContainer]}>
<View style={styles.imgMainContainer} >
<View style={styles.imageContainer} >
<Image
style={styles.img}
source={ { uri: token.logo } }
/>
</View>
<TouchableOpacity
onPress={() => {
this.props.navigation.navigate('TokenFunctionality');
}}
style={styles.listItemParentContainer}
key={ `${tokenInfo.address}${tokenInfo.symbol}` }
>
<View>
<BoxShadowCard customStyles={styles.boxShadowContainer}>
<View style={[styles.contentContainer]}>
<View style={styles.imgMainContainer} >
<View style={styles.imageContainer} >
<Image
style={styles.img}
source={ { uri: tokenInfo.logo } }
/>
</View>
<View style={styles.listItemTextComponentContainer}>
<View style={ styles.listItemTextComponent }>
<View style={styles.mainTitleContainer}>
<Text style={styles.mainTitleText}> {token.symbol} </Text>
</View>
<View style={styles.subtitleContainer}>
<Text style={styles.subTitleText}> {token.name} </Text>
</View>
</View>
<View style={styles.listItemTextComponentContainer}>
<View style={ styles.listItemTextComponent }>
<View style={styles.mainTitleContainer}>
<Text style={styles.mainTitleText}> {tokenInfo.symbol} </Text>
</View>
</View>
<View style={ styles.listItemValueContainer }>
<View style={ styles.listItemValueComponent }>
<Text style={styles.listItemCryptoValue}>
...
</Text>
<Text style={styles.listItemFiatValue}>
...
</Text>
<View style={styles.subtitleContainer}>
<Text style={styles.subTitleText}> {tokenInfo.name} </Text>
</View>
</View>
</View>
</BoxShadowCard>
</View>
</TouchableOpacity>
<View style={ styles.listItemValueContainer }>
<View style={ styles.listItemValueComponent }>
<Text style={styles.listItemCryptoValue}>
{
tokenAmounts.amount
}
</Text>
<Text style={styles.listItemFiatValue}>
{ (tokenPriceInfo)[this.props.currencyOptions[this.state.currencyIndex]] }
</Text>
</View>
</View>
</View>
</BoxShadowCard>
</View>
</TouchableOpacity>
);
}

Expand Down Expand Up @@ -200,15 +218,22 @@ class Portfolio extends Component {
</TouchableOpacity>
</View>
<View style={styles.scrollViewContainer}>
<FlatList
data={this.state.data}
showsVerticalScrollIndicator={false}
renderItem= {({ item }) => { return this.renderRow(item); }}
keyExtractor= {(item) => { return String(item.symbol); }}
refreshing={this.state.refresh}
onRefresh={this.handleListRefresh}
extraData={this.props}
/>
{
this.state.completeTokenObject == null
? null
:
<FlatList
data={this.state.completeTokenObject}
showsVerticalScrollIndicator={false}
renderItem= {({ item }) => { return this.renderRow(item); }}
keyExtractor= {(item) => {
return `${item.tokenInfo.address}${item.tokenInfo.name}`
}}
refreshing={this.state.refresh}
onRefresh={this.handleListRefresh}
extraData={this.props}
/>
}
</View>
<View style={styles.btnContainer}>
<LinearButton
Expand Down

0 comments on commit 15df1cc

Please sign in to comment.