안녕하세요 @realmankwon입니다.

그동안 @kopasi님의 요청 건을 개발하느라 다른 건 거의 하지 못하고 있었습니다.
해당 기능이 크게 어렵지 않을 것 같았는데 막상해 보니 너무너무 어렵네요 ㅜㅜ
소스를 정말 많이 분석하고 수정도 했지만 포기를 해야하는 싶은 정도입니다.
그래서 머리도 식힐 겸 그간 하지 못하고 있던 기능을 하나 추가 시켜 보았습니다.
최근에 Steem Engine에서 추가한 Steem Token 임대 기능으로 임대량이 얼마나 되는지 확인하고 싶을 때가 있었는데 그걸 지갑에 추가해 보았습니다.
임대수량은 다음과 같이 표현했습니다.

(스테이킹 수량, 임대받은 수량, 임대 준 수량)

요즘 SCTM 채굴의 1인자이지 블랙홀인 @sctm.winners 의 계정으로 테스트해 보았습니다.
보시는 바와 같이 +111,643개의 임대를 받은 것을 알 수 있습니다.

임대 준 수량은 sctm.winners의 운영자 @glory7 님 계정으로 테스트해 보았습니다.
(글로리님 허락도 없이 죄송합니다...너그러이 이해해 주시길... ^^;;)

SCTM 이 -7,500 로 표시되는 것을 볼 수 있습니다.

해당 소스 변경은 다음과 같습니다.

1 . UserWallet.jsx

기존에 제가 변경한 소스에서 임대 물량 정보인 delegationIn, delgationOut 정보를 파라미터로 넘겨주었습니다.

    if(account.has('all_token_balances'))
    {
        const allTokenBalances = account.get('all_token_balances').toJS()
    
        // added by realmankwon (2019-06-18) sort by alphabet asc
        allTokenBalances.sort(
            (a, b) =>
                a.symbol >
                b.symbol
                    ? 1
                    : -1
        );

        for (let v = 0; v < allTokenBalances.length; ++v) {
            const tokenBalance = allTokenBalances[v];
            // added by realmankwon (2019-06-18) except LIQUID_TOKEN_UPPERCASE 
            if(tokenBalance.symbol === LIQUID_TOKEN_UPPERCASE) continue;

            all_token_balances_list.push(
                <span>
                    <FormattedAssetToken
                        balance={tokenBalance.balance}
                        stake={tokenBalance.stake}
                        delegationsIn={tokenBalance.delegationsIn}
                        delegationsOut={tokenBalance.delegationsOut}
                        symbol={tokenBalance.symbol}
                    />
                </span>
            );
        }
    }

2 . FormattedAssetToken.jsx

임대 수량을 파라미터로 받은 후 이 부분을 출력하는 기능을 추가하였습니다.

    import React from 'react';
    import {
        formatDecimal,
        parsePayoutAmount,
    } from 'app/utils/ParsersAndFormatters';
    
    const FormattedAssetToken = ({ balance, stake, delegationsIn, delegationsOut, symbol }) => {
        if (balance && typeof balance === 'string') {
            balance = parsePayoutAmount(balance);
        }
        const bal = formatDecimal(balance);
    
        let isStake = false;
    
        if (stake && typeof stake === 'string') {
            stake = parsePayoutAmount(stake);
            isStake = true;
        }
        const stk = formatDecimal(stake);
    
        if (delegationsIn && typeof delegationsIn === 'string') {
            delegationsIn = parsePayoutAmount(delegationsIn);
        }
        const dIn = formatDecimal(delegationsIn || 0) ;
    
        if (delegationsOut && typeof delegationsOut === 'string') {
            delegationsOut = parsePayoutAmount(delegationsOut);
        }
        const dOut = formatDecimal(delegationsOut || 0) ; 
    
        return isStake ? (
            <span className={`FormattedAssetToken`}>
                <span className="prefix"> {symbol}</span>
                <span className="integer">{bal[0]}</span>
                <span className="decimal">{bal[1]}</span>{'('}
                <span className="integer">{stk[0]}</span>
                <span className="decimal">{stk[1]}</span>{', +'}
                <span className="integer">{dIn[0]}</span>
                <span className="decimal">{dIn[1]}</span>{', -'}
                <span className="integer">{dOut[0]}</span>
                <span className="decimal">{dOut[1]}</span>{')'}
            </span>
        ) : (
            <span className={`FormattedAssetToken`}>
                <span className="prefix"> {symbol} </span>
                <span className="integer">{bal[0]}</span>
                <span className="decimal">{bal[1]}</span>
            </span>
        );
    };
    
    export default FormattedAssetToken;

@jacobyu 님과 대화를 나누면서 앞으로 기능별로 branch를 하여 소스를 pr 하기로 하였습니다.
이번에도 branch 후에 소스를 수정하였는데 문제는 기존에 제가 변경한 소스에서 branch를 하는 바람에 기존 기능을 생략을 해야 할 듯 합니다.
그 후에 소스를 pr 올리도록 하겠습니다.
그럼 좋은 하루 되세요 ^^