From 3baea4686975cfc31184479bf4764e479a951b29 Mon Sep 17 00:00:00 2001 From: AlexeyAdoniev Date: Wed, 20 Sep 2023 16:16:38 +0300 Subject: [PATCH] add revert status --- package.json | 2 +- src/assets/icons/revert.svg | 4 + src/components/Status.tsx | 109 +++++++----- src/index.css | 333 +++++++++++++++++++----------------- src/pages/Search.tsx | 1 + yarn.lock | 52 +++--- 6 files changed, 274 insertions(+), 227 deletions(-) create mode 100644 src/assets/icons/revert.svg diff --git a/package.json b/package.json index 477e802a..3c89fa8e 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "react-redux": "^8.0.2", "react-router-dom": "^6.2.1", "react-scripts": "^5.0.0", - "react-tooltip": "^4.2.21", + "react-tooltip": "^4.4.4", "recharts": "^2.1.15", "socket.io-client": "^4.4.1", "stream": "^0.0.2", diff --git a/src/assets/icons/revert.svg b/src/assets/icons/revert.svg new file mode 100644 index 00000000..f9b99eb7 --- /dev/null +++ b/src/assets/icons/revert.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/Status.tsx b/src/components/Status.tsx index 08959675..090f2f75 100644 --- a/src/components/Status.tsx +++ b/src/components/Status.tsx @@ -1,56 +1,71 @@ import { FC } from "react"; import completedIcon from "../assets/icons/completed.svg"; -import failedIcon from "../assets/icons/failed.svg"; + +import revertedIcont from "../assets/icons/revert.svg"; import pendingIcon from "../assets/icons/pending.svg"; import info from "../assets/icons/info.svg"; -import processing from "../assets/icons/proccess.svg" +import processing from "../assets/icons/proccess.svg"; import ReactTooltip from "react-tooltip"; +export const Status: FC<{ status?: string }> = ({ status }) => { + ; + + if (status === "Completed") + return ( +
+ completed icon +
Completed
+
+ ); + if (status === "Pending") + return ( +
+ pending icon +

Pending

+
+ ); -export const Status: FC<{ status?: string }> = ({ status }) => { - - - if (status === "Completed") - return ( -
- completed icon -
Completed
-
- ); - - if (status === "Pending") - return ( -
- pending icon -

Pending

-
- ); - - if (status === "Failed") - return ( -
- failed icon -

Processing...

- - -
- ); - - if (status === "Canceled") - return ( -
- canceled icon -

Processing...

-
- ); - - return
N/A
; + if (status === "Failed") + return ( +
+ failed icon +

Processing...

+ + + +
+ ); + + if (status === "Reverted") + return ( +
+ pending icon +

Reverted

+ + + +
+ ); + + if (status === "Canceled") + return ( +
+ canceled icon +

Processing...

+
+ ); + + return
N/A
; }; diff --git a/src/index.css b/src/index.css index 4267bcca..fff800ca 100644 --- a/src/index.css +++ b/src/index.css @@ -5,331 +5,350 @@ @tailwind utilities; .dropdown-scrollbar { - overflow: overlay; + overflow: overlay; } - .dropdown-scrollbar::-webkit-scrollbar { - @apply w-1 bg-transparent; + @apply w-1 bg-transparent; } table { - overflow-x: scroll; - -webkit-overflow-scrolling: touch; - overflow-scrolling: touch; /* for newer versions of iOS */ + overflow-x: scroll; + -webkit-overflow-scrolling: touch; + overflow-scrolling: touch; /* for newer versions of iOS */ } /* Track */ ::-webkit-scrollbar-track { - @apply bg-transparent; + @apply bg-transparent; } ::-webkit-scrollbar { - height: 4px; - width: 4px; + height: 4px; + width: 4px; } ::-webkit-scrollbar-thumb { - background: #c8ccd6; - border-radius: 10px; + background: #c8ccd6; + border-radius: 10px; } ::-webkit-scrollbar-track { - background: #0000; + background: #0000; } /* Handle */ ::-webkit-scrollbar-thumb { - @apply bg-[#E0E0E3] rounded-md; + @apply bg-[#E0E0E3] rounded-md; } .active { - @apply border-red-600; + @apply border-red-600; } body { - @apply bg-[#F7F7F9]; + @apply bg-[#F7F7F9]; - --accent-blue: #235ef5; - --grey-borders: #d9d9d9; - --neutral-background: #f7f7f9; - --green: #04b200; + --accent-blue: #235ef5; + --grey-borders: #d9d9d9; + --neutral-background: #f7f7f9; + --green: #04b200; } .mobileOnly { - display: none; + display: none; } .wave { - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; - width: 6px; - height: 6px; - margin-right: 10px; - position: relative; - z-index: 1; - background: #18bd1e; - border-radius: 50%; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + width: 6px; + height: 6px; + margin-right: 10px; + position: relative; + z-index: 1; + background: #18bd1e; + border-radius: 50%; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } .wave:after { - z-index: -1; - content: ""; - width: 6px; - height: 6px; - background: #18bd1e; - border-radius: 50%; - @apply animate-ping; - animation-duration: 4s; + z-index: -1; + content: ""; + width: 6px; + height: 6px; + background: #18bd1e; + border-radius: 50%; + @apply animate-ping; + animation-duration: 4s; } .copyTip { - border-radius: 5px !important; - background: rgba(0, 0, 0, 0.9); - padding: 5px 6px !important; + border-radius: 5px !important; + background: rgba(0, 0, 0, 0.9); + padding: 5px 6px !important; } .copy-btn:hover img { - filter: brightness(15%); + filter: brightness(15%); } .copyTip.copied { - padding-left: 20px !important; + padding-left: 20px !important; } .copyTip.copied::before { - content: "" !important; - position: absolute !important; - left: 12px !important; - top: 40% !important; - transform: translateY(-60%) !important; - width: 18px !important; - height: 18px !important; - background: url("./assets/icons/check.svg") center no-repeat !important; - background-size: cover !important; + content: "" !important; + position: absolute !important; + left: 12px !important; + top: 40% !important; + transform: translateY(-60%) !important; + width: 18px !important; + height: 18px !important; + background: url("./assets/icons/check.svg") center no-repeat !important; + background-size: cover !important; } .clearWrapper { - margin-right: 20px; - position: relative; - display: flex; + margin-right: 20px; + position: relative; + display: flex; } .clearWrapper img { - margin: auto 0; + margin: auto 0; } .clearWrapper::after { - content: ""; - position: absolute; - display: inline-block; - height: 100%; - width: 1px; - background: rgb(240, 239, 237); - right: -12px; - top: 0; + content: ""; + position: absolute; + display: inline-block; + height: 100%; + width: 1px; + background: rgb(240, 239, 237); + right: -12px; + top: 0; } .searchIcon { - /* cursor: pointer; */ + /* cursor: pointer; */ } .searchIcon:hover { - filter: brightness(86%); + filter: brightness(86%); } .infoTextWrap { - margin-left: 35px; + margin-left: 35px; } .infoTextContainer { - padding: 10px 0 !important; - justify-content: space-between; + padding: 10px 0 !important; + justify-content: space-between; } .infoTextContainer.longCol { - margin-left: -10px; + margin-left: -10px; } .formSuccess, .formFail { - display: flex; - align-items: center; - top: 70px; - left: 50%; - transform: translateX(-50%); - position: fixed; - padding: 14px 18px; - background-color: #0cc13f; - color: #fff; - font-size: 14px; - font-family: "Inter"; - border-radius: 6px; + display: flex; + align-items: center; + top: 70px; + left: 50%; + transform: translateX(-50%); + position: fixed; + padding: 14px 18px; + background-color: #0cc13f; + color: #fff; + font-size: 14px; + font-family: "Inter"; + border-radius: 6px; } .formFail { - background-color: #fb5632; + background-color: #fb5632; } .formFail span { - font-size: 14px; - color: #fff; + font-size: 14px; + color: #fff; } .formSuccess img, .formFail img { - margin-right: 0; - margin-left: 12px; - cursor: pointer; + margin-right: 0; + margin-left: 12px; + cursor: pointer; } .formSuccess img:first-child, .formFail img:first-child { - margin-left: 0; - margin-right: 16px; - cursor: default; + margin-left: 0; + margin-right: 16px; + cursor: default; } .formSuccess pre, .formFail pre { - color: #f7f7f9; - margin-left: 10px; - opacity: 0.7; + color: #f7f7f9; + margin-left: 10px; + opacity: 0.7; } .formFail { - color: #c93d49; - font-size: 12px; + color: #c93d49; + font-size: 12px; } #captchaContainer { - margin-top: 20px; + margin-top: 20px; } .ageHeader { - display: flex; - align-items: center; + display: flex; + align-items: center; } .ageHeader img { - margin-left: 10px; - cursor: pointer; + margin-left: 10px; + cursor: pointer; } .ageHeader img.rotated { - transform: rotate(180deg); + transform: rotate(180deg); } .chainIcon { - width: 22px; - height: 22px; + width: 22px; + height: 22px; } .chartLoaderWrap { - height: 200px; - display: flex; - justify-content: center; - align-items: center; + height: 200px; + display: flex; + justify-content: center; + align-items: center; } .newsLetterWrapper .inputWrapper { - margin-top: 1px; - position: relative; - display: inline-block; + margin-top: 1px; + position: relative; + display: inline-block; } .newsLetterWrapper .inputWrapper img { - position: absolute; - right: 8px; - transform: translateY(50%); - cursor: pointer; + position: absolute; + right: 8px; + transform: translateY(50%); + cursor: pointer; } .newsLetterWrapper .inputWrapper img:hover { - opacity: 0.7; + opacity: 0.7; } .mobileOnly .widget_link { - margin-top: 25px; + margin-top: 25px; } .newsLetterWrapper input { - border-radius: 8px; - border: 1px solid#3F3F42; - background-color: #2b2b2c; - color: #fff; - padding: 10px 15px; - transition: all 0.3s ease; - padding-right: 32px; - width: 205px; - font-size: 12px; - margin-bottom: 15px; + border-radius: 8px; + border: 1px solid#3F3F42; + background-color: #2b2b2c; + color: #fff; + padding: 10px 15px; + transition: all 0.3s ease; + padding-right: 32px; + width: 205px; + font-size: 12px; + margin-bottom: 15px; } .newsLetterWrapper input:focus { - outline: none; + outline: none; } .newsLetterWrapper h4 { - color: #ffffff; - font-size: 14px; - font-weight: 700; + color: #ffffff; + font-size: 14px; + font-weight: 700; } .newsLetterWrapper p { - color: #ffffff; - font-size: 14px; - margin-top: 10px; - opacity: 0.7; + color: #ffffff; + font-size: 14px; + margin-top: 10px; + opacity: 0.7; } .text-white { - /* --tw-text-opacity: 1 !important; */ - color: rgb(255 255 255 / var(--tw-text-opacity)) !important; + /* --tw-text-opacity: 1 !important; */ + color: rgb(255 255 255 / var(--tw-text-opacity)) !important; } .newsLetterWrapper input:focus, .newsLetterWrapper input:active { - border: 1px solid #fff; + border: 1px solid #fff; } input.failedEmail { - border-color: rgb(218, 109, 90); + border-color: rgb(218, 109, 90); } .py-4 { - padding-top: 1.2rem !important; - padding-bottom: 1rem !important; + padding-top: 1.2rem !important; + padding-bottom: 1rem !important; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { - -webkit-box-shadow: 0 0 0 30px #2b2b2c inset !important; + -webkit-box-shadow: 0 0 0 30px #2b2b2c inset !important; } input:-webkit-autofill { - -webkit-text-fill-color: rgb(241, 238, 238) !important; + -webkit-text-fill-color: rgb(241, 238, 238) !important; } .quick_links p { - margin-bottom: 10px; + margin-bottom: 10px; } @keyframes ping { - 75%, - 100% { - transform: scale(2.5); - opacity: 0; - } + 75%, + 100% { + transform: scale(2.5); + opacity: 0; + } +} + +.rounded-lg { + height: 38px !important; +} + +.staus-wrapper { + display: flex; + align-items: center; +} + +.__react_component_tooltip { + width: auto !important; + height: auto !important; +} +.__react_component_tooltip span.multi-line { + text-align: left; } -.rounded-lg{ - height: 38px !important; +.status-tip, +.status-tip > img { + max-width: unset; + width: 13px !important; + height: 13px !important; } diff --git a/src/pages/Search.tsx b/src/pages/Search.tsx index 311674b0..ca52ec39 100644 --- a/src/pages/Search.tsx +++ b/src/pages/Search.tsx @@ -13,6 +13,7 @@ import scrollUp from "../assets/img/collapse.svg"; import { LoaderRow } from "../components/elements/LoaderRow"; import { useLocation, useNavigate } from "react-router-dom"; import ReactTooltip from "react-tooltip"; + import moment from "moment"; import { FromLink, ToLink } from "../components/elements/ExplorerLink"; import { Loader } from "../components/elements/Loader"; diff --git a/yarn.lock b/yarn.lock index 27a1524d..f31dffd1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2079,22 +2079,22 @@ "@jridgewell/resolve-uri" "^3.0.3" "@jridgewell/sourcemap-codec" "^1.4.10" -"@moralisweb3/common-core@^2.22.4": - version "2.22.4" - resolved "https://registry.yarnpkg.com/@moralisweb3/common-core/-/common-core-2.22.4.tgz#2ce2d0910ace1643de1e13a902670152065ba300" - integrity sha512-E/gsjutGYHs28tTJPDppO2Zw5WKWdQiBHVjYtT8RfV+p7TD5rxmaK1kAdvj1cP2JZAbhW8K41OGBm+ekyzR/2w== +"@moralisweb3/common-core@^2.23.1": + version "2.23.1" + resolved "https://registry.yarnpkg.com/@moralisweb3/common-core/-/common-core-2.23.1.tgz#14810d127ed8a41f4fe3558db97d42b1d27641bc" + integrity sha512-lU917PxTU37YBrNfzJ2IXCTz2sL8NsE6bXF1ucxdl2yDi1YaS+9tPE9vXnxuVOmNQKfcxb09PyNsv0tt/sUhxA== dependencies: axios "^1.2.1" "@moralisweb3/common-evm-utils@^2.17.0": - version "2.22.4" - resolved "https://registry.yarnpkg.com/@moralisweb3/common-evm-utils/-/common-evm-utils-2.22.4.tgz#655f574b074c41b9e826b70f48e73e82d5dfc3a9" - integrity sha512-hghNO3xksq6TmDgbwoURTzir7h/Ipg/8DlZa/6kb5/fDvGR9kyY+HbKcQyVNGc9PoykQO1BSEv1LLq47BD8w1w== + version "2.23.1" + resolved "https://registry.yarnpkg.com/@moralisweb3/common-evm-utils/-/common-evm-utils-2.23.1.tgz#f1317c8a513a24ab2b18d1c7f3fc00cdeed1838d" + integrity sha512-otjWXVgqbKPz9aXENF94wT177zBv46W+W6FsQhNRKIP96Da44Cfh7/ZiufdPrfCP0OCDxDKw++oKch//EDruXg== dependencies: "@ethersproject/address" "^5.7.0" "@ethersproject/bytes" "^5.7.0" "@ethersproject/transactions" "^5.7.0" - "@moralisweb3/common-core" "^2.22.4" + "@moralisweb3/common-core" "^2.23.1" "@nodelib/fs.scandir@2.1.5": version "2.1.5" @@ -2719,9 +2719,9 @@ integrity sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw== "@types/node@*", "@types/node@^20.4.2": - version "20.4.2" - resolved "https://registry.yarnpkg.com/@types/node/-/node-20.4.2.tgz#129cc9ae69f93824f92fac653eebfb4812ab4af9" - integrity sha512-Dd0BYtWgnWJKwO1jkmTrzofjK2QXXcai0dmtzvIBhcA+RsG5h8R3xlyta0kGOZRNfL9GuRtb1knmPEhQrePCEw== + version "20.6.3" + resolved "https://registry.yarnpkg.com/@types/node/-/node-20.6.3.tgz#5b763b321cd3b80f6b8dde7a37e1a77ff9358dd9" + integrity sha512-HksnYH4Ljr4VQgEy2lTStbCKv/P590tmPe5HqOnv9Gprffgv5WXAY+Y5Gqniu0GGqeTCUdBnzC3QSrzPkBkAMA== "@types/node@^16.11.22": version "16.11.22" @@ -3418,9 +3418,9 @@ axios@^0.27.2: form-data "^4.0.0" axios@^1.2.1: - version "1.4.0" - resolved "https://registry.yarnpkg.com/axios/-/axios-1.4.0.tgz#38a7bf1224cd308de271146038b551d725f0be1f" - integrity sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA== + version "1.5.0" + resolved "https://registry.yarnpkg.com/axios/-/axios-1.5.0.tgz#f02e4af823e2e46a9768cfc74691fdd0517ea267" + integrity sha512-D4DdjDo5CY50Qms0qGQTTw6Q44jl7zRwY7bthds06pUGfChBCTcQs+N743eFWGEd6pRTMd6A+I87aWyFV5wiZQ== dependencies: follow-redirects "^1.15.0" form-data "^4.0.0" @@ -5614,9 +5614,9 @@ follow-redirects@^1.0.0: integrity sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ== follow-redirects@^1.14.8, follow-redirects@^1.15.0: - version "1.15.2" - resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13" - integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA== + version "1.15.3" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.3.tgz#fe2f3ef2690afce7e82ed0b44db08165b207123a" + integrity sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q== follow-redirects@^1.14.9: version "1.15.1" @@ -7503,7 +7503,7 @@ neo-async@^2.6.2: "nft-parser@git+https://github.com/xp-network/nft-parser#bleeding-edge": version "0.2.0" - resolved "git+https://github.com/xp-network/nft-parser#f82b19c4754f9636bdd65827eb41ecf786544c50" + resolved "git+https://github.com/xp-network/nft-parser#9e6784c5935ba97ade7431c4b3830a04fd03d496" dependencies: "@ethersproject/providers" "^5.7.2" "@moralisweb3/common-evm-utils" "^2.17.0" @@ -8870,7 +8870,7 @@ react-smooth@^2.0.1: fast-equals "^2.0.0" react-transition-group "2.9.0" -react-tooltip@*, react-tooltip@^4.2.21: +react-tooltip@*: version "4.2.21" resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-4.2.21.tgz#840123ed86cf33d50ddde8ec8813b2960bfded7f" integrity sha512-zSLprMymBDowknr0KVDiJ05IjZn9mQhhg4PRsqln0OZtURAJ1snt1xi5daZfagsh6vfsziZrc9pErPTDY1ACig== @@ -8878,6 +8878,14 @@ react-tooltip@*, react-tooltip@^4.2.21: prop-types "^15.7.2" uuid "^7.0.3" +react-tooltip@^4.4.4: + version "4.4.4" + resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-4.4.4.tgz#a36e7a0242d3e6478c9f775383bc0cb911400a52" + integrity sha512-4c98L4GLAloSJBr6DY06UuAo4vX6ttjs1HvzqSItBFhErllniVA8HYZk5FBd/6u29joc6JL5lbGzA4zCHJw3bQ== + dependencies: + prop-types "^15.8.1" + uuid "^7.0.3" + react-transition-group@2.9.0: version "2.9.0" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d" @@ -10089,9 +10097,9 @@ typescript@^4.5.5: integrity sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA== typescript@^5.1.6: - version "5.1.6" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.1.6.tgz#02f8ac202b6dad2c0dd5e0913745b47a37998274" - integrity sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA== + version "5.2.2" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.2.2.tgz#5ebb5e5a5b75f085f22bc3f8460fba308310fa78" + integrity sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w== unbox-primitive@^1.0.1: version "1.0.1"