Issue 4398 - How to buy $JOY #4513
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
chrlschwb
added
community-dev
There was a problem hiding this comment.
The code is good, but my main concern with this PR is actually on www.joystream.org
- There is no id on the page so the "Learn how to earn JOY’s: link can't link to the "EARN" section and the "Buy Joy tokens" link can't link to the "EXCHANGES" section like what the design implies. Instead they both link to the top of the page.
- The MEXC link on www.joystream.org is to https://www.mexc.com/ this increase the risk of users buying the wrong token from Drawshop.
IMO until this is addressed on www.joystream.org Pioneer should link "Buy Joy tokens" to https://www.mexc.com/exchange/JOYSTREAM_USDT?_from=market (just like the banner). WDYT @dmtrjsg ?
Also I think "Learn how to earn JOY’s:" should link to "https://www.joystream.org/token#earn" even though the anchor doesn't exist yet it should be created (even if it isn't we still link to the the right page).
| &.popper-light { | ||
| background-color: ${Colors.Black[75]}; | ||
| border-color: ${Colors.Black[300]}; | ||
| } | ||
| &.popper-light a { | ||
| color: ${Colors.Blue[500]}; | ||
| font-weight: 700; | ||
| } | ||
| &.popper-light:after { | ||
| background-color: ${Colors.Black[75]}; | ||
| border-color: ${Colors.Black[300]}; | ||
| } | ||
|
|
There was a problem hiding this comment.
To stay consistent with the codebase instead of adding this class add this in packages/ui/src/memberships/components/ProfileComponent.tsx:
const StyledTooltip = styled(Tooltip)`
background-color: ${Colors.Black[75]};
border-color: ${Colors.Black[300]};
a {
color: ${Colors.Blue[500]};
font-weight: 700;
}
:after {
background-color: ${Colors.Black[75]};
border-color: ${Colors.Black[300]};
}
`Then use:
<StyledTooltip
tooltipLinkText="Learn how to earn JOY’s"
tooltipLinkURL="https://www.joystream.org/token/"
placement="top-start"
>
|
Chasing with Edwin: link> |
Co-authored-by: Theophile Sandoz <theophile.sandoz@gmail.com>
| @@ -52,6 +53,7 @@ export const MyAccounts = () => { | |||
| const { total, transferable, locked, recoverable, vestingTotal, vestedClaimable, vestingLocked } = | |||
| useMyTotalBalances() | |||
| const { hasAccounts, isLoading } = useMyAccounts() | |||
| const [shouldDismissBanner, setShouldDismissBanner] = useState(false) | |||
There was a problem hiding this comment.
Based on this:
The dismissed information should be stored in the localstorage instead of the component state:
| const [shouldDismissBanner, setShouldDismissBanner] = useState(false) | |
| const [shouldDismissBanner, setShouldDismissBanner] = useLocalStorage<boolean>('buy-joy-banner') ?? false |
| </a> | ||
| under "JOYSTREAM" ticker. | ||
| </TextMedium> | ||
| <TextLink href="https://www.joystream.org/token/" target="_blank"> |
There was a problem hiding this comment.
This link should point to the EARN section too:
| <TextLink href="https://www.joystream.org/token/" target="_blank"> | |
| <TextLink href="https://www.joystream.org/token#earn" target="_blank"> |
| <a href="https://www.mexc.com/exchange/JOYSTREAM_USDT?_from=market" target="_blank"> | ||
| MEXC exchange{' '} | ||
| </a> |
There was a problem hiding this comment.
For this link please use a LinkButtonLinkStyles component from @/common/components/buttons/LinkButtons and move the exchange out of the link to follow the design better:
Solution to this issue. #4398
QA:
Preview