Use clipboardjs to fix copy to clipboard on mobile

cardano-foundation · Sep 23, 2024 · 37430a3 · 37430a3
1 parent fe19e33
commit 37430a3
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 15 deletions.
diff --git a/lib/ui/src/Cardano/Wallet/UI/Common/Html/Copy.hs b/lib/ui/src/Cardano/Wallet/UI/Common/Html/Copy.hs
@@ -8,6 +8,9 @@
 
 module Cardano.Wallet.UI.Common.Html.Copy
     ( copyButton
+    , initClipboardScript
+    , copyableHidden
+    , offscreenCss
     )
 where
 
@@ -23,11 +26,13 @@ import Lucid
     ( Attribute
     , HtmlT
     , Term (..)
+    , ToHtml (..)
     , button_
     , class_
     , height_
     , id_
     , script_
+    , style_
     , svg_
     , width_
     )
@@ -42,9 +47,14 @@ copyButton
     -- ^ Field id
     -> HtmlT m ()
 copyButton field' = do
-    button_ [class_ "btn", id_ button] buttonImage
-    script_ $ copyButtonScript button field'
+    button_
+        [ class_ "btn copy-button"
+        , id_ button
+        , makeAttribute "data-clipboard-target" fieldId
+        ]
+        buttonImage
   where
+    fieldId = "#" <> field'
     button = field' <> "-copy-button"
 
 buttonImage :: Monad m => HtmlT m ()
@@ -80,11 +90,27 @@ fillRule_ = makeAttribute "fill-rule"
 path_ :: Term arg result => arg -> result
 path_ = term "path"
 
-copyButtonScript :: Text -> Text -> Text
-copyButtonScript button field' =
-    [i|
-    document.getElementById('#{button}').addEventListener('click', function() {
-        var mnemonic = document.getElementById('#{field'}').innerText;
-        navigator.clipboard.writeText(mnemonic);
-    });
-    |]
+initClipboardScript :: Monad m => HtmlT m ()
+initClipboardScript = script_ "var clipboard = new ClipboardJS('.copy-button');"
+
+copyableHidden :: Text -> [Attribute]
+copyableHidden identity =
+    [ class_ "offscreen"
+    , makeAttribute "aria-hidden" "true"
+    , id_ identity
+    ]
+
+offscreenCss :: Monad m => HtmlT m ()
+offscreenCss =
+    style_ []
+        $ toHtml @Text
+            [i|
+    .offscreen {
+        position: absolute;
+        left: -9999px;
+        top: auto;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+    }
+|]
diff --git a/lib/ui/src/Cardano/Wallet/UI/Common/Html/Pages/Template/Body.hs b/lib/ui/src/Cardano/Wallet/UI/Common/Html/Pages/Template/Body.hs
@@ -7,6 +7,9 @@ where
 
 import Prelude
 
+import Cardano.Wallet.UI.Common.Html.Copy
+    ( initClipboardScript
+    )
 import Cardano.Wallet.UI.Common.Html.Htmx
     ( hxSse_
     )
@@ -42,3 +45,4 @@ bodyH sseLink header body = do
     div_ [hxSse_ $ sseConnectFromLink sseLink] $
         div_ [class_ "container-fluid"] $ do
             div_ [class_ "main"] body
+    initClipboardScript
diff --git a/lib/ui/src/Cardano/Wallet/UI/Common/Html/Pages/Template/Head.hs b/lib/ui/src/Cardano/Wallet/UI/Common/Html/Pages/Template/Head.hs
@@ -10,6 +10,9 @@ where
 
 import Prelude
 
+import Cardano.Wallet.UI.Common.Html.Copy
+    ( offscreenCss
+    )
 import Cardano.Wallet.UI.Common.Html.Htmx
     ( useHtmxExtension
     , useHtmxVersion
@@ -91,6 +94,18 @@ popperScript =
         ]
         $ pure ()
 
+clipboardScript :: Monad m => HtmlT m ()
+clipboardScript =
+    term
+        "script"
+        [ src_
+            "https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"
+        , integrity_
+            "sha384-J08i8An/QeARD9ExYpvphB8BsyOj3Gh2TSh1aLINKO3L0cMSH2dN3E22zFoXEi0Q"
+        , crossorigin_ "anonymous"
+        ]
+        $ pure ()
+
 -- | Render a favicon link.
 favicon :: Link -> Monad m => HtmlT m ()
 favicon path =
@@ -131,11 +146,13 @@ pageFromBodyH faviconLink PageConfig{..} body =
                 bootstrapLink
                 bootstrapScript
                 bootstrapIcons
+                clipboardScript
                 favicon faviconLink
                 useHtmxVersion (1, 9, 12)
                 useHtmxExtension "json-enc"
                 bodyCss
                 modalCssWorkaround
+                offscreenCss
             body_ $ do
                 fadeInId
                 body

diff --git a/lib/ui/src/Cardano/Wallet/UI/Common/Html/Pages/Wallet.hs b/lib/ui/src/Cardano/Wallet/UI/Common/Html/Pages/Wallet.hs
@@ -103,9 +103,9 @@ newWalletFromMnemonicH walletMnemonicLink config = do
 mnemonicH :: Maybe [Text] -> Html ()
 mnemonicH Nothing = ""
 mnemonicH (Just mnemonic) = do
-    div_ [class_ "card"] $ do
+    div_  [class_ "d-flex justify-content-end"] $ do
         div_
-            [ class_ "card-body text-muted small"
+            [ class_ ""
             , id_ "copy-mnemonic"
             ]
             $ toHtml

diff --git a/lib/ui/src/Cardano/Wallet/UI/Deposit/Html/Pages/Wallet.hs b/lib/ui/src/Cardano/Wallet/UI/Deposit/Html/Pages/Wallet.hs
@@ -25,6 +25,7 @@ import Cardano.Wallet.UI.Common.API
     )
 import Cardano.Wallet.UI.Common.Html.Copy
     ( copyButton
+    , copyableHidden
     )
 import Cardano.Wallet.UI.Common.Html.Htmx
     ( hxDelete_
@@ -93,7 +94,6 @@ import Lucid
     , class_
     , div_
     , h5_
-    , hidden_
     , hr_
     , id_
     , input_
@@ -137,7 +137,7 @@ base64 = convertToBase Base64
 
 customerAddressH :: Monad m => Address -> HtmlT m ()
 customerAddressH addr = div_ [class_ "d-flex justify-content-end"] $ do
-    div_ [id_ "address", hidden_ "true"] $ toHtml encodedAddr
+    div_ (copyableHidden "address") $ toHtml encodedAddr
     div_ [class_ ""] $ toHtml addrShortened
     div_ [class_ "ms-1"] $ copyButton "address"
   where
@@ -149,7 +149,7 @@ customerAddressH addr = div_ [class_ "d-flex justify-content-end"] $ do
 
 pubKeyH :: Monad m => XPub -> HtmlT m ()
 pubKeyH xpub = div_ [class_ "d-flex justify-content-end"] $ do
-    div_ [id_ "public_key", hidden_ "true"] $ toHtml xpubByteString
+    div_ (copyableHidden "public_key") $ toHtml xpubByteString
     div_ [class_ ""] $ toHtml $ headAndTail 4 $ B8.dropEnd 1 xpubByteString
     div_ [class_ "ms-1"]
         $ copyButton "public_key"