diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 639c7d1ba..7d523768b 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -29,6 +29,7 @@ const OUTLINED = {
green: 'bg-green bg-opacity-20 border border-green rounded text-green hover:bg-opacity-40 disabled:bg-opacity-20',
gradient:
'border border-transparent border-gradient-r-blue-pink-dark-900 opacity-80 hover:opacity-100 disabled:bg-opacity-20',
+ border: 'border border-[#546D2A] bg-blue bg-opacity-20 outline-blue rounded text-primary hover:bg-opacity-40 disabled:bg-opacity-20',
}
const EMPTY = {
@@ -48,7 +49,7 @@ const VARIANT = {
link: LINK,
}
-export type ButtonColor = 'blue' | 'pink' | 'gradient' | 'gray' | 'default' | 'red' | 'green'
+export type ButtonColor = 'blue' | 'pink' | 'gradient' | 'gray' | 'default' | 'red' | 'green' | 'border'
export type ButtonSize = 'xs' | 'sm' | 'lg' | 'default' | 'none'
diff --git a/src/components/PanelLimitPrice/index.tsx b/src/components/PanelLimitPrice/index.tsx
new file mode 100755
index 000000000..4232d6bbf
--- /dev/null
+++ b/src/components/PanelLimitPrice/index.tsx
@@ -0,0 +1,58 @@
+import React, { useState } from 'react'
+import { classNames, escapeRegExp } from '../../functions'
+import Input from '../Input'
+
+
+const PanelLimitPrice = ({label, currencyA, currencyB}) => {
+ const [value, setValue] = useState('')
+
+ const handleValue = (e) => {
+ setValue(e.target.value)
+ }
+
+ const inputRegex = RegExp(`^\\d*(?:\\\\[.])?\\d*$`) // match escaped "." characters via in a non-capturing group
+
+ const defaultClassName = 'w-0 p-0 text-2xl bg-transparent'
+
+ const enforcer = (nextUserInput: string) => {
+ if (nextUserInput === '' || inputRegex.test(escapeRegExp(nextUserInput))) {
+ setValue(nextUserInput)
+ }
+ }
+
+ return (
+
+
+ {label}
+
+
{
+ // replace commas with periods, because uniswap exclusively uses period as the decimal separator
+ enforcer(event.target.value.replace(/,/g, '.'))
+ }}
+ // universal input options
+ inputMode="decimal"
+ title="Token Amount"
+ autoComplete="off"
+ autoCorrect="off"
+ // text-specific options
+ type="text"
+ pattern="^[0-9]*[.,]?[0-9]*$"
+ placeholder={'0.0'}
+ min={0.0}
+ minLength={1}
+ maxLength={14}
+ spellCheck="false"
+ className={'relative flex text-center justify-center font-bold outline-none border-none overflow-hidden overflow-ellipsis placeholder-low-emphesis focus:placeholder-primary text-xl bg-transparent'}
+ // readOnly={true}
+ />
+
+ {/* {label} */}
+ {currencyA} per {currencyB}
+
+
+
requestSort('symbol')}
+ >
+
{i18n._(t`Pair`)}
+ {sortConfig &&
+ sortConfig.key === 'symbol' &&
+ ((sortConfig.direction === 'ascending' &&
) ||
+ (sortConfig.direction === 'descending' &&
))}
+
+
requestSort('tvl')}
+ >
+ {i18n._(t`Min Price to Buy`)}
+ {sortConfig &&
+ sortConfig.key === 'tvl' &&
+ ((sortConfig.direction === 'ascending' && ) ||
+ (sortConfig.direction === 'descending' && ))}
+
+
requestSort('roiPerYear')}
+ >
+ {i18n._(t`Max Price to Sell`)}
+ {sortConfig &&
+ sortConfig.key === 'roiPerYear' &&
+ ((sortConfig.direction === 'ascending' && ) ||
+ (sortConfig.direction === 'descending' && ))}
+
+
+ {i18n._(t`Actions`)}
+
+
+ {items.slice(0, numDisplayed).map((robot, index) => (
+
+ ))}
+
+
+
+ ) : (
+ {term ? No Results. : Loading}
+ )
+}
+
+export default RobotList
diff --git a/src/features/robots/RobotListItemDetails.tsx b/src/features/robots/RobotListItemDetails.tsx
new file mode 100644
index 000000000..005fbb3fb
--- /dev/null
+++ b/src/features/robots/RobotListItemDetails.tsx
@@ -0,0 +1,145 @@
+import { ApprovalState, useApproveCallback } from '../../hooks/useApproveCallback'
+import { ChainId, CurrencyAmount, JSBI, MASTERCHEF_ADDRESS, MASTERCHEF_V2_ADDRESS, Token, ZERO } from '@tangoswapcash/sdk'
+import { Disclosure, Transition } from '@headlessui/react'
+import React, { useState } from 'react'
+
+import Button, { ButtonError } from '../../components/Button'
+import Dots from '../../components/Dots'
+import Input from '../../components/Input'
+import { formatCurrencyAmount, formatNumber, formatPercent } from '../../functions'
+import { getAddress } from '@ethersproject/address'
+import { t } from '@lingui/macro'
+import { tryParseAmount } from '../../functions/parse'
+import useActiveWeb3React from '../../hooks/useActiveWeb3React'
+import { useLingui } from '@lingui/react'
+import { useTokenBalance } from '../../state/wallet/hooks'
+import { useTransactionAdder } from '../../state/transactions/hooks'
+import { BigNumber } from '@ethersproject/bignumber'
+import { isMobile } from 'react-device-detect'
+import { useRouter } from 'next/router'
+import { Chef, PairType } from '../onsen/enum'
+import { usePendingSushi, useUserInfo } from '../onsen/hooks'
+import useMasterChef from '../onsen/useMasterChef'
+import usePendingReward from '../onsen/usePendingReward'
+
+const RobotListItemDetails = ({ robot }) => {
+ const { i18n } = useLingui()
+
+ const router = useRouter()
+
+ const { account, chainId } = useActiveWeb3React()
+ const [pendingTx, setPendingTx] = useState(false)
+ const [maxValue, setMaxValue] = useState(robot.maxValue ? robot.maxValue : 0)
+ const [minValue, setMinValue] = useState(robot.minValue ? robot.minValue : 0)
+
+ const addTransaction = useTransactionAdder()
+
+ const liquidityToken = new Token(
+ chainId,
+ getAddress(robot.pair.id),
+ robot.pair.type === PairType.KASHI ? Number(robot.pair.asset.decimals) : 18,
+ robot.pair.symbol,
+ robot.pair.name
+ )
+
+ // User liquidity token balance
+ const balance = useTokenBalance(account, liquidityToken)
+
+ // TODO: Replace these
+ const amount = useUserInfo(robot, liquidityToken)
+
+ const handleSellRobot = () => {
+ console.log('Vendido')
+ }
+
+ const handleBuyRobot = () => {
+ console.log('Borrado')
+ }
+
+ const handleDeleteRobot = () => {
+ console.log('Borrado')
+ }
+
+ const { deposit, withdraw, harvest } = useMasterChef(robot.chef)
+
+ const poolFraction = (Number.parseFloat(amount?.toFixed()) / robot.chefBalance) || 0
+ const token0Reserve = robot.pool.reserves ? (robot.pool.reserves.reserve0 as BigNumber).toString() : 0
+ const token0Amount = CurrencyAmount.fromRawAmount(robot.pair.token0, JSBI.BigInt(token0Reserve)).multiply(Math.round(poolFraction * 1e8)).divide(1e8)
+ const token1Reserve = robot.pool.reserves ? (robot.pool.reserves.reserve1 as BigNumber).toString() : 0
+ const token1Amount = CurrencyAmount.fromRawAmount(robot.pair.token1, JSBI.BigInt(token1Reserve)).multiply(Math.round(poolFraction * 1e8)).divide(1e8)
+ const token0Name = robot.pool.token0 === robot.pair.token0.id ? robot.pair.token0.symbol : robot.pair.token1.symbol
+ const token1Name = robot.pool.token1 === robot.pair.token1.id ? robot.pair.token1.symbol : robot.pair.token0.symbol
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ setMaxValue(value)
+ }}
+ disabled
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+
+
+ )
+}
+
+export default RobotListItemDetails
diff --git a/src/features/robots/RobotListItems.tsx b/src/features/robots/RobotListItems.tsx
new file mode 100644
index 000000000..b5545dfde
--- /dev/null
+++ b/src/features/robots/RobotListItems.tsx
@@ -0,0 +1,99 @@
+import { classNames, formatNumber, formatPercent } from '../../functions'
+import { DotsHorizontalIcon } from '@heroicons/react/outline'
+import { ZERO } from '@tangoswapcash/sdk'
+import { Disclosure } from '@headlessui/react'
+import DoubleLogo from '../../components/DoubleLogo'
+import Image from '../../components/Image'
+import React from 'react'
+import { useLingui } from '@lingui/react'
+import { t } from '@lingui/macro'
+import { useCurrency } from '../../hooks/Tokens'
+import { isMobile } from 'react-device-detect'
+import { usePendingSushi } from '../onsen/hooks'
+import usePendingReward from '../onsen/usePendingReward'
+import RobotListItemDetails from './RobotListItemDetails'
+import { PairType } from '../onsen/enum'
+
+const RobotListItems = ({ robot, ...rest }) => {
+ const token0 = useCurrency(robot.pair.token0.id)
+ const token1 = useCurrency(robot.pair.token1.id)
+
+ const pendingSushi = usePendingSushi(robot)
+ const rewardAmount = usePendingReward(robot)
+
+ const { i18n } = useLingui()
+
+ return (
+
+ {({ open }) => (
+ <>
+
+
+
+
+
+
+
{robot?.pair?.token0?.symbol}
+
+ {robot?.pair?.token1?.symbol}
+
+
+
+
+
+ $ {robot.allocPoint / 4}
+
+
+
+ $ {robot.allocPoint}
+
+
+ {pendingSushi && pendingSushi.greaterThan(ZERO) ? (
+
+
+
+ {robot?.rewards?.map((reward, i) => (
+
+
+
+ ))}
+
+
+
+ {robot?.rewards?.map((reward, i) => (
+
+ {i == 0 ? formatNumber(pendingSushi.toFixed(18)) : formatNumber(rewardAmount)} {reward.token}
+
+ ))}
+
+
+ ) : (
+
+ {i18n._(t`Stake LP to robot`)}
+ {/* */}
+
+ )}
+
+
+ {pair && pairState !== PairState.INVALID && (
+
+ )}
+
+
{
+ onFieldAInput(maxAmounts[Field.CURRENCY_A]?.toExact() ?? '')
+ }}
+ onCurrencySelect={handleCurrencyASelect}
+ showMaxButton={!atMaxAmounts[Field.CURRENCY_A]}
+ currency={currenciesSelected && currenciesSelected.currencyA && currenciesSelected.currencyA}
+ id="add-liquidity-input-tokena"
+ showCommonBases
+ />
+
+
+
+
+
+
+
+ {
+ onFieldBInput(maxAmounts[Field.CURRENCY_B]?.toExact() ?? '')
+ }}
+ showMaxButton={!atMaxAmounts[Field.CURRENCY_B]}
+ currency={currenciesSelected && currenciesSelected.currencyB && currenciesSelected.currencyB}
+ id="add-liquidity-input-tokenb"
+ showCommonBases
+ />
+
+
+ {currencies[Field.CURRENCY_A] && currencies[Field.CURRENCY_B] && pairState !== PairState.INVALID && (
+
+
+
+ )}
+
+ {
+ currenciesSelected && currenciesSelected?.currencyA && currenciesSelected?.currencyB && (
+
+ )
+ }
+
+ {addIsUnsupported ? (
+
+ ) : !account ? (
+
+ ) : (
+
+ )}
+
+
+ {!addIsUnsupported ? (
+ pair && !noLiquidity && pairState !== PairState.INVALID ? (
+
+ ) : null
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+