ENR Share button for mobile (#195)

Co-authored-by: acolytec3 <[email protected]>

Author: ScottyPoi

packages/browser-client/package.json

@@ -19,6 +19,7 @@
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
     "@capacitor/cli": "^3.4.3",
+    "@capacitor/share": "1.1.2",
     "@types/node": "^17.0.23",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",

packages/browser-client/src/Components/DevTools.tsx

@@ -13,8 +13,9 @@ import {
   useToast,
 } from '@chakra-ui/react'
 import { HistoryNetworkContentKeyUnionType, PortalNetwork, SubNetworkIds } from 'portalnetwork'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { ContentManager } from './ContentManager'
+import { Share } from '@capacitor/share'
 
 interface DevToolsProps {
   portal: PortalNetwork | undefined
@@ -25,6 +26,7 @@ interface DevToolsProps {
 
 export default function DevTools(props: DevToolsProps) {
   const portal = props.portal
+  const [canShare, setCanShare] = useState(false)
   const peers = props.peers.map((p) => {
     return p.nodeId
   })
@@ -35,6 +37,13 @@ export default function DevTools(props: DevToolsProps) {
   const handlePing = (nodeId: string) => {
     portal?.sendPing(nodeId, SubNetworkIds.HistoryNetwork)
   }
+  async function share() {
+    await Share.share({
+      title: `Ultralight ENR`,
+      text: props.enr,
+      dialogTitle: `Share ENR`,
+    })
+  }
 
   const handleFindNodes = (nodeId: string) => {
     portal?.sendFindNodes(
@@ -68,12 +77,26 @@ export default function DevTools(props: DevToolsProps) {
     })
   }
 
+  async function sharing() {
+    const s = await Share.canShare()
+    setCanShare(s.value)
+  }
+
+  useEffect(() => {
+    sharing()
+  }, [])
+
   return (
-    <VStack mt="10px">
-      <Heading size="sm">Network Tools</Heading>
-      <Button isDisabled={!portal} onClick={async () => handleCopy()} width={'100%'}>
-        COPY ENR
-      </Button>
+    <VStack>
+      {canShare ? (
+        <Button width={`100%`} onClick={share}>
+          SHARE ENR
+        </Button>
+      ) : (
+        <Button onClick={async () => handleCopy()} width={'100%'}>
+          COPY ENR
+        </Button>
+      )}
       <ContentManager portal={portal} />
       <Divider />
       <Heading size="sm">Peer Tools</Heading>