Wallet Enhancements and Earnings Claiming Frontend Implementation (#536)

* Implement Portfolio and Transactions tab structure (#528) * feat: Create tabs for portfolio and transactions * feat: STUD-94 Add empty portfolio and transaction ui state (#534) * feat: STUD-94 Add empty portfolio and transaction ui state * feat: STUD-94 Add isSuccess and isError to custom thunk to mimic query functionality * feat: STUD-94 Fix logic to display/render song royalties to include only when there are songs * feat: STUD-96 Add UI for no pending earnings in wallet (#535) * feat: STUD-96 Add UI for no pending earnings in wallet * feat: STUD-96 Update logic to display/hide earning state * feat: Update copy for unclaimed royalties (#542) * feat: Update empty state copy for Wallet tab views (#556) * STUD-145: Update Portfolio table and time period filters for viewing accumulated royalties (#559) * feat: Update Portfolio Royalty Earnings formatting * feat: Add Royalty Earning desc table sorting * feat: Implement temp Royalty Song pagination * feat: Improve rendering of data with hooks * feat: Add filtering of single royalty earning date * feat: Improve test data structure to mimic query * feat: Modify Query data for consistent results * refactor: Update Dropdown event trigger name * fix: Pagination when data or rows change * STUD-145: Add Portfolio end of table copy (#573) * STUD-150: Implement no connected wallet ui (#576) * STUD-150: Modify copy for when no wallet is connected (#583) * fix: Update thunkHook from merge conflict issue * STUD-302-Integrate-feature-flag-into-wallet-enhancement-feature-branch (#706) * feat: Implement feature flag for wallet enhance * feat: Add current state of wallet for false flag --------- Co-authored-by: escobarjonatan <[email protected]>
projectNEWM · Aug 8, 2024 · c4475b3 · c4475b3
1 parent 82f8693
commit c4475b3
Show file tree

Hide file tree

Showing 25 changed files with 1,103 additions and 137 deletions.
diff --git a/apps/studio/src/components/TableDropdownSelect.tsx b/apps/studio/src/components/TableDropdownSelect.tsx
@@ -5,55 +5,58 @@ import {
   SelectChangeEvent,
   styled,
 } from "@mui/material";
-import { useState } from "react";
+import { FunctionComponent } from "react";
 
-const TableDropdownSelect = () => {
+export interface TableDropdownMenuParameters {
+  readonly label: string;
+  readonly value: string;
+}
+
+interface TableDropdownSelectProps {
+  readonly menuItems: ReadonlyArray<TableDropdownMenuParameters>;
+  readonly onDropdownChange?: (value: string) => void;
+  readonly selectedValue: string;
+}
+
+const TableDropdownSelect: FunctionComponent<TableDropdownSelectProps> = ({
+  selectedValue,
+  menuItems,
+  onDropdownChange,
+}) => {
   const StyledSelect = styled(Select)(({ theme }) => ({
-    "& .MuiSelect-iconOpen": {
+    "& .MuiSelect-icon": {
       color: theme.colors.white,
-      transform: "rotate(180deg)",
     },
-    "& .c.css-zsouyz-MuiSvgIcon-root-MuiSelect-icon": {
-      color: theme.colors.white,
-      paddingBottom: "5px",
-      transform: "scale(1.2)",
+    fontSize: "12px",
+  }));
+
+  const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
+    "&.Mui-selected": {
+      backgroundColor: theme.colors.activeBackground,
     },
-    "& .css-x2bp66-MuiSvgIcon-root-MuiSelect-icon": {
-      color: theme.colors.white,
-      paddingBottom: 4,
-      transform: "scale(1.2)",
+    "&.MuiMenuItem-root:hover": {
+      backgroundColor: theme.colors.activeBackground,
     },
+    fontSize: "12px",
   }));
-  const StyledMenuItem = styled(MenuItem)({
-    fontSize: 12,
-  });
-  const [dropdownValue, setDropdownValue] = useState("ROYALTIES PER WEEK");
 
   const handleDropdownChange = (event: SelectChangeEvent<unknown>) => {
-    setDropdownValue(event.target.value as string);
+    onDropdownChange?.(event.target.value as string);
   };
   return (
     <Box>
       <StyledSelect
         color="info"
         size="small"
-        sx={ { fontSize: 12 } }
-        value={ dropdownValue }
+        value={ selectedValue }
         variant="standard"
         onChange={ handleDropdownChange }
       >
-        <StyledMenuItem value={ "ROYALTIES PER DAY" }>
-          ROYALTIES PER DAY
-        </StyledMenuItem>
-        <StyledMenuItem value={ "ROYALTIES PER WEEK" }>
-          ROYALTIES PER WEEK
-        </StyledMenuItem>
-        <StyledMenuItem value={ "ROYALTIES PER MONTH" }>
-          ROYALTIES PER MONTH
-        </StyledMenuItem>
-        <StyledMenuItem value={ "ROYALTIES PER YEAR" }>
-          ROYALTIES PER YEAR
-        </StyledMenuItem>
+        { menuItems.map((menuItem) => (
+          <StyledMenuItem key={ menuItem.value } value={ menuItem.value }>
+            { menuItem.label.toUpperCase() }
+          </StyledMenuItem>
+        )) }
       </StyledSelect>
     </Box>
   );

diff --git a/apps/studio/src/components/index.ts b/apps/studio/src/components/index.ts
@@ -32,6 +32,7 @@ export { default as SquareGridCard } from "./SquareGridCard";
 export { default as Toast } from "./Toast";
 export { default as UpdateWalletAddressModal } from "./UpdateWalletAddressModal";
 export { default as TableDropdownSelect } from "./TableDropdownSelect";
+export * from "./TableDropdownSelect";
 export { default as ViewPDF } from "./ViewPDF";
 export { SearchBox } from "./SearchBox";
 export { default as IconStatus } from "./library/IconStatus";

diff --git a/apps/studio/src/modules/ui/slice.ts b/apps/studio/src/modules/ui/slice.ts
@@ -22,6 +22,7 @@ const initialState: UIState = {
     isConfirmationRequired: false,
     message: "",
   },
+  walletPortfolioTableFilter: "All",
 };
 
 const uiSlice = createSlice({
@@ -41,6 +42,10 @@ const uiSlice = createSlice({
       state.toast.message = "";
       state.toast.severity = "error";
     },
+    resetWalletPortfolioTableFilter: (state) => {
+      state.walletPortfolioTableFilter =
+        initialState.walletPortfolioTableFilter;
+    },
     setIsConnectWalletModalOpen: (
       state,
       { payload }: PayloadAction<boolean>
@@ -77,6 +82,9 @@ const uiSlice = createSlice({
     ) => {
       state.updateWalletAddressModal = payload;
     },
+    setWalletPortfolioTableFilter: (state, action: PayloadAction<string>) => {
+      state.walletPortfolioTableFilter = action.payload;
+    },
   },
 });
 
@@ -91,6 +99,8 @@ export const {
   setIsConnectWalletModalOpen,
   setIsInvitesModalOpen,
   setIsWalletEnvMismatchModalOpen,
+  setWalletPortfolioTableFilter,
+  resetWalletPortfolioTableFilter,
 } = uiSlice.actions;
 
 export default uiSlice.reducer;
diff --git a/apps/studio/src/modules/ui/types.ts b/apps/studio/src/modules/ui/types.ts
@@ -21,6 +21,7 @@ export interface UIState {
     isConfirmationRequired: boolean;
     message: string;
   };
+  walletPortfolioTableFilter: string;
 }
 
 export interface UploadProgressParams {

diff --git a/apps/studio/src/pages/home/wallet/EmptyPortfolio.tsx b/apps/studio/src/pages/home/wallet/EmptyPortfolio.tsx
@@ -0,0 +1,31 @@
+import { FunctionComponent } from "react";
+import { useNavigate } from "react-router-dom";
+import { Stack, Typography } from "@mui/material";
+import { Suitcase } from "@newm-web/assets";
+import { Button } from "@newm-web/elements";
+
+export const EmptyPortfolio: FunctionComponent = () => {
+  const navigate = useNavigate();
+
+  return (
+    <Stack alignItems="center" mt={ 17.5 } rowGap={ 1.5 }>
+      <Suitcase />
+      <Typography fontWeight={ 700 } mt={ 0.5 } variant="h4">
+        Your portfolio is empty
+      </Typography>
+      <Typography fontSize="14px" fontWeight={ 400 } variant="h4">
+        Only songs with stream tokens held in your connected wallet will be
+        shown here
+      </Typography>
+      <Button
+        color="music"
+        sx={ { mt: 1.5 } }
+        variant="secondary"
+        width="compact"
+        onClick={ () => navigate("/home/upload-song") }
+      >
+        Distribute & mint songs!
+      </Button>
+    </Stack>
+  );
+};
diff --git a/apps/studio/src/pages/home/wallet/EmptyTransactions.tsx b/apps/studio/src/pages/home/wallet/EmptyTransactions.tsx
@@ -0,0 +1,15 @@
+import { FunctionComponent } from "react";
+import { Stack, Typography } from "@mui/material";
+import { Document } from "@newm-web/assets";
+
+export const EmptyTransactions: FunctionComponent = () => (
+  <Stack alignItems="center" mt={ 17.5 } rowGap={ 1.5 }>
+    <Document />
+    <Typography fontWeight={ 700 } mt={ 0.5 } variant="h4">
+      No transactions found
+    </Typography>
+    <Typography fontSize="14px" fontWeight={ 400 } variant="h4">
+      All future transactions made with the connected wallet will be listed here
+    </Typography>
+  </Stack>
+);
diff --git a/apps/studio/src/pages/home/wallet/NoConnectedWallet.tsx b/apps/studio/src/pages/home/wallet/NoConnectedWallet.tsx
@@ -0,0 +1,38 @@
+import { Stack, Typography } from "@mui/material";
+import { Button } from "@newm-web/elements";
+import { NEWMLogo } from "@newm-web/assets";
+import { setIsConnectWalletModalOpen } from "../../../modules/ui";
+import { useAppDispatch } from "../../../common";
+
+export const NoConnectedWallet = () => {
+  const dispatch = useAppDispatch();
+
+  return (
+    <Stack
+      alignItems="center"
+      height="100%"
+      justifyContent="center"
+      margin="0 auto"
+      maxWidth="500px"
+      rowGap={ 1 }
+      textAlign="center"
+    >
+      <NEWMLogo />
+      <Typography component="h1" fontWeight="700" mt={ 4 } variant="body2">
+        Connect your wallet
+      </Typography>
+      <Typography variant="subtitle1">
+        Connecting your wallet will enable you to claim your accrued royalties,
+        stream token sale earnings, and view your transaction history.
+      </Typography>
+      <Button
+        gradient="crypto"
+        sx={ { mt: 2 } }
+        width="compact"
+        onClick={ () => dispatch(setIsConnectWalletModalOpen(true)) }
+      >
+        Connect Wallet
+      </Button>
+    </Stack>
+  );
+};
diff --git a/apps/studio/src/pages/home/wallet/NoPendingEarnings.tsx b/apps/studio/src/pages/home/wallet/NoPendingEarnings.tsx
@@ -0,0 +1,27 @@
+import { FunctionComponent } from "react";
+import { Stack, Typography } from "@mui/material";
+import { CheckCircle } from "@newm-web/assets";
+import theme from "@newm-web/theme";
+
+export const NoPendingEarnings: FunctionComponent = () => (
+  <Stack
+    sx={ {
+      backgroundColor: theme.colors.grey600,
+      borderRadius: "6px",
+      flexDirection: "row",
+      gap: 1.5,
+      p: 2,
+      width: "fit-content",
+    } }
+  >
+    <CheckCircle fill={ theme.colors.green } />
+    <Stack>
+      <Typography color={ theme.colors.green } fontWeight={ 500 }>
+        No pending earnings to claim
+      </Typography>
+      <Typography color={ theme.colors.grey200 } fontWeight={ 500 }>
+        Total earnings accrued so far: ##.##Ɲ (~$#.##)
+      </Typography>
+    </Stack>
+  </Stack>
+);