From 6aad4cc2b93df3a55c300d025ab3e5410da21571 Mon Sep 17 00:00:00 2001 From: Adam Chambers Date: Wed, 11 Oct 2023 20:04:24 -0400 Subject: [PATCH 1/4] fix: prepend mfi.gg url to referral link copy --- apps/marginfi-v2-ui/src/pages/points.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/marginfi-v2-ui/src/pages/points.tsx b/apps/marginfi-v2-ui/src/pages/points.tsx index d9d41f5d55..b540e77c27 100644 --- a/apps/marginfi-v2-ui/src/pages/points.tsx +++ b/apps/marginfi-v2-ui/src/pages/points.tsx @@ -100,7 +100,7 @@ const Points: FC = () => { }} onClick={() => { if (userPointsData.referralLink) { - navigator.clipboard.writeText(userPointsData.referralLink); + navigator.clipboard.writeText(`https://www.mfi.gg/refer/${userPointsData.referralLink}`); } }} > From 7e48de6468f20d58d0597ecd04dd60b178a115f8 Mon Sep 17 00:00:00 2001 From: Adam Chambers Date: Thu, 12 Oct 2023 08:33:43 -0400 Subject: [PATCH 2/4] feat: referral link copy success state --- apps/marginfi-v2-ui/src/pages/points.tsx | 40 ++++++++++++++---------- 1 file changed, 24 insertions(+), 16 deletions(-) diff --git a/apps/marginfi-v2-ui/src/pages/points.tsx b/apps/marginfi-v2-ui/src/pages/points.tsx index b540e77c27..35a1241228 100644 --- a/apps/marginfi-v2-ui/src/pages/points.tsx +++ b/apps/marginfi-v2-ui/src/pages/points.tsx @@ -1,7 +1,8 @@ -import React, { useMemo, FC, useEffect, useState } from "react"; +import React, { useMemo, FC, useEffect, useState, useCallback } from "react"; import Link from "next/link"; import { Button } from "@mui/material"; import FileCopyIcon from "@mui/icons-material/FileCopy"; +import CheckIcon from "@mui/icons-material/Check"; import { useRouter } from "next/router"; import { getFavoriteDomain } from "@bonfida/spl-name-service"; import { Connection, PublicKey } from "@solana/web3.js"; @@ -34,12 +35,15 @@ const Points: FC = () => { const currentUserId = useMemo(() => domain ?? currentFirebaseUser?.uid, [currentFirebaseUser, domain]); const referralCode = useMemo(() => routerQuery.referralCode as string | undefined, [routerQuery.referralCode]); + const [isReferralCopied, setIsReferralCopied] = useState(false); - useEffect(() => { - if (connection && walletAddress) { - resolveDomain(connection, new PublicKey(walletAddress)); + const handleReferralCopy = useCallback(() => { + if (userPointsData.referralLink) { + navigator.clipboard.writeText(`https://www.mfi.gg/refer/${userPointsData.referralLink}`); + setIsReferralCopied(true); + setTimeout(() => setIsReferralCopied(false), 2000); } - }, [connection, walletAddress]); + }, [userPointsData.referralLink]); const resolveDomain = async (connection: Connection, user: PublicKey) => { try { @@ -50,6 +54,12 @@ const Points: FC = () => { } }; + useEffect(() => { + if (connection && walletAddress) { + resolveDomain(connection, new PublicKey(walletAddress)); + } + }, [connection, walletAddress]); + useEffect(() => { fetchLeaderboardData(connection).then(setLeaderboardData); // TODO: cache leaderboard and avoid call }, [connection, connected, walletAddress]); // Dependency array to re-fetch when these variables change @@ -98,18 +108,16 @@ const Points: FC = () => { color: "black", zIndex: 10, }} - onClick={() => { - if (userPointsData.referralLink) { - navigator.clipboard.writeText(`https://www.mfi.gg/refer/${userPointsData.referralLink}`); - } - }} + onClick={handleReferralCopy} > - {`${ - userPointsData.isCustomReferralLink - ? userPointsData.referralLink?.replace("https://", "") - : "Copy referral link" - }`} - + {isReferralCopied + ? "Link copied" + : `${ + userPointsData.isCustomReferralLink + ? userPointsData.referralLink?.replace("https://", "") + : "Copy referral link" + }`} + {isReferralCopied ? : } )} From 514b7ca7baf9f931487d7a665a296f8d9868368f Mon Sep 17 00:00:00 2001 From: Adam Chambers Date: Thu, 12 Oct 2023 09:37:07 -0400 Subject: [PATCH 3/4] feat: copy referral link (mobile) --- apps/marginfi-v2-ui/src/pages/portfolio.tsx | 36 ++++++++++++--------- 1 file changed, 21 insertions(+), 15 deletions(-) diff --git a/apps/marginfi-v2-ui/src/pages/portfolio.tsx b/apps/marginfi-v2-ui/src/pages/portfolio.tsx index d96cbc5c1c..9412428131 100644 --- a/apps/marginfi-v2-ui/src/pages/portfolio.tsx +++ b/apps/marginfi-v2-ui/src/pages/portfolio.tsx @@ -1,7 +1,8 @@ -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 { useMrgnlendStore, useUserProfileStore } from "~/store"; @@ -41,6 +42,15 @@ const PortfolioPage = () => { ]); 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 lendingBanks = useMemo( () => @@ -89,9 +99,7 @@ const PortfolioPage = () => { - {!connected ? ( - null - ) : currentFirebaseUser ? ( + {!connected ? null : currentFirebaseUser ? ( ) : hasUser === null ? ( @@ -129,18 +137,16 @@ const PortfolioPage = () => { color: "black", zIndex: 10, }} - onClick={() => { - if (userPointsData.referralLink) { - navigator.clipboard.writeText(userPointsData.referralLink); - } - }} + onClick={handleReferralCopy} > - {`${ - userPointsData.isCustomReferralLink - ? userPointsData.referralLink?.replace("https://", "") - : "Copy referral link" - }`} - + {isReferralCopied + ? "Link copied" + : `${ + userPointsData.isCustomReferralLink + ? userPointsData.referralLink?.replace("https://", "") + : "Copy referral link" + }`} + {isReferralCopied ? : } )} From 508ec23d8f898b94e8b8ea3671f7a67c5d3c6eab Mon Sep 17 00:00:00 2001 From: Adam Chambers Date: Thu, 12 Oct 2023 09:50:13 -0400 Subject: [PATCH 4/4] feat: switch referral code logic to use CopyToClipboard package --- apps/marginfi-v2-ui/package.json | 2 + apps/marginfi-v2-ui/src/pages/points.tsx | 58 ++++++++++---------- apps/marginfi-v2-ui/src/pages/portfolio.tsx | 59 ++++++++++----------- yarn.lock | 15 ++++++ 4 files changed, 75 insertions(+), 59 deletions(-) diff --git a/apps/marginfi-v2-ui/package.json b/apps/marginfi-v2-ui/package.json index e99a2107b6..799873397b 100644 --- a/apps/marginfi-v2-ui/package.json +++ b/apps/marginfi-v2-ui/package.json @@ -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", @@ -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", diff --git a/apps/marginfi-v2-ui/src/pages/points.tsx b/apps/marginfi-v2-ui/src/pages/points.tsx index 35a1241228..99b9f4e08f 100644 --- a/apps/marginfi-v2-ui/src/pages/points.tsx +++ b/apps/marginfi-v2-ui/src/pages/points.tsx @@ -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"; @@ -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); @@ -96,29 +89,36 @@ const Points: FC = () => { How do points work? {currentFirebaseUser && ( - + + )}
diff --git a/apps/marginfi-v2-ui/src/pages/portfolio.tsx b/apps/marginfi-v2-ui/src/pages/portfolio.tsx index 9412428131..26fbb2ba61 100644 --- a/apps/marginfi-v2-ui/src/pages/portfolio.tsx +++ b/apps/marginfi-v2-ui/src/pages/portfolio.tsx @@ -4,7 +4,7 @@ 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"; @@ -44,14 +44,6 @@ const PortfolioPage = () => { 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 lendingBanks = useMemo( () => sortedBanks && isStoreInitialized @@ -125,29 +117,36 @@ const PortfolioPage = () => { How do points work? {currentFirebaseUser && ( - + + )}
diff --git a/yarn.lock b/yarn.lock index 8a3cbfbacf..4e6221c990 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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/react-dom@18.0.10": version "18.0.10" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.10.tgz#3b66dec56aa0f16a6cc26da9e9ca96c35c0b4352" @@ -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"