MetaMask Snaps: 擴充你的交易體驗，打造個人化錢包
2023/06/27閱讀時間約 9 分鐘
MetaMask Snaps 簡介
Metamask Snaps 是一款基於 Metamask Flask的新型態擴充套件，它將部分功能開源出來讓開發者有機會以他們想要的方式擴展 MetaMask錢包，旨在讓使用者有更個人化或多樣的交易體驗。Metamask Snaps集成api介接到自定義錢包UI呈現的過程，得以讓錢包有更多樣可能玩法的實現。也讓開發人員能夠靈活地擴展 MetaMask 錢包的功能，而不需要修改其核心功能。
簡單來說就是錢包開外掛啦~~
開發 MetaMask Snaps 步驟
- 一、從MetaMask Flask開始
要使用 Metamask Snaps，您需要先安裝 Metamask flask擴充程式、node.js以及yarn。Metamask Flask可以看做是Metamask錢包的實驗版本，目前MetaMask Snaps 只能在Metamask Flask上面使用。以下是從 Metamask Flask 開始使用 MetaMask Snaps 的步驟：
- 開啟您的瀏覽器( Google Chrome 、Firefox、Brave)，並安裝 Metamask 擴充程式；
- 安裝完成後，在瀏覽器右上角可以看到 Metamask 圖標，點擊圖標並創建一個新錢包；
- 創建完錢包後，您可以選擇將您的資產轉移到 Metamask 錢包中，不過如果是要用來測試的話，可以先不要放太多資產在flask裡面；
- 在 MetaMask Snaps 中選擇您要使用的區塊鏈，可以在此先切換到測試鏈，並準備使用snaps來豐富交易體驗。
- 二、啟動Snap專案
接下來必須要安裝node.js(>16)以及yrn，yarn 是一個 JavaScript 的套件管理工具，用於管理和編譯 JavaScript 套件。它是由 Facebook、Google、Exponent 和 Tilde 共同開發的，用意是在解決 npm的一些效能和安全性問題。相關安裝方法可以參考yarn。
接下來是依照官方網站的說明所做的MetaMask Snaps 快速上手範例(TypeScript Example Snap)，是一個web UI跟Snap互動的範例，可以在web按下按鍵之後，在Flask上呈現訊息。在vscode或cmd中下此指令:
yarn create @metamask/snap your-snap-name
它的用意是起一個snap範例專案，接下來進入專案完成yarn安裝以及開啟yarn來啟動snap專案:
yarn install && yarn start
snap專案成功啟動之後在瀏覽器上訪問http://localhost:8000/應該就可以看到以下畫面，
接下來需要登入Flask錢包
由Metamask Flask訪問snap並連接，需要按下connect
再來要授予snap相關權限
Approve &install之後 畫面就會變成下面這樣子的歡迎訊息UI介面，發現Send Hello message欄位可以開始互動。
按下Send message就可以跟在Flask跟Snap進行互動，Flask會跳出
Hello, http://localhost:8000!This custom confirmation is just for display purposes.
But you can edit the snap source code to make it do something, if you want to!
就是Snap接收到按鍵之後所呈現的UI資訊，也是開發者能加工的地方。
現在您已經知道如何使用 MetaMask Snaps 了，趕快去體驗一下吧！
MetaMask Snaps的功能
MetaMask 在官方網站中提到幾個MetaMask Snaps 的功能，其中有一些蠻實用的，讓開發者能夠擴展 MetaMask 錢包並為使用者提供更多個人化和多樣化的交易體驗。例如:
1.對話框（Dialogs）: 這個功能可以在Metamask錢包中發送指定的警告或是提示訊息。
2.通知（Notifications）: 與 dialogs 類似，notification 實踐將訊息在Metamask錢包或瀏覽器上顯示，提供使用者更直觀的交互方式。
3.加密儲存（Encrypted storage）: MetaMask Snaps 提供幾種加解密的方法讓訊息傳送時可以更加安全，或是可以提供其他的工具來進行開發。
4.非 EVM 鏈支援（Non-EVM chain support）:MetaMask Snaps 不僅支援以太鏈，還可以將功能擴充到其他鏈上。並且也得以管理metamask錢包中非以太鏈用戶的帳戶及資產。
5.交易洞察（Transaction insights）:MetaMask Snaps 提供了方法，在交易之前獲取該次交易相關的資訊，例如發送和接收地址，或是預估的gas fee。
6.定時任務（Cron jobs）:我覺得最酷的功能是，MetaMask Snaps 可以為使用者安排定期的工作排程，可以用來做許多的擴充發想，例如自動化交易。
7.自定義介面（Custom UI）:MetaMask Snaps 有一些已經定義好的元件可以提供在metamask錢包中自定義UI介面。
8.網路訪問（Network access）:MetaMask Snaps 可以請求第三方的 API 來豐富自己的功能，這是擴展小狐狸錢包的一個強大方式，例如可以結合合約掃描的 API 或是辨識交易風險的 API。
這些功能都可以藉由改動Snaps範例程式碼得以實現，例如這裡提供一個範例，演示了如何訪問以太鏈並在 Flask UI 中顯示交易費用比例。
而這些功能主要需要藉由編輯 template-snap-monorepo/snap/src/index.ts 來添加或是修改。
而 template-snap-monorepo/snap/snap.manifest.json 則提供 MetaMask Flask 關於 snap 的重要資訊，包括它自何處出版的、如何驗證 snap 的 source code，以及權限設定等相關訊息。
MetaMask Snaps的優點與限制
實際使用下來，我發現MetaMask Snaps 有一些優點和一些限制。在優點方面，MetaMask Snaps 最大的優勢莫過於可以輕鬆整合自定義 API ，並且以 UI 呈現於 MetaMask 錢包的功能，結合所撈取交易資訊，進行後續的應用，這讓開發人員節省許多開發資源，也為廣大的 MetamMask 用戶製造了許多體驗擴充功能的潛在機會。
不過基於資安風險，MetaMask 也藉由限制請求snap的方法來管控使用者權限，這有利也有弊，有利於使用者錢包的資料安全，有弊的地方在於站在開發者的角度，我們更難去分流客群，缺乏開發出更好的交易體驗功能的誘因。
UI的自定義呈現也是一個潛在的問題，實際去進行使用後發現，雖然 MetaMask 官方說明讓開發者能夠自定義UI介面，感覺可以很自由的發展個性化的UI介面。但實際上也受限於官方訂定的少數固定的component，最後導致無法呈現一些”較活潑”的UI互動。
目前最大的問題出在 MetaMask Snaps 綁定在MetaMask Flask上，MetaMask Flask是MetaMask的一個frok，是MetaMask的實驗版本錢包。實驗性質的功能都會先在上面實施，MetaMask Snaps 亦然，所以一般用戶並不會直接接觸到snap。
目前尚未有明確的方式將功能完整且程序完善的 Snaps 整合到正式的 MetaMask 環境中，也缺乏提供開發者共享和使用 Snaps 的平台。這可能使開發者擔憂他們在開發 Snaps 上的投入可能無法得到回報。
雖然MetaMask Snaps 還處於相對早期的發展階段，並存在一些限制，但不得不說MetaMask在某程度上也很有誠意，它拋出了一個讓開發者可以將自家功能介接到小狐狸錢包的機會，降低開發者將自家功能結合到web3體驗的門檻，也豐富了小狐狸錢包的生態系，聽說最近MetaMask也積極地在內部鼓勵人員開發snaps，就讓我們繼去期待它的發展。隨著時間的推移，我們可以預見 MetaMask Snaps 有望提供更多功能和改進，為用戶和開發者帶來更好的使用和開發體驗。
___________________________________________________________________________
作者阿原目前從事區塊鏈資料分析工作，對區塊鏈的經濟架構、事件發展有很大的興趣，並希望能將相關的區塊鏈知識分析並且統整給大家。如果喜歡我的文章，或是想獲得更多區塊鏈大小事，歡迎關注我的vocus帳號！
另外，我已經加入由趨勢科技防詐達人所成立的方格子專題－《區塊鏈生存守則》，在那裡我會跟其他優質的創作者一起帶大家深入瞭解區塊鏈，並隨時向大家更新區塊鏈資安事件。
＞ 追蹤《區塊鏈生存守則》學習如何在區塊鏈的世界保護自己
＞ 關注防詐達人獲得其他最新詐騙情報
留言0
查看全部
