From 00f460e69d0c6033b733e50d9a4c64573fbcbe79 Mon Sep 17 00:00:00 2001 From: Emmyn5600 Date: Tue, 5 Nov 2024 20:21:34 +0200 Subject: [PATCH 1/4] fixed ui leaderboard partners component styles --- .env.example | 7 +++++ src/components/LeaderboardPartners.module.css | 23 +++++++------- src/components/LeaderboardPartners.tsx | 30 +++++++++---------- src/components/LeaderboardTotals.module.css | 2 +- yarn.lock | 21 ++++++++----- 5 files changed, 48 insertions(+), 35 deletions(-) create mode 100644 .env.example diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..850c6e7 --- /dev/null +++ b/.env.example @@ -0,0 +1,7 @@ +NEXT_PUBLIC_SOLANA_API='' +TWITTER_CLIENT_ID='' +TWITTER_CLIENT_SECRET='' +DISCORD_CLIENT_ID='' +DISCORD_CLIENT_SECRET='' +NEXTAUTH_SECRET= +NEXTAUTH_URL='' \ No newline at end of file diff --git a/src/components/LeaderboardPartners.module.css b/src/components/LeaderboardPartners.module.css index b0a3df8..038ead8 100644 --- a/src/components/LeaderboardPartners.module.css +++ b/src/components/LeaderboardPartners.module.css @@ -8,7 +8,7 @@ .headingParent { display: grid; - grid-template-columns: 50px 3fr 1fr 1fr; + grid-template-columns: 55px 3fr 1fr 1fr; align-items: center; padding: 12px 16px; gap: 16px; @@ -34,10 +34,10 @@ .row, .row1 { display: grid; - grid-template-columns: 5px 3fr 5fr 2fr; + grid-template-columns: 55px 3fr 1fr ; align-items: center; padding: 8px 16px; - gap: 16px; + gap: 10px; color: black; border-radius: 14px; width: 100%; @@ -52,15 +52,18 @@ } .text { - font-size: 22px; + font-size: 16px; font-weight: 600; color: #9B8D7D; - text-align: left; + margin-right: 1rem; + /* text-align: right; */ + /* min-width: 55px; */ } .rowChild { display: flex; align-items: center; + } .avatarImage { @@ -74,7 +77,7 @@ .textParent { display: flex; flex-direction: column; - gap: 4px; + gap: 2px; } .text1 { @@ -86,7 +89,7 @@ .text2 { color: #9B8D7D; font-size: 14px; - font-weight: bold; + font-weight: 600; } .textWrapper { @@ -148,7 +151,6 @@ opacity: 1; } -/* Optional: Add a small arrow at the bottom of tooltip */ .tooltip::after { content: ''; position: absolute; @@ -162,7 +164,6 @@ @media (max-width: 768px) { .headingParent, .row, .row1 { - grid-template-columns: 12px 1fr 0.8fr 0.8fr; padding: 8px 12px; gap: 12px; } @@ -196,6 +197,6 @@ } .textParent { - gap: 2px; + gap: 0px; } -} +} \ No newline at end of file diff --git a/src/components/LeaderboardPartners.tsx b/src/components/LeaderboardPartners.tsx index efb6561..d151722 100644 --- a/src/components/LeaderboardPartners.tsx +++ b/src/components/LeaderboardPartners.tsx @@ -1,5 +1,5 @@ import type { FC } from 'react'; -import { useState, useEffect } from 'react'; +import { useState, useEffect } from 'react'; import Image from "next/image"; import styles from './LeaderboardPartners.module.css'; import { useMediaQuery } from 'react-responsive'; @@ -36,7 +36,7 @@ const LeaderboardPartners: FC = () => { throw new Error('Failed to fetch data'); } const data = await response.json(); - + if (!data.partners?.length || !data.trustScores) { throw new Error('Invalid or empty data received'); } @@ -57,7 +57,7 @@ const LeaderboardPartners: FC = () => { } catch (err: any) { console.error('Fetch error:', err); setError(err.message); - + if (retryCount < MAX_RETRIES) { setTimeout(() => { setRetryCount(prev => prev + 1); @@ -109,7 +109,7 @@ const LeaderboardPartners: FC = () => {
TRUST SCORE
HOLDINGS
- + {isLoading ? ( Array(5).fill(0).map((_, index) => renderSkeletonRow(index)) ) : error ? ( @@ -121,14 +121,14 @@ const LeaderboardPartners: FC = () => { ) : ( partners.map((partner) => (
-
{partner.rank}
- Partner avatar{partner.rank}
+ Partner avatar
{partner.displayAddress}
@@ -138,15 +138,15 @@ const LeaderboardPartners: FC = () => {
{partner.trustScore === 0 ? (
- Null trust score - AI Marc is Calculating Trust + AI Marc is Calculating Trust
) : ( @@ -163,4 +163,4 @@ const LeaderboardPartners: FC = () => { ); }; -export default LeaderboardPartners; +export default LeaderboardPartners; \ No newline at end of file diff --git a/src/components/LeaderboardTotals.module.css b/src/components/LeaderboardTotals.module.css index 1ab8d92..1cd3fd1 100644 --- a/src/components/LeaderboardTotals.module.css +++ b/src/components/LeaderboardTotals.module.css @@ -43,7 +43,7 @@ position: relative; line-height: 32px; font-weight: 600; - font-size: 34px; + font-size: 24px; } .headingWrapper { diff --git a/yarn.lock b/yarn.lock index 8f256ee..544fb3b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1641,10 +1641,10 @@ dependencies: glob "7.1.7" -"@next/swc-win32-x64-msvc@13.5.7": +"@next/swc-darwin-arm64@13.5.7": version "13.5.7" - resolved "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.7.tgz" - integrity sha512-PLyD3Dl6jTTkLG8AoqhPGd5pXtSs8wbqIhWPQt3yEMfnYld/dGYuF2YPs3YHaVFrijCIF9pXY3+QOyvP23Zn7g== + resolved "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.7.tgz" + integrity sha512-7SxmxMex45FvKtRoP18eftrDCMyL6WQVYJSEE/s7A1AW/fCkznxjEShKet2iVVzf89gWp8HbXGaL4hCaseux6g== "@ngraveio/bc-ur@^1.0.0", "@ngraveio/bc-ur@^1.1.5": version "1.1.13" @@ -1721,6 +1721,11 @@ resolved "https://registry.npmjs.org/@panva/hkdf/-/hkdf-1.2.1.tgz" integrity sha512-6oclG6Y3PiDFcoyk8srjLfVKyMfVCKJ27JwNPViuXziFpmdz+MZnZN/aKY0JGXgYuO/VghU0jcOAZgWXZ1Dmrw== +"@parcel/watcher-darwin-arm64@2.4.1": + version "2.4.1" + resolved "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.4.1.tgz" + integrity sha512-ln41eihm5YXIY043vBrrHfn94SIBlqOWmoROhsMVTSXGh0QahKGy77tfEywQ7v3NywyxBBkGIfrWRHm0hsKtzA== + "@parcel/watcher-wasm@^2.4.1": version "2.4.1" resolved "https://registry.npmjs.org/@parcel/watcher-wasm/-/watcher-wasm-2.4.1.tgz" @@ -1730,11 +1735,6 @@ micromatch "^4.0.5" napi-wasm "^1.1.0" -"@parcel/watcher-win32-x64@2.4.1": - version "2.4.1" - resolved "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.4.1.tgz" - integrity sha512-+DvS92F9ezicfswqrvIRM2njcYJbd5mb9CUgtrHCHmvn7pPPa+nMDRu1o1bYYz/l5IB2NVGNJWiH7h1E58IF2A== - "@parcel/watcher@^2.4.1": version "2.4.1" resolved "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.4.1.tgz" @@ -5833,6 +5833,11 @@ fs.realpath@^1.0.0: resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz" integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw== +fsevents@^2.3.2, fsevents@~2.3.2: + version "2.3.2" + resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz" + integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== + function-bind@^1.1.1, function-bind@^1.1.2: version "1.1.2" resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz" From 3fbad051abc5f6cc3b749d96bdcdec4037626645 Mon Sep 17 00:00:00 2001 From: Emmyn5600 Date: Tue, 5 Nov 2024 20:47:09 +0200 Subject: [PATCH 2/4] fixed leaderboard home page styles --- src/components/LeaderboardPartners.tsx | 114 ++++++++++++------------- src/views/home/index.module.css | 50 ++++++++++- src/views/home/index.tsx | 19 +++-- 3 files changed, 112 insertions(+), 71 deletions(-) diff --git a/src/components/LeaderboardPartners.tsx b/src/components/LeaderboardPartners.tsx index d151722..04cb0fe 100644 --- a/src/components/LeaderboardPartners.tsx +++ b/src/components/LeaderboardPartners.tsx @@ -80,38 +80,19 @@ const LeaderboardPartners: FC = () => { return value.toFixed(2); }; - const renderSkeletonRow = (index: number) => ( -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ const Loader = () => ( +
+
); + return (
-
-
PARTNER
-
-
TRUST SCORE
-
HOLDINGS
-
+ {isLoading ? ( - Array(5).fill(0).map((_, index) => renderSkeletonRow(index)) + ) : error ? (
Error loading partners. Retrying... ({retryCount}/{MAX_RETRIES}) @@ -119,45 +100,56 @@ const LeaderboardPartners: FC = () => { ) : !partners?.length ? (
No partners found
) : ( - partners.map((partner) => ( -
-
-
{partner.rank}
- Partner avatar -
-
{partner.displayAddress}
-
Partner
-
-
-
- {partner.trustScore === 0 ? ( -
+ <> +
+
PARTNER
+
+
TRUST SCORE
+
HOLDINGS
+
+ { + partners.map((partner) => ( +
+
+
{partner.rank}
Null trust score - - AI Marc is Calculating Trust - +
+
{partner.displayAddress}
+
Partner
+
- ) : ( -
{partner.trustScore.toFixed(1)}
- )} -
-
- {formatHoldings(partner.holdings)} -
-
- )) +
+ {partner.trustScore === 0 ? ( +
+ Null trust score + + AI Marc is Calculating Trust + +
+ ) : ( +
{partner.trustScore.toFixed(1)}
+ )} +
+
+ {formatHoldings(partner.holdings)} +
+
+ )) + } + + )}
); diff --git a/src/views/home/index.module.css b/src/views/home/index.module.css index b6634de..dc064a1 100644 --- a/src/views/home/index.module.css +++ b/src/views/home/index.module.css @@ -1,4 +1,4 @@ -.container { +/* .container { width: 100%; min-height: 100vh; display: flex; @@ -77,4 +77,52 @@ .content { padding: 0 8px; } +} */ + +.container { + width: 100%; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + padding: 32px 16px; +} + +.content { + width: 100%; + max-width: 800px; + margin: 0 auto; +} + +.title { + font-size: 34px; + line-height: 42px; + font-weight: 600; + color: #242424; + margin-bottom: 32px; +} + +.section { + margin-bottom: 32px; +} + +.leaderboardWrapper { + position: relative; + width: 100%; +} + +@media (max-width: 768px) { + .container { + padding: 24px 16px; + } + + .content { + padding: 0; + } + + .title { + font-size: 28px; + line-height: 36px; + margin-bottom: 24px; + } } \ No newline at end of file diff --git a/src/views/home/index.tsx b/src/views/home/index.tsx index 5cad2c7..5b593be 100644 --- a/src/views/home/index.tsx +++ b/src/views/home/index.tsx @@ -1,5 +1,4 @@ -// FILE: src/views/HomeView.tsx -import { FC, useState } from 'react'; +import { FC } from 'react'; import styles from './index.module.css'; import LeaderboardTotals from '../../components/LeaderboardTotals'; import LeaderboardPartners from '../../components/LeaderboardPartners'; @@ -8,14 +7,16 @@ export const HomeView: FC = () => { return (
-
-

- Leaderboard -

+

+ Leaderboard +

+ +
-
- -
+
+ +
+
From 28d65611f01fc020de685157146cd4357116710d Mon Sep 17 00:00:00 2001 From: Emmyn5600 Date: Tue, 5 Nov 2024 21:07:11 +0200 Subject: [PATCH 3/4] fix leader-board layout styles --- src/components/LeaderboardPartners.tsx | 2 - src/components/LeaderboardTotals.module.css | 7 +- src/views/home/index.module.css | 82 +-------------------- 3 files changed, 7 insertions(+), 84 deletions(-) diff --git a/src/components/LeaderboardPartners.tsx b/src/components/LeaderboardPartners.tsx index 04cb0fe..daaeac4 100644 --- a/src/components/LeaderboardPartners.tsx +++ b/src/components/LeaderboardPartners.tsx @@ -89,8 +89,6 @@ const LeaderboardPartners: FC = () => { return (
- - {isLoading ? ( ) : error ? ( diff --git a/src/components/LeaderboardTotals.module.css b/src/components/LeaderboardTotals.module.css index 1cd3fd1..75e91f0 100644 --- a/src/components/LeaderboardTotals.module.css +++ b/src/components/LeaderboardTotals.module.css @@ -1,5 +1,6 @@ .frameParent { - width: 100%; + width: 579px; /* Set default width */ + max-width: 100%; position: relative; border-radius: 14px; background: linear-gradient(180deg, #f98c13, #ffaf03); @@ -65,6 +66,10 @@ } @media (max-width: 768px) { + .frameParent { + width: 100%; + padding: 16px; + } .instanceParent { flex-direction: row; gap: 4px; diff --git a/src/views/home/index.module.css b/src/views/home/index.module.css index dc064a1..7aa7ca4 100644 --- a/src/views/home/index.module.css +++ b/src/views/home/index.module.css @@ -1,84 +1,3 @@ -/* .container { - width: 100%; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 0 8px; -} - -.content { - width: 100%; - max-width: 600px; - margin: 0 auto; -} - -.title { - font-size: 34px; - line-height: 42px; - font-weight: 600; - color: #242424; - margin-bottom: 24px; -} - -.buttonParent { - border-radius: 14px; - background-color: #e8e3d6; - overflow: hidden; - display: flex; - flex-direction: row; - align-items: left; - justify-content: flex-start; - padding: 4px; - margin-bottom: 24px; -} - -.button { - width: 110px; - border-radius: 14px; - background-color: #b5ad94; - height: 38px; - overflow: hidden; - flex-shrink: 0; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - padding: 8px 14px; - box-sizing: border-box; - max-width: 600px; - color: #FFFFFF; -} - -.button1 { - width: 110px; - border-radius: 14px; - background-color: transparent; - height: 38px; - overflow: hidden; - flex-shrink: 0; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - padding: 8px 14px; - box-sizing: border-box; - max-width: 600px; - cursor: pointer; - color: #9b8d7d; -} - -@media (max-width: 768px) { - .container { - padding: 0; - } - - .content { - padding: 0 8px; - } -} */ - .container { width: 100%; min-height: 100vh; @@ -104,6 +23,7 @@ .section { margin-bottom: 32px; + width: 100%; } .leaderboardWrapper { From 371d6d1b134ad0a9944d13eca65afb1a156f1e5d Mon Sep 17 00:00:00 2001 From: Emmyn5600 Date: Tue, 5 Nov 2024 21:12:24 +0200 Subject: [PATCH 4/4] change the bg of non-colored rows --- src/components/LeaderboardPartners.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/LeaderboardPartners.module.css b/src/components/LeaderboardPartners.module.css index 038ead8..89c687c 100644 --- a/src/components/LeaderboardPartners.module.css +++ b/src/components/LeaderboardPartners.module.css @@ -41,6 +41,7 @@ color: black; border-radius: 14px; width: 100%; + margin-bottom: 6px; } .row {