diff --git a/.pnp.cjs b/.pnp.cjs index 7809065..afb7e12 100755 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -65,6 +65,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { ["react-dom", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:18.2.0"],\ ["react-is", "npm:18.2.0"],\ ["react-modal", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:3.16.1"],\ + ["react-tooltip", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:5.2.0"],\ ["react-typed", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:1.2.0"],\ ["semver", "npm:7.3.8"],\ ["styled-components", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:5.3.6"],\ @@ -2705,6 +2706,25 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { "linkType": "HARD"\ }]\ ]],\ + ["@floating-ui/core", [\ + ["npm:1.0.4", {\ + "packageLocation": "./.yarn/cache/@floating-ui-core-npm-1.0.4-73057dfc20-6362a625ad.zip/node_modules/@floating-ui/core/",\ + "packageDependencies": [\ + ["@floating-ui/core", "npm:1.0.4"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ + ["@floating-ui/dom", [\ + ["npm:1.0.12", {\ + "packageLocation": "./.yarn/cache/@floating-ui-dom-npm-1.0.12-9eafc585c1-fbcdec5fb8.zip/node_modules/@floating-ui/dom/",\ + "packageDependencies": [\ + ["@floating-ui/dom", "npm:1.0.12"],\ + ["@floating-ui/core", "npm:1.0.4"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["@gar/promisify", [\ ["npm:1.1.3", {\ "packageLocation": "./.yarn/cache/@gar-promisify-npm-1.1.3-ac1a325862-4059f790e2.zip/node_modules/@gar/promisify/",\ @@ -5251,6 +5271,15 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { "linkType": "HARD"\ }]\ ]],\ + ["classnames", [\ + ["npm:2.3.2", {\ + "packageLocation": "./.yarn/cache/classnames-npm-2.3.2-d2fdae468d-2c62199789.zip/node_modules/classnames/",\ + "packageDependencies": [\ + ["classnames", "npm:2.3.2"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["clean-regexp", [\ ["npm:1.0.0", {\ "packageLocation": "./.yarn/cache/clean-regexp-npm-1.0.0-f349f98f15-0b1ce281b0.zip/node_modules/clean-regexp/",\ @@ -7291,6 +7320,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { ["react-dom", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:18.2.0"],\ ["react-is", "npm:18.2.0"],\ ["react-modal", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:3.16.1"],\ + ["react-tooltip", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:5.2.0"],\ ["react-typed", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:1.2.0"],\ ["semver", "npm:7.3.8"],\ ["styled-components", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:5.3.6"],\ @@ -9204,6 +9234,34 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { "linkType": "HARD"\ }]\ ]],\ + ["react-tooltip", [\ + ["npm:5.2.0", {\ + "packageLocation": "./.yarn/cache/react-tooltip-npm-5.2.0-146bd8c565-452e0e7330.zip/node_modules/react-tooltip/",\ + "packageDependencies": [\ + ["react-tooltip", "npm:5.2.0"]\ + ],\ + "linkType": "SOFT"\ + }],\ + ["virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:5.2.0", {\ + "packageLocation": "./.yarn/__virtual__/react-tooltip-virtual-7e775d3462/0/cache/react-tooltip-npm-5.2.0-146bd8c565-452e0e7330.zip/node_modules/react-tooltip/",\ + "packageDependencies": [\ + ["react-tooltip", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:5.2.0"],\ + ["@floating-ui/dom", "npm:1.0.12"],\ + ["@types/react", "npm:18.0.25"],\ + ["@types/react-dom", "npm:18.0.9"],\ + ["classnames", "npm:2.3.2"],\ + ["react", "npm:18.2.0"],\ + ["react-dom", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:18.2.0"]\ + ],\ + "packagePeers": [\ + "@types/react-dom",\ + "@types/react",\ + "react-dom",\ + "react"\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["react-typed", [\ ["npm:1.2.0", {\ "packageLocation": "./.yarn/cache/react-typed-npm-1.2.0-8feca2dd12-c750d68710.zip/node_modules/react-typed/",\ diff --git a/.yarn/cache/@floating-ui-core-npm-1.0.4-73057dfc20-6362a625ad.zip b/.yarn/cache/@floating-ui-core-npm-1.0.4-73057dfc20-6362a625ad.zip new file mode 100644 index 0000000..3962213 Binary files /dev/null and b/.yarn/cache/@floating-ui-core-npm-1.0.4-73057dfc20-6362a625ad.zip differ diff --git a/.yarn/cache/@floating-ui-dom-npm-1.0.12-9eafc585c1-fbcdec5fb8.zip b/.yarn/cache/@floating-ui-dom-npm-1.0.12-9eafc585c1-fbcdec5fb8.zip new file mode 100644 index 0000000..d024b0e Binary files /dev/null and b/.yarn/cache/@floating-ui-dom-npm-1.0.12-9eafc585c1-fbcdec5fb8.zip differ diff --git a/.yarn/cache/classnames-npm-2.3.2-d2fdae468d-2c62199789.zip b/.yarn/cache/classnames-npm-2.3.2-d2fdae468d-2c62199789.zip new file mode 100644 index 0000000..cc84a12 Binary files /dev/null and b/.yarn/cache/classnames-npm-2.3.2-d2fdae468d-2c62199789.zip differ diff --git a/.yarn/cache/react-tooltip-npm-5.2.0-146bd8c565-452e0e7330.zip b/.yarn/cache/react-tooltip-npm-5.2.0-146bd8c565-452e0e7330.zip new file mode 100644 index 0000000..7f03b80 Binary files /dev/null and b/.yarn/cache/react-tooltip-npm-5.2.0-146bd8c565-452e0e7330.zip differ diff --git a/components/final-check-modal/index.tsx b/components/final-check-modal/index.tsx index d90a584..3829419 100644 --- a/components/final-check-modal/index.tsx +++ b/components/final-check-modal/index.tsx @@ -1,4 +1,3 @@ -import { Bech32Address } from "@keplr-wallet/cosmos"; import Image from "next/image"; import { useRouter } from "next/router"; import { FunctionComponent } from "react"; @@ -8,6 +7,7 @@ import { MINIMUM_OSMO_FEE } from "../../constants/wallet"; import color from "../../styles/color"; import { PrimaryButton } from "../primary-button"; import { SecondaryButton } from "../secondary-button"; +import { Tooltip } from "react-tooltip"; interface Props { twitterUserName: string | undefined; @@ -108,11 +108,12 @@ export const FinalCheckModal: FunctionComponent = (props) => { }} /> } - title={walletInfo?.name || "Keplr account"} - content={Bech32Address.shortenAddress( - walletInfo?.bech32Address || "", - 28, - )} + title="Keplr account" + content={walletInfo?.name || "Keplr account"} + contentTooltip={{ + id: "address-tooltip", + content: walletInfo?.bech32Address || "", + }} /> @@ -238,10 +239,15 @@ const NameBox: FunctionComponent<{ title: string; content: string; + contentTooltip?: { + id: string; + content: string; + }; + icon?: React.ReactElement; marginTop: string; -}> = ({ icon, title, content, marginTop }) => { +}> = ({ icon, title, content, contentTooltip, marginTop }) => { return ( {icon} : null} {title} - {content} + +
+ {content} +
+ {contentTooltip ? ( + + ) : null} +
); }; diff --git a/package.json b/package.json index 83c1c3e..01ae06a 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "react-dom": "18.2.0", "react-is": "^18.2.0", "react-modal": "^3.16.1", + "react-tooltip": "^5.2.0", "react-typed": "^1.2.0", "semver": "^7.3.8", "styled-components": "^5.3.6" diff --git a/pages/_app.tsx b/pages/_app.tsx index 26a2422..486cb80 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -9,6 +9,9 @@ import color from "../styles/color"; import { GlobalStyle } from "../styles/global"; +// Tooltip default style. +import "react-tooltip/dist/react-tooltip.css"; + const homePageTheme: DefaultTheme = { bgColor: color.black, bgGridColor: color.grey["600"], diff --git a/yarn.lock b/yarn.lock index e0777f5..2efc204 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1588,6 +1588,22 @@ __metadata: languageName: node linkType: hard +"@floating-ui/core@npm:^1.0.4": + version: 1.0.4 + resolution: "@floating-ui/core@npm:1.0.4" + checksum: 6362a625ad0dba7cfd197fc4b6f620eed95147d38684d7347287569897098862c6ba1173f3758d76d22e7739112c57dc836a569c582e78f5807c26ef41df4989 + languageName: node + linkType: hard + +"@floating-ui/dom@npm:^1.0.4": + version: 1.0.12 + resolution: "@floating-ui/dom@npm:1.0.12" + dependencies: + "@floating-ui/core": ^1.0.4 + checksum: fbcdec5fb8d096a65da346e76fc6c8f2e4db3c9c70b06dea17321c775bc125ae0b02450a8b195a224b8edf9acba205b607f6d638bda78a2ca1b2ec92fa15b784 + languageName: node + linkType: hard + "@gar/promisify@npm:^1.1.3": version: 1.1.3 resolution: "@gar/promisify@npm:1.1.3" @@ -3559,6 +3575,13 @@ __metadata: languageName: node linkType: hard +"classnames@npm:^2.3.2": + version: 2.3.2 + resolution: "classnames@npm:2.3.2" + checksum: 2c62199789618d95545c872787137262e741f9db13328e216b093eea91c85ef2bfb152c1f9e63027204e2559a006a92eb74147d46c800a9f96297ae1d9f96f4e + languageName: node + linkType: hard + "clean-regexp@npm:^1.0.0": version: 1.0.0 resolution: "clean-regexp@npm:1.0.0" @@ -5202,6 +5225,7 @@ __metadata: react-dom: 18.2.0 react-is: ^18.2.0 react-modal: ^3.16.1 + react-tooltip: ^5.2.0 react-typed: ^1.2.0 semver: ^7.3.8 styled-components: ^5.3.6 @@ -6865,6 +6889,19 @@ __metadata: languageName: node linkType: hard +"react-tooltip@npm:^5.2.0": + version: 5.2.0 + resolution: "react-tooltip@npm:5.2.0" + dependencies: + "@floating-ui/dom": ^1.0.4 + classnames: ^2.3.2 + peerDependencies: + react: ">=18.0.0" + react-dom: ">=18.0.0" + checksum: 452e0e7330a987819415a6ec354fea5a7d1eae31ed9c81eedc7016e4d0aebd82815262eaed1957fa5eb316dda4bbabba3bf6869740fa47406debfb560cd463e1 + languageName: node + linkType: hard + "react-typed@npm:^1.2.0": version: 1.2.0 resolution: "react-typed@npm:1.2.0"