Referral UI

.github/workflows/build.yml

@@ -4,7 +4,7 @@ on:
   pull_request:
 
 env:
-  solana_version: stable
+  solana_version: v1.14.17
   VERBOSE: 1
 
 jobs:

packages/app/package.json

@@ -9,11 +9,12 @@
     "@heroicons/react": "^2.0.13",
     "@metaplex-foundation/js": "^0.18.3",
     "@popperjs/core": "^2.11.6",
+    "@solana/pay": "^0.2.5",
     "@solana/spl-token": "^0.3.6",
-    "@solana/wallet-adapter-base": "^0.9.22",
-    "@solana/wallet-adapter-react": "^0.15.30",
-    "@solana/wallet-adapter-react-ui": "^0.9.29",
-    "@solana/wallet-adapter-wallets": "^0.19.15",
+    "@solana/wallet-adapter-base": "^0.9.23",
+    "@solana/wallet-adapter-react": "^0.15.35",
+    "@solana/wallet-adapter-react-ui": "^0.9.34",
+    "@solana/wallet-adapter-wallets": "^0.19.23",
     "@solana/web3.js": "^1.66.2",
     "@sunrisestake/client": "*",
     "@sunrisestake/marinade-ts-sdk": "4.0.4-alpha.18",
@@ -37,6 +38,7 @@
     "classnames": "^2.3.2",
     "constants-browserify": "^1.0.0",
     "crypto-browserify": "^3.12.0",
+    "daisyui": "^3.9.2",
     "dayjs": "^1.11.7",
     "dotenv-cli": "^6.0.0",
     "https-browserify": "^1.0.0",

packages/app/src/App.tsx

