Orders history

src/components/RowOrderLimit/index.tsx

@@ -0,0 +1,113 @@
+import { Currency } from '@tangoswapcash/sdk'
+import React, { Key, useCallback, useState } from 'react'
+import CurrencyLogo from '../CurrencyLogo'
+import { InformationCircleIcon } from '@heroicons/react/solid'
+import { Popover } from '@headlessui/react'
+import { ClipboardCopyIcon } from '@heroicons/react/solid'
+import useCopyClipboard from '../../hooks/useCopyClipboard'
+import Button from '../Button'
+import { i18n } from '@lingui/core'
+import { t } from '@lingui/macro'
+import useGetOrdersLocal from '../../hooks/useGetOrdersLocal'
+
+function RowOrderLimit({order, deleteOrderLocal}){
+  const [isCopied, setCopied] = useCopyClipboard(1000)
+
+  const cancelOrder = (order) => {
+    deleteOrderLocal(order.id) //esto solo lo borra del localstorage, no cancela la orden realmente
+
+    //TODO cancel Order
+
+  }
+
+  return (
+    <div className="block rounded text-high-emphesis bg-dark-800">
+      <div className="grid items-center grid-flow-col grid-cols-3 gap-4 px-4 py-3 text-sm md:grid-cols-4 align-center text-primary">
+        <div className="flex flex-col">
+          <div className="flex items-center gap-4 font-bold">
+            <div className="min-w-[32px] flex items-center">
+              <CurrencyLogo size={32} currency={order.output.currency} />
+            </div>
+            <div className="flex flex-col text-left ">
+              <div>{order.output.value}</div>
+              <div className="flex text-xs text-left text-secondary">
+                {order.output.currency.symbol}
+                <Popover className="relative hidden md:block">
+                  <Popover.Button>
+                    <InformationCircleIcon width={15} height={15} className='ml-2'/>
+                  </Popover.Button>
+                  <Popover.Panel className="absolute z-50">
+                  {({ close }) => {
+                    isCopied && close()
+                    return (
+                      <div 
+                        className="text-primary flex px-2 py-1 font-medium bg-dark-700 border border-gray-600 rounded text-sm cursor-pointer"
+                        onClick={() => setCopied(order.output.currency.address)}
+                      >
+                        {order.output.currency.address} <ClipboardCopyIcon  width={16} height={16} className='ml-2'/>
+                      </div>
+                    )}
+                  }
+                  </Popover.Panel>
+                </Popover>
+              </div>
+            </div>
+          </div>
+
+        </div>
+        <div className="flex items-center gap-4 font-bold text-left">
+          <div className="min-w-[32px] flex items-center">
+            <CurrencyLogo size={32} currency={order.input.currency} />
+          </div>
+          <div className="flex flex-col">
+            <div>{order.input.value}</div>
+            <div className="flex text-xs text-left text-secondary">
+              {order.input.currency.symbol}
+              <Popover className="relative hidden md:block">
+                <Popover.Button>
+                  <InformationCircleIcon width={15} height={15} className='ml-2'/>
+                </Popover.Button>
+                <Popover.Panel className="absolute z-50">
+                {({ close }) => {
+                  isCopied && close()
+                  return (
+                    <div 
+                      className="text-primary flex px-2 py-1 font-medium bg-dark-700 border border-gray-600 rounded text-sm cursor-pointer"
+                      onClick={() => setCopied(order.input.currency.address)}
+                    >
+                      {order.input.currency.address} <ClipboardCopyIcon  width={16} height={16} className='ml-2'/>
+                    </div>
+                  )}
+                }
+                </Popover.Panel>
+              </Popover>
+            </div>
+          </div>
+        </div>
+        <div className="hidden font-bold text-left md:block">
+          <div>{order.rate}</div>
+          <div className="text-xs text-secondary">
+          {order.output.currency.symbol ? order.output.currency.symbol : order.output.currency.tokenInfo.symbol} per {order.input.currency.symbol}
+          </div>
+        </div>
+        <div className="font-bold text-right">
+          {/* <div className="mb-1">
+            {order.filledPercent}% {i18n._(t`Filled`)}
+          </div> */}
+          <div>
+            <Button
+              color="pink"
+              variant="outlined"
+              size="xs"
+              onClick={() => cancelOrder(order)}
+            >
+              {i18n._(t`Cancel Order`)}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default RowOrderLimit

src/features/exchange-v1/limit-order/LimitOrderButton.tsx

@@ -36,6 +36,7 @@ import { faTelegram } from '@fortawesome/free-brands-svg-icons';
 import axios from 'axios'
 import { faCheck } from '@fortawesome/free-solid-svg-icons'
 import CashAddressInput from '../../../components/Input/Cashaddress'
+import useGetOrdersLocal from '../../../hooks/useGetOrdersLocal'
 
 interface LimitOrderButtonProps extends ButtonProps {
   currency: Currency
@@ -90,16 +91,17 @@ const LimitOrderButton: FC<LimitOrderButtonProps> = ({ currency, color, ...rest
   const dispatch = useDispatch<AppDispatch>()
   const addPopup = useAddPopup()
   const toggleWalletModal = useWalletModalToggle()
-
   const [openConfirmationModal, setOpenConfirmationModal] = useState(false)
   const [takeOrderURL, setTakeOrderURL] = useState<string>(null)
 
   const [isCopied, setCopied] = useCopyClipboard(10000)
   const [clicked, wasClicked] = useState(false)
   const [endTimeState, setEndTimeState] = useState<string>(null)
 
+  const orders = useGetOrdersLocal()
+
   const { orderExpiration, recipient } = useLimitOrderState()
-  const { parsedAmounts, inputError } = useDerivedLimitOrderInfo()
+  const { parsedAmounts, inputError, currencies } = useDerivedLimitOrderInfo()
 
   const { mutate } = useLimitOrders()
 
@@ -115,6 +117,10 @@ const LimitOrderButton: FC<LimitOrderButtonProps> = ({ currency, color, ...rest
     (tokenApprovalState === ApprovalState.NOT_APPROVED || tokenApprovalState === ApprovalState.PENDING)
 
   const disabled = !!inputError || tokenApprovalState === ApprovalState.PENDING
+
+  const postOrderLocal = (newOrder) => {
+    localStorage.setItem('orders', JSON.stringify([...orders, newOrder]))
+  }
 
   const handler = useCallback(async () => {
     const signer = library.getSigner()
@@ -188,6 +194,18 @@ const LimitOrderButton: FC<LimitOrderButtonProps> = ({ currency, color, ...rest
     }
 
     try {
+      let outputValue = parsedAmounts[Field.OUTPUT]?.toSignificant(6)
+      let inputValue = parsedAmounts[Field.INPUT]?.toSignificant(6)
+      let openOrderToLocalStorage = {
+        id: Date.now(),
+        status: 'open',
+        account,
+        input: {value: inputValue, currency: {...currencies[Field.INPUT], address: currencies[Field.INPUT]?.wrapped.address}},
+        output: {value: outputValue, currency: currencies[Field.OUTPUT]?.tokenInfo ? currencies[Field.OUTPUT]?.tokenInfo : currencies[Field.OUTPUT]},
+        orderExpiration: orderExpiration.label,
+        rate: Number((parseFloat(outputValue) / parseFloat(inputValue))?.toFixed(2))
+      }
+
       const sig = await signer._signTypedData(Domain, Types, msg)
       // o=ver8,coinsToMaker256,coinsToTaker256,dueTime80,r256,s256,v8
       const order = '01'
@@ -197,19 +215,19 @@ const LimitOrderButton: FC<LimitOrderButtonProps> = ({ currency, color, ...rest
         + sig.substr(2)
 
       const url = 'https://orders.cash/take?o=' + base64EncArr(hexToArr(order))
-      console.log('url: ', url)
-      setTakeOrderURL(url)
 
+      setTakeOrderURL(url)
       setOpenConfirmationModal(false)
-
+      
       if (true) {
+        console.log('openOrderToLocalStorage: ',openOrderToLocalStorage)
+        postOrderLocal(openOrderToLocalStorage)
         addPopup({
           txn: { hash: null, summary: 'Limit order created', success: true },
         })
         await mutate()
       }
     } catch (e) {
-      console.log('error: ', e)
       addPopup({
         txn: {
           hash: null,
@@ -337,7 +355,6 @@ const LimitOrderButton: FC<LimitOrderButtonProps> = ({ currency, color, ...rest
           </Button>
         </div>
       }
-
       {button}
 
       <style jsx>{`