Merge branch 'retroboy/swap-ui' into isha/feature/add-liquidity-page

jediswaplabs · Nov 25, 2023 · d8e7f56 · d8e7f56
2 parents 3bf0139 + 24cd357
commit d8e7f56
Show file tree

Hide file tree

Showing 9 changed files with 644 additions and 744 deletions.
diff --git a/.github/workflows/jediswap-mainnet.yml b/.github/workflows/jediswap-mainnet.yml
@@ -106,4 +106,8 @@ jobs:
       - name: Run Cache Invalidation
         run: aws cloudfront create-invalidation --distribution-id $CDN_DISTRIBUTION_ID --paths /\*
         env:
-          CDN_DISTRIBUTION_ID: ${{ secrets.AWS_CDN_DISTRIBUTION_ID }}
+<<<<<<< HEAD
+          CDN_DISTRIBUTION_ID: ${{ secrets.AWS_CDN_DISTRIBUTION_ID }}
+=======
+          CDN_DISTRIBUTION_ID: ${{ secrets.AWS_CDN_DISTRIBUTION_ID }}
+>>>>>>> d2a7f2f5a171ea0ae113d50e1bf5b40cdd8891df
diff --git a/.github/workflows/jediswap-testnet.yml b/.github/workflows/jediswap-testnet.yml
@@ -43,4 +43,8 @@ jobs:
       - name: Run Cache Invalidation
         run: aws cloudfront create-invalidation --distribution-id $CDN_DISTRIBUTION_ID --paths /\*
         env:
-          CDN_DISTRIBUTION_ID: ${{ secrets.AWS_CDN_DISTRIBUTION_ID }}
+<<<<<<< HEAD
+          CDN_DISTRIBUTION_ID: ${{ secrets.AWS_CDN_DISTRIBUTION_ID }}
+=======
+          CDN_DISTRIBUTION_ID: ${{ secrets.AWS_CDN_DISTRIBUTION_ID }}
+>>>>>>> d2a7f2f5a171ea0ae113d50e1bf5b40cdd8891df
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jediswap/interface",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "description": "Jediswap Interface",
   "homepage": ".",
   "scripts": {
@@ -90,7 +90,7 @@
     "@types/node": "^13.13.5",
     "@types/qs": "^6.9.2",
     "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.0.6",
+    "@types/react-dom": "^18.2.15",
     "@types/react-redux": "^7.1.24",
     "@types/react-table": "^7.7.12",
     "@types/react-virtualized-auto-sizer": "^1.0.0",
@@ -120,7 +120,7 @@
     "eslint-plugin-import": "^2.27",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-rulesdir": "^0.2.2",
-    "hardhat": "^2.14.0",
+    "hardhat": "^2.19.1",
     "husky": "^8.0.3",
     "jest": "^29.6.1",
     "jest-extended": "^4.0.1",
@@ -130,15 +130,15 @@
     "jpeg-js": "^0.4.4",
     "lint-staged": "^14.0.0",
     "mini-css-extract-plugin": "^2.7.6",
-    "patch-package": "^7.0.0",
+    "patch-package": "^8.0.0",
     "path-browserify": "^1.0.1",
     "png-ts": "^0.0.3",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.8.8",
     "process": "^0.11.10",
     "react-scripts": "^5.0.1",
     "resize-observer-polyfill": "^1.5.1",
-    "serve": "^11.3.2",
+    "serve": "^14.2.1",
     "source-map-explorer": "^2.5.3",
     "start-server-and-test": "^2.0.0",
     "swc-loader": "^0.2.3",
@@ -175,12 +175,12 @@
     "@opensea/seaport-js": "^1.2.0",
     "@popperjs/core": "^2.4.4",
     "@reach/dialog": "^0.10.3",
-    "@reach/portal": "^0.10.3",
+    "@reach/portal": "^0.18.0",
     "@reduxjs/toolkit": "^1.9.3",
     "@sentry/react": "^7.45.0",
     "@sentry/tracing": "^7.45.0",
     "@sentry/types": "^7.45.0",
-    "@starknet-react/chains": "^0.1.0-next.0",
+    "@starknet-react/chains": "^0.1.0",
     "@starknet-react/core": "^2.0.0-next.3",
     "@types/react-helmet": "^6.1.7",
     "@types/react-window-infinite-loader": "^1.0.6",
@@ -247,12 +247,12 @@
     "localforage": "^1.10.0",
     "make-plural": "^7.0.0",
     "ms": "^2.1.3",
-    "multicodec": "^3.0.1",
+    "multicodec": "^3.2.1",
     "multihashes": "^4.0.2",
-    "nock": "^13.3.3",
+    "nock": "^13.3.8",
     "node-fetch": "^3.3.2",
     "node-vibrant": "^3.2.1-alpha.1",
-    "numbro": "^2.3.6",
+    "numbro": "^2.4.0",
     "polished": "^3.3.2",
     "polyfill-object.fromentries": "^1.0.1",
     "qrcode.react": "^3.1.0",
@@ -263,7 +263,7 @@
     "react-feather": "^2.0.8",
     "react-helmet": "^6.1.0",
     "react-infinite-scroll-component": "^6.1.0",
-    "react-is": "^17.0.2",
+    "react-is": "^18.2.0",
     "react-markdown": "^4.3.1",
     "react-popper": "^2.2.3",
     "react-query": "^3.39.1",

diff --git a/src/components/Badge/RangeBadge.tsx b/src/components/Badge/RangeBadge.tsx
@@ -16,6 +16,13 @@ const BadgeText = styled.div`
   font-size: 12px;
   line-height: 14px;
   margin-right: 8px;
+  @media (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
+    margin-left: auto;
+  }
+
+  @media (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
+    margin-left: auto;
+  }
 `
 
 const ActiveDot = styled.span`
@@ -31,6 +38,13 @@ const LabelText = styled.div<{ color: string }>`
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
+  @media (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
+    width: 154px;
+  }
+
+  @media (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
+    width: 154px;
+  }
 `
 
 export default function RangeBadge({ removed, inRange }: { removed?: boolean; inRange?: boolean }) {

diff --git a/src/components/PositionList/index.tsx b/src/components/PositionList/index.tsx
@@ -1,55 +1,50 @@
-import { Trans } from '@lingui/macro'
-import PositionListItem from 'components/PositionListItem'
-import React from 'react'
-import styled from 'styled-components'
-import { MEDIA_WIDTHS } from 'theme'
-import { PositionDetails } from 'types/position'
+import { Trans } from '@lingui/macro';
+import React from 'react';
+import styled from 'styled-components';
+import { PositionDetails } from 'types/position';
 
-const DesktopHeader = styled.div`
-  display: none;
-  font-size: 14px;
-  padding: 16px;
-  font-family: 'DM Sans';
-  font-weight: 700;
-  background-color: rgba(255, 255, 255, 0.2);
-  @media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
-    display: grid;
-    gap: 1em;
-    grid-template-columns: 1.5fr 0.5fr 0.5fr 1fr;
-    & > div:last-child {
-      text-align: right;
-      margin-right: 12px;
-    }
-  }
-`
+import PositionListItem from 'components/PositionListItem';
 
-const MobileHeader = styled.div`
-  font-weight: medium;
-  padding: 8px;
-  font-weight: 535;
-  padding: 16px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+const Header = styled.div`
+  display: grid;
+  grid-template-columns: 1.5fr 0.5fr 0.5fr 1fr;
+  grid-template-areas: "MyPositions Liqidity Fee Toggle";
+  gap: 12px;
   padding: 16px;
-  border-bottom: 1px solid ${({ theme }) => theme.surface3};
+  text-align: right;
 
-  @media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
-    display: none;
+  @media (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
+    grid-template-areas: "MyPositions MyPositions Toggle Toggle";
   }
+`;
 
