feat: robotlist

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'
 

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 (
+    <div className='border border-[#424242] p-2 max-w-[190px] rounded flex flex-col items-center gap-1'>
+      <div className="text-xs font-medium text-secondary whitespace-nowrap">
+        {label}
+      </div>
+      <input
+        value={value}
+        onChange={(event) => {
+          // 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}
+      />
+      <div className="text-xs font-medium text-secondary whitespace-nowrap">
+        {/* {label} */}
+        {currencyA} per {currencyB}
+      </div>
+    </div>
+  )
+}
+
+export default PanelLimitPrice

src/features/onsen/FarmMenu.tsx

@@ -6,23 +6,54 @@ import { useLingui } from '@lingui/react'
 import { useActiveWeb3React } from '../../hooks'
 import { useWalletModalToggle } from '../../state/application/hooks'
 
-const Menu = ({ positionsLength }) => {
+const defaultOptions = [
+  {
+    href: `/farm?filter=portfolio`,
+    label: 'Your Farms',
+    exact: true
+  },
+  {
+    divider: true
+  },
+  {
+    href: "/farm?filter=all",
+    label: 'All Farms'
+  },
+  {
+    href: `/farm?filter=2x`,
+    label: '2x Reward Farms',
+    exact: true
+  },
+  {
+    href: "/farm?filter=past",
+    label: 'Past Farms'
+  }
+]
+
+const Menu = ({ positionsLength, options = defaultOptions}) => {
   const { account, chainId } = useActiveWeb3React()
   const { i18n } = useLingui()
   const toggleWalletModal = useWalletModalToggle()
 
   return (
     <div className="space-y-4">
       {account ? (
-        <NavLink
-          exact
-          href={`/farm?filter=portfolio`}
-          activeClassName="font-bold bg-transparent border rounded text-high-emphesis border-transparent border-gradient-r-blue-pink-dark-900"
-        >
-          <a className="flex items-center justify-between px-2 py-3 md:px-4 md:py-6 text-base font-bold border border-transparent rounded cursor-pointer bg-dark-900 hover:bg-dark-800">
-            Your Farms
-          </a>
-        </NavLink>
+        options.map((option, index) => (
+          option.divider ? (
+            <div key={index} className="hidden md:block w-full h-0 font-bold bg-transparent border border-b-0 border-transparent rounded text-high-emphesis md:border-gradient-r-blue-pink-dark-800 opacity-20" />
+          ) : (
+            <NavLink
+              key={index}
+              exact={option.exact}
+              href={option.href}
+              activeClassName="font-bold bg-transparent border rounded text-high-emphesis border-transparent border-gradient-r-blue-pink-dark-900"
+            >
+              <a className="flex items-center justify-between px-2 py-3 md:px-4 md:py-6 text-base font-bold border border-transparent rounded cursor-pointer bg-dark-900 hover:bg-dark-800">
+                {option.label}
+              </a>
+            </NavLink>
+          )
+        ))
       ) : (
         <a
           className="striped-background text-secondary flex items-center justify-between px-2 py-3 md:px-4 md:py-6 text-base font-bold border border-transparent rounded cursor-pointer bg-dark-900 hover:bg-dark-800"
@@ -31,64 +62,11 @@ const Menu = ({ positionsLength }) => {
           Your Farms
         </a>
       )}
-
-      <div className="hidden md:block w-full h-0 font-bold bg-transparent border border-b-0 border-transparent rounded text-high-emphesis md:border-gradient-r-blue-pink-dark-800 opacity-20" />
-
-      <NavLink
-        href="/farm?filter=all"
-        activeClassName="font-bold bg-transparent border rounded text-high-emphesis border-transparent border-gradient-r-blue-pink-dark-900"
-      >
-        <a className="flex items-center justify-between px-2 py-3 md:px-4 md:py-6 text-base font-bold border border-transparent rounded cursor-pointer bg-dark-900 hover:bg-dark-800">
-          {i18n._(t`All Farms`)}
-        </a>
-      </NavLink>
-
-      <NavLink
-          exact
-          href={`/farm?filter=2x`}
-          activeClassName="bg-transparent border rounded text-high-emphesis border-transparent border-gradient-r-blue-pink-dark-900"
-        >
-          <a className="flex items-center justify-between px-2 py-3 md:px-4 md:py-6 text-base font-bold border border-transparent rounded cursor-pointer bg-dark-900 hover:bg-dark-800">
-            2x Reward Farms
-          </a>
-      </NavLink>
-
-      <NavLink
-        href="/farm?filter=past"
-        activeClassName="font-bold bg-transparent border rounded text-high-emphesis border-transparent border-gradient-r-blue-pink-dark-900"
-      >
-        <a className="flex items-center justify-between px-2 py-3 md:px-4 md:py-6 text-base font-bold border border-transparent rounded cursor-pointer bg-dark-900 hover:bg-dark-800">
-          {i18n._(t`Past Farms`)}
-        </a>
-      </NavLink>
-
-
-      {/*chainId === ChainId.MAINNET && (
-        <>
-          <NavLink
-            exact
-            href={`/farm?filter=kashi`}
-            activeClassName="font-bold bg-transparent border rounded text-high-emphesis border-transparent border-gradient-r-blue-pink-dark-900"
-          >
-            <a className="flex items-center justify-between px-2 py-3 md:px-4 md:py-6 text-base font-bold border border-transparent rounded cursor-pointer bg-dark-900 hover:bg-dark-800">
-              Kashi Farms
-            </a>
-          </NavLink>
-          <NavLink
-            exact
-            href={`/farm?filter=sushi`}
-            activeClassName="font-bold bg-transparent border rounded text-high-emphesis border-transparent border-gradient-r-blue-pink-dark-900"
-          >
-            <a className="flex items-center justify-between px-2 py-3 md:px-4 md:py-6 text-base font-bold border border-transparent rounded cursor-pointer bg-dark-900 hover:bg-dark-800">
-              TANGOswap Farms
-            </a>
-          </NavLink>
-        </>
-      )*/}
-
-      <div className="md:hidden w-full h-0 font-bold bg-transparent border border-b-0 border-transparent rounded text-high-emphesis md:border-gradient-r-blue-pink-dark-800 opacity-20" />
     </div>
   )
 }
 
 export default Menu
+
+
+

src/features/robots/RobotList.tsx

@@ -0,0 +1,74 @@
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/outline'
+import InfiniteScroll from 'react-infinite-scroll-component'
+import Dots from '../../components/Dots'
+import React from 'react'
+import { t } from '@lingui/macro'
+import { useLingui } from '@lingui/react'
+import useSortableData from '../../hooks/useSortableData'
+import { useInfiniteScroll } from '../onsen/hooks'
+import RobotListItems from './RobotListItems'
+
+const RobotList = ({ robots, term }) => {
+  const { items, requestSort, sortConfig } = useSortableData(robots)
+  const { i18n } = useLingui()
+  const [numDisplayed, setNumDisplayed] = useInfiniteScroll(items)
+
+  return items ? (
+    <>
+      <div className="grid grid-cols-4 text-base font-bold text-primary">
+        <div
+          className="flex items-center col-span-2 px-4 cursor-pointer md:col-span-1"
+          onClick={() => requestSort('symbol')}
+        >
+          <div className="hover:text-high-emphesis">{i18n._(t`Pair`)}</div>
+          {sortConfig &&
+            sortConfig.key === 'symbol' &&
+            ((sortConfig.direction === 'ascending' && <ChevronUpIcon width={12} height={12} />) ||
+              (sortConfig.direction === 'descending' && <ChevronDownIcon width={12} height={12} />))}
+        </div>
+        <div
+          className="flex items-center justify-center px-4 cursor-pointer hover:text-high-emphesis"
+          onClick={() => requestSort('tvl')}
+        >
+          {i18n._(t`Min Price to Buy`)}
+          {sortConfig &&
+            sortConfig.key === 'tvl' &&
+            ((sortConfig.direction === 'ascending' && <ChevronUpIcon width={12} height={12} />) ||
+              (sortConfig.direction === 'descending' && <ChevronDownIcon width={12} height={12} />))}
+        </div>
+        <div
+          className="flex items-center justify-center px-4 cursor-pointer hover:text-high-emphesis"
+          onClick={() => requestSort('roiPerYear')}
+        >
+          {i18n._(t`Max Price to Sell`)}
+          {sortConfig &&
+            sortConfig.key === 'roiPerYear' &&
+            ((sortConfig.direction === 'ascending' && <ChevronUpIcon width={12} height={12} />) ||
+              (sortConfig.direction === 'descending' && <ChevronDownIcon width={12} height={12} />))}
+        </div>
+        <div
+          className="items-center justify-center px-4 cursor-pointer md:flex hover:text-high-emphesis"
+
+        >
+          {i18n._(t`Actions`)}
+        </div>
+      </div>
+      <InfiniteScroll
+        dataLength={numDisplayed}
+        next={() => setNumDisplayed(numDisplayed + 5)}
+        hasMore={true}
+        loader={null}
+      >
+        <div className="space-y-4">
+          {items.slice(0, numDisplayed).map((robot, index) => (
+            <RobotListItems key={index} robot={robot} />
+          ))}
+        </div>
+      </InfiniteScroll>
+    </>
+  ) : (
+    <div className="w-full py-6 text-center">{term ? <span>No Results.</span> : <Dots>Loading</Dots>}</div>
+  )
+}
+
+export default RobotList