Update token actions popover (#562)

mycelium-ethereum · Apr 10, 2022 · 829bd4f · 829bd4f
1 parent 05af9f5
commit 829bd4f
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 75 deletions.
diff --git a/components/TokenActions/index.tsx b/components/TokenActions/index.tsx
@@ -1,89 +1,81 @@
-import React, { Fragment } from 'react';
+import React, { useState } from 'react';
 import { ethers } from 'ethers';
 import { MoreOutlined, PlusOutlined } from '@ant-design/icons';
-import { Popover, Transition } from '@headlessui/react';
 import { KnownNetwork, NETWORKS } from '@tracer-protocol/pools-js';
 import { Logo, LogoTicker } from '~/components/General';
 import { BlockExplorerAddressType } from '~/types/blockExplorers';
 import { openBlockExplorer } from '~/utils/blockExplorers';
 import { watchAsset } from '~/utils/rpcMethods';
 
-// const Actions
-export default (({ provider, token, arbiscanTarget, otherActions }) => (
-    <>
-        <Popover as="div" className="relative my-auto ml-2 inline">
-            {({ open }) => (
-                <>
-                    {/* Button */}
-                    <Popover.Button className={'focus:outline-none mb-3 focus:border-none'}>
-                        <MoreOutlined
-                            className="transition"
-                            style={{
-                                transform: open ? 'rotate(-90deg)' : '',
-                            }}
-                        />
-                    </Popover.Button>
+import { Popover } from 'react-tiny-popover';
 
-                    {/* Menu */}
-                    <Transition
-                        as={Fragment}
-                        enter="transition ease-out duration-100"
-                        enterFrom="transform opacity-0 scale-95"
-                        enterTo="transform opacity-100 scale-100"
-                        leave="transition ease-in duration-75"
-                        leaveFrom="transform opacity-100 scale-100"
-                        leaveTo="transform opacity-0 scale-95"
-                    >
-                        <Popover.Panel className="focus:outline-none absolute right-0 z-10 mt-2 w-56 origin-top-right divide-y divide-theme-border rounded-lg bg-theme-background shadow-lg ring-1 ring-black ring-opacity-5">
-                            <div>
-                                <div
-                                    className="flex cursor-pointer items-center p-2 text-sm hover:bg-theme-button-bg-hover"
-                                    onClick={() => watchAsset(provider, token)}
-                                >
-                                    <PlusOutlined className="relative mr-2 inline h-[12px]" />
-                                    Add token to wallet
-                                </div>
-                                {arbiscanTarget ? (
-                                    <div
-                                        className="flex cursor-pointer items-center p-2 text-sm hover:bg-theme-button-bg-hover"
-                                        onClick={() =>
-                                            openBlockExplorer(
-                                                arbiscanTarget.type,
-                                                arbiscanTarget.target,
-                                                provider?.network?.chainId?.toString() as KnownNetwork,
-                                            )
-                                        }
-                                    >
-                                        <Logo className="relative mr-2 inline" ticker={NETWORKS.ARBITRUM} />
-                                        View on Arbiscan
-                                    </div>
-                                ) : null}
-                                {otherActions
-                                    ? otherActions.map((action) => (
-                                          <div
-                                              key={action.text}
-                                              className="flex cursor-pointer items-center p-2 text-sm hover:bg-theme-button-bg-hover"
-                                              onClick={() =>
-                                                  openBlockExplorer(
-                                                      action.type,
-                                                      action.target,
-                                                      provider?.network?.chainId?.toString() as KnownNetwork,
-                                                  )
-                                              }
-                                          >
-                                              <Logo className="relative mr-2 inline" ticker={action.logo} />
-                                              {action.text}
-                                          </div>
-                                      ))
-                                    : null}
+export default (({ provider, token, arbiscanTarget, otherActions }) => {
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+
+    return (
+        <Popover
+            isOpen={isOpen}
+            align="end"
+            positions={['bottom']}
+            onClickOutside={() => setIsOpen(false)}
+            content={
+                <div onClick={() => setIsOpen(!isOpen)}>
+                    <div className="focus:outline-none z-10 mt-2 w-56 origin-top-right divide-y divide-theme-border rounded-lg bg-theme-background shadow-lg ring-1 ring-black ring-opacity-5">
+                        <div
+                            className="flex cursor-pointer items-center p-2 text-sm hover:bg-theme-button-bg-hover"
+                            onClick={() => watchAsset(provider, token)}
+                        >
+                            <PlusOutlined className="relative mr-2 inline h-[12px]" />
+                            Add token to wallet
+                        </div>
+                        {arbiscanTarget ? (
+                            <div
+                                className="flex cursor-pointer items-center p-2 text-sm hover:bg-theme-button-bg-hover"
+                                onClick={() =>
+                                    openBlockExplorer(
+                                        arbiscanTarget.type,
+                                        arbiscanTarget.target,
+                                        provider?.network?.chainId?.toString() as KnownNetwork,
+                                    )
+                                }
+                            >
+                                <Logo className="relative mr-2 inline" ticker={NETWORKS.ARBITRUM} />
+                                View on Arbiscan
                             </div>
-                        </Popover.Panel>
-                    </Transition>
-                </>
-            )}
+                        ) : null}
+                        {otherActions
+                            ? otherActions.map((action) => (
+                                  <div
+                                      key={action.text}
+                                      className="flex cursor-pointer items-center p-2 text-sm hover:bg-theme-button-bg-hover"
+                                      onClick={() =>
+                                          openBlockExplorer(
+                                              action.type,
+                                              action.target,
+                                              provider?.network?.chainId?.toString() as KnownNetwork,
+                                          )
+                                      }
+                                  >
+                                      <Logo className="relative mr-2 inline" ticker={action.logo} />
+                                      {action.text}
+                                  </div>
+                              ))
+                            : null}
+                    </div>
+                </div>
+            }
+        >
+            <div className={'focus:outline-none mb-3 focus:border-none'} onClick={() => setIsOpen(!isOpen)}>
+                <MoreOutlined
+                    className="transition"
+                    style={{
+                        transform: isOpen ? 'rotate(-90deg)' : '',
+                    }}
+                />
+            </div>
         </Popover>
-    </>
-)) as React.FC<{
+    );
+}) as React.FC<{
     provider: ethers.providers.JsonRpcProvider | null;
     token: {
         address: string;

diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
         "react-dom": "17",
         "react-jazzicon": "^0.1.3",
         "react-resize-detector": "^6.7.4",
+        "react-tiny-popover": "^7.0.1",
         "react-toastify": "^8.2.0",
         "stream": "^0.0.2",
         "styled-components": "^5.2.1",

diff --git a/yarn.lock b/yarn.lock
@@ -10019,6 +10019,11 @@ react-resize-detector@^6.7.4:
     lodash "^4.17.21"
     resize-observer-polyfill "^1.5.1"
 
+react-tiny-popover@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/react-tiny-popover/-/react-tiny-popover-7.0.1.tgz#efb396cae335f00a0767ad98b9579d28744aec9e"
+  integrity sha512-uV+nTZXkCtfPFQtoKwbfX8waaU7+b8LEOoyOUjtmRxqnH3KLX1FkPm7RU+RC8eXxtOe4rC1cuhOIbQFcc71vQQ==
+
 react-toastify@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-8.2.0.tgz#ef7d56bdfdc6272ca6b228368ab564721c3a3244"