OriginProtocol · toniocodo · Jun 20, 2024 · Jun 17, 2024 · Jun 17, 2024 · Jun 17, 2024
diff --git a/.gitignore b/.gitignore
@@ -45,4 +45,5 @@ Thumbs.db
 # env
 .env.local
 
-.nx/cache
+.nx/cache
+.nx/workspace-data
diff --git a/.prettierignore b/.prettierignore
@@ -2,4 +2,5 @@
 /dist
 /coverage
 generated
-/.nx/cache
+/.nx/cache
+/.nx/workspace-data
diff --git a/apps/defi/index.html b/apps/defi/index.html
@@ -42,6 +42,9 @@
     <link rel="shortcut icon" href="/favicon.svg" type="image/x-icon" />
     <link rel="icon" href="/favicon.svg" type="image/x-icon" />
 
+    <!-- Manifest -->
+    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
+
     <!-- og social -->
     <meta property="og:url" content="https://originprotocol.eth.limo/" />
     <meta property="og:type" content="website" />
@@ -55,7 +58,7 @@
     <meta name="twitter:title" content="Origin Unified Defi" />
     <meta name="twitter:description" content="The official dapp for our groundbreaking multichain yield ecosystem" />
     <meta name="twitter:image" content="https://raw.githubusercontent.com/OriginProtocol/origin-defi/main/apps/defi/public/images/meta_defi.webp" />
-    
+
   </head>
   <body>
     <div id="root"></div>

diff --git a/apps/defi/public/manifest.json b/apps/defi/public/manifest.json
@@ -0,0 +1,6 @@
+{
+  "name": "Origin Unified Defi",
+  "description": "The official dapp for our groundbreaking multichain yield ecosystem",
+  "iconPath": "https://raw.githubusercontent.com/OriginProtocol/origin-defi/main/libs/shared/icons/src/origin/origin-logo.svg",
+  "providedBy": { "name": "Origin", "url": "https://www.originprotocol.com/" }
+}
diff --git a/apps/defi/src/components/Topnav/components/AlertPopover.tsx b/apps/defi/src/components/Topnav/components/AlertPopover.tsx
@@ -0,0 +1,93 @@
+import { Divider, Stack, Typography } from '@mui/material';
+import { useTxButton } from '@origin/defi/shared';
+import { ClickAwayPopover, TokenIcon } from '@origin/shared/components';
+import { tokens } from '@origin/shared/contracts';
+import { PoweredBySafe } from '@origin/shared/icons';
+import { TxButton } from '@origin/shared/providers';
+import { useIntl } from 'react-intl';
+
+import type { StackProps } from '@mui/material';
+import type { ClickAwayPopoverProps } from '@origin/shared/components';
+import type { Contract, Token } from '@origin/shared/contracts';
+
+export const AlertPopover = (
+  props: Omit<ClickAwayPopoverProps, 'children'>,
+) => {
+  const intl = useIntl();
+
+  return (
+    <ClickAwayPopover
+      {...props}
+      paperProps={{
+        sx: {
+          minWidth: 350,
+          maxWidth: 370,
+          mt: 1,
+          borderRadius: 4,
+          border: '1px solid',
+          borderColor: 'divider',
+          backgroundColor: 'background.highlight',
+        },
+      }}
+    >
+      <Stack p={3} spacing={2}>
+        <PoweredBySafe sx={{ width: 1, height: 24 }} />
+        <Typography>
+          {intl.formatMessage({
+            defaultMessage:
+              'It looks like you are minting from a contract and have not opted into yield. You must opt-in to receive yield.',
+          })}
+        </Typography>
+      </Stack>
+      <Divider />
+      <Stack divider={<Divider />}>
+        <RebaseRow token={tokens.mainnet.OETH} px={3} py={1.5} />
+        <RebaseRow token={tokens.mainnet.OUSD} px={3} py={1.5} />
+      </Stack>
+    </ClickAwayPopover>
+  );
+};
+
+type RebaseRowProps = { token: Token } & StackProps;
+
+const RebaseRow = ({ token, ...rest }: RebaseRowProps) => {
+  const intl = useIntl();
+  const { params, callbacks } = useTxButton({
+    params: {
+      contract: token as Contract,
+      functionName: 'rebaseOptIn',
+      value: 0n,
+    },
+    activity: {
+      type: 'rebasing',
+      status: 'idle',
+      tokenIdIn: token.id,
+    },
+  });
+
+  return (
+    <Stack
+      direction="row"
+      alignItems="center"
+      justifyContent="space-between"
+      spacing={0.5}
+      {...rest}
+    >
+      <TokenIcon token={token} sx={{ fontSize: 36 }} />
+      <Typography>
+        {intl.formatMessage(
+          { defaultMessage: 'Enable rebasing for {symbol}' },
+          { symbol: token.symbol },
+        )}
+      </Typography>
+      <TxButton
+        params={params}
+        callbacks={callbacks}
+        label={intl.formatMessage({ defaultMessage: 'Opt in' })}
+        waitingSignatureLabel={intl.formatMessage({
+          defaultMessage: 'Signing',
+        })}
+      />
+    </Stack>
+  );
+};
diff --git a/apps/defi/src/components/Topnav/components/Topnav.tsx b/apps/defi/src/components/Topnav/components/Topnav.tsx
@@ -13,16 +13,24 @@ import {
 } from '@mui/material';
 import Grid2 from '@mui/material/Unstable_Grid2/Grid2';
 import { trackEvent, useActivitiesStatus } from '@origin/defi/shared';
