Merge pull request #555 from invariant-labs/dev

Bump staging

.trunk/.gitignore

@@ -1 +1,2 @@
 *out
+/dev-logs

src/components/Header/Header.tsx

@@ -1,22 +1,22 @@
-import React from 'react'
-import { PublicKey } from '@solana/web3.js'
-import { Grid, CardMedia, Button, Hidden, useMediaQuery, IconButton } from '@material-ui/core'
-import NavbarButton from '@components/Navbar/Button'
 import ChangeWalletButton from '@components/HeaderButton/ChangeWalletButton'
-import { NetworkType, SolanaNetworks } from '@consts/static'
-import { Link } from 'react-router-dom'
-import useButtonStyles from '@components/HeaderButton/style'
-import icons from '@static/icons'
-import DotIcon from '@material-ui/icons/FiberManualRecordRounded'
 import SelectNetworkButton from '@components/HeaderButton/SelectNetworkButton'
-import { theme } from '@static/theme'
+import SelectRPCButton from '@components/HeaderButton/SelectRPCButton'
+import useButtonStyles from '@components/HeaderButton/style'
 import RoutesModal from '@components/Modals/RoutesModal/RoutesModal'
+import SelectMainnetRPC from '@components/Modals/SelectMainnetRPC/SelectMainnetRPC'
+import NavbarButton from '@components/Navbar/Button'
+import { NetworkType, SolanaNetworks } from '@consts/static'
 import { blurContent, unblurContent } from '@consts/uiUtils'
+import { Button, CardMedia, Grid, Hidden, IconButton, useMediaQuery } from '@material-ui/core'
+import DotIcon from '@material-ui/icons/FiberManualRecordRounded'
+import { PublicKey } from '@solana/web3.js'
+import icons from '@static/icons'
 import Hamburger from '@static/svg/Hamburger.svg'
+import { theme } from '@static/theme'
 import classNames from 'classnames'
+import React from 'react'
+import { Link } from 'react-router-dom'
 import useStyles from './style'
