From acd66161337c972da821f78b0c0b6d2d6ebc2811 Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Thu, 3 Oct 2024 23:14:24 +0900 Subject: [PATCH] feat: display x popup for share --- package.json | 1 + .../OperatorDetails/OperatorDetails.tsx | 83 +++++++++++-------- yarn.lock | 32 +++++++ 3 files changed, 83 insertions(+), 33 deletions(-) diff --git a/package.json b/package.json index 78a4668..1e7eeee 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "react-infinite-scroll-component": "^6.1.0", "react-markdown": "^9.0.1", "react-photo-album": "^2.3.1", + "react-share": "^5.1.0", "rehype-raw": "^7.0.0", "remark-breaks": "^4.0.0", "remark-gfm": "3.0.1" diff --git a/src/components/Operator/OperatorDetails/OperatorDetails.tsx b/src/components/Operator/OperatorDetails/OperatorDetails.tsx index 8ce80d1..11cbe50 100644 --- a/src/components/Operator/OperatorDetails/OperatorDetails.tsx +++ b/src/components/Operator/OperatorDetails/OperatorDetails.tsx @@ -10,47 +10,64 @@ interface OperatorDetailsProps { id: number } -const operatorInfo = [ - { trait: 'Inscription ID', value: '84783..ai0' }, - { trait: 'Inscription Number', value: '123987' }, - { trait: 'Owner', value: 'bc1qa...vehs9' }, - { trait: 'Content', value: 'Link' }, - { trait: 'Content Type', value: 'image/png' }, - { trait: 'Created', value: '2/14/2023, 11:01:50 PM' }, - { trait: 'Genesis Transaction', value: '88244...8da' }, - { trait: 'Genesis Transaction BlockHeight', value: '776604' }, - { trait: 'Sat Rarity', value: 'COMMON' }, - { trait: 'Sat Number', value: '1737591324951162' }, - { trait: 'Sat Name', value: 'bnskqioxomx' }, - { trait: 'Sat BlockTime', value: '11/14/2018, 9:52:23 AM' }, - { trait: 'Sat BlockHeight', value: '550073' }, - { trait: 'Location', value: '7133b...1:0' }, - { trait: 'Location BlockHeight', value: 'bc1qa...vehs9' }, - { trait: 'Output', value: '7133b...b:1' }, -] +// const operatorInfo = [ +// { trait: 'Inscription ID', value: '84783..ai0' }, +// { trait: 'Inscription Number', value: '123987' }, +// { trait: 'Owner', value: 'bc1qa...vehs9' }, +// { trait: 'Content', value: 'Link' }, +// { trait: 'Content Type', value: 'image/png' }, +// { trait: 'Created', value: '2/14/2023, 11:01:50 PM' }, +// { trait: 'Genesis Transaction', value: '88244...8da' }, +// { trait: 'Genesis Transaction BlockHeight', value: '776604' }, +// { trait: 'Sat Rarity', value: 'COMMON' }, +// { trait: 'Sat Number', value: '1737591324951162' }, +// { trait: 'Sat Name', value: 'bnskqioxomx' }, +// { trait: 'Sat BlockTime', value: '11/14/2018, 9:52:23 AM' }, +// { trait: 'Sat BlockHeight', value: '550073' }, +// { trait: 'Location', value: '7133b...1:0' }, +// { trait: 'Location BlockHeight', value: 'bc1qa...vehs9' }, +// { trait: 'Output', value: '7133b...b:1' }, +// ] const OperatorDetails: React.FC = ({ id, }: OperatorDetailsProps) => { + // const router = useRouter() + const processedOperators = processOperators(operators as any, []) - const isIncripted = false + // const isIncripted = false const operator = findOperatorById(processedOperators, id) - const handleShare = async () => { - if (navigator.share) { - try { - await navigator.share({ - title: 'Logos Operator', - text: 'Check out this Logos Operator!', - url: window.location.href, - }) - } catch (error) { - console.error('Error sharing:', error) - } - } else { - alert('Web Share API is not supported in this browser.') - } + // const handleShare = async () => { + // if (navigator.share) { + // try { + // await navigator.share({ + // title: 'Logos Operator', + // text: 'Check out this Logos Operator!', + // url: window.location.href, + // }) + // } catch (error) { + // console.error('Error sharing:', error) + // } + // } else { + // alert('Web Share API is not supported in this browser.') + // } + // } + + const handleShare = () => { + const text = encodeURIComponent( + `I am ${operator?.name}. An Operator of the Parallel Society called Logos.\n\nJoin me and explore the collection at https://dashboard.logos.co`, + ) + + const twitterUrl = `https://x.com/intent/post?text=${text}` + + // Open a new window with specific dimensions + window.open( + twitterUrl, + 'Share to Twitter', + 'width=600,height=400,scrollbars=yes,resizable=yes', + ) } return ( diff --git a/yarn.lock b/yarn.lock index 8f994e9..deb4330 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1052,6 +1052,11 @@ character-reference-invalid@^2.0.0: resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz#85c66b041e43b47210faf401278abf808ac45cb9" integrity sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw== +classnames@^2.3.2: + version "2.5.1" + resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b" + integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow== + cli-cursor@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-4.0.0.tgz#3cecfe3734bf4fe02a8361cbdc0f6fe28c6a57ea" @@ -1228,6 +1233,13 @@ debug@4.3.4, debug@^4.0.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4: dependencies: ms "2.1.2" +debug@^2.1.3: + version "2.6.9" + resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" + integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA== + dependencies: + ms "2.0.0" + debug@^3.2.7: version "3.2.7" resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a" @@ -2594,6 +2606,13 @@ json5@^1.0.2: dependencies: minimist "^1.2.0" +jsonp@^0.2.1: + version "0.2.1" + resolved "https://registry.yarnpkg.com/jsonp/-/jsonp-0.2.1.tgz#a65b4fa0f10bda719a05441ea7b94c55f3e15bae" + integrity sha512-pfog5gdDxPdV4eP7Kg87M8/bHgshlZ5pybl+yKxAnCZ5O7lCIn7Ixydj03wOlnDQesky2BPyA91SQ+5Y/mNwzw== + dependencies: + debug "^2.1.3" + "jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.3: version "3.3.5" resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz#4766bd05a8e2a11af222becd19e15575e52a853a" @@ -3703,6 +3722,11 @@ mri@^1.1.0: resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b" integrity sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA== +ms@2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8" + integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A== + ms@2.1.2: version "2.1.2" resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009" @@ -4113,6 +4137,14 @@ react-photo-album@^2.3.1: resolved "https://registry.yarnpkg.com/react-photo-album/-/react-photo-album-2.3.1.tgz#f597f1d16d13f386b25c135d1f9b9d1895d2c94c" integrity sha512-c7ofDx2DAbQa9AW9wUWOBX9zUKf/QjvdQK+fPNKEiKprks/n8t4c2viyBZ6EWpQLFLU0ad3yVBTgFvxEZ46/Iw== +react-share@^5.1.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/react-share/-/react-share-5.1.0.tgz#27eff763e5c233c8765cacf595b039093cb9b408" + integrity sha512-OvyfMtj/0UzH1wi90OdHhZVJ6WUC/+IeWvBwppeZozwIGyAjQgyR0QXlHOrxVHVECqnGvcpBaFTXVrqouTieaw== + dependencies: + classnames "^2.3.2" + jsonp "^0.2.1" + react-universal-interface@^0.6.2: version "0.6.2" resolved "https://registry.yarnpkg.com/react-universal-interface/-/react-universal-interface-0.6.2.tgz#5e8d438a01729a4dbbcbeeceb0b86be146fe2b3b"