feat(perp): initial work for sharing position Refs: BFE-32

apps/perp/package.json

@@ -30,6 +30,9 @@
     "date-fns": "^2.29.3",
     "ethers": "^6.8.0",
     "framer-motion": "^10.15.0",
+    "qrcode": "^1.5.3",
+    "html-to-image": "^1.11.11",
+    "@rive-app/react-canvas": "^4.8.1",
     "moment": "^2.29.1",
     "next": "^14.1.3",
     "next-auth": "^4.24.5",

apps/perp/src/app/Providers.tsx

@@ -4,16 +4,16 @@ import React, { type PropsWithChildren } from "react";
 import { BeraWagmi } from "@bera/wagmi";
 import { ThemeProvider } from "next-themes";
 
-import { PriceContextProvider } from "~/context/price-context";
+// import { PriceContextProvider } from "~/context/price-context";
 import { TableContextProvider } from "~/context/table-context";
 
 export default function Providers({ children }: PropsWithChildren<any>) {
   return (
     <BeraWagmi>
       <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
-        <PriceContextProvider>
+        {/* <PriceContextProvider> */}
           <TableContextProvider>{children}</TableContextProvider>
-        </PriceContextProvider>
+        {/* </PriceContextProvider> */}
       </ThemeProvider>
     </BeraWagmi>
   );

apps/perp/src/app/berpetuals/components/order-history.tsx

@@ -12,6 +12,7 @@ import { ColumnDef } from "@tanstack/react-table";
 
 import { generateMarketOrders } from "~/utils/generateMarketOrders";
 import { ClosePositionModal } from "~/app/components/close-position-modal";
+import { SharePositionModal } from "~/app/components/share-position-modal";
 import { generateHistoryColumns } from "~/app/components/table-columns/history";
 import { generateOrdersColumns } from "~/app/components/table-columns/orders";
 import { generatePnlColumns } from "~/app/components/table-columns/pnl";
@@ -41,12 +42,13 @@ export function OrderHistory({
   markets: IMarket[];
   size: "sm" | "md" | "lg";
 }) {
-  const [updateOpen, setUpdateOpen] = useState<boolean | IOpenTradeCalculated>(
-    false,
-  );
-  const [deleteOpen, setDeleteOpen] = useState<boolean | IOpenTradeCalculated>(
-    false,
-  );
+  const [shareOpen, setShareOpen] = useState<boolean | IMarketOrder>(false);
+  const [updateOpen, setUpdateOpen] = useState<
+    boolean | IOpenTradeCalculated | IMarketOrder
+  >(false);
+  const [deleteOpen, setDeleteOpen] = useState<
+    boolean | IOpenTradeCalculated | IMarketOrder
+  >(false);
 
   const { tableState, setTableState } = useContext(TableContext);
   const { isConnected } = useBeraJs();
@@ -201,7 +203,14 @@ export function OrderHistory({
           }
           return position;
         });
-        columns = markets ? generateHistoryColumns(markets) : [];
+        columns = markets
+          ? generateHistoryColumns(
+              markets,
+              setShareOpen,
+              setUpdateOpen,
+              setDeleteOpen,
+            )
+          : [];
         totalPages = marketOrdersPagination?.total_pages ?? 1;
         isLoading = isMarketOrdersLoading || !isConnected;
         isValidating = isMarketOrdersValidation;
@@ -275,6 +284,11 @@ export function OrderHistory({
         markets={markets}
         tabType={tableState.tabType ?? "positions"}
       />
+      <SharePositionModal
+        order={shareOpen as IMarketOrder}
+        controlledOpen={!!shareOpen}
+        onOpenChange={setShareOpen}
+      />
       <UpdatePositionModal
         openPosition={updateOpen as IOpenTradeCalculated}
         controlledOpen={!!updateOpen}

apps/perp/src/app/components/hero.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import Link from "next/link";
 import { Button } from "@bera/ui/button";
+import { RocketAnimation } from "./rocket-animation";
 
 export default function Hero() {
   return (
@@ -29,6 +30,7 @@ export default function Hero() {
           <Button variant="secondary">Explore Markets</Button>
         </Link>
       </div>
+      <RocketAnimation />
     </div>
   );
 }

apps/perp/src/app/components/market-trade-pnl.tsx

@@ -18,6 +18,8 @@ export const MarketTradePNL = ({
   position,
   positionSize,
   className,
+  pnlClassName,
+  percentageClassName,
   wrapped,
   closePrice,
   hoverState = true,
@@ -29,6 +31,8 @@ export const MarketTradePNL = ({
   position: IOpenTrade | IMarketOrder | IClosedTrade;
   positionSize: string;
   className?: string;
+  pnlClassName?: string;
+  percentageClassName?: string;
   wrapped?: boolean;
   closePrice?: string;
   hoverState?: boolean;
@@ -123,10 +127,10 @@ export const MarketTradePNL = ({
                 }
               />
             ) : (
-              <div>{formatUsd(pnl)}</div>
+              <div className={pnlClassName}>{formatUsd(pnl)}</div>
             )}
             {wrapped && <div className="text-xs"> | </div>}
-            <div className="text-xs">({percentage}%)</div>
+            <div className={cn("text-xs", percentageClassName)}>({percentage}%)</div>
           </div>
         </div>
       ) : (

apps/perp/src/app/components/position-title.tsx

@@ -8,11 +8,13 @@ export function PositionTitle({
   type,
   leverage,
   className,
+  large
 }: {
   market: IMarket;
   type: "Long" | "Short";
   leverage: number;
   className?: string;
+  large?: boolean;
 }) {
   const leverageLabelColor = {
     Long: {
@@ -32,17 +34,18 @@ export function PositionTitle({
       <Image
         src={market?.imageUri ?? ""}
         alt={"selectedMarket"}
-        width={24}
-        height={24}
+        width={large ? 36 : 24}
+        height={large ? 36 : 24}
         className="rounded-full"
       />{" "}
       <div>
-        <div className="mt-1 text-nowrap text-sm font-semibold leading-tight text-foreground">
+        <div className={cn("mt-1 text-nowrap text-sm font-semibold leading-tight text-foreground", large && "text-2xl")}>
           {market?.name}
         </div>
         <div
           className={cn(
             "mt-1 flex flex-row items-center gap-1 text-sm font-medium leading-tight",
+            large && "text-xl",
             type === "Long"
               ? "text-success-foreground"
               : "text-destructive-foreground",

apps/perp/src/app/components/rocket-animation.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  Spinner,
+} from "@bera/shared-ui";
+import {
+  EventType,
+  Fit,
+  Layout,
+  useRive,
+  useStateMachineInput,
+} from "@rive-app/react-canvas";
+
+export function RocketAnimation() {
+  const { RiveComponent, rive } = useRive({
+    src: "/berps_rocket.riv",
+    stateMachines: "State Machine",
+    autoplay: true,
+    layout: new Layout({ fit: Fit.Contain }),
+  });
+
+  useEffect(() => {
+    if (rive) rive.play();
+  }, [rive]);
+
+  return (
+    <>
+        <div className="z-0 mt-[400px] absolute opacity-60 h-[500px] w-[500px]">
+          <RiveComponent />
+        </div>
+    </>
+  );
+}