Add logo

.env.example

@@ -1,11 +1,12 @@
-####################
-# REQUIRED
-KEYP_CLIENT_ID=
-TOKEN_SECRET=
-# Domain where app is served
-NEXTAUTH_URL=http://localhost:3002
+# Your application Client ID from https://dev.usekeyp.com
+NEXT_PUBLIC_KEYP_CLIENT_ID=
+
+NEXTAUTH_URL=http://localhost:3000 # Domain where you serve the app
+NEXTAUTH_SESSION_COOKIE_SECRET=tokensecret # Random string for NextAuth cookies. Generate with `openssl rand -base64 32`
 
 ####################
 # Optional (local testing)
 # NODE_TLS_REJECT_UNAUTHORIZED makes TLS connections and HTTPS requests insecure by disabling certificate verification
-NODE_TLS_REJECT_UNAUTHORIZED=0
+NODE_TLS_REJECT_UNAUTHORIZED=0
+EMAIL=
+EMAIL_PASS=

README.md

@@ -1,25 +1,9 @@
-# Juicebox x Feather test
+# Kaching
 
-# Setup
+Sign onto Google or Discord and send crypto.
 
-## Install
+Kaching uses Keyp (https://www.usekeyp.com/) to let users send crypto to one another.
 
-```bash
-yarn
-```
+By signing into Kaching with Google or Discord, you can create a non-custodial wallet on Polygon network.
 
-## Environment
-
-1. Copy the file `.env.example` to `.env`
-2. Create a new application on on https://dev.usekeyp.com.
-
-- Set the redirect URI to `http://localhost:3000/api/auth/callback/keyp` (note that your port may be different).
-- Copy the "CLIENT ID" for your application and set it to `KEYP_CLIENT_ID` in `.env`
-
-3. In the `.env`, set `TOKEN_SECRET` to a random string e.g. `openssl rand -base64 32`. (Do not use your access token here)
-
-# Run
-
-```bash
-yarn dev
-```
+Kaching or Keyp will NEVER have access to your private keys. You can extract your private keys from your Keyp account at https://app.usekeyp.com/.

components/AssetBalance.tsx

@@ -0,0 +1,115 @@
+import { Box, HStack, Image, Text } from "@chakra-ui/react";
+import axios from "axios";
+import { useFormContext } from "context/FormContext";
+import { signOut, useSession } from "next-auth/react";
+import React, { Dispatch, useEffect, useState } from "react";
+import { UserBalance } from "types/keypEndpoints";
+import { supportedAssets } from "utils/general";
+
+interface AssetBalanceProps {
+  setBalanceError: Dispatch<boolean>;
+}
+/**
+ * @remarks component calls UseTokenBalance hook to get user token balance from Keyp API
+ * @param setBalanceError - useState function passed in from TransferForm. If this gets set to true, error about balance will render on TransferForm
+ * @returns div that renders token balance for selected token. Renders an error message if user balance < amount user wants to send
+ */
+const AssetBalance: React.FC<AssetBalanceProps> = ({ setBalanceError }) => {
+  const [userAssets, setUserAssets] = useState<UserBalance | undefined>();
+  const [isLoading, setIsLoading] = useState(true);
+  const { type, asset, amount } = useFormContext();
+  const { data: session } = useSession();
+  const tokenAddress = supportedAssets[asset];
+
+  const balance = () => {
+    if (userAssets) {
+      if (asset === "MATIC") {
+        let formattedAsset = userAssets["ETH"]?.formatted;
+        return Number(formattedAsset).toFixed(4);
+      } else {
+        let { ...address } = userAssets;
+        let formattedAsset = Object.values(address)[0].formatted;
+        return Number(formattedAsset).toFixed(4);
+      }
+    } else {
+      return null;
+    }
+  };
+  const displayBalance = balance();
+
+  useEffect(() => {
+    /**
+     * @remarks - pass boolean to parent component TransferForm. If balance < amount, return true and display error message in TransferForm. Loading indicator shows if API call lags
+     * @param amount - user generated asset amount from input. Taken from FormContext
+     * @param balance - balance of asset
+     * @returns boolean value comparing amount to balance
+     */
+    const compareBalanceToInput = (
+      amount: number | undefined,
+      balance: number
+    ): void => {
+      if (amount && displayBalance) {
+        if (balance < amount && type === "send") {
+          setBalanceError(true);
+        } else {
+          setBalanceError(false);
+        }
+      }
+    };
+
+    compareBalanceToInput(amount, Number(displayBalance));
+  }, [type, amount, displayBalance, setBalanceError]);
+
+  useEffect(() => {
+    const ACCESS_TOKEN = session?.user.accessToken;
+    const userId = session?.user.id;
+
+    const options = {
+      headers: {
+        Authorization: `Bearer ${ACCESS_TOKEN}`,
+      },
+    };
+
+    // TODO: handling of ETH. Currently "ETH" really is "MATIC". Add WETH address to `supportedAddresses` dictionary
+    const urlMATIC = `https://api.usekeyp.com/v1/users/${userId}/balance`;
+    const urlNotMATIC = `https://api.usekeyp.com/v1/users/${userId}/balance/${tokenAddress}`;
+    axios
+      .get(asset === "MATIC" ? urlMATIC : urlNotMATIC, options)
+      .then((response) => {
+        setUserAssets(response.data);
+        setIsLoading(false);
+      })
+      .catch((error) => {
+        if (error?.response?.status === 401) {
+          signOut();
+        }
+        setIsLoading(false);
+        console.error(error);
+      });
+    // eslint-disable-next-line
+  }, [asset, tokenAddress]);
+
+  return (
+    <Box
+      color="loginBtnGray"
+      fontSize={asset.length > 4 ? "0.95rem" : ["1.25rem", "1.5rem"]}
+      fontWeight="normal"
+      textAlign="right"
+      mt={0}
+    >
+      <Text color="socialIconsGray">Your Balance</Text>
+
+      {isLoading && (
+        <HStack>
+          <Text>Loading...</Text>
+          <Image src="keyp_spinner.svg" alt="" w="1.5rem" />
+        </HStack>
+      )}
+      <Text display={isLoading ? "none" : "block"}>
+        {displayBalance ? `${"$"}${displayBalance} ${asset}` : "Error"}
+      </Text>
+    </Box>
+  );
+};
+
+export default AssetBalance;

components/AssetModal.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import {
+  Box,
+  Button,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalOverlay,
+  Text,
+  useDisclosure,
+} from "@chakra-ui/react";
+import { useState } from "react";
+import { useFormContext } from "context/FormContext";
+
+/**
+ * @remarks modal opens when user clicks on asset name
+ * @param setGetAsset useState hook variable that captures string of asset
+ * @returns modal that renders a list of assets
+ */
+const AssetModal = () => {
+  const [selectedAsset, setSelectedAsset] = useState("USDC");
+  const { setAsset } = useFormContext();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const handleClickedAsset = (asset: string) => {
+    setSelectedAsset(asset);
+    setAsset(asset);
+  };
+
+  const handleDone = () => {
+    setAsset(selectedAsset);
+    onClose();
+  };
+
+  // TODO: get list of assets from API and render those instead
+  const assets = ["MATIC", "ETH", "USDC", "DAI"];
+  const renderAssets = assets.map((asset) => {
+    return (
+      <Box
+        onClick={() => handleClickedAsset(asset)}
+        key={asset}
+        color={selectedAsset === asset ? "assetOrange" : "#C2C2C2"}
+        px={[0, 0, "5rem"]}
+      >
+        <Text>{asset}</Text>
+      </Box>
+    );
+  });
+
+  return (
+    <>
+      <Button
+        onClick={() => onOpen()}
+        fontSize="5rem"
+        fontWeight="extrabold"
+        color="assetOrange"
+        variant="none"
+        mb={-5}
+        p={0}
+      >
+        {selectedAsset}
+      </Button>
+      <Box mt={"1.5rem"}>
+        <Modal onClose={onClose} size={"full"} isOpen={isOpen}>
+          <ModalOverlay />
+          <ModalContent>
+            <ModalBody fontSize="5rem" fontWeight="extrabold" color="#C2C2C2">
+              {renderAssets}
+            </ModalBody>
+            <ModalFooter mx="-1.5rem" mb="-1.5rem">
+              <Box w="full">
+                <Button onClick={() => handleDone()} variant="formBlue">
+                  Done
+                </Button>
+              </Box>
+            </ModalFooter>
+          </ModalContent>
+        </Modal>
+      </Box>
+    </>
+  );
+};
+
+export default AssetModal;

components/ButtonSpacingWrapper.tsx

@@ -0,0 +1,36 @@
+import React, { ReactNode } from "react";
+import { Box } from "@chakra-ui/react";
+import { useSizeProvider } from "../context/SizeContext";
+
+interface ButtonSpacingWrapperProps {
+  children: ReactNode;
+  isTransactionSlider: boolean;
+}
+
+/**
+ *
+ * @param children - components to be wrapped
+ * @param isTransactionSlider - boolean to determine if txSliderHeight should be subtracted from the height of the wrapper
+ * @returns - div that wraps the children components and ensures that the buttons are always at the bottom of the page
+ */
+const ButtonSpacingWrapper: React.FC<ButtonSpacingWrapperProps> = ({
+  children,
+  isTransactionSlider,
+}) => {
+  const { navHeight, txSliderHeight } = useSizeProvider();
+
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      justifyContent="space-between"
+      h={`calc(98vh - ${navHeight}px - ${
+        isTransactionSlider ? txSliderHeight : 0
+      }px)`}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export default ButtonSpacingWrapper;

components/CashOut.tsx

@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+import { Box, Button, Heading, Image, Text, VStack } from "@chakra-ui/react";
+import UseKeypApi from "../hooks/useKeypApi";
+import { useSession } from "next-auth/react";
+import { useFormContext } from "../context/FormContext";
+import ButtonSpacingWrapper from "./ButtonSpacingWrapper";
+
+/**
+ * @remarks - this component lets user withdraw from their wallet. ButtonSpacingWrapper is used place "Back" button at the bottom of the page
+ * @returns - CashOut component that displays offramps for users to withdraw from their wallet
+ */
+const CashOut = () => {
+  const [coinbaseLoading, setCoinbaseLoading] = useState(false);
+  const { data: session } = useSession();
+  const { handleHomePage } = useFormContext();
+
+  const handleClickCashOut = async (rampType: string) => {
+    const request = await UseKeypApi({
+      accessToken: session?.user.accessToken,
+      method: "GET",
+      endpoints: "ramps",
+      urlParams1: "off",
+      urlParams2: rampType,
+    });
+    if (request?.url) window.location = request?.url;
+    return request.url || null;
+  };
+
+  return (
+    <ButtonSpacingWrapper isTransactionSlider={true}>
+      <Box
+        w={["full", "full", "80%", "50%"]}
+        mx="auto"
+        px={[0, 0, "5rem"]}
+        mt="2rem"
+      >
+        <Heading as="h3">
+          <Text color="socialIconsGray" textAlign="center">
+            Withdraw from your Wallet
+          </Text>
+        </Heading>
+        <VStack spacing="1.5rem" mt="2.5rem">
+          {/* <Box w="full">
+          <Button
+            variant="ramps"
+            color="#22272F"
+            onClick={() => handleClickCashOut("RAMP_NETWORK")}
+          >
+            <Image src={"payment-ramp.svg"} alt="Ramp" />
+          </Button>
+        </Box> */}
+          <Box w="full">
+            <Button
+              variant="ramps"
+              color="#4A4D53"
+              isLoading={coinbaseLoading}
+              loadingText="Loading"
+              onClick={() => {
+                handleClickCashOut("COINBASE");
+                setCoinbaseLoading(true);
+              }}
+            >
+              <Image src={"payment-coinbase.svg"} alt="" />
+              <Text ml="1rem">Coinbase</Text>
+            </Button>
+          </Box>
+        </VStack>
+      </Box>
+      <Box mt="1rem" mx="-1.5rem" mb="-1rem">
+        <Button variant="formBlue" onClick={() => handleHomePage()}>
+          Back
+        </Button>
+      </Box>
+    </ButtonSpacingWrapper>
+  );
+};
+
+export default CashOut;

components/Fonts.tsx

@@ -0,0 +1,28 @@
+import { Global } from "@emotion/react";
+
+const Fonts = () => (
+  <Global
+    styles={`
+    @font-face {
+      font-family: "Sharpie";
+      src: url("/fonts/sharpie/Sharpie-Regular.woff2") format("woff2"),
+        url("/fonts/sharpie/Sharpie-Regular.woff") format("woff"),
+        url("/fonts/sharpie/Sharpie-Regular.ttf") format("truetype");
+      font-weight: 400;
+      font-display: swap;
+      font-style: normal;
+    }
+    @font-face {
+      font-family: "Sharpie";
+      src: url("/fonts/sharpie/Sharpie-Extrabold.woff2") format("woff2"),
+        url("/fonts/sharpie/Sharpie-Extrabold.woff") format("woff"),
+        url("/fonts/sharpie/Sharpie-Extrabold.ttf") format("truetype");
+      font-weight: 800;
+      font-display: swap;
+      font-style: normal;
+    }
+  `}
+  />
+);
+
+export default Fonts;