I have async functions in my services which return as follows.
Questions
What is the best way to do (contractAddress*displayValue) for every array item? and be able to display the returned value on the page.
What is the best way to store async data to an observable, be able to subscribe to it, and use the data further, is NGRX recommended here to manage the state?
async getSanityTokens() {
const coins = await fetch("https://i7ml51e6.api.sanity.io/v2021-10-21/data/query/production?query=*%5B_type%3D%3D'coins'%5D%7B%0A%20%20ContractAddress%2C%0A%20%20name%2C%0A%20%20usdPrice%0A%7D")
const data = await coins.json();
const address = data.result;
return address
}
async getThirdWebTokens(contractAddress) {
const sdk = new ThirdwebSDK(
new ethers.Wallet(
environment.metamask_Key,
ethers.getDefaultProvider('https://rinkeby.infura.io/v3/94ef7ea56a0e4585834ffbb4dfb3f8b8'))
)
const token = sdk.getToken(contractAddress);
const tokens = await token.balanceOf("0x47444Bfc280Bd50e3a96ccFd031f7539d6B6E97A")
return tokens
}
async getTokens() {
const coins = await this.getSanityTokens();
const promises = coins.map(coin=>this.getThirdWebTokens(coin.ContractAddress));
const tokenArray = await Promise.all(promises);
return tokenArray
}
When accessed I get the result as follows
this.coin.getSanityTokens().then(res=>console.log("this is sanity data",res));
this is sanity data
(3) [{…}, {…}, {…}]
0: {ContractAddress: '0xBbCd8c1b5993062F2761CF07e27C2adebc55766F', name: 'Ethereum', usdPrice: '2088'}
1: {ContractAddress: '0xb74FbCF3b2e6b29B0b86f005FCC80eC649de7E30', name: 'Bitcon', usdPrice: '30947'}
2: {ContractAddress: '0x7a6DC36DD8CC525E15C2B14a415253153909fc24', name: 'Solana', usdPrice: '52'}
length: 3
[[Prototype]]: Array(0)
this.coin.getTokens().then(res=>console.log("this is thirdweb data",res));
this is thirdweb data
(3) [{…}, {…}, {…}]
0: {name: 'Ethereum', symbol: 'ETH', decimals: 18, value: BigNumber, displayValue: '8.0'}
1: {name: 'Bitcoin', symbol: 'BTC', decimals: 18, value: BigNumber, displayValue: '5.0'}
2: {name: 'Solana', symbol: 'SOL', decimals: 18, value: BigNumber, displayValue: '12.0'}
length: 3
[[Prototype]]: Array(0)
getThirdWebTokens and getSanityTokens
So inside change getTokens like this:async getTokens() {
const coins = await this.getSanityTokens();
const promises = coins.map(coin => {
const tokenValues = this.getThirdWebTokens(coin.ContractAddress);
return {...coin, ...tokenValues, usdTotal: (+coin.usdPrice) * (+tokenValues.displayValue)
});
const tokenArray = await Promise.all(promises);
return tokenArray
}
inRoot that stores the necessary data. Something like:@Injectable({ providedIn: 'root' })
export class StateService {
private stateSubject = new BehaviorSubject<SomeModel>({});
state$ = this.stateSubject.asObservable();
get currentState(): SomeModel {
return this.stateSubject.value;
}
setState(state: Partial<SomeModel>) {
const oldValue = this.stateSubject.value;
this.stateSubject.next(...oldValue, ...{state || {}});
}
then when you need to read it from somewhere, just subscribe to this.stateService.state$.
And remeber to unsubscribe or use the async pipe afterwards.