Add portfolio liquidity

.github/workflows/pr.yaml

@@ -114,7 +114,7 @@ jobs:
           VITE_TAG: ${{ needs.prepare.outputs.image_tag }}
           CURRENT_BRANCH: ${{ needs.prepare.outputs.current_branch }}
           NODE_OPTIONS: '--max_old_space_size=4096'
-        run: yarn build
+        run: yarn build-dev
 
       - name: Docker build and push
         uses: docker/build-push-action@v2

src/components/Announcement/Popups/TransactionPopup.tsx

@@ -205,13 +205,13 @@ const getTitle = (type: string, success: boolean) => {
 }
 
 const getSummary = (transaction: TransactionDetails) => {
-  const { type, hash, group } = transaction
+  const { type, hash } = transaction
 
   const { success } = getTransactionStatus(transaction)
 
-  const shortHash = 'Hash: ' + hash.slice(0, 8) + '...' + hash.slice(58, 65)
+  const shortHash = 'Hash: ' + getShortenAddress(hash)
 
-  const summary = group ? SUMMARY[type]?.(transaction) ?? shortHash : shortHash
+  const summary = SUMMARY[type]?.(transaction) ?? shortHash
 
   let formatSummary,
     title = getTitle(type, success)

src/components/Badge/index.tsx

@@ -1,14 +1,19 @@
 import { readableColor } from 'polished'
 import { PropsWithChildren } from 'react'
+import { Text } from 'rebass'
 import styled, { DefaultTheme } from 'styled-components'
 
+import { DropdownArrowIcon } from 'components/ArrowRotate'
 import { Color } from 'theme/styled'
+import { formatDisplayNumber } from 'utils/numbers'
 
 export enum BadgeVariant {
   DEFAULT = 'DEFAULT',
   NEGATIVE = 'NEGATIVE',
   POSITIVE = 'POSITIVE',
   PRIMARY = 'PRIMARY',
+  BLUE = 'BLUE',
+  WHITE = 'WHITE',
   WARNING = 'WARNING',
 
   WARNING_OUTLINE = 'WARNING_OUTLINE',
@@ -26,6 +31,10 @@ function pickBackgroundColor(variant: BadgeVariant | undefined, theme: DefaultTh
       return theme.green1
     case BadgeVariant.PRIMARY:
       return theme.primary + '33'
+    case BadgeVariant.BLUE:
+      return theme.blue + '33'
+    case BadgeVariant.WHITE:
+      return theme.white + '33'
     case BadgeVariant.WARNING:
       return theme.warning + '33'
     case BadgeVariant.WARNING_OUTLINE:
@@ -54,6 +63,10 @@ function pickFontColor(variant: BadgeVariant | undefined, theme: DefaultTheme):
       return theme.warning
     case BadgeVariant.PRIMARY:
       return theme.primary
+    case BadgeVariant.BLUE:
+      return theme.blue
+    case BadgeVariant.WHITE:
+      return theme.white
     case BadgeVariant.WARNING_OUTLINE:
       return theme.warning
     default:
@@ -74,3 +87,18 @@ const Badge = styled.div<PropsWithChildren<BadgeProps>>`
 `
 
 export default Badge
+
+// todo update my earning use this
+export const PercentBadge = ({ percent }: { percent: number }) => {
+  return (
+    <Badge
+      variant={percent ? BadgeVariant.PRIMARY : BadgeVariant.NEGATIVE}
+      style={{ padding: '2px 10px 2px 2px', height: 'fit-content' }}
+    >
+      <DropdownArrowIcon rotate={percent > 0} />{' '}
+      <Text fontSize={'12px'} as="span" fontWeight={'500'}>
+        {formatDisplayNumber(percent, { style: 'percent', fractionDigits: 2 })}
+      </Text>
+    </Badge>
+  )
+}

src/components/Button/index.tsx

@@ -414,6 +414,9 @@ const StyledButtonAction = styled(RebassButton)<{ $color?: string }>`
     background-color: ${({ theme, $color }) => ($color ? $color + '10' : theme.subText + '10')};
     transform: translateY(2px);
   }
+  :disabled {
+    cursor: not-allowed;
+  }
 `
 
 export const ButtonAction = ({

src/components/CheckBox.tsx

@@ -6,6 +6,9 @@ const CheckboxWrapper = styled.input`
   position: relative;
   transform: scale(1.35);
   accent-color: ${({ theme }) => theme.primary};
+  &:focus-visible {
+    outline-width: 0;
+  }
 
   :indeterminate::before {
     content: '';

src/components/ConfirmModal.tsx

@@ -53,7 +53,7 @@ const ModalConfirm: React.FC = () => {
           </Text>
         </RowBetween>
 
-        <Text as="span" fontSize="14px" color={theme.subText}>
+        <Text as="span" fontSize="14px" lineHeight={'20px'} color={theme.subText}>
           {content}
         </Text>
 

src/components/DoubleLogo/index.tsx

@@ -1,8 +1,10 @@
 import { Currency } from '@kyberswap/ks-sdk-core'
+import { Box } from 'rebass'
 import styled, { CSSProperties } from 'styled-components'
 
 import CurrencyLogo from 'components/CurrencyLogo'
 import Logo from 'components/Logo'
+import { RowFit } from 'components/Row'
 
 const Wrapper = styled.div<{ margin: boolean; sizeraw: number }>`
   position: relative;
@@ -80,3 +82,37 @@ export function DoubleCurrencyLogoV2({
     </Wrapper>
   )
 }
+
+export function DoubleLogoWithChain({
+  logoUrl1,
+  logoUrl2,
+  chainUrl,
+  size = 36,
+  chainSize = 18,
+}: {
+  logoUrl1: string
+  logoUrl2: string
+  chainUrl: string
+  size?: number
+  chainSize?: number
+}) {
+  return (
+    <RowFit align="flex-end">
+      {logoUrl1 && (
+        <Box style={{ zIndex: 1 }}>
+          <Logo srcs={[logoUrl1]} style={{ width: size, height: size, borderRadius: '100%' }} />
+        </Box>
+      )}
+      {logoUrl2 && (
+        <Box style={{ zIndex: 2, marginLeft: -size / 4 + 'px' }}>
+          <Logo srcs={[logoUrl2]} style={{ width: size, height: size, borderRadius: '100%' }} />
+        </Box>
+      )}
+      {chainUrl && (
+        <Box style={{ zIndex: 3, marginLeft: -chainSize / 3 + 'px' }}>
+          <Logo srcs={[chainUrl]} style={{ width: chainSize, height: chainSize, borderRadius: '100%' }} />
+        </Box>
+      )}
+    </RowFit>
+  )
+}

src/components/DownloadWalletModal/index.tsx

@@ -8,6 +8,7 @@ import Column from 'components/Column'
 import Modal from 'components/Modal'
 import Row, { RowBetween } from 'components/Row'
 import { connections } from 'constants/wallets'
+import { useActiveWeb3React } from 'hooks'
 import useTheme from 'hooks/useTheme'
 import { ApplicationModal } from 'state/application/actions'
 import { useCloseModal, useModalOpen } from 'state/application/hooks'
@@ -41,6 +42,8 @@ export default function DownloadWalletModal() {
   const theme = useTheme()
   const isOpen = useModalOpen(ApplicationModal.DOWNLOAD_WALLET)
   const closeModal = useCloseModal(ApplicationModal.DOWNLOAD_WALLET)
+  const { account } = useActiveWeb3React()
+  if (!account) return null
   return (
     <Modal isOpen={isOpen} onDismiss={closeModal} maxWidth="600px">
       <Column width="100%" padding="30px 24px" overflowY="scroll">