안녕하세요 @realmankwon입니다.

SCT에서 거의 글을 쓰고 읽다보니 어느 순간 스팀 기준 보상은 어떻게 되고 있는지 궁금할때가 있습니다.
그럴 때면 steempeak로 가서 보상액을 확인하고 다시 SCT로 돌아옵니다.
그래서 이 둘이 함께 보이면 어떨까라는 생각에 다음과 같이 소스를 변경해 보았습니다.

역시나 생소한 언어라서 데이터를 어디에서 넣고 쓰는지 완전히 감이 잡히지 않아서 제법 오랜시간에 걸쳐서 소스를 분석하였습니다.

일단 찾은 것은 기존의 steem api의 데이터는 그대로 가지고 있고 steem-engine api의 데이터를 추가로 입력한 후 사용하기 때문에 별도로 steem의 정보를 찾아서 넣어줄 필요는 없었습니다.

해당 소스의 힌트를 찾은 방법은 다음과 같습니다.
일단 이전 보팅 비율을 표시했던 동일한 소스인

src/app/components/elements/Voting.jsx

에서 SCT 보상액을 표시하는 부분을 찾았습니다.
해당 부분은 346라인부터였습니다.

여기에서 변수에 SCT의 보상액을 계산해 줍니다.

이후 react의 서식에 맞춰서 값들을 화면에 뿌려주도록 설정이 되어 있습니다.

저는 해당 부분을 복사하여 다음과 같이 steem 기준으로 변경을 하였습니다.

    let cashout_time_steem = '1969-12-31T23:59:59';
    let payout_steem = 0;
    let author_payout_value = 0;
    let curator_payout_value = 0;

    if (post_obj) {
        cashout_time_steem = post_obj.get('cashout_time');
        payout_steem = Math.round(parseFloat(String(post_obj.get('pending_payout_value')).split('S')[0]) * 100) / 100;
        curator_payout_value = Math.round(parseFloat(post_obj.get('curator_payout_value')) / 100000 * 100) / 100;
        author_payout_value = Math.round(parseFloat(post_obj.get('total_payout_value')) / 100000 * 100) / 100;
    }

    if (
        cashout_time_steem &&
        /^\d{4}-\d\d-\d\dT\d\d:\d\d:\d\d$/.test(cashout_time_steem)
    ) {
        cashout_time_steem = cashout_time_steem + 'Z'; // Firefox really wants this Z (Zulu)
    }
    const cashout_active_steem = 
        payout_steem > 0 ||
        (new Date(cashout_time_steem) > Date.now());

    const payoutItemsSteem = [];

    // Payout 되기 전의 보상액 계산
    if(cashout_active_steem){
        payoutItemsSteem.push({ value: 'Pending Payout' });
        payoutItemsSteem.push({
            value: `$${payout_steem}`,
        });
    } 
    // Payout 된 후의 보상액 계산
    else {
        payout_steem = Math.round((curator_payout_value + author_payout_value) * 100) / 100;
        payoutItemsSteem.push({
            value: `Past Token Payouts $${payout_steem}`,
        });
        payoutItemsSteem.push({
            value: `- Author $${author_payout_value}`,
        });
        payoutItemsSteem.push({
            value: `- Curator $${curator_payout_value}`,
        });
        //payout_steem = parseFloat(String(curator_payout_value).split(' ')[0]) + parseFloat(String(author_payout_value).split(' ')[0]);
    }
   
    // 실제 보상액을 화면에 출력하는 부분
    // React에서는 이것을 변수에 저장하여 재사용함
    const payoutElSteem = (
        <DropdownMenu el="div" items={payoutItemsSteem}>
            <span></span>
            <span>
                <FormattedAsset
                    amount={payout_steem}
                    asset='$'
                />
                {payoutItemsSteem.length > 0 && <Icon name="dropdown-arrow" />}
            </span>
        </DropdownMenu>
    );

그리고 위의 소스 중 마지막 부분에 정의된 변수가 실제 Steem 보상액을 표시하는 부분입니다.
이 변수를 아래의 소스에 추가를 해주면 해당 부분이 표시가 되는 것을 알 수 있습니다.

일단 제가 찾은 것은 Voting.jsx 파일의 마지막 부분 즈음에 connect라고 하는 곳에서 api나 db의 정보들을 가지고 와서 변수에 넣어주는 것이었습니다.
그 중 기존의 steem api는 post_obj에 고스란히 들어가 있었고 그 데이터들은 getContentAsync 함수의 리턴갑과 동일하다는 것을 찾았습니다.
그래서 기존의 함수 리턴값에서 필요한 키값을 찾았고 그 키값으로 보상이 완료된 것과 되지 않은 것을 구분하여 Steem 기준으로 보상액을 나누어서 계산하였습니다.
값은 계산했지만 그걸 표현하는 방법이 달라서 그걸로 저녁에 시간이 좀 나서 1~2시간 정도 헤매다가 성공을 했네요 ^^

자세한 소스 설명을 해야 하는데 오늘은 혼육 중이라 쉽지 않을 것 같습니다. ㅜㅜ
일단 결과만 캡쳐하여 올리는 걸로 마무리를 지어야 할 것 같네요.

보상전

보상후

일단 기본적으로 필요한 정보는 깔끔하게 나오는 것을 확인했습니다.
혹시나 운영진께서 해당 부분을 고려하고 계시다면 참고 부탁드립니다. ^^
소스가 좀 깔끔하지 않아서 좀 더 다듬고 나서 수정을 좀 해야할 것 같습니다.
다들 즐거운 휴일 마무리 잘 하세요~~~