Consensys tarafından geliştirilen, öncü kendi saklama yetkili kripto cüzdanı ve kriptoya açılan kapı.
Tüm makaleleri okuBir InterIIT Hackathon kazananı

MetaMask Snaps, MetaMask'ı dünyanın en genişletilebilir cüzdanı haline getirme yol haritasıdır. Geliştirici olarak, özelliklerinizi ve API'lerinizi MetaMask'a tamamen yeni yollarla sunabilirsiniz. Web3 geliştiricileri bu büyümenin özünü oluşturmaktadır ve bu seri, bugün inşa edilen yenilikçi MetaMask Snaps'leri tanıtmayı amaçlamaktadır.
Snap Repo: https://github.com/shree675/FoxTagger
FoxTagger, kullanıcıların harcamalarını kontrol altında tutmalarına yardımcı olmak amacıyla adresleri kullanıcı tanımlı etiketlerle eşleştirmeyi kolaylaştıran, uyarılar ve kullanım analitiği sunan bir araçtır.
Teknik uygulamayı bize anlatır mısınız?
MetaMask eklentimiz FoxTagger, iki ana bileşenden oluşmaktadır: bir MetaMask Snaps arka ucu (diğer adıyla snap) ve bir Gatsby.js ön ucu. Ön uç, kullanıcı arayüzünü barındıran basit bir web uygulaması olmasının yanı sıra Snaps uygulamamız için bir yardımcı DApp işlevi de görmektedir.
İşlevselliğin büyük bölümü snap içinde sağlanmakla birlikte, kullanıcıların başkalarından ödeme talep etmesine ve/veya etiketlerini arayüzümüz üzerinden yapılandırmasına olanak tanıyan kısım ön uçta yer almaktadır. Ödeme talebi özelliği XMTP protokolünü kullanırken, etiketleme özelliği MetaMask Snaps API'sini kullanmaktadır.
Başlangıç noktası olarak snap monorepo şablonunu kullandık. Projemizin tam uygulamasına buradan ulaşabilirsiniz.
Tüm uygulamamızda, Snaps API tarafından sağlanan aşağıdaki temel özelliklerden yararlanıyoruz:
Kalıcı depolama
Bildirimler
Cron işleri
İşlem içgörüleri
Uygulamamız, packages\snap\src\index.ts dosyasında ön uca bazı fonksiyonlar sunarak başlamaktadır.
getPersistenceStorage ve setPersistenceStorage fonksiyonları, etiketlerin ve diğer bilgilerin depolanmasını ve alınmasını sağladıkları için son derece temel bir öneme sahiptir; aşağıdaki kod parçacığında gösterildiği şekilde tanımlanmıştır.
Tüm özellik uygulamaları için kalıcı depolamamıza uygun bir veri yapısı oluşturduk.
Bir kullanıcının birden fazla hesabı olabilir ve her hesabın kendine ait etiketleri, kullanım bilgileri ve kullanıcı tanımlı limitleri bulunmaktadır.
İşlem içgörüleri özelliği, devam eden bir işlemde ilişkili etiketleri, bunlara karşılık gelen harcamaları ve varsa uyarıları görüntüler.
Aynı index.ts dosyasında, devam eden bir işlemi yakalamamıza ve MetaMask cüzdanıyla etkileşime girmemize olanak tanıyan bir işlem içgörüleri işleyicisi ekliyoruz.
getDetails fonksiyonu, harcama hesaplama ve uyarı gösterme mantığının tamamını uygular. Bu, packages\snap\src\transaction.ts dosyasında gerçekleştirilmektedir.
Burada önce mevcut işlemin to hash'inin (veya to adresinin) depolamada mevcut olup olmadığını kontrol ediyoruz. Ardından kullanım yüzdesini alıp hesaplıyoruz. Kullanımın o etiket için belirlenen limite yaklaşıp yaklaşmadığını veya zaten aşıp aşmadığını kontrol ediyor ve uygun bir uyarı gönderiyoruz.
Büyük sayılar üzerindeki aritmetik işlemleri gerçekleştirmek için ethers npm paketinde bulunan BigNumber ve FixedNumber sınıflarını kullandığımıza dikkat edin.
İşlem içgörüleri artık tamamlandı ve işte nihai sonuç:
Burada üç cron işi tanımlanmıştır: her hafta özet oluşturmak için weeklySummary, kullanıcının herhangi bir etiketindeki limiti aşıp aşmadığını kontrol etmek için checkLimits ve kullanıcı tarafından gerçekleştirilen yeni işlemlerin kullanım bilgilerini güncellemek için updateAmount.
Bu cron işleri, uygun sıklıklarıyla birlikte packages\snap\snap.manifest.json dosyasında belirtilmektedir. Ayrıca index.ts dosyasına bir cron işi işleyicisi eklenmiştir.
Bu işlevler packages\snap\src\cron.ts dosyasında tanımlanmıştır.
Burada depolama üzerinde yineleme yaparak kullanıcının herhangi bir etiketteki limiti aşıp aşmadığını kontrol ediyoruz. Ardından checkLimits cron işi tarafından yeniden kullanılabilmesi için notified değerini false olarak sıfırlıyoruz. Cron işi işleyicisinin her kullanıcı hesabı için bunu alması ve haftanın sonunda uygun bir bildirim mesajı göndermesi için bir boolean değeri döndürüyoruz.
Yukarıdaki fonksiyonda, bildirim gönderilmemiş tüm kullanıcı etiketleri üzerinde yeniden yineleme yaparak kullanımlarını kontrol ediyoruz. Belirlenen limiti aştıysa, bu etiketin bir sonraki haftaya kadar tekrar işleme alınmaması için notified değerini true olarak ayarlıyoruz. Cron işi işleyicisine, limiti aşan etiket sayısını ve kullanıcının hesap hash'ini belirten bir mesaj döndürüyoruz.
Ardından updateAmount için uygulamayı tamamlıyoruz.
Burada tüm kullanıcı işlemlerini almak ve her etiket için kullanım ayrıntılarını güncellemek amacıyla etherscan API'sini kullanıyoruz. Elde edilen işlemleri zamana göre azalan sırada sıralıyor ve işlemlerin yeniden taranmasını önlemek için latestHash işleminden itibaren tarıyoruz. Son olarak latestHash değerini güncelliyoruz. Bu cron işi, checkLimits'ten daha sık çalışır.
Yukarıdaki uygulamaların birkaç çıktısı şu şekildedir:
Web sitesinin iki sayfası bulunmaktadır. İlk sayfa, kullanıcının giriş yapabildiği, etiket ekleyip kaldırabildiği, etiket kullanım dağılımını kontrol edebildiği, limitler belirleyebildiği ve etiketler ile işlemler üzerinde filtre uygulayabildiği açılış sayfasıdır. Bunların tümü, tanıdık React.js işlevselliği aracılığıyla gerçekleştirilmektedir. İşlemler, daha önce bahsedilen etherscan API'sinden alınmakta ve adresler ilgili etiketleriyle ilişkilendirilmektedir. Bu bilgiler, bağlı Snaps'in kalıcı depolamasından gelmektedir.
Yukarıdaki özelliklerin büyük bölümüne ait mantık, packages\site\src\pages\GetTableData.jsx dosyasında yazılmıştır. Snap'in ön uçla entegrasyonu karmaşık olmakla birlikte, tamamlandığında son derece sezgisel bir yapıya kavuşmaktadır.
Snap metodları, packages\site\src\utils\snap.ts dosyasına aşağıdaki fonksiyonlar yazılarak ön uca sunulmaktadır:
Kullanıcının harcama analitiğini görüntülemek için react-chartjs-2 npm paketini de kullanıyoruz.
Web sitesinin nihai görünümü şu şekildedir:
Bu, bir kullanıcının başka bir kullanıcıya XMTP aracılığıyla ETH talep eden bir bildirim gönderebildiği benzersiz bir özelliktir. Bunun için her iki kullanıcının da bu snap'i etkinleştirmiş olması gerekmektedir. Bu özellik http://localhost:8000/request adresinde kullanıma sunulmaktadır.
Bunun için, sırasıyla packages\site\src\contexts\WalletContext.tsx ve packages\site\src\contexts\XmtpContext.tsx dosyalarında WalletContext ve XmtpContext oluşturmak amacıyla @xmtp/xmtp-js npm paketini kullanıyoruz. Ayrıca hook'lar ve bileşenler oluşturuyoruz. Bu kodun büyük bölümü doğrudan belgelerindeki bir örnekten alınmaktadır.
Bu özelliğin kullanıcı arayüzünü barındırmak için web sitesinde yeni bir sayfa olan packages\site\src\pages\request.tsx oluşturuyoruz. Mesajları useSendMessage hook'undaki sendMessage fonksiyonunu kullanarak gönderiyoruz.
Alınan mesajları ise XmtpContext'in sağlayıcı durumunu kullanarak görüntülüyoruz.
Yukarıda bahsedilen belgelerdeki örneği takip ettikten sonra, nihayet istenen işlevselliğe ulaşıyoruz:
Bu, FoxTagger'ı tamamlamaktadır; fikirlerimizin bir MetaMask Snaps uygulamasına ve bir DApp'e dönüştürüldüğü projenin tamamı.
Bunu uygulasaydınız sonraki adımlar ne olurdu?
Bir sonraki adım, daha fazla analitik ekleyerek ve kullanıcının harcamalarını en aza indirme konusunda tahminler ve öneriler sunmak için bir Makine Öğrenimi modeli kullanarak etiketleme işlevini genişletmek olacaktır. Ardından, ödeme talebi özelliğinin üzerine inşa edilerek kullanıcının bir ücreti birden fazla hesap arasında bölebileceği bir işlem bölme özelliği eklemeyi hedefleyebiliriz.
Bunun yanı sıra, snap içinde daha keyifli bir kullanıcı deneyimi sağlamak için MetaMask Snap'in yeni özel kullanıcı arayüzü işlevselliğinden yararlanılabilir. Son olarak snap, Goerli Testnet ağının ötesinde diğer zincirlere de genişletilebilir.
Kendiniz ve ekibiniz hakkında biraz bilgi verir misiniz?
Fikirden uygulamaya kadar ekibimiz, FoxTagger Snaps'imizi ortaya çıkarmak için iş birliği yaparak fikirler üretmiş, bunları geliştirmiş ve zorluklarla başa çıkmıştır.
Sachin Sahu, DApp'in ön ucunun ve işlevlerinin geliştirilmesinde kilit bir rol üstlendi. MetaMask Snaps'i platformla entegre etmeye yardımcı olmasının yanı sıra, kullanıcıların Snap'in DApp'ini kullanmaya başlamak için ihtiyaç duydukları tüm bilgilere sahip olmasını sağlamak amacıyla demo ve dokümantasyon üzerinde de çalıştı.
Siddhartha G'nin ön uç tasarımı ve uygulamasındaki uzmanlığı, platformun geliştirilmesinde kritik bir öneme sahipti. Verileri sunmak ve değiştirmek için sezgisel ön uç bileşenleri ve metodlar oluşturdu; MetaMask Snaps'in DApp ile entegrasyonuna yardımcı oldu.
Shreetesh M, arka uç uygulamasını üstlenerek tüm fonksiyonların ön uca sunulmasını sağladı. İşlem içgörülerini ve cron işlerini hayata geçirerek ekibin arka ucu ön uçla sorunsuz biçimde entegre etmesine yardımcı oldu.
Noble Saji Mathews'un katkıları, zincir üstü mesajlaşma aracılığıyla işlemler için çerçevenin oluşturulmasında belirleyici bir rol oynadı. Ayrıca platformun kullanılabilirliğini ve kullanıcı dostu yapısını güçlendiren etiketleme ve işlem talebi sisteminin fikir geliştirme sürecinde de yer aldı.
Kranthi, etiketleme sistemini önerip merkezi olmayan iletişimi dahil etmek için yeni yöntemler keşfederek masaya özgün bir bakış açısı getirdi. Sıkı çalışması, kullanıcıların Snap'in DApp'iyle etkileşim biçimini dönüştüren 'request' özelliğinin hayata geçirilmesiyle sonuçlandı.
Ansh Anand'ın ön uç tasarımı ve fikir geliştirme sürecindeki uzmanlığı, onu ekibin vazgeçilmez bir üyesi haline getirdi. Platformun yeteneklerini sergileyen ve daha fazla kullanıcı çekilmesine katkıda bulunan demo videosu üzerinde çalıştı.
MetaMask Snaps ve Web3 alanı için sunduğu olanaklarla ilgili ne gibi fırsatlar görüyorsunuz?
MetaMask'ta 21 milyonun üzerinde aktif kullanıcıyla, herkesin ihtiyaçlarına uyan bir işlevsellik sunmak oldukça güçtür. İşte tam da bu noktada MetaMask Snaps devreye giriyor; geliştirici topluluğu artık MetaMask'ı kullanıcı gereksinimlerine göre özelleştirme ve kişiselleştirme konusunda daha fazla özgürlüğe sahip olup farklı blok zincirler üzerine kurulu veya farklı protokoller kullanan çeşitli DApp'lerle etkileşimi her zamankinden daha kolay hale getiriyor.
MetaMask Snaps'in faydaları son derece çeşitlidir: zaman içindeki harcamaları takip etme, harcama analizi yapma, her işlemin küçük bir yüzdesini hayır kurumlarına bağışlama, müşterilerden ödeme talep etme, Netflix abonelikleri için otomatik ödeme kurma ve çok daha fazlası! MetaMask'ı çeşitli DeFi protokolleri, NFT pazaryerleri ve sosyal medya platformlarıyla entegre etmek artık MetaMask Snaps sayesinde son derece kolay.
Ancak Snaps yalnızca karmaşık finansal işlemler için değildir. Arkadaşlarınızla öğle yemeğine çıktığınızı ve kripto para ile ödeme yaptığınızı hayal edin; MetaMask Snaps ile hesabı bölmek ve arkadaşlarınızdan ödeme talep etmek tek bir dokunuş kadar basit! İşte MetaMask Snaps'in gücü bu!
Web3 alanı gelişmeye devam ettikçe, MetaMask Snaps hem geliştiriciler hem de kullanıcılar için giderek daha önemli bir araç haline gelecektir. Ufukta beliren metaverse potansiyeliyle birlikte, Snaps'in kullanım alanları gerçek anlamda sınırsızdır.
MetaMask Snaps'i denemek isteyen geliştiricilerle paylaşmak istediğiniz tavsiyeler var mı?
Öncelikle GitHub'daki mevcut snap'leri incelemelerini tavsiye ederiz. Bu, MetaMask Snaps tarafından sunulan özelliklerin potansiyelini anlamalarına büyük ölçüde yardımcı olacaktır; her ne kadar bu özellikler kâğıt üzerinde basit görünse de.
Ayrıca uygulamalarına başlamak için mevcut monorepo şablonunu kullanmalarını öneririz. Bunun pek çok faydası vardır: repo, linting kontrolleri ve action'larla birlikte çok iyi yapılandırılmıştır; geliştiriciler hem bir yardımcı web uygulamasını hem de bir snap'i tek bir pakette uygulayabilir. Üstelik repo, her zaman resmi belgelerle uyumlu tutulmaktadır.
Son olarak, sorunlarını veya sorularını topluluk kanallarında paylaşmalarını ve MetaMask Snaps'e olan maruziyetlerini artırmalarına katkıda bulunmalarını tavsiye ederiz.
MetaMask Snaps'e başlamak için:
Geliştirici belgelerine göz atın
MetaMask Flask'ı yükleyin
Bir MetaMask Snaps kılavuzuna bakın
Twitter, GitHub tartışmaları ve Discord üzerinden bizimle bağlantıda kalın
Bir sonraki hackathon'da size yakın bir yerde ekibimizi takip edin! Mutlu BUIDLing'ler ⚒️
Sorumluluk Reddi: MetaMask Snaps, genel olarak Consensys Software dışındaki üçüncü taraflarca geliştirilmektedir. Üçüncü taraflarca geliştirilen MetaMask Snaps'lerin kullanımı tamamen kendi takdirinize ve riskinize bağlıdır; bu tür faaliyetlerden kaynaklanabilecek herhangi bir kayıp veya zarardan yalnızca sizin sorumlu olacağınızı kabul etmiş sayılırsınız. Consensys, üçüncü taraflarca geliştirilen MetaMask Snaps'ler için sözlü veya yazılı hiçbir açık ya da zımni garanti vermemekte ve üçüncü taraflarca geliştirilen Snaps'ler için tüm sorumluluğu reddetmektedir. Blok zincir tabanlı yazılımların kullanımı risk içermekte olup MetaMask Snaps'i kullandığınızda bu riskleri tamamen üstlenmiş olursunuz.
Yapay zeka tarafından çevrildi. Hatalar içerebilir. Lütfen her zaman bilgileri doğrulayın.