add sharing for offers and their links

package.json

@@ -16,6 +16,7 @@
     "extract:watch": "lingui extract --watch"
   },
   "dependencies": {
+    "@buildyourwebapp/tauri-plugin-sharesheet": "^0.0.1",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",

src-tauri/Cargo.toml

@@ -40,6 +40,7 @@ reqwest = { workspace = true }
 # This is to ensure that the bindgen feature is enabled for the aws-lc-rs crate.
 # https://aws.github.io/aws-lc-rs/platform_support.html#tested-platforms
 aws-lc-rs = { version = "1", features = ["bindgen"] }
+tauri-plugin-sharesheet = "0.0.1"
 
 [target.'cfg(not(any(target_os = "android", target_os = "ios")))'.dependencies]
 tauri-plugin-window-state = { workspace = true }

src-tauri/capabilities/mobile.json

@@ -7,6 +7,7 @@
     "safe-area-insets:default",
     "barcode-scanner:default",
     "biometric:default",
-    "sage:default"
+    "sage:default",
+    "sharesheet:allow-share-text"
   ]
 }

src-tauri/gen/apple/sage-tauri_iOS/sage-tauri_iOS.entitlements

@@ -6,5 +6,7 @@
 	<array>
 		<string>TAG</string>
 	</array>
+	<key>com.apple.developer.group-session</key>
+	<true/>
 </dict>
-</plist>
+</plist>

src-tauri/src/lib.rs

@@ -149,6 +149,7 @@ pub fn run() {
             .plugin(tauri_plugin_barcode_scanner::init())
             .plugin(tauri_plugin_safe_area_insets::init())
             .plugin(tauri_plugin_biometric::init())
+            .plugin(tauri_plugin_sharesheet::init())
             .plugin(tauri_plugin_sage::init());
     }
 

src/components/MarketplaceCard.tsx

@@ -1,13 +1,15 @@
-import { ExternalLink } from 'lucide-react';
+import { ExternalLink, Share, Copy } from 'lucide-react';
 import { Trans } from '@lingui/react/macro';
 import { t } from '@lingui/core/macro';
 import { toast } from 'react-toastify';
 import { openUrl } from '@tauri-apps/plugin-opener';
+import { platform } from '@tauri-apps/plugin-os';
 import StyledQRCode from '@/components/StyledQrCode';
 import { useEffect, useState } from 'react';
 import { getOfferHash } from '@/lib/offerUpload';
 import { OfferSummary } from '@/bindings';
 import { OfferState } from '@/state';
