@heroicons/react/solid#InformationCircleIcon TypeScript Examples
The following examples show how to use
@heroicons/react/solid#InformationCircleIcon.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Admonition.tsx From eventcatalog with MIT License | 6 votes |
|
getConfigurationByType = (type: string) => {
switch (type) {
case 'alert':
return { color: 'red', icon: ExclamationIcon };
case 'warning':
return { color: 'yellow', icon: ExclamationIcon };
default:
return { color: 'indigo', icon: InformationCircleIcon };
}
}
Example #2
| Source File: tvl.tsx From arkadiko with GNU General Public License v3.0 | 5 votes |
|
Tvl: React.FC = () => {
const [loadingTvl, setLoadingTvl] = useState(true);
const [totalTvl, setTotalTvl] = useState(0.0);
const [vaultsTvl, setVaultsTvl] = useState(0.0);
const [swapTvl, setSwapTvl] = useState(0.0);
const apiUrl = 'https://arkadiko-api.herokuapp.com';
useEffect(() => {
const fetchTvl = async () => {
let response: any = await axios.get(`${apiUrl}/api/v1/blockchains/1`);
response = response['data'];
const swapTvl = response['swap_tvl'];
const vaultsTvl = response['vaults_tvl'];
setSwapTvl(swapTvl);
setVaultsTvl(vaultsTvl);
setTotalTvl(swapTvl + vaultsTvl);
setLoadingTvl(false);
};
setLoadingTvl(true);
fetchTvl();
}, []);
const stats = [
{
name: 'Total TVL',
stat: totalTvl.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
},
{
name: 'Vaults TVL',
stat: vaultsTvl.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
},
{
name: 'Swap TVL',
stat: swapTvl.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }),
info: 'Dollar amount of all the tokens that are deposited as liquidity for swapping.'
},
]
return (
<div>
<dl className="grid grid-cols-1 mt-5 overflow-hidden bg-white border border-gray-200 divide-y divide-gray-200 rounded-lg lg:grid-cols-3 lg:divide-y-0 lg:divide-x">
{stats.map((item) => (
<div key={item.name} className="px-4 py-5 sm:p-6">
<dt className="inline-flex items-center text-base font-normal text-gray-500">
{item.name}
{item.info ? (
<Tooltip
label={item.info}
shouldWrapChildren={true}
>
<InformationCircleIcon
className="block w-5 h-5 ml-2 text-gray-400"
aria-hidden="true"
/>
</Tooltip>
) : null}
</dt>
<dd className="flex items-baseline justify-between mt-1 md:block lg:flex">
{loadingTvl ? (
<Placeholder className="py-2" width={Placeholder.width.FULL} />
) : (
<div className="text-2xl font-semibold text-indigo-600">
<span className="text-sm">$</span>{' '} {item.stat}
</div>
)}
</dd>
</div>
))}
</dl>
</div>
);
}
Example #3
| Source File: create-vault-step-two.tsx From arkadiko with GNU General Public License v3.0 | 4 votes |
|
CreateVaultStepTwo: React.FC<VaultProps> = ({ setStep, setCoinAmounts }) => {
const [state, _] = useContext(AppContext);
const [tokenKey, setTokenKey] = useState('');
const [decimals, setDecimals] = useState(1000000);
const search = useLocation().search;
const tokenType = new URLSearchParams(search).get('type');
const tokenName = new URLSearchParams(search).get('token');
const currentSection = 1;
const continueVault = () => {
setCoinAmounts({
amounts: { collateral: collateralAmount, usda: coinAmount },
'liquidation-price': liquidationPrice,
'collateral-to-debt-ratio': collateralToDebt,
'liquidation-ratio': liquidationRatio,
'liquidation-penalty': liquidationPenalty,
'stability-fee-apy': stabilityFeeApy,
'token-type': tokenType,
'token-name': tokenName,
'stack-pox': true,
'auto-payoff': true,
});
setStep(2);
};
const [collateralAmount, setCollateralAmount] = useState('');
const [coinAmount, setCoinAmount] = useState('');
const [maximumToMint, setMaximumToMint] = useState(0);
const [liquidationPrice, setLiquidationPrice] = useState(0);
const [collateralToDebt, setCollateralToDebt] = useState(0);
const [stabilityFeeApy, setStabilityFeeApy] = useState(0);
const [liquidationPenalty, setLiquidationPenalty] = useState(0);
const [liquidationRatio, setLiquidationRatio] = useState(0);
const [price, setPrice] = useState(0);
const [errors, setErrors] = useState<string[]>([]);
const [isLoading, setIsLoading] = useState(true);
const maximumCoinsToMint = (value: string) => {
const collateralType = state.collateralTypes[tokenType?.toLocaleUpperCase()];
if (collateralType) {
const minColl = collateralType['collateralToDebtRatio'];
const maxRatio = Math.max(minColl, parseInt(liquidationRatio, 10) + 30);
const uCollateralAmount = parseInt(value * 1000000, 10);
setMaximumToMint(Math.floor((uCollateralAmount * price * 100) / maxRatio));
}
};
useEffect(() => {
const fetchPrice = async () => {
if (!tokenName) {
return;
}
const price = await getPrice(tokenName);
setPrice(price / 1000000);
};
if (tokenName) {
fetchPrice();
const tokenKey = tokenName.toLowerCase() as UserBalanceKeys;
setTokenKey(tokenKey);
setDecimals(tokenKey === 'stx' ? 1000000 : 100000000);
setIsLoading(false);
}
}, [tokenName]);
const setCollateralValues = (value: string) => {
setCollateralAmount(value);
const error = ['You cannot collateralize more than your balance'];
if (
parseFloat(value) < 0 ||
(tokenKey === 'stx' && parseFloat(value) >= state.balance[tokenKey] / decimals) ||
parseFloat(value) > state.balance[tokenKey] / decimals
) {
if (!errors.includes(error[0])) {
setErrors(errors.concat(error));
}
} else {
const filteredAry = errors.filter(e => e !== error[0]);
setErrors(filteredAry);
maximumCoinsToMint(value);
}
};
const setCollateral = useCallback(
(event: React.ChangeEvent<HTMLInputElement>) => {
const { value } = event.target;
setCollateralValues(value);
},
[state, tokenKey, errors]
);
const setCoins = useCallback(
(event: React.ChangeEvent<HTMLInputElement>) => {
const { value } = event.target;
setCoinAmount(value);
const error = [`You cannot mint more than ${maximumToMint / 1000000} USDA`];
const funnyError = [`You need to mint at least 5% LTV`];
const filteredAry = errors.filter(e => e !== error[0] && e !== funnyError[0]);
if (parseFloat(value) > maximumToMint / 1000000) {
setErrors(filteredAry.concat(error));
} else if (value <= parseFloat(maximumToMint / 2500000)) {
setErrors(filteredAry.concat(funnyError));
} else {
setErrors(filteredAry);
}
},
[state, maximumToMint, errors]
);
const setMaxBalance = useCallback(() => {
let balance = state.balance[tokenKey] / decimals;
if (tokenKey === 'stx') {
const fee = 2;
balance -= fee;
}
const balanceString = balance.toString();
setCollateralValues(balanceString);
}, [state, tokenKey, price]);
const setMaxCoins = useCallback(() => {
setCoinAmount((maximumToMint / 1000000).toString());
}, [state, maximumToMint]);
useEffect(() => {
if (collateralAmount && coinAmount) {
const amount = tokenName.toLocaleLowerCase().includes('xbtc')
? collateralAmount * 100
: collateralAmount;
setLiquidationPrice(
getLiquidationPrice(liquidationRatio, parseFloat(coinAmount), parseFloat(amount), tokenName)
);
setCollateralToDebt(
getCollateralToDebtRatio(price * 100, parseFloat(coinAmount), parseFloat(collateralAmount))
);
}
}, [price, tokenName, collateralAmount, coinAmount]);
useEffect(() => {
if (tokenType && state.collateralTypes[tokenType.toUpperCase()]) {
setStabilityFeeApy(state.collateralTypes[tokenType.toUpperCase()].stabilityFeeApy);
setLiquidationPenalty(state.collateralTypes[tokenType.toUpperCase()].liquidationPenalty);
setLiquidationRatio(state.collateralTypes[tokenType.toUpperCase()].liquidationRatio);
}
}, [tokenType, state.collateralTypes]);
return (
<>
<NewVaultWizardNav currentSection={currentSection} setStep={setStep} />
<section className="mt-8">
<header className="pb-5 border-b border-gray-200 dark:border-zinc-600 sm:flex sm:justify-between sm:items-end">
<div>
<h2 className="text-lg leading-6 text-gray-900 font-headings dark:text-zinc-50">
Create a new vault
</h2>
<p className="max-w-4xl mt-2 text-sm text-gray-500 dark:text-zinc-400">
Deposit {tokenName} and generate USDA
</p>
</div>
<div>
<div className="flex items-center">
<div className="w-5.5 h-5.5 rounded-full bg-indigo-200 flex items-center justify-center">
<QuestionMarkCircleIcon className="w-5 h-5 text-indigo-600" aria-hidden="true" />
</div>
<a
className="inline-flex items-center px-2 text-sm font-medium text-indigo-500 dark:text-indigo-300 dark:hover:text-indigo-200 hover:text-indigo-700"
href="https://docs.arkadiko.finance/protocol/vaults"
target="_blank"
rel="noopener noreferrer"
>
Need help with vaults?
<ExternalLinkIcon className="block w-3 h-3 ml-2 shrink-0" aria-hidden="true" />
</a>
</div>
</div>
</header>
<div className="mt-4 shadow sm:rounded-md sm:overflow-hidden">
<div className="px-4 py-5 space-y-6 bg-white dark:bg-zinc-800 sm:p-6">
{errors.length > 0 ? (
<Alert type={Alert.type.ERROR}>
{errors.map(txt => (
<p key={txt}>{txt}</p>
))}
</Alert>
) : null}
<form className="space-y-8 divide-y divide-gray-200 dark:divide-zinc-600">
<div className="space-y-8 divide-y divide-gray-200 dark:divide-zinc-600">
<div>
<div className="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-8">
{isLoading ? (
<div className="space-y-16 sm:col-span-3">
<div>
<Placeholder
className="py-2"
color={Placeholder.color.GRAY}
width={Placeholder.width.FULL}
/>
<Placeholder className="py-2" width={Placeholder.width.THIRD} />
</div>
<div>
<Placeholder
className="py-2"
color={Placeholder.color.GRAY}
width={Placeholder.width.FULL}
/>
<Placeholder className="py-2" width={Placeholder.width.THIRD} />
</div>
<div>
<Placeholder
className="py-2"
color={Placeholder.color.GRAY}
width={Placeholder.width.FULL}
/>
<Placeholder className="py-2" width={Placeholder.width.THIRD} />
</div>
</div>
) : (
<div className="space-y-6 sm:col-span-3">
<div>
<h3 className="text-lg font-medium leading-6 text-gray-900 font-headings dark:text-zinc-50">
How much {tokenName} do you want to collateralize?
</h3>
<p className="mt-2 text-sm">
The amount of {tokenName} you deposit determines how much USDA you can
generate.
</p>
<div className="mt-4">
<InputAmount
balance={state.balance[tokenKey] / decimals}
token={tokenName}
inputName="collateral"
inputId="collateralAmount"
inputValue={collateralAmount}
inputLabel={`Collateralize ${tokenName}`}
onInputChange={setCollateral}
onClickMax={setMaxBalance}
/>
</div>
</div>
<div>
<h3 className="text-lg font-medium leading-6 text-gray-900 font-headings dark:text-zinc-50">
How much USDA would you like to mint?
</h3>
<p className="mt-2 text-sm">
Mint an amount that is safely above the liquidation ratio.
</p>
<div className="mt-4">
<InputAmount
balance={maximumToMint / 1000000}
token="USDA"
inputName="coins"
inputId="coinsAmount"
inputValue={coinAmount}
inputLabel="Mint USDA"
onInputChange={setCoins}
onClickMax={setMaxCoins}
/>
</div>
</div>
</div>
)}
<div className="sm:col-start-6 sm:col-span-5">
<div className="w-full border border-indigo-200 rounded-lg shadow-sm dark:border-indigo-300 bg-indigo-50 dark:bg-indigo-200">
<dl className="sm:divide-y sm:divide-indigo-200 dark:divide-indigo-300">
<div className="p-3 sm:flex sm:items-center sm:flex-1 sm:flex-wrap sm:p-4">
<dt className="inline-flex items-center text-sm font-medium text-indigo-500 shrink-0 sm:mr-2">
Collateral to Debt Ratio
<div className="ml-2">
<Tooltip
shouldWrapChildren={true}
label={`The amount of collateral you deposit in a vault versus the stablecoin debt you are minting against it`}
>
<InformationCircleIcon
className="block w-5 h-5 text-indigo-400"
aria-hidden="true"
/>
</Tooltip>
</div>
</dt>
<dd className="mt-1 text-sm text-indigo-900 sm:mt-0 sm:ml-auto">
{collateralToDebt > 0 ? <>{collateralToDebt.toFixed(2)}%</> : <>—</>}
</dd>
</div>
<div className="p-3 sm:flex sm:items-center sm:flex-1 sm:flex-wrap sm:p-4">
<dt className="inline-flex items-center text-sm font-medium text-indigo-500 shrink-0 sm:mr-2">
Liquidation Price
<div className="ml-2">
<Tooltip
shouldWrapChildren={true}
label={`The price at which the vault gets tagged for auction`}
>
<InformationCircleIcon
className="block w-5 h-5 text-indigo-400"
aria-hidden="true"
/>
</Tooltip>
</div>
</dt>
<dd className="mt-1 text-sm text-indigo-900 sm:mt-0 sm:ml-auto">
{liquidationPrice > 0 ? <>${liquidationPrice}</> : <>—</>}
</dd>
</div>
<div className="p-3 sm:flex sm:items-center sm:flex-1 sm:flex-wrap sm:p-4">
<dt className="inline-flex items-center text-sm font-medium text-indigo-500 shrink-0 sm:mr-2">
Current {tokenName} Price
</dt>
<dd className="mt-1 text-sm text-indigo-900 sm:mt-0 sm:ml-auto">
${price}
</dd>
</div>
<div className="p-3 sm:flex sm:items-center sm:flex-1 sm:flex-wrap sm:p-4">
<dt className="inline-flex items-center text-sm font-medium text-indigo-500 shrink-0 sm:mr-2">
Stability Fee
<div className="ml-2">
<Tooltip
shouldWrapChildren={true}
label={`The interest in percentage to borrow USDA`}
>
<InformationCircleIcon
className="block w-5 h-5 text-indigo-400"
aria-hidden="true"
/>
</Tooltip>
</div>
</dt>
<dd className="mt-1 text-sm text-indigo-900 sm:mt-0 sm:ml-auto">
{stabilityFeeApy / 100}%
</dd>
</div>
<div className="p-3 sm:flex sm:items-center sm:flex-1 sm:flex-wrap sm:p-4">
<dt className="inline-flex items-center text-sm font-medium text-indigo-500 shrink-0 sm:mr-2">
Liquidation Ratio
<div className="ml-2">
<Tooltip
shouldWrapChildren={true}
label={`The collateral-to-debt ratio when your vault gets liquidated`}
>
<InformationCircleIcon
className="block w-5 h-5 text-indigo-400"
aria-hidden="true"
/>
</Tooltip>
</div>
</dt>
<dd className="mt-1 text-sm text-indigo-900 sm:mt-0 sm:ml-auto">
{liquidationRatio}%
</dd>
</div>
<div className="p-3 sm:flex sm:items-center sm:flex-1 sm:flex-wrap sm:p-4">
<dt className="inline-flex items-center text-sm font-medium text-indigo-500 shrink-0 sm:mr-2">
Liquidation Penalty
<div className="ml-2">
<Tooltip
shouldWrapChildren={true}
label={`The penalty you pay when your vault gets liquidated`}
>
<InformationCircleIcon
className="block w-5 h-5 text-indigo-400"
aria-hidden="true"
/>
</Tooltip>
</div>
</dt>
<dd className="mt-1 text-sm text-indigo-900 sm:mt-0 sm:ml-auto">
{liquidationPenalty}%
</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
</div>
<div className="pt-5">
<div className="flex justify-end">
<button
disabled={!coinAmount || errors.length > 0}
onClick={() => continueVault()}
type="submit"
className="inline-flex justify-center px-4 py-2 ml-3 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
Continue
</button>
</div>
</div>
</form>
</div>
</div>
</section>
</>
);
}
Example #4
| Source File: liquidations.tsx From arkadiko with GNU General Public License v3.0 | 4 votes |
|
Liquidations: React.FC = () => {
const { doContractCall } = useConnect();
const stxAddress = useSTXAddress();
const contractAddress = process.env.REACT_APP_CONTRACT_ADDRESS || '';
const [state, setState] = useContext(AppContext);
const [isLoading, setIsLoading] = useState(true);
const [startLoadingRewards, setStartLoadingRewards] = useState(false);
const [isLoadingRewards, setIsLoadingRewards] = useState(true);
const [rewardData, setRewardData] = useState([]);
const [stakeAmount, setStakeAmount] = useState(0);
const [unstakeAmount, setUnstakeAmount] = useState(0);
const [userPooled, setUserPooled] = useState(0);
const [totalPooled, setTotalPooled] = useState(0);
const [currentBlockHeight, setCurrentBlockHeight] = useState(0);
const [dikoEndBlock, setDikoEndBlock] = useState(0);
const [dikoRewardsToAdd, setDikoRewardsToAdd] = useState(0);
const [dikoApr, setDikoApr] = useState(0);
const [buttonUnstakeDisabled, setButtonUnstakeDisabled] = useState(true);
const [buttonStakeDisabled, setButtonStakeDisabled] = useState(true);
const [redeemableStx, setRedeemableStx] = useState(0);
const [lockupBlocks, setLockupBlocks] = useState(0);
const [stakerLockupBlocks, setStakerLockupBlocks] = useState(0);
const [rewardLoadingPercentage, setRewardLoadingPercentage] = useState(0);
const onInputStakeChange = (event: any) => {
const value = event.target.value;
setStakeAmount(value);
};
const onInputUnstakeChange = (event: any) => {
const value = event.target.value;
setUnstakeAmount(value);
};
const stakeMaxAmount = () => {
setStakeAmount((state.balance['usda'] / 1000000).toString());
};
const unstakeMaxAmount = () => {
setUnstakeAmount((userPooled / 1000000).toString());
};
const redeemStx = async () => {
await doContractCall({
network,
contractAddress,
stxAddress,
contractName: 'arkadiko-freddie-v1-1',
functionName: 'redeem-stx',
functionArgs: [uintCV(state.balance['xstx'])],
postConditionMode: 0x01,
onFinish: data => {
setState(prevState => ({
...prevState,
currentTxId: data.txId,
currentTxStatus: 'pending',
}));
},
anchorMode: AnchorMode.Any,
});
};
const stake = async () => {
const postConditions = [
makeStandardFungiblePostCondition(
stxAddress || '',
FungibleConditionCode.Equal,
uintCV(Number((parseFloat(stakeAmount) * 1000000).toFixed(0))).value,
createAssetInfo(contractAddress, 'usda-token', 'usda')
),
];
await doContractCall({
network,
contractAddress,
stxAddress,
contractName: 'arkadiko-liquidation-pool-v1-1',
functionName: 'stake',
functionArgs: [
uintCV(Number((parseFloat(stakeAmount) * 1000000).toFixed(0)))
],
postConditions,
onFinish: data => {
setState(prevState => ({
...prevState,
currentTxId: data.txId,
currentTxStatus: 'pending',
}));
},
anchorMode: AnchorMode.Any,
});
};
const unstake = async () => {
const postConditions = [
makeContractFungiblePostCondition(
contractAddress,
'arkadiko-liquidation-pool-v1-1',
FungibleConditionCode.Equal,
uintCV(Number((parseFloat(unstakeAmount) * 1000000).toFixed(0))).value,
createAssetInfo(contractAddress, 'usda-token', 'usda')
),
];
await doContractCall({
network,
contractAddress,
stxAddress,
contractName: 'arkadiko-liquidation-pool-v1-1',
functionName: 'unstake',
functionArgs: [
uintCV(Number((parseFloat(unstakeAmount) * 1000000).toFixed(0)))
],
postConditions,
onFinish: data => {
setState(prevState => ({
...prevState,
currentTxId: data.txId,
currentTxStatus: 'pending',
}));
},
anchorMode: AnchorMode.Any,
});
};
const getRewardCount = async () => {
const call = await callReadOnlyFunction({
contractAddress,
contractName: 'arkadiko-liquidation-rewards-v1-1',
functionName: 'get-total-reward-ids',
functionArgs: [],
senderAddress: stxAddress || '',
network: network,
});
const maxRewardId = cvToJSON(call).value;
console.log("Reward IDs: ", maxRewardId);
return parseInt(maxRewardId);
};
const getRewardsData = async (startId: Number, endId: Number, totalIds: number, loadedIds: number) => {
var rewardIds = [];
for (let rewardId = startId; rewardId <= endId; rewardId++) {
rewardIds.push(rewardId);
}
const rewardsData: LiquidationRewardProps[] = [];
await asyncForEach(rewardIds, async (rewardId: number) => {
try {
const callUserPending = await callReadOnlyFunction({
contractAddress,
contractName: 'arkadiko-liquidation-ui-v1-2',
functionName: 'get-user-reward-info',
functionArgs: [
uintCV(rewardId),
],
senderAddress: stxAddress || '',
network: network,
});
const result = cvToJSON(callUserPending).value.value;
if (result['pending-rewards'].value > 0){
rewardsData.push({
rewardIds: [rewardId],
token: result['token'].value,
claimable: result['pending-rewards'].value,
tokenIsStx: result['token-is-stx'].value,
});
}
} catch (e) {
console.error(e);
}
loadedIds = loadedIds + 1;
const percentage = parseInt(Math.floor((loadedIds / (totalIds * 1.01)) * 100.0));
setRewardLoadingPercentage(percentage);
});
return rewardsData;
};
const createGroups = (rewardsData: LiquidationRewardProps[]) => {
// Merge in groups to bulk claim
const rewardsDataMerged: LiquidationRewardProps[] = [];
for (const rewardData of rewardsData) {
const result = rewardsDataMerged.filter(data => {
return data.rewardIds.length < 50 && data.token == rewardData.token && data.tokenIsStx == rewardData.tokenIsStx;
});
if (result.length == 0) {
rewardsDataMerged.push(rewardData);
} else {
let existingData = result[0];
if (!existingData.rewardIds.includes(rewardData.rewardIds[0])) {
existingData.rewardIds.push(rewardData.rewardIds[0]);
existingData.claimable = parseInt(existingData.claimable) + parseInt(rewardData.claimable);
}
}
}
return rewardsDataMerged;
};
const sleep = (milliseconds) => {
return new Promise(resolve => setTimeout(resolve, milliseconds))
};
async function asyncForEach(array, callback) {
for (let index = 0; index < array.length; index++) {
await callback(array[index], index, array);
}
}
const loadRewards = async () => {
setStartLoadingRewards(true);
// Fetch all reward info
const rewardCount = await getRewardCount();
var rewards: LiquidationRewardProps[] = [];
const batchAmount = 15;
const batches = Math.ceil(rewardCount / batchAmount);
for (let batch = batches-1; batch >= 0; batch--) {
// Sleep 10 sec
await sleep(10000);
const startRewardId = batch * batchAmount;
const endRewardId = Math.min((batch+1) * batchAmount - 1, rewardCount-1);
const rewardsLoaded = (batches-1-batch) * (endRewardId - startRewardId);
const newRewards = await getRewardsData(startRewardId, endRewardId, rewardCount, rewardsLoaded);
rewards = rewards.concat(newRewards);
// Group rewards
const rewardGroups = createGroups(rewards);
const rewardItems = rewardGroups.map((reward: object) => (
<LiquidationReward
key={reward.rewardIds}
rewardIds={reward.rewardIds}
token={reward.token}
claimable={reward.claimable}
tokenIsStx={reward.tokenIsStx}
/>
));
setRewardData(rewardItems);
}
setIsLoadingRewards(false);
};
useEffect(() => {
// TODO: Replace by API price
const getDikoPrice = async () => {
const call = await callReadOnlyFunction({
contractAddress,
contractName: 'arkadiko-swap-v2-1',
functionName: 'get-pair-details',
functionArgs: [
contractPrincipalCV(contractAddress, 'arkadiko-token'),
contractPrincipalCV(contractAddress, 'usda-token'),
],
senderAddress: stxAddress || '',
network: network,
});
const resultPairDetails = cvToJSON(call).value.value.value;
const balanceX = resultPairDetails["balance-x"].value;
const balanceY = resultPairDetails["balance-y"].value;
return balanceY / balanceX;
};
const getTotalPooled = async () => {
const call = await callReadOnlyFunction({
contractAddress,
contractName: 'usda-token',
functionName: 'get-balance',
functionArgs: [
contractPrincipalCV(contractAddress, 'arkadiko-liquidation-pool-v1-1'),
],
senderAddress: stxAddress || '',
network: network,
});
const result = cvToJSON(call).value.value;
return result;
};
const getUserPooled = async () => {
const call = await callReadOnlyFunction({
contractAddress,
contractName: 'arkadiko-liquidation-pool-v1-1',
functionName: 'get-tokens-of',
functionArgs: [
standardPrincipalCV(stxAddress || ''),
],
senderAddress: stxAddress || '',
network: network,
});
const result = cvToJSON(call).value.value;
return result;
};
const getCurrentBlockHeight = async () => {
const client = getRPCClient();
const response = await fetch(`${client.url}/v2/info`, { credentials: 'omit' });
const data = await response.json();
return data['stacks_tip_height'];
};
const getEpochInfo = async () => {
const call = await callReadOnlyFunction({
contractAddress,
contractName: 'arkadiko-liquidation-rewards-diko-v1-1',
functionName: 'get-epoch-info',
functionArgs: [],
senderAddress: stxAddress || '',
network: network,
});
const result = cvToJSON(call).value.value;
return result;
};
const getDikoEpochRewardsToAdd = async () => {
const call = await callReadOnlyFunction({
contractAddress,
contractName: 'arkadiko-liquidation-rewards-diko-v1-1',
functionName: 'get-rewards-to-add',
functionArgs: [],
senderAddress: stxAddress || '',
network: network,
});
const result = cvToJSON(call).value;
return result;
};
const getStxRedeemable = async () => {
const stxRedeemable = await callReadOnlyFunction({
contractAddress,
contractName: 'arkadiko-freddie-v1-1',
functionName: 'get-stx-redeemable',
functionArgs: [],
senderAddress: stxAddress || '',
network: network,
});
const result = cvToJSON(stxRedeemable).value.value;
return result;
};
const getLockup = async () => {
const stxRedeemable = await callReadOnlyFunction({
contractAddress,
contractName: 'arkadiko-liquidation-pool-v1-1',
functionName: 'get-lockup-blocks',
functionArgs: [],
senderAddress: stxAddress || '',
network: network,
});
const result = cvToJSON(stxRedeemable).value.value;
return result;
};
const getStakerLockup = async () => {
const call = await callReadOnlyFunction({
contractAddress,
contractName: 'arkadiko-liquidation-pool-v1-1',
functionName: 'get-staker-lockup',
functionArgs: [
standardPrincipalCV(stxAddress || ''),
],
senderAddress: stxAddress || '',
network: network,
});
const result = cvToJSON(call).value;
return result["start-block"].value;
};
const fetchInfo = async () => {
// Fetch info
const [
totalPooled,
userPooled,
epochInfo,
dikoEpochRewardsToAdd,
currentBlockHeight,
stxRedeemable,
stakerLockup,
lockupBlocks,
dikoPrice,
] = await Promise.all([
getTotalPooled(),
getUserPooled(),
getEpochInfo(),
getDikoEpochRewardsToAdd(),
getCurrentBlockHeight(),
getStxRedeemable(),
getStakerLockup(),
getLockup(),
getDikoPrice(),
]);
setTotalPooled(totalPooled);
setUserPooled(userPooled);
setDikoEndBlock(epochInfo["end-block"].value);
setDikoRewardsToAdd(dikoEpochRewardsToAdd);
setCurrentBlockHeight(currentBlockHeight);
setButtonStakeDisabled(false);
setButtonUnstakeDisabled(userPooled == 0)
if (userPooled == 0) {
setStakerLockupBlocks(0);
} else {
setStakerLockupBlocks(parseInt(stakerLockup) + parseInt(lockupBlocks));
}
setLockupBlocks(lockupBlocks);
setRedeemableStx(stxRedeemable);
const dikoPerYear = (52560 / epochInfo["blocks"].value) * dikoEpochRewardsToAdd;
setDikoApr((dikoPerYear * dikoPrice) / totalPooled * 100.0);
setIsLoading(false);
};
fetchInfo();
}, []);
const tabs = [
{ name: 'Add', icon: <PlusCircleIcon className="w-4 h-4 mr-2" aria-hidden="true" /> },
{ name: 'Remove', icon: <MinusCircleIcon className="w-4 h-4 mr-2" aria-hidden="true"/> },
]
return (
<>
<Helmet>
<title>Liquidations</title>
</Helmet>
{state.userData ? (
<Container>
<main className="relative flex-1 py-12">
{state.balance['xstx'] > 0 ? (
<section>
<header className="pb-5 border-b border-gray-200 dark:border-zinc-600 sm:flex sm:justify-between sm:items-end">
<div>
<h3 className="text-lg leading-6 text-gray-900 font-headings dark:text-zinc-50">Trade xSTX for STX</h3>
</div>
</header>
<div className="mt-4">
{isLoading ? (
<>
<Placeholder className="py-2" width={Placeholder.width.FULL} />
<Placeholder className="py-2" width={Placeholder.width.FULL} />
</>
) : (
<div className="mt-4 shadow sm:rounded-md sm:overflow-hidden">
<div className="px-4 py-5 bg-white dark:bg-zinc-800 sm:p-6">
{(redeemableStx / 1000000) === 0 ? (
<>
<p>There are <span className="font-semibold">no redeemable STX</span> in the Arkadiko pool.</p>
<p className="mt-1">Be sure to check again later to redeem your xSTX for STX.</p>
</>
) : (
<p>There are <span className="text-lg font-semibold">{redeemableStx / 1000000}</span> STX redeemable in the Arkadiko pool.</p>
)}
<div className="flex items-center justify-between mt-4">
<p>You have <span className="text-lg font-semibold">{state.balance['xstx'] / 1000000}</span> xSTX.</p>
<button
type="button"
onClick={() => redeemStx()}
disabled={(redeemableStx / 1000000) === 0}
className="inline-flex justify-center px-4 py-2 text-base font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed"
>
Redeem
</button>
</div>
</div>
</div>
)}
</div>
</section>
): null}
<section>
<header className="pt-10 pb-5 border-b border-gray-200 dark:border-zinc-600 sm:flex sm:justify-between sm:items-end">
<div>
<h3 className="text-lg leading-6 text-gray-900 font-headings dark:text-zinc-50">Your rewards</h3>
</div>
</header>
<div className="mt-4">
{!startLoadingRewards ? (
<div className="mt-4 shadow sm:rounded-md sm:overflow-hidden">
<div className="px-4 py-5 bg-white dark:bg-zinc-800 sm:p-6">
<div className="flex items-center justify-between">
<p>
It can take a couple of minutes to check all liquidated vaults. Thanks for your patience!
</p>
<button
type="button"
onClick={() => loadRewards()}
className="inline-flex justify-center px-4 py-2 text-base font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed"
>
Load rewards
</button>
</div>
</div>
</div>
) : isLoadingRewards ? (
<div className="mt-4 shadow sm:rounded-md sm:overflow-hidden">
<div className="px-4 py-5 bg-white dark:bg-zinc-800 sm:p-6">
<div className="flex justify-between mb-3">
<span className="text-base font-medium dark:text-white">Checking liquidated vaults…</span>
<span className="text-sm font-medium text-indigo-700 dark:text-white">{rewardLoadingPercentage}%</span>
</div>
<div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
<div className="bg-indigo-600 h-2.5 rounded-full font-semibold" style={{ width: rewardLoadingPercentage + "%" }}></div>
</div>
</div>
</div>
): null}
</div>
<div className="mt-4">
{rewardData.length == 0 && startLoadingRewards && !isLoadingRewards ? (
<EmptyState
Icon={CashIcon}
title="You have no rewards to claim."
description="DIKO and liquidation rewards will appear here."
/>
) : rewardData.length != 0 && startLoadingRewards ? (
<>
<table className="min-w-full divide-y divide-gray-200 dark:divide-zinc-600 shadow sm:rounded-md sm:overflow-hidden">
<thead className="bg-gray-50 dark:bg-zinc-900 dark:bg-opacity-80">
<tr>
<th className="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 dark:text-zinc-400">
Token
</th>
<th className="px-6 py-3 text-xs font-medium tracking-wider text-center text-gray-500 dark:text-zinc-400">
Amount
</th>
<th className="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 dark:text-zinc-400"></th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200 dark:bg-zinc-900 dark:divide-zinc-600">{rewardData}</tbody>
</table>
</>
): null}
</div>
</section>
<section>
<header className="pt-10 pb-5 border-b border-gray-200 dark:border-zinc-600 sm:flex sm:justify-between sm:items-end">
<div>
<h3 className="text-lg leading-6 text-gray-900 font-headings dark:text-zinc-50">DIKO emissions</h3>
</div>
</header>
<div className="mt-4">
<div className="grid grid-cols-1 gap-5 mt-4 sm:grid-cols-4">
<div className="p-4 overflow-hidden border border-gray-300 rounded-lg shadow-sm bg-zinc-200/30 dark:bg-gray-500 dark:border-gray-700">
<p className="text-xs font-semibold text-gray-500 uppercase dark:text-gray-300">Current Block Height</p>
{isLoading ? (
<Placeholder className="py-2" width={Placeholder.width.FULL} color={Placeholder.color.GRAY} />
) : (
<p className="mt-1 text-xl font-semibold text-gray-600 dark:text-gray-50">
#{currentBlockHeight}
</p>
)}
</div>
<div className="p-4 overflow-hidden border border-gray-300 rounded-lg shadow-sm bg-zinc-200/30 dark:bg-gray-500 dark:border-gray-700">
<p className="text-xs font-semibold text-gray-500 uppercase dark:text-gray-300">Next DIKO rewards at block</p>
{isLoading ? (
<Placeholder className="py-2" width={Placeholder.width.FULL} color={Placeholder.color.GRAY} />
) : (
<p className="mt-1 text-xl font-semibold text-gray-600 dark:text-gray-50">#{dikoEndBlock}</p>
)}
</div>
<div className="p-4 overflow-hidden border border-indigo-200 rounded-lg shadow-sm bg-indigo-50 dark:bg-indigo-200">
<p className="text-xs font-semibold text-indigo-600 uppercase">Rewards to distribute</p>
{isLoading ? (
<>
<Placeholder className="py-2" width={Placeholder.width.THIRD} />
<Placeholder className="py-2" width={Placeholder.width.FULL} />
</>
) : (
<>
<p className="mt-1 text-xl font-semibold text-indigo-800">
{microToReadable(dikoRewardsToAdd).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 6,
})} DIKO
</p>
</>
)}
</div>
<div className="p-4 overflow-hidden border border-indigo-200 rounded-lg shadow-sm bg-indigo-50 dark:bg-indigo-200">
<p className="text-xs font-semibold text-indigo-600 uppercase">APR</p>
{isLoading ? (
<>
<Placeholder className="py-2" width={Placeholder.width.THIRD} />
<Placeholder className="py-2" width={Placeholder.width.FULL} />
</>
) : (
<>
<p className="mt-1 text-xl font-semibold text-indigo-800">
{dikoApr.toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}%
</p>
</>
)}
</div>
</div>
</div>
</section>
<section>
<header className="pt-10 pb-5 border-b border-gray-200 dark:border-zinc-600 sm:flex sm:justify-between sm:items-end">
<div>
<h3 className="text-lg leading-6 text-gray-900 font-headings dark:text-zinc-50">USDA pool</h3>
</div>
</header>
<div className="mt-4">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
<div className="w-full p-4 border border-indigo-200 rounded-lg shadow-sm bg-indigo-50 dark:bg-indigo-200">
<h4 className="text-xs text-indigo-700 uppercase font-headings">Pool info</h4>
<dl className="mt-2 space-y-1">
<div className="sm:grid sm:grid-cols-2 sm:gap-4">
<dt className="inline-flex items-center text-sm font-medium text-indigo-500 dark:text-indigo-700">
Total tokens in pool
<div className="ml-2">
<Tooltip
className="z-10"
shouldWrapChildren={true}
label={`Amount of USDA that is currently in the pool, ready to be used for liquidations.`}
>
<InformationCircleIcon
className="block w-4 h-4 text-indigo-400 dark:text-indigo-500"
aria-hidden="true"
/>
</Tooltip>
</div>
</dt>
<dt className="mt-1 text-sm font-semibold text-indigo-900 sm:mt-0 sm:text-right">
{isLoading ? (
<Placeholder className="py-2" width={Placeholder.width.FULL} />
) : (
<>
{microToReadable(totalPooled).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 6,
})} USDA
</>
)}
</dt>
</div>
<div className="sm:grid sm:grid-cols-2 sm:gap-4">
<dt className="inline-flex items-center text-sm font-medium text-indigo-500 dark:text-indigo-700">
Lockup duration
<div className="ml-2">
<Tooltip
className="z-10"
shouldWrapChildren={true}
label={`Deposited USDA will be locked.`}
>
<InformationCircleIcon
className="block w-4 h-4 text-indigo-400 dark:text-indigo-500"
aria-hidden="true"
/>
</Tooltip>
</div>
</dt>
<dt className="mt-1 text-sm font-semibold text-indigo-900 sm:mt-0 sm:text-right">
{isLoading ? (
<Placeholder className="py-2" width={Placeholder.width.FULL} />
) : (
<>
{lockupBlocks} blocks
</>
)}
</dt>
</div>
<div className="sm:grid sm:grid-cols-2 sm:gap-4">
<dt className="inline-flex items-center text-sm font-medium text-indigo-500 dark:text-indigo-700">
Your tokens in pool
<div className="ml-2">
<Tooltip
className="z-10"
shouldWrapChildren={true}
label={`The amount of USDA you still have in the pool. Will decrease if USDA is used in liquidations`}
>
<InformationCircleIcon
className="block w-4 h-4 text-indigo-400 dark:text-indigo-500"
aria-hidden="true"
/>
</Tooltip>
</div>
</dt>
<dt className="mt-1 text-sm font-semibold text-indigo-900 sm:mt-0 sm:text-right">
{isLoading ? (
<Placeholder className="py-2" width={Placeholder.width.FULL} />
) : (
<>
{microToReadable(userPooled).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 6,
})} USDA
</>
)}
</dt>
</div>
<div className="sm:grid sm:grid-cols-2 sm:gap-4">
<dt className="inline-flex items-center text-sm font-medium text-indigo-500 dark:text-indigo-700">
Unlocking at
<div className="ml-2">
<Tooltip
className="z-10"
shouldWrapChildren={true}
label={`Your deposited USDA will unlock at this block.`}
>
<InformationCircleIcon
className="block w-4 h-4 text-indigo-400 dark:text-indigo-500"
aria-hidden="true"
/>
</Tooltip>
</div>
</dt>
<dt className="mt-1 text-sm font-semibold text-indigo-900 sm:mt-0 sm:text-right">
{isLoading ? (
<Placeholder className="py-2" width={Placeholder.width.FULL} />
) : (
<>
Block {stakerLockupBlocks}
</>
)}
</dt>
</div>
</dl>
</div>
<div className="sm:col-span-2">
<div className="relative bg-white rounded-lg shadow dark:bg-zinc-900">
<div className="flex flex-col p-4">
<Tab.Group>
<Tab.List className="group p-0.5 rounded-lg flex w-full bg-gray-50 hover:bg-gray-100 dark:bg-zinc-300 dark:hover:bg-zinc-200">
{tabs.map((tab, tabIdx) => (
<Tab as={Fragment} key={tabIdx}>
{({ selected }) => (
<button className={
classNames(
`p-1.5 lg:pl-2.5 lg:pr-3.5 rounded-md flex items-center justify-center flex-1 focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus:outline-none focus-visible:ring-offset-gray-100 ${tabIdx === 1 ? 'ml-0.5': ''}`,
selected
? 'text-sm text-gray-600 font-medium bg-white ring-1 ring-black ring-opacity-5'
: ''
)}
>
<span className="inline-flex items-center text-sm font-medium rounded-md">
<span className={
selected
? 'text-indigo-500'
: 'text-gray-500 group-hover:text-gray-900 dark:group-hover:text-zinc-900'
}
>
{tab.icon}
</span>
<span className="text-gray-900">{tab.name}</span>
</span>
</button>
)}
</Tab>
))}
</Tab.List>
<Tab.Panels className="mt-4">
<Tab.Panel>
{isLoading ? (
<Placeholder className="py-2" width={Placeholder.width.FULL} />
) : (
<>
<InputAmount
balance={microToReadable(state.balance['usda']).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 6,
})}
token='USDA'
inputValue={stakeAmount}
onInputChange={onInputStakeChange}
onClickMax={stakeMaxAmount}
/>
<button
type="button"
className="inline-flex justify-center px-4 py-2 mb-4 text-base font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed"
disabled={buttonStakeDisabled}
onClick={stake}
>
Add USDA to pool
</button>
</>
)}
</Tab.Panel>
<Tab.Panel>
{isLoading ? (
<Placeholder className="py-2" width={Placeholder.width.FULL} />
) : currentBlockHeight < stakerLockupBlocks ? (
<div className="">
<Alert type={Alert.type.WARNING} title="Locked">
<p>
Your USDA is locked until block #{stakerLockupBlocks}
</p>
</Alert>
</div>
) : (
<>
<InputAmount
balance={microToReadable(userPooled).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 6,
})}
token='USDA'
inputValue={unstakeAmount}
onInputChange={onInputUnstakeChange}
onClickMax={unstakeMaxAmount}
/>
<button
type="button"
className="inline-flex justify-center px-4 py-2 mb-4 text-base font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed"
disabled={buttonUnstakeDisabled}
onClick={unstake}
>
Remove USDA from pool
</button>
</>
)}
</Tab.Panel>
</Tab.Panels>
</Tab.Group>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
</Container>
) : (
<Redirect to={{ pathname: '/' }} />
)}
</>
);
}
