const [ftData, setFtData] = useState(undefined); const [ftRewardData, setFTRewardData] = useState(undefined); const [stakeData, setStakeData] = useState(undefined); const [balance, setBalance] = useState(undefined); const [account, setAccount] = useState(undefined); const [inputTokenSt, setInputTokenSt] = useState(0); const [inputTokenUst, setInputTokenUst] = useState(0); const [stakeOpt, setStakeOpt] = useState(false); const [unstakeOpt, setUnstakeOpt] = useState(false); const contract = "0x66c050ecaba720735da50340b885da9e48f77bd2ead4a11a9e68f6ab0bb76211"; const contractData = "000200010000000000010600000001070000000000000000010b00000071144c0008287374616b696e675f696f2c496e69745374616b696e6700001001547374616b696e675f746f6b656e5f6164647265737304011c4163746f7249640001507265776172645f746f6b656e5f6164647265737304011c4163746f724964000144646973747269627574696f6e5f74696d6510010c7536340001307265776172645f746f74616c14011075313238000004082c677072696d6974697665731c4163746f724964000004000801205b75383b2033325d000008000003200000000c000c00000503001000000506001400000507001808287374616b696e675f696f345374616b696e67416374696f6e000110145374616b65040014011075313238000000205769746864726177040014011075313238000100345570646174655374616b696e67040000012c496e69745374616b696e6700020024476574526577617264000300001c0418526573756c740804540120044501240108084f6b040020000000000c45727204002400000100002008287374616b696e675f696f305374616b696e674576656e74000110345374616b6541636365707465640400140110753132380000001c55706461746564000100185265776172640400140110753132380002002457697468647261776e040014011075313238000300002408287374616b696e675f696f144572726f72000124285a65726f416d6f756e74000000285a65726f526577617264000100205a65726f54696d65000200385472616e73666572546f6b656e730003006450726576696f757354784d7573744265436f6d706c6574656400040048496e737566666963656e7442616c616e6365000500204e6f744f776e6572000600385374616b65724e6f74466f756e6400070034436f6e74726163744572726f720400280118537472696e67000800002800000502002c08287374616b696e675f696f24496f5374616b696e6700003401146f776e657204011c4163746f7249640001547374616b696e675f746f6b656e5f6164647265737304011c4163746f7249640001507265776172645f746f6b656e5f6164647265737304011c4163746f724964000140746f6b656e735f7065725f7374616b6514011075313238000130746f74616c5f7374616b656414011075313238000144646973747269627574696f6e5f74696d6510010c75363400013470726f64756365645f74696d6510010c7536340001307265776172645f746f74616c14011075313238000130616c6c5f70726f64756365641401107531323800013c7265776172645f70726f64756365641401107531323800011c7374616b6572733001585665633c284163746f7249642c205374616b6572293e0001307472616e73616374696f6e733c01b442547265654d61703c4163746f7249642c205472616e73616374696f6e3c5374616b696e67416374696f6e3e3e00012c63757272656e745f7469641001345472616e73616374696f6e4964000030000002340034000004080438003808287374616b696e675f696f185374616b6572000010011c62616c616e6365140110753132380001387265776172645f616c6c6f7765641401107531323800012c7265776172645f646562741401107531323800012c64697374726962757465641401107531323800003c042042547265654d617008044b010404560140000400440000004008287374616b696e675f696f2c5472616e73616374696f6e04045401180008010869641001345472616e73616374696f6e4964000118616374696f6e1801045400004400000248004800000408044000"; const ftMeta = "00010001000000000001030000000107000000000000000108000000a90b3400081466745f696f28496e6974436f6e66696700000c01106e616d65040118537472696e6700011873796d626f6c040118537472696e67000120646563696d616c73080108753800000400000502000800000503000c081466745f696f204654416374696f6e000118104d696e74040010011075313238000000104275726e040010011075313238000100205472616e736665720c011066726f6d14011c4163746f724964000108746f14011c4163746f724964000118616d6f756e74100110753132380002001c417070726f7665080108746f14011c4163746f724964000118616d6f756e74100110753132380003002c546f74616c537570706c790004002442616c616e63654f66040014011c4163746f724964000500001000000507001410106773746418636f6d6d6f6e287072696d6974697665731c4163746f724964000004001801205b75383b2033325d0000180000032000000008001c081466745f696f1c46544576656e74000110205472616e736665720c011066726f6d14011c4163746f724964000108746f14011c4163746f724964000118616d6f756e74100110753132380000001c417070726f76650c011066726f6d14011c4163746f724964000108746f14011c4163746f724964000118616d6f756e74100110753132380001002c546f74616c537570706c790400100110753132380002001c42616c616e63650400100110753132380003000020081466745f696f3c496f46756e6769626c65546f6b656e00001801106e616d65040118537472696e6700011873796d626f6c040118537472696e67000130746f74616c5f737570706c791001107531323800012062616c616e6365732401505665633c284163746f7249642c2075313238293e000128616c6c6f77616e6365732c01905665633c284163746f7249642c205665633c284163746f7249642c2075313238293e293e000120646563696d616c730801087538000024000002280028000004081410002c00000230003000000408142400"; const App = styled.div` --margin-app: clamp(16px, 4vw, 24px); --h-footer: 60px; --bg-card: rgb(25, 25, 25, .9); --primary: #0fffc7; --gradient: linear-gradient(to right, #22463d, #00f0b8); display: grid; place-items: center; place-content: center; min-height: calc(100dvh - var(--h-footer)); background: linear-gradient(to top right, #fff, #f5f5f7); .wrapper { background: var(--bg-card); border-radius: .3rem; padding: 40px 30px; display: flex; flex-direction: column; max-width: 500px; span { color: #fff } } ::-moz-selection { /* Code for Firefox */ background: #ccf0e7; } ::selection { background: #ccf0e7; } .space-between { display: flex; justify-content: space-between; align-items: center; } `, Input = styled.div` display: flex; gap: 10px; border-radius: .75rem; padding: 5px; background: #fff; box-shadow: 0 0 10px -5px rgb(0,0,0,.4); input { background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; border: none; height: 40px; font-size: 24px; font-weight: 500; padding-right: 0; margin: 5px; &::placeholder { font-size: 24px; } &:focus { box-shadow: none; } } `, Btn = styled.button` display: inlin-block; background: var(--primary); border: none; border-radius: .7rem; font-weight: 600; padding-inline: 10px; min-height: 45px; :hover { opacity: .9; filter: grayscale(0.5); } `, Footer = styled.div` position: absolute; bottom: 50px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; height: var(--h-footer); padding-inline: var(--margin-app); padding-block: 5px; background: var(--primary); a { color: #000; background: #fff; padding: 10px 30px; border-radius: .75rem; translate: 0 -20px; box-shadow: 0 0 10px -5px rgb(0,0,0,.4); } #vara-icon { width: 50px; height: 50px; } `; const stake = ( <> <h5 className="text-center mb-2 text-light fw-bold">Stake Tokens</h5> <Input> <input value={inputTokenSt} type="number" onChange={(e) => setInputTokenSt(e.target.value)} /> </Input> <VaraNetwork.Interaction trigger={({ signTransaction }) => ( <> <Btn className="mt-4" onClick={() => { signTransaction( contract, contractData, { stake: inputTokenSt }, 31154461320, 0 ); }} > Submit </Btn> </> )} /> <Btn className="mt-2" onClick={() => setStakeOpt(false)}> Cancel </Btn> </> ); const unstake = ( <> <h5 className="text-center mb-2 text-light fw-bold">Unstake Tokens</h5> <Input> <input value={inputTokenUst} type="number" onChange={(e) => setInputTokenUst(e.target.value)} /> </Input> <VaraNetwork.Interaction trigger={({ signTransaction }) => ( <> <Btn className="mt-4" onClick={() => { signTransaction( contract, contractData, { withdraw: inputTokenUst }, 31154461320, 0 ); }} > Submit </Btn> </> )} /> <Btn className="mt-2" onClick={() => setUnstakeOpt(false)}> Cancel </Btn> </> ); return ( <VaraNetwork.Wrapper> <App> {stakeData ? ( <> <div className="wrapper"> <h3 className="text-center mb-4 text-light fw-bold"> Stake FT Token </h3> <div className="mb-4 d-flex flex-row gap-2 align-items-center"> <p className="text-light m-0">Account:</p> <VaraNetwork.Identicon size={30} /> <p className="text-light m-0 fw-semibold">{account.meta.name}</p> </div> <div className="mb-2" style={{ gap: "10px" }}> <div className="mb-2"> <div> <span>Staking Token:</span> <span className="fw-bold">{ftData.symbol}</span> </div> <div className=""> <span>Total Staked:</span> <span className="fw-bold">{stakeData.totalStaked}</span> </div> </div> <div> <div> <span>Reward Token:</span> <span className="fw-bold">{ftRewardData.symbol}</span> </div> <div className=""> <span>Total Rewards:</span> <span className="fw-bold">{stakeData.rewardTotal}</span> </div> <div className=""> <span>Reward Produced:</span> <span className="fw-bold">{stakeData.rewardProduced}</span> </div> </div> </div> {stakeOpt || unstakeOpt ? ( <>{stakeOpt ? stake : unstake}</> ) : ( <> <div className="d-flex flex-column"> <Btn className="mb-2" onClick={() => setStakeOpt(true)}> Stake Tokens </Btn> <Btn className="mb-2" onClick={() => setUnstakeOpt(true)}> Unstake Tokens </Btn> </div> {balance ? ( <div className="mt-2"> <div> <span>Tokens Staked:</span> <span className="fw-bold">{balance[1].balance}</span> </div> <div className=""> <span>Reward Allowed:</span> <span className="fw-bold"> {balance[1].rewardAllowed} </span> </div> <div className=""> <span>Reward Debt:</span> <span className="fw-bold">{balance[1].rewardDebt}</span> </div> <div className=""> <span>Reward Distributed:</span> <span className="fw-bold">{balance[1].distributed}</span> </div> <Btn className="mt-2" style={{ width: "350px" }}> Claim Rewards </Btn> </div> ) : ( <> <span className="fw-bold mt-4"> You don't have tokens staked </span> </> )} </> )} </div> </> ) : ( <div className="wrapper"> <h3 className="text-center text-white mb-5"> Welcome to the example of interaction with a Staking of FT contract in VARA Network </h3> <VaraNetwork.Interaction trigger={({ readState, getAccountInfo }) => ( <> <Btn onClick={() => { const info = readState(contract, contractData, ""); info.then((res) => { setStakeData(res); console.log(res); const stFt = readState( res.stakingTokenAddress, ftMeta, "" ); stFt.then((resST) => { setFtData(resST); }); const rwFt = readState( res.rewardTokenAddress, ftMeta, "" ); rwFt.then((resRW) => { setFTRewardData(resRW); }); let varaAccount = getAccountInfo(); setAccount(varaAccount); setBalance( res.stakers.find( (data) => data[0] == varaAccount.decodedAddress ) ); }); }} > Start widget </Btn> </> )} /> </div> )} <Footer> <a href="https://vara.network/" className="fw-bold" target="_blank" title="vara network" > Powered by <img height="50px" src={`https://ipfs.near.social/ipfs/bafkreibjwxaoctoxglepnln5hgos3pvwaih3eidwrupjlmffoivfgarwfa`} alt="uploaded" /> </a> </Footer> </App> </VaraNetwork.Wrapper> );