@@ -5,11 +5,7 @@ import {
 } from "@solana/wallet-adapter-react";
 import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
 import {
-  BackpackWalletAdapter,
-  BraveWalletAdapter,
   CoinbaseWalletAdapter,
-  ExodusWalletAdapter,
-  GlowWalletAdapter,
   PhantomWalletAdapter,
   SolflareWalletAdapter,
   TorusWalletAdapter,
@@ -36,13 +32,9 @@ const App: FC = () => {
   const wallets = useMemo(
     () => [
       new PhantomWalletAdapter(),
-      new GlowWalletAdapter(),
       new SolflareWalletAdapter(),
       new TorusWalletAdapter(),
-      new BackpackWalletAdapter(),
-      new ExodusWalletAdapter(),
       new CoinbaseWalletAdapter(),
-      new BraveWalletAdapter(),
     ],
     []
   );

packages/app/src/Routes.tsx

@@ -10,18 +10,21 @@ import { ForestApp } from "./forest/ForestApp";
 import { GrowApp } from "./grow/GrowApp";
 import { HubApp } from "./hub/HubApp";
 import { LockingApp } from "./locking/LockingApp";
+import { ReferralApp } from "./referral/ReferralApp";
 import { StakingApp } from "./staking/StakingApp";
-import { Link, useLocation } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { Layout } from "./common/partials/Layout";
 import { debounce } from "./common/utils";
 import { useHelp } from "./common/context/HelpContext";
+import { LinkWithQuery } from "./common/components/LinkWithQuery";
 
 export enum AppRoute {
   Connect = "/connect", // not a route at present TODO fix
   Forest = "/forest",
   Grow = "/grow",
   Hub = "/",
   Lock = "/lock",
+  Referral = "/referral",
   Stake = "/stake",
 }
 
@@ -32,6 +35,7 @@ export const Routes: FC = () => {
     grow: useRef<null | HTMLDivElement>(null),
     hub: useRef<null | HTMLDivElement>(null),
     locking: useRef<null | HTMLDivElement>(null),
+    referral: useRef<null | HTMLDivElement>(null),
     lost: useRef<null | HTMLDivElement>(null),
     staking: useRef<null | HTMLDivElement>(null),
   };
@@ -96,6 +100,16 @@ export const Routes: FC = () => {
               setCurrentHelpRoute(AppRoute.Lock);
             },
           },
+          {
+            path: AppRoute.Referral,
+            onMatch: () => {
+              appRefs.referral.current?.scrollIntoView({
+                behavior: "smooth",
+              });
+              setCurrentRouteApp(appRefs.referral);
+              setCurrentHelpRoute(AppRoute.Referral);
+            },
+          },
           {
             path: AppRoute.Stake,
             onMatch: () => {
@@ -136,6 +150,12 @@ export const Routes: FC = () => {
           ref={appRefs.locking}
           active={currentRouteApp === appRefs.locking}
         />
+        <ReferralApp
+          id="referral-app"
+          className="App ReferralApp"
+          ref={appRefs.referral}
+          active={currentRouteApp === appRefs.referral}
+        />
         <StakingApp
           id="staking-app"
           className="App StakingApp"
@@ -150,12 +170,12 @@ export const Routes: FC = () => {
           <p className="text-2xl font-bold">
             Oh, oh. You&apos;ve got lost in the woods... 🐺
           </p>
-          <Link
+          <LinkWithQuery
             className="mt-2 px-5 py-3 border-2 border-green rounded-lg leading-6 text-green text-xl"
             to="/"
           >
             Back home
-          </Link>
+          </LinkWithQuery>
         </div>
       </div>
     </Layout>

packages/app/src/common/components/ExternalLinks.tsx

@@ -6,7 +6,7 @@ import {
   FaTwitter,
 } from "react-icons/fa";
 import { Panel } from "./Panel";
-import { type FC } from "react";
+import React, { type FC } from "react";
 
 export const ExternalLinks: FC = () => {
   return (

packages/app/src/common/components/LinkWithQuery.tsx

@@ -0,0 +1,24 @@
+import { Link, type LinkProps, useLocation } from "react-router-dom";
+import { type FC, type PropsWithChildren } from "react";
+
+export const LinkWithQuery: FC<PropsWithChildren & LinkProps> = ({
+  children,
+  to,
+  ...props
+}) => {
+  const { search } = useLocation();
+
+  const linkParams = typeof to === "string" ? { pathname: to } : to;
+
+  return (
+    <Link
+      to={{
+        ...linkParams,
+        search,
+      }}
+      {...props}
+    >
+      {children}
+    </Link>
+  );
+};

packages/app/src/common/components/Tweet.tsx

@@ -0,0 +1,23 @@
+import React, { type FC } from "react";
+import { useScript } from "../hooks";
+
+export const Tweet: FC<{
+  tweet: string;
+  url?: string;
+  size?: "small" | "medium" | "large";
+}> = ({ tweet, url, size = "large" }) => {
+  useScript("https://platform.x.com/widgets.js");
+  return (
+    <a
+      href="https://twitter.com/share?ref_src=twsrc%5Etfw"
+      className="twitter-share-button"
+      data-size={size}
+      data-text={tweet}
+      data-url={url}
+      data-related="sunrisestake"
+      data-show-count="false"
+    >
+      Tweet
+    </a>
+  );
+};

packages/app/src/common/components/TweetButton.tsx

@@ -1,17 +1,15 @@
 import React from "react";
 import toast, { type Toast } from "react-hot-toast";
 
-import { useScript } from "../hooks";
 import { BaseModal } from "./modals";
+import { Tweet } from "./Tweet";
 
 interface TweetButtonProps {
   amount: string;
   t: Toast;
 }
 
 const TweetButton: React.FC<TweetButtonProps> = ({ t }) => {
-  useScript("https://platform.twitter.com/widgets.js");
-
   return (
     <BaseModal
       ok={() => {
@@ -43,21 +41,11 @@ const TweetButton: React.FC<TweetButtonProps> = ({ t }) => {
       </div>
 
       <div className="flex flex-row justify-center mb-16">
-        <a
-          href="https://twitter.com/share?ref_src=twsrc%5Etfw"
-          className="twitter-share-button"
-          data-size="large"
-          data-text="I just staked with Sunrise, offsetting carbon and making Solana stronger."
-          data-url="https://app.sunrisestake.com/"
-          data-via="sunrisestake"
-          // data-hashtags=""
-          // data-related=""
-          data-show-count="false"
-        >
-          Tweet
-        </a>
+        <Tweet
+          url="https://app.sunrisestake.com/"
+          tweet="I just staked with Sunrise, offsetting carbon and making Solana stronger."
+        />
       </div>
-      {/* </div> */}
     </BaseModal>
   );
 };

packages/app/src/common/container/Card.tsx

@@ -0,0 +1,52 @@
+import { type FC, type PropsWithChildren, type ReactNode } from "react";
+import clx from "classnames";
+
+interface CardProps {
+  className?: string;
+  title?: string | ReactNode;
+  image?: ReactNode;
+  orientation?: "horizontal" | "vertical";
+  size?: "small" | "medium" | "large";
+}
+
+export const Card: FC<PropsWithChildren & CardProps> = ({
+  children,
+  className,
+  image,
+  title,
+  orientation = "vertical",
+  size = "medium",
+}) => (
+  <div
+    className={clx(
+      orientation === "horizontal" && "card-side",
+      size === "small"
+        ? "w-32 sm:h-32 p-2"
+        : size === "medium"
+        ? "w-40 sm:w-48 h-40 sm:h-48 p-4"
+        : "w-128 h-128 p-4",
+      "card glass",
+      className
+    )}
+  >
+    {image !== undefined && <figure className="min-h-2/3">{image}</figure>}
+    <div
+      className={clx(
+        "card-body items-center content-center",
+        size === "small" ? "p-1" : size === "medium" ? "p-1" : "p-0 sm:p-3"
+      )}
+    >
+      {title !== undefined && (
+        <h2
+          className={clx(
+            "card-title text-center",
+            size === "small" ? "!text-sm" : "!text-sm sm:!text-xl"
+          )}
+        >
+          {title}
+        </h2>
+      )}
+      {children}
+    </div>
+  </div>
+);

packages/app/src/common/context/ZenModeContext.tsx

@@ -8,15 +8,15 @@ import {
   useEffect,
 } from "react";
 
-interface ZenModeSettings {
+export interface ZenModeSettings {
   showBGImage: boolean;
   showExternalLinks: boolean;
   showHelpButton: boolean;
   showWallet: boolean;
 }
 
 const ZenModeContext = createContext<
-  [ZenModeSettings, Dispatch<ZenModeSettings>]
+  [ZenModeSettings, Dispatch<React.SetStateAction<ZenModeSettings>>]
 >([
   {
     showBGImage: false,
@@ -50,7 +50,9 @@ const ZenModeProvider: FC<{ children: ReactNode }> = ({ children }) => {
   );
 };
 
-const useZenMode = (): [ZenModeSettings, Dispatch<ZenModeSettings>] =>
-  useContext(ZenModeContext);
+const useZenMode = (): [
+  ZenModeSettings,
+  Dispatch<React.SetStateAction<ZenModeSettings>>
+] => useContext(ZenModeContext);
 
 export { ZenModeProvider, useZenMode };

packages/app/src/common/sunriseClientWrapper.ts

@@ -6,17 +6,47 @@ import {
   type WithdrawalFees,
   type Environment,
 } from "@sunrisestake/client";
-import { type Connection, type PublicKey, Transaction } from "@solana/web3.js";
+import {
+  type Connection,
+  PublicKey,
+  Transaction,
+  type TransactionInstruction,
+} from "@solana/web3.js";
 import { AnchorProvider } from "@coral-xyz/anchor";
 import type BN from "bn.js";
 import { type AnchorWallet } from "@solana/wallet-adapter-react";
 import { debounce } from "./utils";
 import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
 
+// TODO remove once this is exported from the client
+const PROGRAM_ID = new PublicKey("sunzv8N3A8dRHwUBvxgRDEbWKk8t7yiHR4FLRgFsTX6");
+const isDepositIx = (ix: TransactionInstruction): boolean =>
+  ix.programId.equals(PROGRAM_ID);
+
 const stage =
   (process.env.REACT_APP_SOLANA_NETWORK as keyof typeof Environment) ??
   WalletAdapterNetwork.Devnet;
 
+const addReferrer = (): ((tx: Transaction) => Transaction) => {
+  const urlParams = new URLSearchParams(window.location.search);
+  const referrerString = urlParams.get("referrer");
+  const referrer =
+    referrerString !== null ? new PublicKey(referrerString) : undefined;
+  if (!referrer) return (tx: Transaction) => tx;
+
+  return (tx: Transaction) => {
+    const depositInstruction = tx.instructions.find(isDepositIx);
+    if (depositInstruction) {
+      depositInstruction.keys.push({
+        pubkey: referrer,
+        isSigner: false,
+        isWritable: false,
+      });
+    }
+    return tx;
+  };
+};
+
 export class SunriseClientWrapper {
   constructor(
     private readonly client: SunriseStakeClient,
@@ -100,6 +130,7 @@ export class SunriseClientWrapper {
     if (this.readonlyWallet) throw new Error("Readonly wallet");
     return this.client
       .makeBalancedDeposit(amount, recipient)
+      .then(addReferrer())
       .then(async (tx) => this.client.sendAndConfirmTransaction(tx));
     // .then(this.triggerUpdateAndReturn.bind(this));
   }

packages/app/src/common/utils.ts

@@ -177,6 +177,8 @@ const replaceInArray = <T>(arr: T[], oldItem: T, newItem: T): T[] => {
   return [...arr.slice(0, index), newItem, ...arr.slice(index + 1)];
 };
 
+const isMobilePortrait = (width: number): boolean => width < 768;
+
 export {
   addUp,
   round,
@@ -198,4 +200,5 @@ export {
   memoise,
   handleError,
   noop,
+  isMobilePortrait,
 };