const RewardsTable = styled.div` background-color: rgba(53, 55, 73, 0.2); margin-top: 10px; border-radius: 6px; `; const Title = styled.div` padding: 10px 20px; font-size: 16px; font-weight: 400; color: #fff; `; State.init({ loading: false, dapp: null, }); const { dapps, onSuccess } = props; return ( <> {state.loading && state.dapp && ( <Widget src={state.dapp.handlerClaim} props={{ loading: state.loading, market: state.market, dapp: state.dapp, onSuccess: (res) => { State.update({ loading: false }); onSuccess?.(state.dapp.name); }, onError: (err) => { State.update({ loading: false }); }, }} /> )} <RewardsTable> <Title>Your Earns</Title> <Widget src="bluebiu.near/widget/Avalanche.Lending.YoursTable" props={{ totalReverse: true, columns: [ { type: "name", width: "30%", name: "Reward Asset", }, { type: "total", key: "dailyReward", width: "25%", name: "Daily Rewards", }, { type: "total", key: "unclaimed", width: "25%", name: "Unclaimed", }, { type: "button", width: "20%" }, ], data: props.data, buttons: [ { text: "Claim", loading: state.loading, }, ], onButtonClick: (dapp) => { State.update({ loading: true, dapp: dapps[dapp], }); }, }} /> </RewardsTable> </> );