-import { FaBarsRegular, OriginLabel } from '@origin/shared/icons';
+import { tokens } from '@origin/shared/contracts';
+import {
+  FaBarsRegular,
+  FaCircleExclamationRegular,
+  OriginLabel,
+} from '@origin/shared/icons';
 import {
   ChainMenuButton,
   OpenAccountModalButton,
+  useIsRebaseBannerVisible,
 } from '@origin/shared/providers';
+import { not } from 'ramda';
 import { useIntl } from 'react-intl';
 import { Link as RouterLink } from 'react-router-dom';
 import { useAccount } from 'wagmi';
 
 import { AccountPopover } from './AccountPopover';
+import { AlertPopover } from './AlertPopover';
 import { DrawerMenu } from './DrawerMenu';
 import { HoverMenu } from './HoverMenu';
 
@@ -34,10 +42,15 @@ export const Topnav = () => {
   const isSm = useMediaQuery(theme.breakpoints.down('md'));
   const accountMenuAnchorEl = useRef(null);
   const [accountMenuOpen, setAccountMenuOpen] = useState(false);
+  const alertMenuAnchorEl = useRef(null);
+  const [alertMenuOpen, setAlertMenuOpen] = useState(false);
   const [drawerOpen, setDrawerOpen] = useState(false);
   const { status, pendingCount } = useActivitiesStatus();
+  const isOethRebaseRequired = useIsRebaseBannerVisible(tokens.mainnet.OETH);
+  const isOusdRebaseRequired = useIsRebaseBannerVisible(tokens.mainnet.OUSD);
 
   const isLoading = status === 'pending' && pendingCount > 0;
+  const showRebaseMenu = isOethRebaseRequired || isOusdRebaseRequired;
 
   return (
     <>
@@ -106,6 +119,29 @@ export const Topnav = () => {
               gap: 1.25,
             }}
           >
+            {showRebaseMenu && (
+              <>
+                <Button
+                  variant="nav"
+                  color="secondary"
+                  ref={alertMenuAnchorEl}
+                  onClick={() => {
+                    setAlertMenuOpen(not);
+                  }}
+                >
+                  <FaCircleExclamationRegular
+                    sx={{ fontSize: 24, color: 'warning.main' }}
+                  />
+                </Button>
+                <AlertPopover
+                  open={alertMenuOpen}
+                  anchorEl={alertMenuAnchorEl}
+                  onClose={() => {
+                    setAlertMenuOpen(false);
+                  }}
+                />
+              </>
+            )}
             <ChainMenuButton
               variant="nav"
               color="secondary"
@@ -159,6 +195,7 @@ export const Topnav = () => {
                 sx: { '&&&': { minWidth: 80, borderRadius: 2 } },
               }}
               hideAddress={isMd}
+              hideWrongNetwork
             >
               {isLoading ? (
                 <Stack direction="row" alignItems="center" spacing={1}>

diff --git a/apps/defi/src/lang/en.json b/apps/defi/src/lang/en.json
@@ -271,6 +271,12 @@
       "value": "OETH analytics"
     }
   ],
+  "2zUGfB": [
+    {
+      "type": 0,
+      "value": "Enable rebasing"
+    }
+  ],
   "3Lr8o5": [
     {
       "type": 0,
@@ -651,6 +657,12 @@
       "value": "The amount of OGV in your wallet"
     }
   ],
