v1.0.0

v1.0.0

README.md

@@ -1,14 +1,18 @@
-# Lyra Interface
+# Kwenta Options Interface
 
 An open source interface for the Lyra Protocol, a decentralized options exchange built on Optimistic Ethereum.
 
-## Accessing the Lyra Interface
+## Accessing the Kwenta Options Interface
 
-To access the Lyra Interface, use an IPFS gateway link from the [latest release](https://github.com/lyra-finance/interface/releases/latest) or visit [app.lyra.finance](https://app.lyra.finance).
+To access the Kwenta Options Interface, use an IPFS gateway link from the [latest release](https://github.com/Kwenta/lyra-interface/releases/latest) or visit [options.kwenta.eth.limo](https://options.kwenta.eth.limo).
 
 ## Contributions
 
-The Lyra Interface is open source, permissionless software that can be developed and hosted by anyone. Thanks in advance for your contributions!
+The Kwenta Options Interface is open source, permissionless software that can be developed and hosted by anyone. Thanks in advance for your contributions! Contributors should fork this repository and submit pull requests against the `kwenta/lyra-interface:dev` branch.
+
+The `master` branch will be regularly synchronized in line with changes incoming from the `lyra-finance/interface:master` branch by the devDAO PM. 
+
+Once changes in the `dev` branch have been thoroughly tested and approved, new releases to the Kwenta-hosted Lyra frontend will be pushed to the `deploy` branch.
 
 ### Setup
 
@@ -26,4 +30,4 @@ yarn start
 
 ```
 yarn build
-```
+```

app/.env.production

@@ -10,6 +10,8 @@ REACT_APP_ENABLE_TERMS_OF_USE=true
 # Node Providers
 REACT_APP_INFURA_PROJECT_ID=0454e8da3dd7418c8cc8bf0961417068
 REACT_APP_ALCHEMY_PROJECT_ID=PAYPVgUFFCJE6uKwBWzZI_PjrSF79-0I
+REACT_APP_ALCHEMY_ARBITRUM_PROJECT_ID=zHh7If3eVmL8WETSWzpqFV61YqUNARwe
+REACT_APP_ALCHEMY_ETHEREUM_PROJECT_ID=7CT7Q2obESWD4Kfvf8tUo2PynUzaZh1N
 
 # Analytics
 REACT_APP_POST_HOG_API_KEY=phc_1duTJdHbYFcVN268FV4CI3vDf3dgM0AqKsBkM2nasBt

app/craco.config.cjs

@@ -25,6 +25,14 @@ module.exports = {
           new BundleAnalyzerPlugin({ analyzerMode: process.env.REACT_APP_INTERACTIVE_ANALYZE ? 'server' : 'json' })
         )
       }
+      if (process.env.NODE_ENV !== 'production') {
+        webpackConfig.devtool = 'eval-cheap-module-source-map'
+        webpackConfig.ignoreWarnings = [
+          {
+            message: /Failed to parse source map/,
+          },
+        ]
+      }
       webpackConfig.plugins.push(
         new webpack.ProvidePlugin({
           Buffer: ['buffer', 'Buffer'],

app/public/index.html

@@ -7,21 +7,21 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"></meta>
 
     <!-- Primary Meta Tags -->
-    <title>Lyra Interface | Decentralized Options Liquidity</title>
-    <meta name="title" content="Lyra Interface | Decentralized Options Liquidity">
+    <title>Kwenta Options | Decentralized Options Liquidity</title>
+    <meta name="title" content="Kwenta Options | Decentralized Options Liquidity">
     <meta name="description" content="Trade crypto options on ETH and BTC using Lyra's decentralized options liquidity protocol">
 
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website">
     <meta property="og:url" content="%PUBLIC_URL%">
-    <meta property="og:title" content="Lyra Interface | Decentralized Options Liquidity">
+    <meta property="og:title" content="Kwenta Options | Decentralized Options Liquidity">
     <meta property="og:description" content="Trade crypto options on ETH and BTC using Lyra's decentralized options liquidity protocol">
     <meta property="og:image" content="%PUBLIC_URL%/images/preview.png">
 
     <!-- Twitter -->
     <meta property="twitter:card" content="summary_large_image">
     <meta property="twitter:url" content="%PUBLIC_URL%/">
-    <meta property="twitter:title" content="Lyra Interface | Decentralized Options Liquidity">
+    <meta property="twitter:title" content="Kwenta Options | Decentralized Options Liquidity">
     <meta property="twitter:description" content="Trade crypto options on ETH and BTC using Lyra's decentralized options liquidity protocol">
     <meta property="twitter:image" content="%PUBLIC_URL%/images/preview.png">
 

app/src/App.tsx

@@ -16,8 +16,11 @@ import AdminMarketPage from './pages/AdminPage'
 import NotFoundPage from './pages/NotFoundPage'
 import PortfolioPage from './pages/PortfolioPage'
 import PositionPage from './pages/PositionPage'
-import RewardsHistoryPage from './pages/RewardsHistoryPage'
-import RewardsPage from './pages/RewardsPage'
+import RewardsEthLyraLPPage from './pages/RewardsEthLyraLPPage'
+import RewardsIndexPage from './pages/RewardsIndexPage'
+import RewardsShortsPage from './pages/RewardsShortsPage'
+import RewardsTradingPage from './pages/RewardsTradingPage'
+import RewardsVaultsPage from './pages/RewardsVaultsPage'
 import StoryBookPage from './pages/StoryBookPage'
 import TradePage from './pages/TradePage'
 import VaultsHistoryPage from './pages/VaultsHistoryPage'
@@ -126,8 +129,12 @@ function App(): JSX.Element {
                   <Route path="/vaults/:network/:marketAddressOrName" element={<VaultsPage />} />
                   <Route path="/vaults/history" element={<VaultsHistoryPage />} />
                   <Route path="/position/:network/:marketAddressOrName/:positionId" element={<PositionPage />} />
-                  <Route path="/rewards" element={<RewardsPage />} />
-                  <Route path="/rewards/history" element={<RewardsHistoryPage />} />
+                  <Route path="/rewards" element={<RewardsIndexPage />} />
+                  <Route path="/rewards/trading" element={<Navigate to={`/rewards/trading/${defaultNetwork}`} />} />
+                  <Route path="/rewards/trading/:network" element={<RewardsTradingPage />} />
+                  <Route path="/rewards/vaults/:network/:marketAddressOrName" element={<RewardsVaultsPage />} />
+                  <Route path="/rewards/shorts/:network" element={<RewardsShortsPage />} />
+                  <Route path="/rewards/eth-lyra" element={<RewardsEthLyraLPPage />} />
                   <Route path="/storybook" element={<StoryBookPage />} />
                   <Route
                     path="/admin"

app/src/components/common/LabelItem/index.tsx

@@ -8,7 +8,9 @@ type Props = {
   label: string | React.ReactNode
   value: string | React.ReactNode
   valueColor?: TextColor
+  textVariant?: TextVariant
   valueTextVariant?: TextVariant
+  labelTextVariant?: TextVariant
   noPadding?: boolean
 } & MarginProps &
   LayoutProps
@@ -18,13 +20,17 @@ export default function LabelItem({
   value,
   valueColor,
   noPadding,
-  valueTextVariant = 'secondary',
+  textVariant = 'secondary',
+  valueTextVariant: _valueTextVariant,
+  labelTextVariant: _labelTextVariant,
   ...styleProps
 }: Props) {
+  const valueTextVariant = _valueTextVariant ?? textVariant
+  const labelTextVariant = _labelTextVariant ?? textVariant
   return (
     <Flex flexDirection="column" {...styleProps}>
       {typeof label === 'string' ? (
-        <Text variant="secondary" color="secondaryText" mb={!noPadding ? 2 : 0}>
+        <Text variant={labelTextVariant} color="secondaryText" mb={!noPadding ? 2 : 0}>
           {label}
         </Text>
       ) : (

app/src/components/dev/TableDemoCard/index.tsx

@@ -1,5 +1,6 @@
 import Card, { CardElement } from '@lyra/ui/components/Card'
 import CardSection from '@lyra/ui/components/Card/CardSection'
+import CardSeparator from '@lyra/ui/components/Card/CardSeparator'
 import Table, { TableCellProps, TableColumn, TableData } from '@lyra/ui/components/Table'
 import Text from '@lyra/ui/components/Text'
 import { MarginProps } from '@lyra/ui/types'
@@ -62,6 +63,7 @@ export default function TableDemoCard({ ...marginProps }: MarginProps): CardElem
       <CardSection noPadding isHorizontal flexGrow={1}>
         <Table columns={tableColumns} data={data} />
       </CardSection>
+      <CardSeparator isVertical />
       <CardSection noPadding isHorizontal flexGrow={1}>
         <Table columns={tableColumns} data={data} isOutline />
       </CardSection>

app/src/components/position/PositionCard/index.tsx

@@ -12,6 +12,7 @@ import React, { useState } from 'react'
 import PositionStatusText from '@/app/components/common/PositionStatusText'
 import { UNIT, ZERO_BN } from '@/app/constants/bn'
 import ShortYieldValue from '@/app/containers/common/ShortYieldValue'
+import TradeCollateralFormModal from '@/app/containers/trade/TradeCollateralFormModal'
 import TradeFormModal from '@/app/containers/trade/TradeFormModal'
 import useWallet from '@/app/hooks/account/useWallet'
 
@@ -31,7 +32,8 @@ const PositionCard = ({ position, option }: Props): JSX.Element | null => {
   const equity = position.isLong ? currentPrice.mul(size).div(UNIT) : position?.collateral?.value ?? ZERO_BN
 
   const [isBuy, setIsBuy] = useState(false)
-  const [isOpen, setIsOpen] = useState(false)
+  const [isTradeFormOpen, setIsTradeFormOpen] = useState(false)
+  const [isCollateralFormOpen, setIsCollateralFormOpen] = useState(false)
 
   const { account, isOverride } = useWallet()
   const isOwner = account === position.owner && !isOverride
@@ -85,30 +87,43 @@ const PositionCard = ({ position, option }: Props): JSX.Element | null => {
               label="Open Position"
               onClick={() => {
                 setIsBuy(position.isLong)
-                setIsOpen(true)
+                setIsTradeFormOpen(true)
               }}
             />
             <Button
               variant="error"
-              isOutline
               size="lg"
+              isOutline
               label="Close Position"
               onClick={() => {
                 setIsBuy(!position.isLong)
-                setIsOpen(true)
+                setIsTradeFormOpen(true)
               }}
             />
+            <Button
+              variant="default"
+              size="lg"
+              label="Adjust Collateral"
+              onClick={() => setIsCollateralFormOpen(true)}
+            />
           </Grid>
         ) : null}
       </CardBody>
       <TradeFormModal
-        isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
-        onTrade={() => setIsOpen(false)}
+        isOpen={isTradeFormOpen}
+        onClose={() => setIsTradeFormOpen(false)}
+        onTrade={() => setIsTradeFormOpen(false)}
         isBuy={isBuy}
         position={position}
         option={option}
       />
+      <TradeCollateralFormModal
+        isOpen={isCollateralFormOpen}
+        onClose={() => setIsCollateralFormOpen(false)}
+        onTrade={() => setIsCollateralFormOpen(false)}
+        position={position}
+        option={option}
+      />
     </Card>
   )
 }

app/src/components/rewards/RewardTokenAmounts/index.tsx

@@ -0,0 +1,51 @@
+import Flex from '@lyra/ui/components/Flex'
+import Text, { TextVariant } from '@lyra/ui/components/Text'
+import { MarginProps } from '@lyra/ui/types'
+import formatNumber from '@lyra/ui/utils/formatNumber'
+import { RewardEpochTokenAmount } from '@lyrafinance/lyra-js'
+import React from 'react'
+import { useMemo } from 'react'
+
+import TokenImageStack from '../../common/TokenImageStack'
+
+type Props = {
+  tokenAmounts: RewardEpochTokenAmount[]
+  size?: number
+  variant?: TextVariant
+  showDash?: boolean
+  hideZeroAmount?: boolean
+  hideTokenImages?: boolean
+} & MarginProps
+
+export default function RewardTokenAmounts({
+  tokenAmounts,
+  size = 24,
+  variant = 'body',
+  showDash = true,
+  hideTokenImages = false,
+  hideZeroAmount = false,
+  ...styleProps
+}: Props) {
+  const rewardsText = useMemo(
+    () => tokenAmounts.map(token => `${formatNumber(token.amount)} ${token.symbol}`).join(', '),
+    [tokenAmounts]
+  )
+  const isRewardAmountZero = tokenAmounts.reduce((totalAmount, tokenAmount) => totalAmount + tokenAmount.amount, 0) <= 0
+
+  if (showDash && (tokenAmounts.length === 0 || (hideZeroAmount && isRewardAmountZero))) {
+    return (
+      <Text variant={variant} {...styleProps}>
+        -
+      </Text>
+    )
+  }
+
+  return (
+    <Flex alignItems="center" {...styleProps}>
+      {!hideTokenImages ? (
+        <TokenImageStack mr={2} size={size} tokenNameOrAddresses={tokenAmounts.map(t => t.symbol)} />
+      ) : null}
+      <Text variant={variant}>{rewardsText}</Text>
+    </Flex>
+  )
+}