import style from "./ButtonVariations.module.scss" ; import cs from "classnames" ; import { GenerativeToken } from "../../types/entities/GenerativeToken" ; import { Button } from "." ; import { useMemo } from "react" ; import { generateFxHash } from "../../utils/hash" ; import { uniq } from "lodash" ; import { HoverTitle } from "../Utils/HoverTitle" ; interface Props { token : GenerativeToken ; previewHash ? : string | null ; onChangeHash : ( hash : string ) => void ; } export function ButtonVariations ( { token , previewHash , onChangeHash , } ) { const fullyMinted = token . balance === 0 ; const exploreSet = token . metadata . settings ?. exploration ; const activeSettings = fullyMinted ? exploreSet ?. postMint : exploreSet ?. preMint ; const hoverMessage = useMemo < string | null > ( ( ) => { if ( ! token . metadata . settings ?. exploration ) { return "This token doesn't have variation settings, therefore exploration of variations is disabled" ; } if ( ! activeSettings ?. enabled ) { if ( fullyMinted ) { return "Artist disabled the exploration of variations after minting phase" ; } else { return "Artist disabled the exploration of variation during the minting phase" ; } } return null ; } , [ ] ) ; const hashes = useMemo < string [ ] | null > ( ( ) => { if ( ! activeSettings ?. hashConstraints ) { return null ; } return uniq ( [ token . metadata . previewHash ! , ... activeSettings . hashConstraints ] ) ; } , [ ] ) ; const icon = useMemo ( ( ) => { if ( activeSettings ?. enabled ) { if ( ! activeSettings ?. hashConstraints ) { return ( < i aria - hidden className = "fas fa-infinity" / > ) ; } else { let idx = hashes ?. indexOf ( previewHash ! ) ; idx = idx === - 1 || idx == null ? 0 : idx ; return ( < div className = { cs ( style . progress ) } > { idx + 1 } /{hashes!.length} < /div>); } } } , [ previewHash ] ) ; const updatePreviewHash = ( ) => { if ( ! activeSettings ?. enabled ) { return ; } if ( ! hashes ) { onChangeHash ( generateFxHash ( ) ) ; } else { let idx = hashes ?. indexOf ( previewHash ! ) ; idx = idx === - 1 || idx == null ? 0 : idx ; idx = ( idx + 1 ) % hashes . length ; onChangeHash ( hashes [ idx ] ) ; } } ; return ( < HoverTitle message = { hoverMessage } > < Button type = "button" size = "small" disabled = { ! activeSettings ?. enabled } iconComp = { icon } iconSide = "right" onClick = { updatePreviewHash } > variations < /Button> < /HoverTitle>); }