Skip to content

Refactor MarketSelector component to improve code clarity and remove … #1102

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jourdanDunkley merged 1 commit into from
Sep 2, 2025
Merged

Refactor MarketSelector component to improve code clarity and remove … #1102

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 0 additions & 73 deletions packages/ui/components/veion/MarketSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,11 +57,9 @@ const MarketSelector = ({ isAcknowledged }: MarketSelectorProps) => {
const { switchChain, isPending: isSwitchingNetwork } = useSwitchChain();
const isWrongNetwork = chain?.id !== chainId;

// Get market data
const { marketData: rawMarketData, isLoading: isMarketDataLoading } =
useMarketData(poolId, currentChain);

// State variables
const [selectedMarket, setSelectedMarket] = useState<string>('');
const [selectedSide, setSelectedSide] = useState<'' | 'borrow' | 'supply'>(
''
Expand All @@ -70,19 +68,16 @@ const MarketSelector = ({ isAcknowledged }: MarketSelectorProps) => {
const [incentiveAmount, setIncentiveAmount] = useState<string>('');
const [maxDepositKey, setMaxDepositKey] = useState<number>(0);

// Extract all market addresses from raw market data
const marketAddresses = useMemo(() => {
if (!rawMarketData || !rawMarketData.length) return [];
return rawMarketData.map((market) => market.cTokenAddress);
}, [rawMarketData]);

// Get votes data for all markets
const { getMarketVotes, isLoading: isVotesLoading } = useMarketVotes(
chainId,
marketAddresses
);

// Define default token addresses
const defaultTokenAddresses = useMemo(
() => ({
USDC:
Expand All @@ -101,7 +96,6 @@ const MarketSelector = ({ isAcknowledged }: MarketSelectorProps) => {
[chainId]
);

// Fetch balances for default tokens
const { data: usdcBalance } = useBalance({
address,
token: defaultTokenAddresses.USDC as `0x${string}`,
Expand All @@ -123,24 +117,6 @@ const MarketSelector = ({ isAcknowledged }: MarketSelectorProps) => {
query: { enabled: !!address }
});

// Debug ION balance fetching
useEffect(() => {
console.log('=== ION BALANCE DEBUG ===');
console.log('Chain ID:', chainId);
console.log('ION Address:', defaultTokenAddresses.ION);
console.log('User Address:', address);
console.log('ION Balance Data:', ionBalance);
console.log('ION Balance Error:', ionBalanceError);
console.log('=== END ION DEBUG ===');
}, [
chainId,
defaultTokenAddresses.ION,
address,
ionBalance,
ionBalanceError
]);

// Default reward tokens that are always available
const defaultRewardTokens: RewardTokenInfo[] = useMemo(
() => [
{
Expand Down Expand Up @@ -180,7 +156,6 @@ const MarketSelector = ({ isAcknowledged }: MarketSelectorProps) => {
[defaultTokenAddresses, usdcBalance, wethBalance, ionBalance]
);

// Update the useMarketIncentives hook usage to include getMarketIncentivesUsd
const {
getMarketIncentives,
getMarketIncentivesUsd,
Expand All @@ -195,37 +170,19 @@ const MarketSelector = ({ isAcknowledged }: MarketSelectorProps) => {
selectedMarket
);

// Always ensure default tokens are available, supplement with hook tokens
const rewardTokensInfo = useMemo(() => {
// Always start with our default tokens
let finalTokens = [...defaultRewardTokens];

// Debug logging
console.log('=== TOKEN DEBUG ===');
console.log('Default tokens count:', defaultRewardTokens.length);
console.log(
'Default tokens:',
defaultRewardTokens.map((t) => `${t.symbol} (${t.balance})`)
);
console.log('Hook tokens count:', hookRewardTokens.length);
console.log(
'Hook tokens:',
hookRewardTokens.map((t) => `${t.symbol} (${t.balance})`)
);

// Only merge if hook has tokens, otherwise stick with defaults
if (hookRewardTokens.length > 0) {
const combinedTokens = [...defaultRewardTokens];

// Add additional tokens from the hook (e.g., EUSD)
hookRewardTokens.forEach((hookToken) => {
const existingIndex = combinedTokens.findIndex(
(token) =>
token.address.toLowerCase() === hookToken.address.toLowerCase()
);

if (existingIndex >= 0) {
// Update existing token with hook balance data, but preserve our token metadata
combinedTokens[existingIndex] = {
...combinedTokens[existingIndex],
balance:
Expand All @@ -234,25 +191,16 @@ const MarketSelector = ({ isAcknowledged }: MarketSelectorProps) => {
: combinedTokens[existingIndex].balance
};
} else {
// Add new token from hook (like EUSD)
combinedTokens.push(hookToken);
}
});

finalTokens = combinedTokens;
}

console.log('Final tokens count:', finalTokens.length);
console.log(
'Final tokens:',
finalTokens.map((t) => `${t.symbol} (${t.balance})`)
);
console.log('=== END DEBUG ===');

return finalTokens;
}, [defaultRewardTokens, hookRewardTokens]);

// Incentive submission hook
const {
submitIncentive,
isApproving,
Expand All @@ -261,20 +209,17 @@ const MarketSelector = ({ isAcknowledged }: MarketSelectorProps) => {
error: submissionError
} = useIncentiveSubmission();

// Transform raw market data to include votes, incentives and USD values
const marketData = useMemo(() => {
if (!rawMarketData) return [];

return rawMarketData.map((market) => {
const marketAddress = market.cTokenAddress;

// Get votes and incentives data
const supplyVotes = getMarketVotes(marketAddress, 'supply');
const borrowVotes = getMarketVotes(marketAddress, 'borrow');
const supplyIncentives = getMarketIncentives(marketAddress, 'supply');
const borrowIncentives = getMarketIncentives(marketAddress, 'borrow');

// Get incentives USD values
const supplyIncentivesUsd = getMarketIncentivesUsd(
marketAddress,
'supply'
Expand Down Expand Up @@ -321,7 +266,6 @@ const MarketSelector = ({ isAcknowledged }: MarketSelectorProps) => {
getMarketIncentivesUsd
]);

// Market options for dropdown
const marketOptions = useMemo(() => {
if (!marketData) return [];
return marketData.map((market) => ({
Expand All @@ -332,45 +276,37 @@ const MarketSelector = ({ isAcknowledged }: MarketSelectorProps) => {
}));
}, [marketData]);

// Selected market data
const selectedMarketData = useMemo(() => {
return marketData?.find(
(market) => market.cTokenAddress === selectedMarket
);
}, [marketData, selectedMarket]);

// Handle token selection change
const handleTokenChange = (token: string) => {
const tokenInfo = rewardTokensInfo.find((t) => t.symbol === token);
if (tokenInfo) {
setSelectedToken(tokenInfo);
}
};

// Update the side selection handler
const handleSideChange = (value: string) => {
const newSide = value as 'borrow' | 'supply';
setSelectedSide(newSide);
// Reset token when side changes
setSelectedToken(undefined);
setIncentiveAmount('');
};

// Update the market selection handler
const handleMarketChange = (value: string) => {
setSelectedMarket(value);
// Reset side, token, and amount when market changes
setSelectedSide('');
setSelectedToken(undefined);
setIncentiveAmount('');
};

// Handle incentive amount input
const handleInput = (val: string) => {
setIncentiveAmount(val);
};

// Handle form submission
const { data: tokenDecimals } = useReadContract({
address: selectedToken?.address as `0x${string}`,
abi: erc20Abi,
Expand Down Expand Up @@ -423,7 +359,6 @@ const MarketSelector = ({ isAcknowledged }: MarketSelectorProps) => {
return;
}

// Get the bribe address for the selected market and side
const bribeAddress = getBribeAddress(
selectedMarket,
selectedSide
Expand All @@ -438,13 +373,11 @@ const MarketSelector = ({ isAcknowledged }: MarketSelectorProps) => {
return;
}

// Start the process
toast({
title: 'Processing',
description: 'Starting incentive submission process...'
});

// Send the incentive - network switching will happen first if needed
const result = await submitIncentive({
bribeAddress,
tokenAddress: selectedToken.address as `0x${string}`,
Expand All @@ -466,7 +399,6 @@ const MarketSelector = ({ isAcknowledged }: MarketSelectorProps) => {
variant: 'destructive'
});

// If network switching failed, show additional guidance
if (result.error?.includes('network')) {
toast({
title: 'Network Error',
Expand All @@ -490,7 +422,6 @@ const MarketSelector = ({ isAcknowledged }: MarketSelectorProps) => {
}
}, [rewardTokensInfo, selectedToken]);

// Custom formatter for USD values
const formatUsd = (value: number) => {
if (!value || value === 0) return '$0.00';
if (value < 0.01) return '<$0.01';
Expand Down Expand Up @@ -642,8 +573,6 @@ const MarketSelector = ({ isAcknowledged }: MarketSelectorProps) => {

{selectedMarket && selectedMarketData ? (
<div className="space-y-4">
{/* Market Balances table remains the same... */}

<div className="bg-black/30 rounded-md p-3 space-y-2">
<h3 className="text-sm font-medium text-white/80 flex items-center gap-2">
<LineChart
Expand Down Expand Up @@ -691,7 +620,6 @@ const MarketSelector = ({ isAcknowledged }: MarketSelectorProps) => {
})}
</span>
</td>
{/* Updated incentives cell with USD value */}
<td className="bg-black/20 p-2 border-t border-white/5">
<div className="flex flex-col">
<span className="text-purple-400 font-medium">
Expand Down Expand Up @@ -730,7 +658,6 @@ const MarketSelector = ({ isAcknowledged }: MarketSelectorProps) => {
})}
</span>
</td>
{/* Updated incentives cell with USD value */}
<td className="bg-black/20 p-2 border-t border-white/5">
<div className="flex flex-col">
<span className="text-purple-400 font-medium">
Expand Down