Skip to content

Commit

Permalink
Merge pull request #64 from the-standard/202412-yields-range
Browse files Browse the repository at this point in the history 
202412 yields range
  • Loading branch information
@ZakMooney
ZakMooney authored Dec 17, 2024
2 parents 462771b + ce7ff75 commit ab3e620
Show file tree
Hide file tree
Showing 6 changed files with 292 additions and 140 deletions.
45 changes: 23 additions & 22 deletions src/components/vault/yield/PoolChart.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,33 +6,34 @@ import {
useLocalThemeModeStore,
} from "../../../store/Store";

// const YieldPoolChart = ({ hypervisorData, yieldPair }) => {
const YieldPoolChart = ({ hypervisorData, yieldPair }) => {
const { localThemeModeStore } = useLocalThemeModeStore();
const isLight = localThemeModeStore && localThemeModeStore.includes('light');

const [chartWidth, setChartWidth] = useState(200);
const [chartHeight, setChartHeight] = useState(60);
const [lineColor, setLineColor] = useState("green");
let series = [];
let xAxis = [];
if (hypervisorData && hypervisorData.length) {
series = [
{
name: 'Position',
data: hypervisorData?.map(item => item.period_gamma_netApr)
},
{
name: `If Held ${yieldPair[0] || ''}`,
data: hypervisorData?.map(item => item.period_hodl_token0)
},
{
name: `If Held ${yieldPair[1] || ''}`,
data: hypervisorData?.map(item => item.period_hodl_token1)
},
];

const series = [
{
name: 'Position',
data: hypervisorData?.map(item => item.period_gamma_netApr)
},
{
name: `If Held ${yieldPair[0] || ''}`,
data: hypervisorData?.map(item => item.period_hodl_token0)
},
{
name: `If Held ${yieldPair[1] || ''}`,
data: hypervisorData?.map(item => item.period_hodl_token1)
},
];

const xAxis = hypervisorData?.map((item) => {
// const formattedDate = moment.unix(Number(item.timestamp)).format('MMM DD');
return item.timestamp;
});
xAxis = hypervisorData?.map((item) => {
// const formattedDate = moment.unix(Number(item.timestamp)).format('MMM DD');
return item.timestamp;
});
}

const dataColors = [
'#facc15',
Expand Down
2 changes: 1 addition & 1 deletion src/components/vault/yield/YieldDepositModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const YieldDepositModal = (props) => {
const { localThemeModeStore } = useLocalThemeModeStore();
const chainId = useChainId();
const [ yieldStage, setYieldStage ] = useState('');
const [ stableRatio, setStableRatio ] = useState(10);
const [ stableRatio, setStableRatio ] = useState(20);
const [ minCollateral, setMinCollateral ] = useState(50);

const formattedSymbol = ethers.encodeBytes32String(symbol);
Expand Down
133 changes: 84 additions & 49 deletions src/components/vault/yield/YieldItem.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
} from '@heroicons/react/24/outline';

import {
useVaultAddressStore,
useSelectedYieldPoolStore,
} from "../../../store/Store";

import {
Expand Down Expand Up @@ -45,15 +45,27 @@ const YieldItem = (props) => {
handleOpenModal,
isPositive,
getYieldColor,
yieldRange
} = props;

const {
selectedYieldPool,
setSelectedYieldPool,
selectedYieldPoolData,
setSelectedYieldPoolData,
selectedYieldPoolDataLoading,
setSelectedYieldPoolDataLoading,
} = useSelectedYieldPoolStore();

const [ open, setOpen ] = useState('');
const chainId = useChainId();

const [ hypervisorData, setHypervisorData ] = useState({});
const [ hypervisorDataLoading, setHypervisorDataLoading ] = useState(false);
const [ hypervisorDataErr, setHypervisorDataErr ] = useState(false);

const [ modalData, setModalData ] = useState({});

const yieldVaultsInfo = chainId === arbitrumSepolia.id
? SepoliaVaults
: ArbitrumVaults;
Expand All @@ -62,23 +74,7 @@ const YieldItem = (props) => {
? SepoliaGammaVaults
: ArbitrumGammaVaults;

// const handleCloseModal = () => {
// // setYieldPair([]);
// // setYieldQuantities([]);
// // setYieldHypervisor('');
// setOpen('');
// setModalDataObj({})
// };

// const handleOpenModal = (useData, type) => {
// setModalDataObj(useData)
// // setYieldPair(pair);
// // setYieldQuantities(quantities);
// // setYieldHypervisor(hypervisor);
// setOpen(type);
// }

const dataPeriod = 14;
const dataPeriod = yieldRange;

const hypervisorAddress = hypervisor?.address.toLowerCase();

Expand All @@ -100,13 +96,42 @@ const YieldItem = (props) => {
if (hypervisor) {
getHypervisorData();
}
}, [hypervisor]);
}, [hypervisor, dataPeriod]);

useEffect(() => {
if (hypervisorData) {
const dataObj = {
yieldPair: [tokenA, tokenB],
hypervisor: hypervisor,
gammaUser: gammaUser,
hypervisorData: hypervisorData,
hypervisorDataLoading: hypervisorDataLoading,
gammaPosition: gammaPosition,
holdA: holdA,
holdB: holdB,
dataPeriod: dataPeriod,
apyBase: apyBase,
apyReward: apyReward,
apyTotal: apyTotal,
showBalance: showBalance,
yieldQuantities: quantities,
positionUser: userData,
};

setModalData(dataObj);

if (selectedYieldPool === usePair) {
setSelectedYieldPoolData(dataObj)
}
}
}, [hypervisorData, dataPeriod]);

const getHypervisorData = async () => {
const hyperAddress = hypervisor?.address;

try {
setHypervisorDataLoading(true);
setSelectedYieldPoolDataLoading(true);
const response = await axios.get(
`https://wire3.gamma.xyz/frontend/analytics/returns/chart?hypervisor_address=${hyperAddress}&chain=arbitrum&period=${dataPeriod}`
);
Expand All @@ -115,9 +140,11 @@ const YieldItem = (props) => {

setHypervisorData(useData);
setHypervisorDataLoading(false);
setSelectedYieldPoolDataLoading(false);
setHypervisorDataErr(false);
} catch (error) {
setHypervisorDataLoading(false);
setSelectedYieldPoolDataLoading(false);
setHypervisorDataErr(true);
console.log(error);
}
Expand Down Expand Up @@ -168,23 +195,7 @@ const YieldItem = (props) => {

const showBalance = '$'+balanceUSD?.toFixed(2) || '';

const modalData = {
yieldPair: [tokenA, tokenB],
hypervisor: hypervisor,
gammaUser: gammaUser,
hypervisorData: hypervisorData,
hypervisorDataLoading: hypervisorDataLoading,
gammaPosition: gammaPosition,
holdA: holdA,
holdB: holdB,
dataPeriod: dataPeriod,
apyBase: apyBase,
apyReward: apyReward,
apyTotal: apyTotal,
showBalance: showBalance,
yieldQuantities: quantities,
positionUser: userData,
};
const usePair = tokenA + tokenB;

return (
<>
Expand Down Expand Up @@ -250,10 +261,18 @@ const YieldItem = (props) => {
/>
</Typography>
</Tooltip>
<Typography variant="p" className={`text-sm ${getYieldColor(gammaPosition)}`}>
{isPositive(gammaPosition) ? ('+') : null}
{Math.abs(gammaPosition) >= 0 ? (`${gammaPosition.toFixed(3)}%`) : ('')}
</Typography>
{hypervisorDataLoading ? (
<>
<span className="block loading loading-bars loading-xs"></span>
</>
) : (
<>
<Typography variant="p" className={`text-sm ${getYieldColor(gammaPosition)}`}>
{isPositive(gammaPosition) ? ('+') : null}
{Math.abs(gammaPosition) >= 0 ? (`${gammaPosition.toFixed(3)}%`) : ('')}
</Typography>
</>
)}
</div>
<div>
<Tooltip
Expand All @@ -268,10 +287,18 @@ const YieldItem = (props) => {
/>
</Typography>
</Tooltip>
<Typography variant="p" className={`text-sm ${getYieldColor(holdA)}`}>
{isPositive(holdA) ? ('+') : null}
{Math.abs(holdA) >= 0 ? (`${holdA.toFixed(3)}%`) : ('')}
</Typography>
{hypervisorDataLoading ? (
<>
<span className="block loading loading-bars loading-xs"></span>
</>
) : (
<>
<Typography variant="p" className={`text-sm ${getYieldColor(holdA)}`}>
{isPositive(holdA) ? ('+') : null}
{Math.abs(holdA) >= 0 ? (`${holdA.toFixed(3)}%`) : ('')}
</Typography>
</>
)}
</div>
<div>
<Tooltip
Expand All @@ -286,10 +313,18 @@ const YieldItem = (props) => {
/>
</Typography>
</Tooltip>
<Typography variant="p" className={`text-sm ${getYieldColor(holdB)}`}>
{isPositive(holdB) ? ('+') : null}
{Math.abs(holdB) >= 0 ? (`${holdB.toFixed(3)}%`) : ('')}
</Typography>
{hypervisorDataLoading ? (
<>
<span className="block loading loading-bars loading-xs"></span>
</>
) : (
<>
<Typography variant="p" className={`text-sm ${getYieldColor(holdB)}`}>
{isPositive(holdB) ? ('+') : null}
{Math.abs(holdB) >= 0 ? (`${holdB.toFixed(3)}%`) : ('')}
</Typography>
</>
)}
</div>
</>

Expand All @@ -308,7 +343,7 @@ const YieldItem = (props) => {
<Button
variant="outline"
size="sm"
onClick={() => handleOpenModal(modalData, 'VIEW')}
onClick={() => handleOpenModal(usePair, modalData, 'VIEW')}
disabled={!balanceUSD}
>
View
Expand Down
Loading

0 comments on commit ab3e620

Please sign in to comment.