-  @media screen and (max-width: ${MEDIA_WIDTHS.deprecated_upToExtraSmall}px) {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
+const HeaderMyPositionCell = styled.div`
+  text-align: left;
+  grid-area: MyPositions;
+`;
+const HeaderLiquidityCell = styled.div`
+  grid-area: Liqidity;
+  
+  @media (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
+    display: none;
+  }
+`;
+const HeaderFeeCell = styled.div`
+  grid-area: Fee;
+  
+  @media (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
+    display: none;
   }
-`
+`;
+const HeaderToggleLabelCell = styled.div`
+  grid-area: Toggle;
+`;
 
 const ToggleWrap = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-`
+`;
 
 const ToggleLabel = styled.button`
   cursor: pointer;
@@ -60,64 +55,52 @@ const ToggleLabel = styled.button`
   font-style: normal;
   font-weight: 700;
   margin-left: auto;
-`
+`;
 const Divider = styled.div`
   height: 1px;
   background-color: ${({ theme }) => theme.divider};
-`
+`;
 
 type PositionListProps = React.PropsWithChildren<{
   positions: PositionDetails[]
   setUserHideClosedPositions: any
   userHideClosedPositions: boolean
 }>
 
-export default function PositionList({
-  positions,
+export default function PositionList({ positions,
   setUserHideClosedPositions,
-  userHideClosedPositions,
-}: PositionListProps) {
+  userHideClosedPositions }: PositionListProps) {
   return (
     <>
-      <DesktopHeader>
-        <div>
+      <Header>
+        <HeaderMyPositionCell>
           <Trans>My positions</Trans>
-          {positions && ' (' + positions.length + ')'}
-        </div>
-        <div>
+          {positions && ` (${positions.length})`}
+        </HeaderMyPositionCell>
+        <HeaderLiquidityCell>
           <Trans>Liquidity</Trans>
-        </div>
-        <div>
+        </HeaderLiquidityCell>
+        <HeaderFeeCell>
           <Trans>Fees earned</Trans>
-        </div>
-
-        <ToggleLabel
-          id="desktop-hide-closed-positions"
-          onClick={() => {
-            setUserHideClosedPositions(!userHideClosedPositions)
-          }}
-        >
-          {userHideClosedPositions ? <Trans>Show closed positions</Trans> : <Trans>Hide closed positions</Trans>}
-        </ToggleLabel>
-      </DesktopHeader>
-      <MobileHeader>
-        <Trans>Your positions</Trans>
-        <ToggleWrap>
+        </HeaderFeeCell>
+        <HeaderToggleLabelCell>
           <ToggleLabel
+            id="desktop-hide-closed-positions"
             onClick={() => {
-              setUserHideClosedPositions(!userHideClosedPositions)
+              setUserHideClosedPositions(!userHideClosedPositions);
             }}
           >
             {userHideClosedPositions ? <Trans>Show closed positions</Trans> : <Trans>Hide closed positions</Trans>}
           </ToggleLabel>
-        </ToggleWrap>
-      </MobileHeader>
+        </HeaderToggleLabelCell>
+      </Header>
+
       {positions.map((p, index) => (
         <>
           <PositionListItem key={p.tokenId.toString()} {...p} />
           {positions.length !== index + 1 ? <Divider /> : null}
         </>
       ))}
     </>
-  )
+  );
 }