LaconicNetwork/icns-frontend
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show bech32 address as tooltip on final check modal

Browse Source
This commit is contained in:
Thunnini 2022-12-20 14:44:04 +09:00
parent 2c0b4c8e0e
commit c4a025d99d
9 changed files with 138 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
.pnp.cjs generated
View File

@ -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/",\

BIN
.yarn/cache/@floating-ui-core-npm-1.0.4-73057dfc20-6362a625ad.zip vendored Normal file
View File

Binary file not shown.

BIN
.yarn/cache/@floating-ui-dom-npm-1.0.12-9eafc585c1-fbcdec5fb8.zip vendored Normal file
View File

Binary file not shown.

BIN
.yarn/cache/classnames-npm-2.3.2-d2fdae468d-2c62199789.zip vendored Normal file
View File

Binary file not shown.

BIN
.yarn/cache/react-tooltip-npm-5.2.0-146bd8c565-452e0e7330.zip vendored Normal file
View File

Binary file not shown.

47
components/final-check-modal/index.tsx
View File

@ -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> = (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 || "",
}}
/>
<SubTextsContainer>
@ -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 (
<NameBoxContainer
style={{
@ -252,7 +258,32 @@ const NameBox: FunctionComponent<{
{icon ? <NameBoxIconContainer>{icon}</NameBoxIconContainer> : null}
<NameBoxTitle>{title}</NameBoxTitle>
</NameBoxTitleContainer>
<NameBoxContentContainer>{content}</NameBoxContentContainer>
<NameBoxContentContainer
style={{
textDecoration: contentTooltip ? "underline" : undefined,
}}
>
<div
id={contentTooltip?.id}
data-tooltip-content={contentTooltip?.content}
data-tooltip-place="top"
>
{content}
</div>
{contentTooltip ? (
<Tooltip
anchorId={contentTooltip.id}
style={{
backgroundColor: color.grey["400"],
color: color.white,
fontStyle: "normal",
fontWeight: 400,
fontSize: "14px",
lineHeight: "17px",
}}
/>
) : null}
</NameBoxContentContainer>
</NameBoxContainer>
);
};

1
package.json
View File

@ -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"

3
pages/_app.tsx
View File

@ -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"],

37
yarn.lock
View File

@ -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"