feat: display x popup for share

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"

src/components/Operator/OperatorDetails/OperatorDetails.tsx

@@ -10,47 +10,64 @@ interface OperatorDetailsProps {
   id: number
 }
 
-const operatorInfo = [
+// const operatorInfo = [
-  { trait: 'Inscription ID', value: '84783..ai0' },
+//   { trait: 'Inscription ID', value: '84783..ai0' },
-  { trait: 'Inscription Number', value: '123987' },
+//   { trait: 'Inscription Number', value: '123987' },
-  { trait: 'Owner', value: 'bc1qa...vehs9' },
+//   { trait: 'Owner', value: 'bc1qa...vehs9' },
-  { trait: 'Content', value: 'Link' },
+//   { trait: 'Content', value: 'Link' },
-  { trait: 'Content Type', value: 'image/png' },
+//   { trait: 'Content Type', value: 'image/png' },
-  { trait: 'Created', value: '2/14/2023, 11:01:50 PM' },
+//   { trait: 'Created', value: '2/14/2023, 11:01:50 PM' },
-  { trait: 'Genesis Transaction', value: '88244...8da' },
+//   { trait: 'Genesis Transaction', value: '88244...8da' },
-  { trait: 'Genesis Transaction BlockHeight', value: '776604' },
+//   { trait: 'Genesis Transaction BlockHeight', value: '776604' },
-  { trait: 'Sat Rarity', value: 'COMMON' },
+//   { trait: 'Sat Rarity', value: 'COMMON' },
-  { trait: 'Sat Number', value: '1737591324951162' },
+//   { trait: 'Sat Number', value: '1737591324951162' },
-  { trait: 'Sat Name', value: 'bnskqioxomx' },
+//   { trait: 'Sat Name', value: 'bnskqioxomx' },
-  { trait: 'Sat BlockTime', value: '11/14/2018, 9:52:23 AM' },
+//   { trait: 'Sat BlockTime', value: '11/14/2018, 9:52:23 AM' },
-  { trait: 'Sat BlockHeight', value: '550073' },
+//   { trait: 'Sat BlockHeight', value: '550073' },
-  { trait: 'Location', value: '7133b...1:0' },
+//   { trait: 'Location', value: '7133b...1:0' },
-  { trait: 'Location BlockHeight', value: 'bc1qa...vehs9' },
+//   { trait: 'Location BlockHeight', value: 'bc1qa...vehs9' },
-  { trait: 'Output', value: '7133b...b:1' },
+//   { trait: 'Output', value: '7133b...b:1' },
-]
+// ]
 
 const OperatorDetails: React.FC<OperatorDetailsProps> = ({
   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 () => {
+  // const handleShare = async () => {
-    if (navigator.share) {
+  //   if (navigator.share) {
-      try {
+  //     try {
-        await navigator.share({
+  //       await navigator.share({
-          title: 'Logos Operator',
+  //         title: 'Logos Operator',
-          text: 'Check out this Logos Operator!',
+  //         text: 'Check out this Logos Operator!',
-          url: window.location.href,
+  //         url: window.location.href,
-        })
+  //       })
-      } catch (error) {
+  //     } catch (error) {
-        console.error('Error sharing:', error)
+  //       console.error('Error sharing:', error)
-      }
+  //     }
-    } else {
+  //   } else {
-      alert('Web Share API is not supported in this browser.')
+  //     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 (

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"