-import SelectRPCButton from '@components/HeaderButton/SelectRPCButton'
-import SelectMainnetRPC from '@components/Modals/SelectMainnetRPC/SelectMainnetRPC'
 
 export interface IHeader {
   address: PublicKey
@@ -54,7 +54,7 @@ export const Header: React.FC<IHeader> = ({
       : ['swap', 'pool', 'stats', 'farms', 'bonds']
 
   const otherRoutesToHighlight: Record<string, RegExp[]> = {
-    pool: [/^newPosition$/, /^position\/*/],
+    pool: [/^newPosition\/*/, /^position\/*/],
     farms: [/^farms$/, /^farm\/*/]
   }
 
@@ -70,6 +70,11 @@ export const Header: React.FC<IHeader> = ({
   }, [landing])
 
   const mainnetRPCs = [
+    {
+      networkType: NetworkType.MAINNET,
+      rpc: SolanaNetworks.MAIN_HELLOMOON,
+      rpcName: 'Hello Moon'
+    },
     {
       networkType: NetworkType.MAINNET,
       rpc: SolanaNetworks.MAIN_ALCHEMY,
@@ -80,11 +85,6 @@ export const Header: React.FC<IHeader> = ({
       rpc: SolanaNetworks.MAIN_QUICKNODE,
       rpcName: 'Quicknode'
     },
-    {
-      networkType: NetworkType.MAINNET,
-      rpc: SolanaNetworks.MAIN_HELLOMOON,
-      rpcName: 'Hello Moon'
-    },
     { networkType: NetworkType.MAINNET, rpc: SolanaNetworks.MAIN, rpcName: 'Solana' }
   ]
 

src/components/Modals/SelectMainnetRPC/SelectMainnetRPC.tsx

@@ -1,11 +1,11 @@
-import React, { useState } from 'react'
-import { Typography, Popover, Grid, Input, Button } from '@material-ui/core'
 import { NetworkType } from '@consts/static'
-import icons from '@static/icons'
+import { Button, Grid, Input, Popover, Typography } from '@material-ui/core'
 import DotIcon from '@material-ui/icons/FiberManualRecordRounded'
+import icons from '@static/icons'
 import classNames from 'classnames'
-import useStyles from './styles'
+import React, { useState } from 'react'
 import { ISelectNetwork } from '../SelectNetwork/SelectNetwork'
+import useStyles from './styles'
 
 export interface ISelectMainnetRpc {
   networks: ISelectNetwork[]
@@ -56,7 +56,7 @@ export const SelectMainnetRPC: React.FC<ISelectMainnetRpc> = ({
             <Grid
               className={classNames(classes.listItem, rpc === activeRPC ? classes.active : null)}
               item
-              key={`networks-${networkType}`}
+              key={`networks-${networkType}-${rpc}`}
               onClick={() => {
                 onSelect(networkType, rpc, rpcName)
                 handleClose()

src/components/NewPosition/DepositSelector/DepositSelector.tsx

@@ -1,21 +1,23 @@
+import AnimatedButton, { ProgressState } from '@components/AnimatedButton/AnimatedButton'
 import DepositAmountInput from '@components/Inputs/DepositAmountInput/DepositAmountInput'
 import Select from '@components/Inputs/Select/Select'
-import { SwapToken } from '@selectors/solanaWallet'
-import { getScaleFromString, printBN, printBNtoBN } from '@consts/utils'
-import { Grid, Typography } from '@material-ui/core'
-import React, { useState, useCallback, useEffect } from 'react'
-import FeeSwitch from '../FeeSwitch/FeeSwitch'
-import classNames from 'classnames'
-import AnimatedButton, { ProgressState } from '@components/AnimatedButton/AnimatedButton'
-import SwapList from '@static/svg/swap-list.svg'
-import useStyles from './style'
-import { PublicKey } from '@solana/web3.js'
 import {
+  ALL_FEE_TIERS_DATA,
   WRAPPED_SOL_ADDRESS,
   WSOL_MIN_DEPOSIT_SWAP_FROM_AMOUNT,
   WSOL_POOL_INIT_LAMPORTS
 } from '@consts/static'
+import { parsePathFeeToFeeString, tickerToAddress } from '@consts/uiUtils'
+import { getScaleFromString, printBN, printBNtoBN } from '@consts/utils'
+import { Grid, Typography } from '@material-ui/core'
 import { BN } from '@project-serum/anchor'
+import { SwapToken } from '@selectors/solanaWallet'
+import { PublicKey } from '@solana/web3.js'
+import SwapList from '@static/svg/swap-list.svg'
+import classNames from 'classnames'
+import React, { useCallback, useEffect, useState } from 'react'
+import FeeSwitch from '../FeeSwitch/FeeSwitch'
+import useStyles from './style'
 
 export interface InputState {
   value: string
@@ -26,6 +28,9 @@ export interface InputState {
 }
 
 export interface IDepositSelector {
+  initialTokenFrom: string
+  initialTokenTo: string
+  initialFee: string
   tokens: SwapToken[]
   setPositionTokens: (
     tokenAIndex: number | null,
@@ -57,6 +62,9 @@ export interface IDepositSelector {
 }
 
 export const DepositSelector: React.FC<IDepositSelector> = ({
+  initialTokenFrom,
+  initialTokenTo,
+  initialFee,
   tokens,
   setPositionTokens,
   onAddLiquidity,
@@ -87,6 +95,42 @@ export const DepositSelector: React.FC<IDepositSelector> = ({
   const [tokenAIndex, setTokenAIndex] = useState<number | null>(null)
   const [tokenBIndex, setTokenBIndex] = useState<number | null>(null)
 
+  const [isLoaded, setIsLoaded] = useState<boolean>(false)
+
+  useEffect(() => {
+    if (isLoaded || tokens.length === 0 || ALL_FEE_TIERS_DATA.length === 0) {
+      return
+    }
+
+    let tokenAIndexFromPath = null
+    let tokenBIndexFromPath = null
+    let feeTierIndexFromPath = 0
+
+    tokens.forEach((token, index) => {
+      if (token.assetAddress.toString() === tickerToAddress(initialTokenFrom)) {
+        tokenAIndexFromPath = index
+      }
+
+      if (token.assetAddress.toString() === tickerToAddress(initialTokenTo)) {
+        tokenBIndexFromPath = index
+      }
+    })
+
+    const parsedFee = parsePathFeeToFeeString(initialFee)
+
+    ALL_FEE_TIERS_DATA.forEach((feeTierData, index) => {
+      if (feeTierData.tier.fee.toString() === parsedFee) {
+        feeTierIndexFromPath = index
+      }
+    })
+
+    setTokenAIndex(tokenAIndexFromPath)
+    setTokenBIndex(tokenBIndexFromPath)
+    setPositionTokens(tokenAIndexFromPath, tokenBIndexFromPath, feeTierIndexFromPath)
+
+    setIsLoaded(true)
+  }, [tokens])
+
   const getButtonMessage = useCallback(() => {
     if (tokenAIndex === null || tokenBIndex === null) {
       return 'Select tokens'

src/components/NewPosition/MarketIdLabel/MarketIdLabel.stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import MarketIdLabel from './MarketIdLabel'
+
+storiesOf('position/marketIdLabel', module).add('default', () => {
+  return (
+    <div
+      style={{
+        backgroundColor: '#202946',
+        padding: 20,
+        width: 300
+      }}>
+      <MarketIdLabel
+        marketId='as8d9asdjkl1239871aslkdjas0d978as123hjasjdh'
+        displayLength={9}
+        copyPoolAddressHandler={() => {}}
+      />
+    </div>
+  )
+})

src/components/NewPosition/MarketIdLabel/MarketIdLabel.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { Typography } from '@material-ui/core'
+import { useLabelStyles } from './style'
+import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined'
+import { Color } from '@material-ui/lab'
+
+export interface IProps {
+  displayLength: number
+  marketId: string
+  copyPoolAddressHandler: (message: string, variant: Color) => void
+  style?: React.CSSProperties
+}
+
+export const MarketIdLabel: React.FC<IProps> = ({
+  displayLength,
+  marketId,
+  copyPoolAddressHandler,
+  style
+}) => {
+  const classes = useLabelStyles()
+
+  const copyToClipboard = () => {
+    navigator.clipboard
+      .writeText(marketId)
+      .then(() => {
+        copyPoolAddressHandler('Market ID copied to Clipboard', 'success')
+      })
+      .catch(() => {
+        copyPoolAddressHandler('Failed to copy Market ID to Clipboard', 'error')
+      })
+  }
+
+  return (
+    <Typography className={classes.marketId} style={style}>
+      Market ID: {marketId.slice(0, displayLength)}...
+      {marketId.slice(marketId.length - displayLength, marketId.length)}{' '}
+      <FileCopyOutlinedIcon className={classes.clipboardIcon} onClick={copyToClipboard} />
+    </Typography>
+  )
+}
+
+export default MarketIdLabel

src/components/NewPosition/MarketIdLabel/style.ts

@@ -0,0 +1,20 @@
+import { makeStyles } from '@material-ui/core/styles'
+import { colors } from '@static/theme'
+
+export const useLabelStyles = makeStyles(() => ({
+  marketId: {
+    fontFamily: 'Mukta',
+    fontSize: 16,
+    fontWeight: 400,
+    lineHeight: '20px',
+    letterSpacing: '-0.03px',
+    textAlign: 'right',
+    color: `${colors.invariant.textGrey} !important`,
+    paddingRight: 7
+  },
+  clipboardIcon: {
+    width: 15,
+    height: 13,
+    cursor: 'pointer'
+  }
+}))