Feat(affiliates): Initial program implementation #1019
Conversation
|
@M-Ivan is attempting to deploy a commit to the dYdX Trading Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
.env.example
Outdated
| @@ -1,4 +1,5 @@ | |||
| VITE_BASE_URL= | |||
| VITE_AFFILIATES_SERVER_BASE_URL="http://localhost:3000" | |||
There was a problem hiding this comment.
It would be better to have this endpoint added here!
https://github.com/dydxopsdao/v4-web/blob/main/public/configs/v1/env.json#L308
and then you can access it via useEndpointsConfig
| }, []); | ||
|
|
||
| const fetchProgramStats = async () => { | ||
| const res = await axios.get(`http://localhost:3000/v1/community/program-stats`); |
There was a problem hiding this comment.
should we use VITE_AFFILIATES_SERVER_BASE_URL or endpoint config here for base url?
There was a problem hiding this comment.
Probably creating an additional config for the affiliate server is worth it. I will check if its possible to adapt it and worst case we can call the BASE env var here.
There was a problem hiding this comment.
The config is not working for some reasson, also i cannot seem to be able to get the .env file read correctly in my local.
I am leaving the base url call atm.
There was a problem hiding this comment.
Weird, ok we can leave it as is, and I can update it as needed as a follow up.
| fetchLastUpdated(); | ||
| }, []); | ||
|
|
||
| const fetchProgramStats = async () => { |
There was a problem hiding this comment.
For these fetches, lets put it all into a react-query hook, see:
v4-web/src/hooks/useAffiliatesInfo.ts
Line 13 in 5dcfff4
That way we don't need to do a fetch on every page load, and the hook can be reusable!
There was a problem hiding this comment.
Added hooks for leaderboard, communityChart and integrated some fetchs into the affiliates info hook.
|
|
||
| const fetchAffiliateStats = async () => { | ||
| // Comment for testing with local data | ||
| const response = await axios.post('http://localhost:3000/v1/leaderboard/search', { |
There was a problem hiding this comment.
Lets leverage react-query here as well
src/views/Affiliates/LastUpdated.tsx
Outdated
| return () => clearInterval(timer); // Cleanup the timer | ||
| }, []); | ||
|
|
||
| // Helper function to calculate "X mins ago" |
There was a problem hiding this comment.
for these time formating I wonder if we can leverage:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat
e.g
function timeAgo(timestamp: Date): string {
const diffInSeconds = Math.floor((Date.now() - timestamp.getTime()) / 1000);
const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
if (diffInSeconds < 60) {
return 'updated just now';
} else if (diffInSeconds < 3600) {
const minutes = Math.floor(diffInSeconds / 60);
return `updated ${rtf.format(-minutes, 'minute')}`;
} else if (diffInSeconds < 86400) {
const hours = Math.floor(diffInSeconds / 3600);
return `updated ${rtf.format(-hours, 'hour')}`;
} else {
const days = Math.floor(diffInSeconds / 86400);
return `updated ${rtf.format(-days, 'day')}`;
}
}
src/views/Affiliates/LastUpdated.tsx
Outdated
| useEffect(() => { | ||
| const timer = setInterval(() => { | ||
| setCurrentTime(new Date()); | ||
| }, 60000); // Update every 60 seconds |
There was a problem hiding this comment.
nit: can move numbers into a constant at the time of the file
|
EDIT: This PR now depends on this other PR dydxprotocol/v4-localization#761 where I added a translation for chart empty state in affiliate program. |
…ates-view-initial
|
Can this PR be closed in favor of #1181 ? |
Pull request
This PR implements the foundational UI for the rewards program on the dYdX protocol. It is dependant on (v4-Localization-pr).
EDIT: This PR now depends on this other PR dydxprotocol/v4-localization#711
Note:
Components changes in this PR are extensions of the existing components, to avoid the risk of breaking changes on other views.
Pending implementations:
Views
Affiliates/AffiliateLeaderboard.tsx: Leaderboard for affiliates, uses load more pagination strategy.AffiliateStats.tsx: Card with the current account stats as an affiliate for the dYdX protocolProgramCard.tsx: Card with VIP program info.CommunityChart.tsx: A reactive chart displaying rewards program historical statsCriteriaModal.tsx: A popup dialog with information for the different applicable tiers in the rewards programLastUpdated.tsx: A reactive label that displays the last time the leaderboard synced with the historical dataProgramStats.tsx: Card with rewards program historical statsStatBox.tsx: Reusable cell component being used inProgramStats,CriteriaModalandAffiliateStats.Types
affiliates.tsIAffiliateStats: Interface for a specific affiliate different stats.Pages
affiliates/AffiliatesPage.tsx: Routable page for the affiliates UI (parent of all affiliate views).Testing instructions
To test the feature out, you will require to setup v4-localization from this PR branch. After that you can navigate to
/affiliatesand the page will display.