+  "9/afiv": [
+    {
+      "type": 0,
+      "value": "Signing"
+    }
+  ],
   "94TAJq": [
     {
       "type": 0,
@@ -1177,6 +1189,12 @@
       "value": "Claim Rewards"
     }
   ],
+  "IP0AHa": [
+    {
+      "type": 0,
+      "value": "Error while enabling rebasing"
+    }
+  ],
   "IfZsEo": [
     {
       "type": 0,
@@ -1845,6 +1863,12 @@
       "value": "symbolStaked"
     }
   ],
+  "TpHJwv": [
+    {
+      "type": 0,
+      "value": "Rebase enabled"
+    }
+  ],
   "TrKxvg": [
     {
       "type": 0,
@@ -2625,6 +2649,16 @@
       "value": "Approving"
     }
   ],
+  "m2eUvr": [
+    {
+      "type": 0,
+      "value": "Enable rebasing for "
+    },
+    {
+      "type": 1,
+      "value": "symbol"
+    }
+  ],
   "m9XypM": [
     {
       "type": 0,
@@ -3003,6 +3037,12 @@
       "value": "Casting vote"
     }
   ],
+  "v0B1E9": [
+    {
+      "type": 0,
+      "value": "Enabling rebasing"
+    }
+  ],
   "vLIiaK": [
     {
       "type": 0,
@@ -3127,6 +3167,16 @@
       "value": "Earnings and transaction history"
     }
   ],
+  "xpU+qf": [
+    {
+      "type": 1,
+      "value": "symbolIn"
+    },
+    {
+      "type": 0,
+      "value": " on contract"
+    }
+  ],
   "xwfunk": [
     {
       "type": 0,

diff --git a/apps/defi/src/lang/extracts/en.json b/apps/defi/src/lang/extracts/en.json
@@ -119,6 +119,9 @@
   "2ahSeJ": {
     "defaultMessage": "OETH analytics"
   },
+  "2zUGfB": {
+    "defaultMessage": "Enable rebasing"
+  },
   "3Lr8o5": {
     "defaultMessage": "Larger redemptions coming soon"
   },
@@ -260,6 +263,9 @@
   "8w4BfJ": {
     "defaultMessage": "The amount of OGV in your wallet"
   },
+  "9/afiv": {
+    "defaultMessage": "Signing"
+  },
   "94TAJq": {
     "defaultMessage": "TVL: {tvl}"
   },
@@ -467,6 +473,9 @@
   "IEM00S": {
     "defaultMessage": "Claim Rewards"
   },
+  "IP0AHa": {
+    "defaultMessage": "Error while enabling rebasing"
+  },
   "IfZsEo": {
     "defaultMessage": "Vote against"
   },
@@ -701,6 +710,9 @@
   "Th/AXT": {
     "defaultMessage": "{amount} {symbolIn} for {amountLiquid} {symbolLiquid}, staked for {amountStaked} {symbolStaked}"
   },
+  "TpHJwv": {
+    "defaultMessage": "Rebase enabled"
+  },
   "TrKxvg": {
     "defaultMessage": "You affirm that you are not a subject of economic or trade sanctions administered or enforced by any governmental authority or otherwise designated on any list of prohibited or restricted parties, including the list maintained by the Office of Foreign Assets Control of the U.S. Department of the Treasury."
   },
@@ -1043,6 +1055,9 @@
   "m/L3sK": {
     "defaultMessage": "Approving"
   },
+  "m2eUvr": {
+    "defaultMessage": "Enable rebasing for {symbol}"
+  },
   "m9XypM": {
     "defaultMessage": "Sending {amount} {symbolIn} to {chainOut}."
   },
@@ -1208,6 +1223,9 @@
   "utrdPr": {
     "defaultMessage": "Casting vote"
   },
+  "v0B1E9": {
+    "defaultMessage": "Enabling rebasing"
+  },
   "vLIiaK": {
     "defaultMessage": "Bridge {symbol}"
   },
@@ -1259,6 +1277,9 @@
   "xnfnI5": {
     "defaultMessage": "Earnings and transaction history"
   },
+  "xpU+qf": {
+    "defaultMessage": "{symbolIn} on contract"
+  },
   "xwfunk": {
     "defaultMessage": "Restricted Access"
   },

diff --git a/apps/defi/vite.config.mts b/apps/defi/vite.config.mts
@@ -10,6 +10,7 @@ export default defineConfig({
   root: __dirname,
   build: {
     outDir: '../../dist/apps/defi',
+    emptyOutDir: true,
     reportCompressedSize: true,
     commonjsOptions: {
       transformMixedEsModules: true,