+import { shareText } from '@buildyourwebapp/tauri-plugin-sharesheet';
 
 export interface MarketplaceConfig {
   id: string;
@@ -44,6 +46,7 @@ export function MarketplaceCard({
 }: MarketplaceCardProps) {
   const [isOnMarketplace, setIsOnMarketplace] = useState<boolean | null>(null);
   const [offerHash, setOfferHash] = useState<string>('');
+  const isMobile = platform() === 'ios' || platform() === 'android';
 
   useEffect(() => {
     let isMounted = true;
@@ -95,31 +98,88 @@ export function MarketplaceCard({
     }
   };
 
+  const handleShare = async () => {
+    if (!isOnMarketplace || !offerHash) return;
+
+    try {
+      const marketplaceLink = marketplace.getMarketplaceLink(
+        offerHash,
+        network === 'testnet',
+      );
+      await shareText(marketplaceLink, {
+        title: t`${marketplace.name} link`,
+        mimeType: 'text/uri-list',
+      });
+    } catch (error: unknown) {
+      toast.error(`${error instanceof Error ? error.message : String(error)}`);
+    }
+  };
+
+  const handleCopy = async () => {
+    if (!isOnMarketplace || !offerHash) return;
+
+    try {
+      const marketplaceLink = marketplace.getMarketplaceLink(
+        offerHash,
+        network === 'testnet',
+      );
+      await navigator.clipboard.writeText(marketplaceLink);
+      toast.success(t`Link copied to clipboard`);
+    } catch (error: unknown) {
+      toast.error(`${error instanceof Error ? error.message : String(error)}`);
+    }
+  };
+
   if (!marketplace.isSupported(offerSummary, false)) {
     return null;
   }
 
   return (
     <div className='flex flex-col items-center gap-4 w-auto'>
-      <button
-        onClick={handleMarketplaceAction}
-        className='flex items-center gap-2 px-3 py-1.5 rounded-md border hover:bg-accent w-fit'
-        title={marketplace.getMarketplaceLink(offerHash, network === 'testnet')}
-      >
-        <img
-          src={marketplace.logo}
-          className='h-4 w-4'
-          alt={`${marketplace.name} logo`}
-        />
-        <span className='text-sm'>
-          {isOnMarketplace ? (
-            <Trans>View on {marketplace.name}</Trans>
-          ) : (
-            <Trans>Upload to {marketplace.name}</Trans>
+      <div className='flex items-center gap-2'>
+        <button
+          onClick={handleMarketplaceAction}
+          className='flex items-center gap-2 px-3 py-1.5 rounded-md border hover:bg-accent w-fit'
+          title={marketplace.getMarketplaceLink(
+            offerHash,
+            network === 'testnet',
           )}
-        </span>
-        {isOnMarketplace && <ExternalLink className='h-4 w-4' />}
-      </button>
+        >
+          <img
+            src={marketplace.logo}
+            className='h-4 w-4'
+            alt={`${marketplace.name} logo`}
+          />
+          <span className='text-sm'>
+            {isOnMarketplace ? (
+              <Trans>View on {marketplace.name}</Trans>
+            ) : (
+              <Trans>Upload to {marketplace.name}</Trans>
+            )}
+          </span>
+          {isOnMarketplace && <ExternalLink className='h-4 w-4' />}
+        </button>
+
+        {isOnMarketplace && isMobile && (
+          <button
+            onClick={handleShare}
+            className='flex items-center gap-2 px-3 py-1.5 rounded-md border hover:bg-accent w-fit'
+            title={t`Share marketplace link`}
+          >
+            <Share className='h-4 w-4' aria-hidden='true' />
+          </button>
+        )}
+
+        {isOnMarketplace && !isMobile && (
+          <button
+            onClick={handleCopy}
+            className='flex items-center gap-2 px-3 py-1.5 rounded-md border hover:bg-accent w-fit'
+            title={t`Copy marketplace link`}
+          >
+            <Copy className='h-4 w-4' aria-hidden='true' />
+          </button>
+        )}
+      </div>
 
       {isOnMarketplace && (
         <StyledQRCode

src/components/NftOptions.tsx

@@ -38,7 +38,6 @@ import { Input } from './ui/input';
 import { motion, AnimatePresence } from 'framer-motion';
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { useDebounce } from '@/hooks/useDebounce';
-import { platform } from '@tauri-apps/plugin-os';
 
 export interface NftOptionsProps {
   isCollection?: boolean;
@@ -76,7 +75,6 @@ export function NftOptions({
   const [searchValue, setSearchValue] = useState(query ?? '');
   const debouncedSearch = useDebounce(searchValue, 400);
   const prevSearchRef = useRef(query);
-  const isMobile = platform() === 'ios' || platform() === 'android';
 
   useEffect(() => {
     setSearchValue(query ?? '');
@@ -199,19 +197,17 @@ export function NftOptions({
             </Button>
           )}
 
-          {!isMobile && (
-            <Button
-              variant='outline'
-              size='icon'
-              aria-label={t`Export NFTs`}
-              title={t`Export NFTs`}
-              onClick={onExport}
-              disabled={!(group === NftGroupMode.None || isFilteredView)}
-              className='hidden sm:inline-flex'
-            >
-              <Download className='h-4 w-4' aria-hidden='true' />
-            </Button>
-          )}
+          <Button
+            variant='outline'
+            size='icon'
+            aria-label={t`Export NFTs`}
+            title={t`Export NFTs`}
+            onClick={onExport}
+            disabled={!(group === NftGroupMode.None || isFilteredView)}
+            className='hidden md:inline-flex'
+          >
+            <Download className='h-4 w-4' aria-hidden='true' />
+          </Button>
 
           <Button
             variant='outline'