Add confirmations with tweet prompts

packages/common/src/Confirmation.tsx

@@ -0,0 +1,65 @@
+import {
+  Link,
+  HStack,
+  Avatar,
+  Button,
+  StackDivider,
+  Text,
+  VStack,
+  Heading,
+  Icon,
+} from "@chakra-ui/react";
+import { PublicKey } from "@solana/web3.js";
+import { Spinner, useMint, useTokenMetadata } from "@strata-foundation/react";
+import { RiCheckboxCircleFill } from "react-icons/ri";
+import { RiTwitterFill } from "react-icons/ri";
+import React, { ReactNode } from "react";
+
+export const Confirmation = ({
+  tweet,
+  image,
+  bottomText,
+  children,
+}: {
+  image?: string;
+  tweet?: string;
+  bottomText?: string;
+  children: ReactNode;
+}) => {
+  return (
+    <VStack
+      padding={4}
+      spacing={4}
+      w="full"
+      divider={<StackDivider borderColor="gray.200" />}
+    >
+      <VStack spacing={4} align="left" w="full">
+        {image && <Avatar src={image} />}
+        <HStack spacing={2}>
+          <Text fontWeight={800} fontSize="24px">
+            Transaction Complete
+          </Text>
+          <Icon as={RiCheckboxCircleFill} color="green.400" w="24px" h="24px" />
+        </HStack>
+
+        {children}
+      </VStack>
+      {tweet && (
+        <VStack spacing={4} align="left" w="full">
+          <Text fontWeight={800}>{bottomText}</Text>
+          <Button
+            as={Link}
+            isExternal
+            leftIcon={<Icon as={RiTwitterFill} />}
+            colorScheme="twitter"
+            href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(
+              tweet
+            )}`}
+          >
+            Tweet
+          </Button>
+        </VStack>
+      )}
+    </VStack>
+  );
+};

packages/common/src/Nft/Tagging.tsx

@@ -282,7 +282,7 @@ export const TaggableImages = ({
                   config.verifiers.nftVerifier,
                   config.tlds.nftVerifier
                 );
-                const alreadyExists = await cache.search(key, undefined, true);
+                const alreadyExists = await cache?.search(key, undefined, true);
 
                 if (!alreadyExists) {
                   const img2 = await getBufferFromUrl(img2Src);

packages/common/src/Pages/MintConfirmation.tsx

@@ -0,0 +1,37 @@
+import { Button, Text, VStack } from "@chakra-ui/react";
+import { useConfig } from "../hooks";
+import React from "react";
+import { Link as RouterLink } from "react-router-dom";
+import { Confirmation } from "../Confirmation";
+import { sample } from "../utils";
+
+export const MintConfirmation = ({
+  handle,
+  buyLink,
+}: {
+  handle: string;
+  buyLink: string;
+}) => {
+  const config = useConfig();
+  const tweets = config.tweets.mint;
+
+  return (
+    <Confirmation
+      tweet={sample(tweets!)?.replace("{handle}", handle)}
+      bottomText={`Let @${handle} know that you created a token for them!`}
+    >
+      <VStack spacing={4} w="full" align="left">
+        <Text>You created a token for @{handle}!</Text>
+        <Button
+          w="full"
+          variant="outline"
+          colorScheme="indigo"
+          as={RouterLink}
+          to={buyLink}
+        >
+          Trade
+        </Button>
+      </VStack>
+    </Confirmation>
+  );
+};

packages/common/src/Pages/Swap.tsx

@@ -18,23 +18,25 @@ import {
   useSwapDriver,
 } from "@strata-foundation/react";
 import { ISwapArgs, toNumber } from "@strata-foundation/spl-token-bonding";
-import { useConfig } from "../hooks";
 import React from "react";
 import toast from "react-hot-toast";
 import { useHistory } from "react-router-dom";
 import { WUMBO_TRANSACTION_FEE } from "../constants/globals";
+import { useConfig } from "../hooks";
 
 export const Swap = ({
   onTradingMintsChange,
   tokenBonding,
   baseMint,
   targetMint,
   manageWalletPath,
+  swapConfirmationPath,
 }: {
   tokenBonding?: PublicKey;
   baseMint?: PublicKey;
   targetMint?: PublicKey;
   manageWalletPath: string;
+  swapConfirmationPath: string;
 } & Pick<ISwapDriverArgs, "onTradingMintsChange">) => {
   const history = useHistory();
   const { wallet } = useWallet();
@@ -109,17 +111,10 @@ export const Swap = ({
     onTradingMintsChange,
     swap: (args: ISwapArgs & { ticker: string }) =>
       execute(args).then(({ targetAmount }) => {
-        toast.custom((t) => (
-          <Notification
-            show={t.visible}
-            type="success"
-            heading="Transaction Successful"
-            message={`Successfully purchased ${Number(targetAmount).toFixed(
-              9
-            )} ${args.ticker}!`}
-            onDismiss={() => toast.dismiss(t.id)}
-          />
-        ));
+        history.push(
+          swapConfirmationPath +
+            `?amount=${targetAmount}&mint=${args.targetMint}`
+        );
       }),
     onConnectWallet: () => history.push(manageWalletPath),
     tokenBondingKey: tokenBonding!,

packages/common/src/Pages/SwapConfirmation.tsx

@@ -0,0 +1,50 @@
+import { Text } from "@chakra-ui/react";
+import { PublicKey } from "@solana/web3.js";
+import {
+  Spinner,
+  useMint,
+  useMintTokenRef,
+  useTokenMetadata,
+} from "@strata-foundation/react";
+import { Confirmation } from "../Confirmation";
+import React from "react";
+import { useReverseTwitter, sample } from "../utils";
+import { useConfig } from "../hooks";
+
+const roundToDecimals = (num: number, decimals: number): number =>
+  Math.trunc(num * Math.pow(10, decimals)) / Math.pow(10, decimals);
+
+export const SwapConfirmation = ({
+  mint,
+  amount,
+}: {
+  mint: PublicKey | undefined;
+  amount: number;
+}) => {
+  const { metadata, image, loading } = useTokenMetadata(mint);
+  const mintAcct = useMint(mint);
+  const { info: tokenRef, loading: loadingRef } = useMintTokenRef(mint);
+  const { handle: refHandle } = useReverseTwitter(
+    tokenRef?.owner as PublicKey | undefined
+  );
+  const handle = refHandle || metadata?.data.name;
+  const config = useConfig();
+  const tweets = config.tweets.swap;
+
+  if (loading || loadingRef) {
+    return <Spinner />;
+  }
+
+  return (
+    <Confirmation
+      tweet={handle && sample(tweets)?.replace("{handle}", handle)}
+      bottomText={`Let @${handle} know that you bought their token!`}
+      image={image}
+    >
+      <Text>
+        You purchased <b>{roundToDecimals(amount, mintAcct?.decimals || 9)}</b>{" "}
+        {metadata?.data.symbol}! Head to My Tokens to see your updated wallet.
+      </Text>
+    </Confirmation>
+  );
+};

packages/common/src/Pages/Wallet.tsx

@@ -191,9 +191,11 @@ export const Wallet = React.memo(
     const { amount: solOwned } = useSolOwnedAmount();
     const solPrice = usePriceInUsd(SOL_TOKEN);
     const { publicKey } = useWallet();
-    const { data: tokens, loading, error } = useUserTokensWithMeta(
-      publicKey || undefined
-    );
+    const {
+      data: tokens,
+      loading,
+      error,
+    } = useUserTokensWithMeta(publicKey || undefined);
     const { handleErrors } = useErrorHandler();
     handleErrors(error);
     const twSol = useTwWrappedSolMint();

packages/common/src/Pages/index.tsx

@@ -6,3 +6,5 @@ export * from "./Wallet";
 export * from "./Send";
 export * from "./SendSearch";
 export * from "./Swap";
+export * from "./SwapConfirmation";
+export * from "./MintConfirmation";

packages/common/src/PriceChangeTicker.tsx

@@ -8,7 +8,11 @@ import {
   useTokenAccount,
   useTokenBonding,
 } from "@strata-foundation/react";
-import { fromCurve, toBN } from "@strata-foundation/spl-token-bonding";
+import {
+  amountAsNum,
+  fromCurve,
+  toBN,
+} from "@strata-foundation/spl-token-bonding";
 import React, { useMemo } from "react";
 import { AiFillCaretDown, AiFillCaretUp } from "react-icons/ai";
 import { useTokenBondingRecentTransactions } from "./contexts";
@@ -40,17 +44,14 @@ export const PriceChangeTicker = ({
       }, 0);
       return fromCurve(
         curve,
-        {
-          ...baseStorage,
-          amount: baseStorage?.amount.sub(toBN(totalBaseMintChange, baseMint)),
-        },
-        baseMint,
-        {
-          ...targetMint,
-          supply: targetMint.supply.sub(
-            toBN(totalTargetMintChange, targetMint)
-          ),
-        },
+        amountAsNum(
+          baseStorage?.amount.sub(toBN(totalBaseMintChange, baseMint)),
+          baseMint
+        ),
+        amountAsNum(
+          targetMint?.supply.sub(toBN(totalTargetMintChange, targetMint)),
+          targetMint
+        ),
         tokenBondingAcc.goLiveUnixTime.toNumber()
       );
     }
@@ -59,9 +60,8 @@ export const PriceChangeTicker = ({
     if (tokenBondingAcc && curve && baseStorage && baseMint && targetMint) {
       return fromCurve(
         curve,
-        baseStorage,
-        baseMint,
-        targetMint,
+        amountAsNum(baseStorage.amount, baseMint),
+        amountAsNum(targetMint.supply, targetMint),
         tokenBondingAcc.goLiveUnixTime.toNumber()
       );
     }

packages/common/src/contexts/configContext.tsx

@@ -16,6 +16,11 @@ export interface IWumboConfig {
     twitter: PublicKey;
     nftVerifier: PublicKey;
   };
+  tweets: {
+    claim: string[];
+    mint: string[];
+    swap: string[];
+  };
   feeWallet: PublicKey;
   goLiveUnixTime: number;
   nftMismatchThreshold: number;
@@ -65,6 +70,17 @@ const DEFAULT_CONFIG = {
     twitter: new PublicKey("DTok7pfUzNeNPqU3Q6foySCezPQE82eRyhX1HdhVNLVC"),
     nftVerifier: new PublicKey("Gzyvrg8gJfShKQwhVYFXV5utp86tTcMxSzrN7zcfebKj"),
   },
+  tweets: {
+    claim: [
+      "I just claimed my #socialtoken on @TeamWumbo! You can get it at wum.bo/t/{handle}",
+    ],
+    mint: [
+      "Hey @{handle}, I created a #socialtoken for you on @TeamWumbo. You should claim it so I can ...",
+    ],
+    swap: [
+      "Just grabbed a bag of @{handle}'s #socialtoken on @TeamWumbo because...",
+    ],
+  },
   feeWallet: new PublicKey("wumbo8oWB2xsFs1V2VhcUDwyN3edoa3UuSnJJuG4qko"),
   goLiveUnixTime: 1642604400,
   nftMismatchThreshold: 50,

packages/common/src/hooks/useSetMetadata.tsx

@@ -105,8 +105,6 @@ export const useSetMetadata = (
               symbol: args.symbol,
               image: imageName,
               files,
-              env: "mainnet-beta",
-              uploadUrl: ARWEAVE_UPLOAD_URL,
               existingFiles,
             });
 

packages/common/src/hooks/useUserTokensWithMeta.tsx

@@ -26,11 +26,11 @@ export const useUserTokensWithMeta = (
 
   useEffect(() => {
     (async function () {
-      if (owner && tokenAccounts) {
+      if (owner && tokenAccounts && tokenCollectiveSdk) {
         try {
           setLoading(true);
           const tokenAccountsWithMeta =
-            await tokenCollectiveSdk!.getUserTokensWithMeta(tokenAccounts);
+            await tokenCollectiveSdk.getUserTokensWithMeta(tokenAccounts);
           setData(tokenAccountsWithMeta);
         } catch (e: any) {
           setError(e);

packages/common/src/utils/index.ts

@@ -7,3 +7,4 @@ export * from "./truthy";
 export * from "./testableNameServiceTwitter";
 export * from "./sleep";
 export * from "./executeRemoteTxn";
+export * from "./sample";

packages/common/src/utils/sample.ts

@@ -0,0 +1,5 @@
+export function sample<A>(arr: A[]): A | undefined {
+  if (arr.length === 0) return undefined;
+
+  return arr[Math.floor(Math.random() * arr.length)];
+}

packages/common/src/utils/twitter.ts

@@ -7,20 +7,18 @@ import {
 } from "@bonfida/spl-name-service";
 import { useConnection } from "@solana/wallet-adapter-react";
 import { Connection, PublicKey } from "@solana/web3.js";
-import axios from "axios";
+import {
+  getOwnerForName,
+  useAccountFetchCache,
+} from "@strata-foundation/react";
 import { deserializeUnchecked } from "borsh";
 import { useAsync } from "react-async-hook";
-import { WUMBO_IDENTITY_SERVICE_URL } from "../constants/globals";
+import { fetchConfig } from "../contexts";
+import { useTwitterTld } from "../hooks";
 import {
   createVerifiedTwitterRegistry,
   getTwitterRegistry,
 } from "./testableNameServiceTwitter";
-import {
-  useAccountFetchCache,
-  getOwnerForName,
-} from "@strata-foundation/react";
-import { useTwitterTld } from "../hooks";
-import { fetchConfig } from "../contexts";
 
 let twitterTld: PublicKey, twitterVerifier: PublicKey;