{"version":3,"file":"index.0168fabe.js","sources":["../../../app/frontend/entrypoints/page/home/section/generatives/index.tsx"],"sourcesContent":["import axios, { AxiosError, AxiosResponse } from 'axios'\nimport { useEffect, useState } from 'react'\n\nimport { useTranslation } from 'react-i18next'\nimport { useRecoilState } from 'recoil'\nimport { currentPlayState } from '../../../../../src/atoms/CurrentPlayAtom'\nimport { pageState } from '../../../../../src/atoms/PageAtom'\nimport { pastPageState } from '../../../../../src/atoms/PastPageAtom'\nimport { playQueueState } from '../../../../../src/atoms/PlayQueueAtom'\n\nimport pauseIcon from '../../../../../src/assets/images/icons/pause.svg'\nimport playIcon from '../../../../../src/assets/images/icons/play.svg'\n\nimport GenerativeModal from './modal'\n\ntype Artist = {\n  public_id: string\n  display_name: string\n}\n\ntype Generative = {\n  public_id: string\n  contract_address: string\n  name: string\n  chain_id: number\n  uri: string\n  artist: Artist\n}\n\ntype PickupGenerative = {\n  abi_uri: string\n  mint_func: string | null\n  price: string\n  outer_link: string | null\n  cover_image_uri: string\n  music_uri: string\n  max_supply: number\n  total_supply: number\n  generative: Generative\n}\n\ntype Props = {\n  web3: Web3\n}\n\nfunction HomeGeneratives(props: Props) {\n  const { t } = useTranslation()\n  const [page, setPage] = useRecoilState(pageState)\n  const [, setPastPage] = useRecoilState(pastPageState)\n  const [, setPlayList] = useRecoilState(playQueueState)\n  const [currentPlay, setCurrentPlay] = useRecoilState(currentPlayState)\n\n  const [pickupGeneratives, setPickupGeneratives] =\n    useState<PickupGenerative[]>()\n  const [openGenerative, setOpenGenerative] = useState<\n    PickupGenerative | undefined\n  >()\n\n  useEffect(() => {\n    fetchHomeGeneratives()\n  }, [])\n\n  const fetchHomeGeneratives = () => {\n    axios({\n      method: 'GET',\n      url: `${import.meta.env.VITE_API_BASE_URI}/api/v1/home/generatives`,\n    })\n      .then(\n        (\n          response: AxiosResponse<{ pickup_generatives: PickupGenerative[] }>\n        ) => {\n          setPickupGeneratives(response.data.pickup_generatives)\n        }\n      )\n      .catch((error: AxiosError<{ error: string }>) => {\n        console.error('error', error)\n      })\n  }\n\n  type MusicNft = {\n    chain_id: number\n    contract_address: string\n    token_id: string\n    name: string\n    image: string\n    sound: string\n    artist_name: string\n    artist_public_id: string\n  }\n  const playMusic = (target: MusicNft) => {\n    setPlayList([target])\n  }\n\n  const generativeContents = (\n    <div className=\"generatives\">\n      {pickupGeneratives && pickupGeneratives.length > 0 ? (\n        pickupGeneratives.map((pickupGenerative) => (\n          <div\n            className=\"generative\"\n            key={pickupGenerative.generative.public_id}\n            onClick={(event) => {\n              event.stopPropagation()\n              setPastPage('home')\n              setPage(\n                `generatives/${pickupGenerative.generative.public_id}/detail`\n              )\n            }}\n          >\n            <div\n              className=\"image\"\n              style={{\n                backgroundImage: `url(${pickupGenerative.cover_image_uri})`,\n              }}\n              onClick={(event) => {\n                event.stopPropagation()\n              }}\n            >\n              <div className=\"navigation\">\n                <button className=\"icon\"></button>\n                {currentPlay.chainId === pickupGenerative.generative.chain_id &&\n                currentPlay.contractAddress ===\n                  pickupGenerative.generative.contract_address &&\n                currentPlay.tokenId === '1' &&\n                currentPlay.playStatus ? (\n                  <button\n                    className=\"play\"\n                    aria-label=\"停止\"\n                    style={{ backgroundImage: `url(${pauseIcon})` }}\n                    onClick={(event) => {\n                      event.stopPropagation()\n                      const dupCurrentPlay = Object.assign({}, currentPlay)\n                      dupCurrentPlay.outerPause = true\n                      setCurrentPlay(dupCurrentPlay)\n                    }}\n                  ></button>\n                ) : (\n                  <button\n                    className=\"play\"\n                    aria-label=\"再生\"\n                    style={{ backgroundImage: `url(${playIcon})` }}\n                    onClick={(event) => {\n                      event.stopPropagation()\n                      playMusic({\n                        chain_id: pickupGenerative.generative.chain_id,\n                        contract_address:\n                          pickupGenerative.generative.contract_address,\n                        token_id: '1',\n                        name: pickupGenerative.generative.name,\n                        image: pickupGenerative.cover_image_uri,\n                        sound: pickupGenerative.music_uri,\n                        artist_name:\n                          pickupGenerative.generative.artist.display_name,\n                        artist_public_id:\n                          pickupGenerative.generative.artist.public_id,\n                      })\n                    }}\n                  ></button>\n                )}\n                <button className=\"icon\"></button>\n              </div>\n            </div>\n\n            <div className=\"datum\">\n              <h3 className=\"data ttl\">{pickupGenerative.generative.name}</h3>\n              <button\n                className=\"data button\"\n                onClick={(event) => {\n                  event.stopPropagation()\n                  setPastPage('home')\n                  setPage(\n                    `artists/${pickupGenerative.generative.artist.public_id}`\n                  )\n                }}\n              >\n                <span className=\"user-icon\"></span>\n                <span className=\"artist-name\">\n                  {pickupGenerative.generative.artist.display_name}\n                </span>\n              </button>\n              <p className=\"data supply\">\n                発行枚数\n                <span className=\"num\">\n                  {pickupGenerative.total_supply.toLocaleString('en-US')}/\n                  {pickupGenerative.max_supply.toLocaleString('en-US')}\n                </span>\n              </p>\n              <button\n                className=\"data mint\"\n                onClick={(event) => {\n                  event.stopPropagation()\n                  setOpenGenerative(pickupGenerative)\n                }}\n              >\n                MINTする\n              </button>\n              {/* <a\n                className=\"data mint\"\n                href={pickupGenerative.generative.uri}\n                target=\"_blank\"\n                rel=\"nofollow noopener noreferrer\"\n                onClick={(event) => {\n                  event.stopPropagation()\n                }}\n              >\n                MINTする\n              </a> */}\n            </div>\n          </div>\n        ))\n      ) : (\n        <></>\n      )}\n    </div>\n  )\n\n  return pickupGeneratives && pickupGeneratives.length > 0 ? (\n    <section className=\"section generatives-section\">\n      <div className=\"ttl-flex\">\n        <h2 className=\"section-ttl\">イチオシのジェネラティブ</h2>\n        <button className=\"more-button\" onClick={() => setPage('generatives')}>\n          {t('parts.moreButton.text')}\n        </button>\n      </div>\n      {generativeContents}\n      {openGenerative && (\n        <GenerativeModal\n          web3={props.web3}\n          pickupGenerative={openGenerative}\n          setOpenGenerative={setOpenGenerative}\n        />\n      )}\n    </section>\n  ) : (\n    <></>\n  )\n}\n\nexport default HomeGeneratives\n"],"names":["HomeGeneratives","props","t","useTranslation","page","setPage","useRecoilState","pageState","setPastPage","pastPageState","setPlayList","playQueueState","currentPlay","setCurrentPlay","currentPlayState","pickupGeneratives","setPickupGeneratives","useState","openGenerative","setOpenGenerative","useEffect","fetchHomeGeneratives","axios","method","url","VITE_API_BASE_URI","then","response","data","pickup_generatives","catch","error","playMusic","target","generativeContents","length","map","pickupGenerative","_jsxs","event","stopPropagation","generative","public_id","_jsx","backgroundImage","cover_image_uri","chainId","chain_id","contractAddress","contract_address","tokenId","playStatus","pauseIcon","dupCurrentPlay","Object","assign","outerPause","playIcon","token_id","name","image","sound","music_uri","artist_name","artist","display_name","artist_public_id","total_supply","toLocaleString","max_supply","_Fragment","GenerativeModal","web3"],"mappings":"kpBA6CA,SAASA,EAAgBC,EAAc,CAC/B,KAAA,CAAEC,EAAAA,GAAMC,EAAgB,EACxB,CAACC,EAAMC,CAAO,EAAIC,EAAeC,CAAS,EAC1C,EAAGC,CAAW,EAAIF,EAAeG,CAAa,EAC9C,EAAGC,CAAW,EAAIJ,EAAeK,CAAc,EAC/C,CAACC,EAAaC,CAAc,EAAIP,EAAeQ,CAAgB,EAE/D,CAACC,EAAmBC,CAAoB,EAC5CC,EAA8B,SAAA,EAC1B,CAACC,EAAgBC,CAAiB,EAAIF,EAEzC,SAAA,EAEHG,EAAAA,UAAU,IAAM,CACQC,GACxB,EAAG,CAAE,CAAA,EAEL,MAAMA,EAAuB,IAAM,CAC3BC,EAAA,CACJC,OAAQ,MACRC,IAAM,kDAAkBC,CACzB,EACEC,KAEGC,GACG,CACkBA,EAAAA,EAASC,KAAKC,kBAAkB,CAAA,CACtD,EAEFC,MAAOC,GAAyC,CACvCA,QAAAA,MAAM,QAASA,CAAK,CAAA,CAC7B,CAAA,EAaCC,EAAaC,GAAqB,CAC1BvB,EAAA,CAACuB,CAAM,CAAC,CAAA,EAGhBC,IACJ,MAAA,CAAK,UAAU,cAAa,SACzBnB,GAAqBA,EAAkBoB,OAAS,EAC/CpB,EAAkBqB,IAChBC,GAAAC,EAAA,MAAA,CACE,UAAU,aAEV,QAAoBC,GAAA,CAClBA,EAAMC,gBAAiB,EACvBhC,EAAY,MAAM,EAEfH,EAAA,eAAcgC,EAAiBI,WAAWC,kBAAkB,CAEjE,EAAE,SAEF,CAAAC,EAAA,MAAA,CACE,UAAU,QACV,MAAO,CACLC,gBAAkB,OAAMP,EAAiBQ,kBAC3C,EACA,QAAoBN,GAAA,CAClBA,EAAMC,gBAAiB,CACzB,EAAE,WAEF,MAAA,CAAK,UAAU,aAAY,SACzB,CAAAG,EAAA,SAAA,CAAQ,UAAU,MAAA,CAAM,EACvB/B,EAAYkC,UAAYT,EAAiBI,WAAWM,UACrDnC,EAAYoC,kBACVX,EAAiBI,WAAWQ,kBAC9BrC,EAAYsC,UAAY,KACxBtC,EAAYuC,aACV,SAAA,CACE,UAAU,OACV,aAAW,KACX,MAAO,CAAEP,gBAAkB,OAAMQ,IAAa,EAC9C,QAAoBb,GAAA,CAClBA,EAAMC,gBAAiB,EACvB,MAAMa,EAAiBC,OAAOC,OAAO,GAAI3C,CAAW,EACpDyC,EAAeG,WAAa,GAC5B3C,EAAewC,CAAc,CAC/B,CAAA,CAAE,EAGJV,EAAA,SAAA,CACE,UAAU,OACV,aAAW,KACX,MAAO,CAAEC,gBAAkB,OAAMa,IAAY,EAC7C,QAAoBlB,GAAA,CAClBA,EAAMC,gBAAiB,EACbR,EAAA,CACRe,SAAUV,EAAiBI,WAAWM,SACtCE,iBACEZ,EAAiBI,WAAWQ,iBAC9BS,SAAU,IACVC,KAAMtB,EAAiBI,WAAWkB,KAClCC,MAAOvB,EAAiBQ,gBACxBgB,MAAOxB,EAAiByB,UACxBC,YACE1B,EAAiBI,WAAWuB,OAAOC,aACrCC,iBACE7B,EAAiBI,WAAWuB,OAAOtB,SAAAA,CACtC,CACH,CAAA,CAAE,EAGNC,EAAA,SAAA,CAAQ,UAAU,MAAA,CAAgB,CAAA,CAAA,CAAA,CAAA,CAC9B,EAGRL,EAAA,MAAA,CAAK,UAAU,QAAO,SACpB,CAAAK,EAAA,KAAA,CAAI,UAAU,WAAU,SAAEN,EAAiBI,WAAWkB,IAAAA,CAAI,EAC1DrB,EAAA,SAAA,CACE,UAAU,cACV,QAAoBC,GAAA,CAClBA,EAAMC,gBAAiB,EACvBhC,EAAY,MAAM,EAClBH,EACG,WAAUgC,EAAiBI,WAAWuB,OAAOtB,WAAW,CAE7D,EAAE,SAEF,CAAAC,EAAA,OAAA,CAAM,UAAU,WAAA,CAAW,EAC3BA,EAAA,OAAA,CAAM,UAAU,cAAa,SAC1BN,EAAiBI,WAAWuB,OAAOC,YAAAA,CAC/B,CAAA,CAAA,CAAA,EAET3B,EAAA,IAAA,CAAG,UAAU,cAAa,SAExB,CAAA,OAAAA,EAAA,OAAA,CAAM,UAAU,MAAK,SAAA,CAClBD,EAAiB8B,aAAaC,eAAe,OAAO,EACpD/B,IAAAA,EAAiBgC,WAAWD,eAAe,OAAO,CAAC,CAAA,CAC/C,CAAA,CAAA,CAAA,EAETzB,EAAA,SAAA,CACE,UAAU,YACV,QAAoBJ,GAAA,CAClBA,EAAMC,gBAAiB,EACvBrB,EAAkBkB,CAAgB,CACpC,EAAE,SAAA,QAAA,CAGK,CAAA,CAAA,CAYL,CAAA,CAAA,EA3GDA,EAAiBI,WAAWC,SAAS,CA6G7C,EAEDC,EAAA2B,EAAA,EAAA,CAAA,CAGL,EAED,OAAOvD,GAAqBA,EAAkBoB,OAAS,IACrD,UAAA,CAAS,UAAU,8BAA6B,SAC9C,CAAAG,EAAA,MAAA,CAAK,UAAU,WAAU,SACvB,CAAAK,EAAA,KAAA,CAAI,UAAU,cAAa,SAAA,cAAA,CAAA,EAC3BA,EAAA,SAAA,CAAQ,UAAU,cAAc,QAAS,IAAMtC,EAAQ,aAAa,EAAE,SACnEH,EAAE,uBAAuB,CAAA,CACnB,CAAA,CAAA,CAAA,EAEVgC,EACAhB,KACEqD,EAAe,CACd,KAAMtE,EAAMuE,KACZ,iBAAkBtD,EAClB,kBAAAC,CAAA,CAEH,CAAA,CAAA,CAAA,EAIJwB,EAAA2B,EAAA,CAAA,CAAA,CACH"}