-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
7247578
commit af6a1a4
Showing
10 changed files
with
1,179 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
77 changes: 77 additions & 0 deletions
77
front/src/components/MusicalAddress/MusicalAddress.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| .containerSignaturesBtnPlay { | ||
| width: fit-content; | ||
| background: transparent; | ||
| border: unset; | ||
| // height: 20px; | ||
| font-size: 16px; | ||
| // padding: 100px; | ||
| color: var(--primary-color); | ||
|
|
||
| &.disabled { | ||
| color: rgba(255, 255, 255, 0.78); | ||
| } | ||
|
|
||
| &:hover:not(.disabled) { | ||
| a { | ||
| color: #00ffbf; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .containerSignatures, | ||
| .music { | ||
| display: flex; | ||
|
|
||
| align-items: center; | ||
| gap: 3px; | ||
| } | ||
|
|
||
| .containerSignatures { | ||
| &ItemNote { | ||
| width: 7px; | ||
| border-radius: 2px; | ||
| max-height: 20px; | ||
|
|
||
| @media (max-width: 800px) { | ||
| width: 5px; | ||
| } | ||
| } | ||
|
|
||
| @media (max-width: 800px) { | ||
| gap: 2px; | ||
| } | ||
| } | ||
|
|
||
| $items: 32; | ||
|
|
||
| .containerSignaturesPlaying { | ||
| .containerSignaturesItemNote { | ||
| opacity: 1; | ||
| animation: blink 0.3s; | ||
| animation-fill-mode: both; | ||
| animation-timing-function: ease-in-out; | ||
|
|
||
| @for $i from 1 through $items { | ||
| &:nth-child(#{$i}) { | ||
| animation-delay: $i * 0.2s; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @keyframes blink { | ||
| 0% { | ||
| opacity: 0.2; | ||
| } | ||
|
|
||
| 50% { | ||
| opacity: 1; | ||
| } | ||
|
|
||
| 100% { | ||
| opacity: 0.2; | ||
| } | ||
| // 100% { | ||
| // opacity: 1; | ||
| // } | ||
| } |
57 changes: 57 additions & 0 deletions
57
front/src/components/MusicalAddress/MusicalAddress.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| /* eslint-disable import/no-unused-modules */ | ||
|
|
||
| import { Meta, StoryObj } from '@storybook/react'; | ||
|
|
||
| import MusicalAddress from './MusicalAddress'; | ||
|
|
||
| const stubAddress = 'bostrom1f5warat4vc0q98k7ygys4saka8u04rfxpmthvl'; | ||
| const stubAddress2 = 'cosmos1f5warat4vc0q98k7ygys4saka8u04rfxzglyjc'; | ||
| const stubAddress3 = 'osmo1f5warat4vc0q98k7ygys4saka8u04rfx2nv5y2'; | ||
| const stubAddress4 = '0xbb5913bb6fa84f02ce78ffeeb9e7d43e3d075b16'; | ||
|
|
||
| const meta: Meta<typeof MusicalAddress> = { | ||
| component: MusicalAddress, | ||
| title: 'atoms/MusicalAddress', | ||
| parameters: { | ||
| design: { | ||
| type: 'figma', | ||
| url: 'https://www.figma.com/file/7i0Ly3YF587km0F8iDZod4/cyb?type=design&node-id=17023-16986', | ||
| }, | ||
| }, | ||
| }; | ||
| export default meta; | ||
|
|
||
| type Story = StoryObj<typeof MusicalAddress>; | ||
|
|
||
| const defaultArgs = { | ||
| address: stubAddress, | ||
| }; | ||
|
|
||
| export const Default: Story = { | ||
| args: defaultArgs, | ||
| }; | ||
|
|
||
| export const Group: Story = { | ||
| render: () => { | ||
| return ( | ||
| <div | ||
| style={{ | ||
| display: 'grid', | ||
| gap: '30px 0', | ||
| }} | ||
| > | ||
| <MusicalAddress {...defaultArgs} /> | ||
| <MusicalAddress address={stubAddress2} /> | ||
| <MusicalAddress address={stubAddress3} /> | ||
| <MusicalAddress address={stubAddress4} disabled /> | ||
| </div> | ||
| ); | ||
| }, | ||
| }; | ||
|
|
||
| export const Disabled: Story = { | ||
| args: { | ||
| ...defaultArgs, | ||
| disabled: true, | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,134 @@ | ||
| import { useMemo, useState, useCallback } from "react"; | ||
| import { v4 as uuidv4 } from "uuid"; | ||
| import styles from "./MusicalAddress.module.scss"; | ||
| import { | ||
| DICTIONARY_ABC, | ||
| getHeight, | ||
| getNoteFromAdd, | ||
| makeSound, | ||
| cutAddress, | ||
| } from "./utils"; | ||
| import { Link } from "react-router-dom"; | ||
| import { Tooltip } from "src/components"; | ||
| // import Pill from '../Pill/Pill'; | ||
|
|
||
| import classNames from "classnames"; | ||
|
|
||
| type Props = { | ||
| address: string; | ||
| disabled?: boolean; | ||
| }; | ||
|
|
||
| function MusicalAddress({ address: bech32, disabled }: Props) { | ||
| const [playing, setPlaying] = useState(true); | ||
| const [addressCopied, setAddressCopied] = useState(false); | ||
|
|
||
| const address = useMemo(() => { | ||
| return cutAddress(bech32); | ||
| }, [bech32]); | ||
|
|
||
| const useGetItems = useMemo(() => { | ||
| const items = []; | ||
|
|
||
| if (address !== null) { | ||
| const { address: sliceAddress } = address; | ||
| const arrayAddress = sliceAddress.split(""); | ||
| const bufferAddress = window.Buffer.from(sliceAddress) | ||
| .toString("hex") | ||
| .replace(/[a-z]/g, "") | ||
| .split(""); | ||
| arrayAddress.forEach((item, index) => { | ||
| items.push({ | ||
| color: DICTIONARY_ABC[item].color, | ||
| code: bufferAddress[index] || 2, | ||
| }); | ||
| }); | ||
| } | ||
|
|
||
| return items; | ||
| }, [address]); | ||
|
|
||
| const copyAddress = useCallback(() => { | ||
| navigator.clipboard.writeText(bech32); | ||
|
|
||
| setAddressCopied(true); | ||
|
|
||
| setTimeout(() => { | ||
| setAddressCopied(false); | ||
| }, 3000); | ||
| }, [bech32]); | ||
|
|
||
| const onClickMusicalAddress = useCallback(() => { | ||
| if (!playing) { | ||
| return; | ||
| } | ||
|
|
||
| if (address) { | ||
| copyAddress(); | ||
| const { address: sliceAddress } = address; | ||
| const arrNote = getNoteFromAdd(sliceAddress); | ||
| setPlaying(false); | ||
| makeSound(arrNote); | ||
| setTimeout(() => { | ||
| setPlaying(true); | ||
| }, 7000); | ||
| } | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [address, playing]); | ||
|
|
||
| function renderAddressPart(text: string) { | ||
| if (disabled) { | ||
| return text; | ||
| } | ||
|
|
||
| return <Link to={`/neuron/${bech32}`}>{text}</Link>; | ||
| } | ||
|
|
||
| return ( | ||
| <div | ||
| className={classNames(styles.containerSignaturesBtnPlay, { | ||
| [styles.disabled]: disabled, | ||
| })} | ||
| > | ||
| <div | ||
| className={classNames(styles.containerSignatures, { | ||
| [styles.containerSignaturesPlaying]: !playing, | ||
| })} | ||
| > | ||
| {address && renderAddressPart(address.prefix)} | ||
|
|
||
| <div> | ||
| {/* <Tooltip | ||
| strategy="fixed" | ||
| tooltip={!addressCopied ? 'copy address' : 'address copied!'} | ||
| > */} | ||
| <button | ||
| className={styles.music} | ||
| onClick={onClickMusicalAddress} | ||
| type="button" | ||
| > | ||
| {useGetItems.map((item) => { | ||
| const key = uuidv4(); | ||
| return ( | ||
| <div | ||
| key={key} | ||
| className={styles.containerSignaturesItemNote} | ||
| style={{ | ||
| background: item.color, | ||
| color: item.color, | ||
| height: `${getHeight(item.code)}px`, | ||
| }} | ||
| /> | ||
| ); | ||
| })} | ||
| </button> | ||
| {/* </Tooltip> */} | ||
| </div> | ||
|
|
||
| {address && renderAddressPart(address.end)} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default MusicalAddress; |
Oops, something went wrong.