Skip to content
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

fix(mfi-v2-ui): copy referral link #277

Merged
merged 5 commits into from
Oct 12, 2023
Merged

fix(mfi-v2-ui): copy referral link #277

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6aad4cc
fix: prepend mfi.gg url to referral link copy
chambaz Oct 12, 2023
7e48de6
feat: referral link copy success state
chambaz Oct 12, 2023
514b7ca
feat: copy referral link (mobile)
chambaz Oct 12, 2023
508ec23
feat: switch referral code logic to use CopyToClipboard package
chambaz Oct 12, 2023
c3d7744
Merge branch 'main' into fix/referral-code
chambaz Oct 12, 2023
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
2 changes: 2 additions & 0 deletions apps/marginfi-v2-ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@
"next": "13.4.19",
"next-pwa": "^5.6.0",
"react": "18.2.0",
"react-copy-to-clipboard": "^5.1.0",
"react-dom": "18.2.0",
"react-hotkeys-hook": "^4.4.1",
"react-katex": "^3.0.1",
Expand All @@ -68,6 +69,7 @@
"@types/node": "18.11.18",
"@types/numeral": "^2.0.2",
"@types/react": "18.0.26",
"@types/react-copy-to-clipboard": "^5.0.5",
"@types/react-dom": "18.0.10",
"@types/react-katex": "^3.0.0",
"@types/uuid": "^9.0.2",
Expand Down
58 changes: 29 additions & 29 deletions apps/marginfi-v2-ui/src/pages/points.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { useRouter } from "next/router";
import { getFavoriteDomain } from "@bonfida/spl-name-service";
import { Connection, PublicKey } from "@solana/web3.js";
import { LeaderboardRow, fetchLeaderboardData } from "@mrgnlabs/marginfi-v2-ui-state";
import { CopyToClipboard } from "react-copy-to-clipboard";
import { useUserProfileStore } from "~/store";
import { useWalletContext } from "~/hooks/useWalletContext";
import { PageHeader } from "~/components/common/PageHeader";
Expand Down Expand Up @@ -37,14 +38,6 @@ const Points: FC = () => {
const referralCode = useMemo(() => routerQuery.referralCode as string | undefined, [routerQuery.referralCode]);
const [isReferralCopied, setIsReferralCopied] = useState(false);

const handleReferralCopy = useCallback(() => {
if (userPointsData.referralLink) {
navigator.clipboard.writeText(`https://www.mfi.gg/refer/${userPointsData.referralLink}`);
setIsReferralCopied(true);
setTimeout(() => setIsReferralCopied(false), 2000);
}
}, [userPointsData.referralLink]);

const resolveDomain = async (connection: Connection, user: PublicKey) => {
try {
const { reverse } = await getFavoriteDomain(connection, user);
Expand Down Expand Up @@ -96,29 +89,36 @@ const Points: FC = () => {
How do points work?
</Button>
{currentFirebaseUser && (
<Button
className={`normal-case text-lg font-aeonik w-[92%] min-h-[60px] rounded-[45px] gap-2 whitespace-nowrap min-w-[260px] max-w-[260px]`}
style={{
backgroundImage: userPointsData.isCustomReferralLink
? "radial-gradient(ellipse at center, #fff 0%, #fff 10%, #DCE85D 60%, #DCE85D 100%)"
: "none",
backgroundColor: userPointsData.isCustomReferralLink ? "transparent" : "rgb(227, 227, 227)",

border: "none",
color: "black",
zIndex: 10,
<CopyToClipboard
text={`https://www.mfi.gg/refer/${userPointsData.referralLink}`}
onCopy={() => {
setIsReferralCopied(true);
setTimeout(() => setIsReferralCopied(false), 2000);
}}
onClick={handleReferralCopy}
>
{isReferralCopied
? "Link copied"
: `${
userPointsData.isCustomReferralLink
? userPointsData.referralLink?.replace("https://", "")
: "Copy referral link"
}`}
{isReferralCopied ? <CheckIcon /> : <FileCopyIcon />}
</Button>
<Button
className={`normal-case text-lg font-aeonik w-[92%] min-h-[60px] rounded-[45px] gap-2 whitespace-nowrap min-w-[260px] max-w-[260px]`}
style={{
backgroundImage: userPointsData.isCustomReferralLink
? "radial-gradient(ellipse at center, #fff 0%, #fff 10%, #DCE85D 60%, #DCE85D 100%)"
: "none",
backgroundColor: userPointsData.isCustomReferralLink ? "transparent" : "rgb(227, 227, 227)",

border: "none",
color: "black",
zIndex: 10,
}}
>
{isReferralCopied
? "Link copied"
: `${
userPointsData.isCustomReferralLink
? userPointsData.referralLink?.replace("https://", "")
: "Copy referral link"
}`}
{isReferralCopied ? <CheckIcon /> : <FileCopyIcon />}
</Button>
</CopyToClipboard>
)}
</div>
<div className="w-4/5 text-center text-[#868E95] text-xs flex justify-center gap-1">
Expand Down
61 changes: 33 additions & 28 deletions apps/marginfi-v2-ui/src/pages/portfolio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { useEffect, useMemo } from "react";
import { useEffect, useMemo, useState, useCallback } from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import FileCopyIcon from "@mui/icons-material/FileCopy";
import CheckIcon from "@mui/icons-material/Check";
import { useConnection } from "@solana/wallet-adapter-react";

import { CopyToClipboard } from "react-copy-to-clipboard";
import { useMrgnlendStore, useUserProfileStore } from "~/store";
import config from "~/config/marginfi";
import { useWalletContext } from "~/hooks/useWalletContext";
Expand Down Expand Up @@ -41,6 +42,7 @@ const PortfolioPage = () => {
]);

const referralCode = useMemo(() => routerQuery.referralCode as string | undefined, [routerQuery.referralCode]);
const [isReferralCopied, setIsReferralCopied] = useState(false);

const lendingBanks = useMemo(
() =>
Expand Down Expand Up @@ -89,9 +91,7 @@ const PortfolioPage = () => {
<MobileAccountSummary />
<EmissionsBanner />
<MobilePortfolioOverview />
{!connected ? (
null
) : currentFirebaseUser ? (
{!connected ? null : currentFirebaseUser ? (
<PointsOverview userPointsData={userPointsData} />
) : hasUser === null ? (
<PointsCheckingUser />
Expand All @@ -117,31 +117,36 @@ const PortfolioPage = () => {
How do points work?
</Button>
{currentFirebaseUser && (
<Button
className={`normal-case text-lg font-aeonik w-[92%] min-h-[60px] rounded-[45px] gap-2 whitespace-nowrap min-w-[260px] max-w-[260px]`}
style={{
backgroundImage: userPointsData.isCustomReferralLink
? "radial-gradient(ellipse at center, #fff 0%, #fff 10%, #DCE85D 60%, #DCE85D 100%)"
: "none",
backgroundColor: userPointsData.isCustomReferralLink ? "transparent" : "rgb(227, 227, 227)",

border: "none",
color: "black",
zIndex: 10,
}}
onClick={() => {
if (userPointsData.referralLink) {
navigator.clipboard.writeText(userPointsData.referralLink);
}
<CopyToClipboard
text={`https://www.mfi.gg/refer/${userPointsData.referralLink}`}
onCopy={() => {
setIsReferralCopied(true);
setTimeout(() => setIsReferralCopied(false), 2000);
}}
>
{`${
userPointsData.isCustomReferralLink
? userPointsData.referralLink?.replace("https://", "")
: "Copy referral link"
}`}
<FileCopyIcon />
</Button>
<Button
className={`normal-case text-lg font-aeonik w-[92%] min-h-[60px] rounded-[45px] gap-2 whitespace-nowrap min-w-[260px] max-w-[260px]`}
style={{
backgroundImage: userPointsData.isCustomReferralLink
? "radial-gradient(ellipse at center, #fff 0%, #fff 10%, #DCE85D 60%, #DCE85D 100%)"
: "none",
backgroundColor: userPointsData.isCustomReferralLink ? "transparent" : "rgb(227, 227, 227)",

border: "none",
color: "black",
zIndex: 10,
}}
>
{isReferralCopied
? "Link copied"
: `${
userPointsData.isCustomReferralLink
? userPointsData.referralLink?.replace("https://", "")
: "Copy referral link"
}`}
{isReferralCopied ? <CheckIcon /> : <FileCopyIcon />}
</Button>
</CopyToClipboard>
)}
</div>
<div className="text-center text-[#868E95] text-xs flex justify-center gap-1">
Expand Down
15 changes: 15 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8346,6 +8346,13 @@
resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==

"@types/react-copy-to-clipboard@^5.0.5":
version "5.0.5"
resolved "https://registry.yarnpkg.com/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.5.tgz#f61fbb76ad22f50101534ddb9b5d45c8dd5b4b80"
integrity sha512-en3JGqPA4RX4aUlo6q6uUbnqLp31Dhm2E/thiMvFTIvU+dUDG249jBG2MJ0rPMXE/MbKVrpmi/1r1G4QLhIHKQ==
dependencies:
"@types/react" "*"

"@types/[email protected]":
version "18.0.10"
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.10.tgz#3b66dec56aa0f16a6cc26da9e9ca96c35c0b4352"
Expand Down Expand Up @@ -19841,6 +19848,14 @@ react-content-loader@^6.2.1:
resolved "https://registry.yarnpkg.com/react-content-loader/-/react-content-loader-6.2.1.tgz#8feb733c2d2495002e1b216f13707f2b5f2a8ead"
integrity sha512-6ONbFX+Hi3SHuP66JB8CPvJn372pj+qwltJV0J8z/8MFrq98I1cbFdZuhDWeQXu3CFxiiDTXJn7DFxx2ZvrO7g==

react-copy-to-clipboard@^5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz#09aae5ec4c62750ccb2e6421a58725eabc41255c"
integrity sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==
dependencies:
copy-to-clipboard "^3.3.1"
prop-types "^15.8.1"

react-devtools-core@^4.27.2:
version "4.28.0"
resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-4.28.0.tgz#3fa18709b24414adddadac33b6b9cea96db60f2f"
Expand Down