Aleph Zero Snap: Web3 Kullanıcılarını Aleph Zero Ağına Dahil Etme

MetaMask Snaps, MetaMask'ı dünyanın en genişletilebilir cüzdanı haline getirme yol haritasıdır. Geliştirici olarak, özelliklerinizi ve API'larınızı MetaMask'a tamamen yeni yollarla sunabilirsiniz. Web3 geliştiricileri bu büyümenin temel taşıdır ve bu seri, bugün inşa edilen yeni MetaMask Snaps'leri tanıtmayı amaçlamaktadır.

Piotr ve Michael ile Aleph Zero Snap

ETHWarsaw Hackathon'da Aleph Zero Snap'i geliştiren Web3 geliştiricileri Piotr ve Michael ile sohbet ediyoruz.

Snap Repo: https://github.com/piotr-roslaniec/ethwarsaw-2022/tree/main/azero-snap/packages/snap-adapter

Neden geliştirdiniz?

Görüşümüze göre Polkadot ekosistemindeki cüzdan deneyimi hâlâ yetersiz. Öte yandan MetaMask Snaps ile entegrasyon, mevcut web3 kullanıcı kitlesini Aleph Zero ağına dahil etmeye yardımcı olabilir.

Teknik uygulamayı bize anlatabilir misiniz?

Adapter (Bağdaştırıcı)

Snap'imiz iki bölümden oluşmaktadır. Birincisi, kullanıcıların etkileşime girdiği bir web sitesidir. İkincisi ise asıl Snap'in kendisidir. Bu iki unsur, Snap'in sunucu, web sitesinin ise istemci rolünü üstlendiği istemci-sunucu mimarisine benzer bir şekilde çalışır. Bu doğal sınırı yansıtmak için Snap API'sini adapter adlı ayrı bir pakete çıkardık. Bu paket, web sitesinin Snap ile etkileşime girebileceği tüm olası yöntemleri ortaya koyar. Bu soyutlama katmanı, Snap'in diğer istemciler (web siteleri) tarafından kullanımını kolaylaştırır. API'miz, isimleri oldukça açıklayıcı olan dört yöntemle tanımlanabilir. Daha ayrıntılı incelemek isterseniz tam kod burada.

export const getAccountFromSeed = async (seed: string): Promise<PublicAccount> => {
  return await requestSnap("getAccountFromSeed", [seed]);
}

export const generateNewAccount = async (): Promise<PublicAccount> => {
  return await requestSnap("generateNewAccount", []);
}

export const signTransaction = async (transaction: SignerPayloadJSON): Promise<{ signature: string }> => {
  return await requestSnap("signTransaction", [transaction as unknown as string]);
}

export const getAccounts = async (): Promise<string[]> => {
  return await requestSnap("getAccounts", []);
}
Kopyala

Uygulama

Katmanlarımız arasındaki bağlantıyı açıkladık; şimdi birinci katmana, yani web sitesine geçelim. Resmi tarayıcı tabanlı polkadot uygulamasını fork'ladık. Ardından işlem imzalama, hesap oluşturma veya kurtarma gibi temel işlevleri tarayıcı tabanlı cüzdandan Snap tabanlı yapıya geçirmemiz gerekti. Örneğin MetaMask içinde işlem imzalamak için QrSigner uygulamasını, Snap'in signTransaction fonksiyonunu kullanacak şekilde değiştirdik.

MetaMask Snap'in polkadot uygulamasıyla entegrasyonu iki iyileştirme sağladı:

• Birincisi, yerel depolamaya dayalı polkadot uygulama cüzdanı yerine MetaMask uzantısının güvenlik modelini miras almamıza olanak tanıdı.

• İkincisi, polkadot uygulamasını deterministik bir şekilde oluşturmak için MetaMask seed'ini kullanabilir hale geldik; böylece seed'imizi dışa aktardığımızda Aleph Zero anahtarı da otomatik olarak dışa aktarılır.

MetaMask API

MetaMask, kullanıcı tarafından izin verilmesi durumunda MetaMask Snaps tarafından kullanılabilecek API çağrıları sunar. Bu durumda bunlardan ikisinden yararlandık:

snap_manageState - MetaMask içinde şifrelenmiş veri depolamamıza olanak tanır. Örneğin oluşturulan hesapları saklamak için kullanıyoruz. State ile etkileşim oldukça kolaydır ve şu şekilde özetlenebilir:

const request = async (method: 'clear' | 'get' | 'update', newState?: unknown): Promise<any> => {
if (['get', 'clear'].includes(method) && newState) {
    throw new Error(`Cannot ${method} with newState`);
}
if (method == 'update' && !newState) {
    throw new Error('Cannot call update without newState');
}

const params = newState ? [method, newState] : [method];
return await wallet.request({
    method: `snap_manageState`,
    params,
  });
}
Kopyala

snap_getBip44Entropy_ - MetaMask seed'inden entropy almak için. docs

Belirtmek gerekir ki MetaMask'ın çok kullanışlı bir kütüphanesi olan passworder mevcuttur; bu kütüphane state'i kolayca şifrelememizi ve şifresini çözmemizi sağlar. Bizim durumumuzda state'i şifrelemek için simetrik anahtar olarak yine MetaMask seed'inden elde edilen entropy'yi kullandık.

SDK

Özetlemek gerekirse: polkadot uygulamasını, Snap kullanımını etkinleştirmek amacıyla buraya oraya JavaScript enjekte ederek hackledik. Snap, MetaMask içindeki seed'den entropy alabilir ve şifrelenmiş state'i yönetebilir. Son adım ise Aleph Zero için SDK olan polkadotjs ile entegrasyon olacaktır.

Bu, npm install @polkadot/api komutunu çalıştırıp içe aktarmak kadar basit bir görev gibi görünüyor. Ancak Snap'e bağımlılık eklemek zorlu olabilir. Bu güçlük, Snap'in doğrudan JavaScript sanal makinesinde değil, önce Secure ECMAScript (SES) ortamında sandbox'lanarak çalıştırılmasından kaynaklanır. Kısaca söylemek gerekirse, normalde sorunsuz derlenen kodlar SES ortamında yüklenirken hata verebilir.

Kod

Kütüphanelerin büyük çoğunluğuyla çalışırken herhangi bir sorunla karşılaşmayız; ancak bizim durumumuz böyle değildi. polkadotjs SDK'sını SES içinde değerlendirirken iki sorunla karşılaştık ve bunları gidermek için paketlenmiş kaynak kod üzerinde çalıştırılan iki betik yazdık.

Bunlardan ilki, JavaScript dosyasına gömülü hatalı biçimlendirilmiş wasm kodundan kaynaklanıyordu. İşte düzeltme betiği:

const fs = require('fs').promises;
const path = require('path');

const dirPath =
  '../../../../node_modules/@substrate/smoldot-light/dist/cjs/instance/autogen';

// SES doesn't like double slashes in strings so we need to replace them with single slashes
// and string concatenation.
async function fixDoubleSlash() {
  const files = ['wasm0.js', 'wasm1.js', 'wasm2.js'];
  for (const file of files) {
    console.log('Fixing ${file}');
    const filePath = path.join(__dirname, dirPath, file);
    const contents = await fs.readFile(filePath, 'utf8');
    let fixedContents = contents;
    while (fixedContents.includes('//')) {
      fixedContents = fixedContents.split('//').join('/"+"/');
    }
    await fs.writeFile(filePath, fixedContents);
  }
}

fixDoubleSlash();
Kopyala

İkinci sorun da polkadot uzantısından kaynaklanıyordu; uzantı, SES'te yasak olan window.addEventListener metoduna erişmeye çalışıyordu. Bu da basit bir yöntemle kolayca çözüldü:

const fs = require('fs').promises;
const path = require('path');

const bundlePath = path.join(__dirname, '../dist/bundle.js');

async function fix() {
  console.log(`Fixing ${bundlePath}`);
  const contents = await fs.readFile(bundlePath, 'utf8');
  const replaceMissingTypes = '\n\nwindow.addEventListener = function(){};\n\n';

  // Looking for a first breakline after the first line of the file
  // This is where we can safely inject our code
  const fixed = contents.replace('\n\n', replaceMissingTypes);
  await fs.writeFile(bundlePath, fixed);
}

fix();
Kopyala

Bunu uygulasaydınız sonraki adımlar ne olurdu?

Snap'imizi polkadot.js ile tam uyumlu hale getirmeyi ve Polkadot ekosisteminde kullanılabilir bir web cüzdanı olarak sunmayı çok isterdik.

Kendiniz ve ekibiniz hakkında biraz bilgi verebilir misiniz?

Michael, bir Polonya bankasında programcı olarak çalışmakta ve günlük işlerinde blockchain teknolojisiyle ilgilenmektedir. Programlamayı ve yeni şeyler öğrenmeyi seviyor.

Piotr, NuCypher'da yazılım mühendisi olarak çalışmaktadır. Gizlilik, veri ve dağıtık sistemlerle ilgilenmektedir.

MetaMask Snaps ile ilk ne zaman tanıştınız ve deneyiminiz nasıldı?

Piotr - MetaMask Snaps'i ilk olarak Osaka'daki Devcon etkinliğinde öğrendim. Konu, bu yılın başında EthDenver hackathon'undan kısa süre önce yeniden gündeme geldi.

Michaeł - Piotr, beni MetaMask Snaps ile EthDenver'dan kısa süre sonra tanıştırdı.

MetaMask Snaps'i diğer cüzdanlardan farklı kılan nedir?

Dapp'inizde uygulamaya özgü kriptografi/özel anahtarlara erişebilme imkânı; bu özellik, tanıdık tarayıcı-cüzdan deneyiminin üzerine yeni kullanıcı akışları oluşturmayı mümkün kılıyor.

MetaMask Snaps ile geliştirme yapmak sizin ve ekibiniz için nasıl bir deneyim?

Temel altyapı mevcut; ancak özellikle özel UI öğeleri gerektiren daha gelişmiş MetaMask Snaps geliştirmek oldukça zorlu. Deployment, test gibi konularda web geliştirici deneyimine dair zihinsel modelimizi Snaps'e uyarlamanın yolunu bulmak için çok zaman harcadık.

MetaMask Snaps sizin için ne ifade ediyor?

Topluluğa gerçek anlamda güç veren bir araç; herkes MetaMask'ının hangi özelliklere sahip olacağına kendisi karar veriyor. Eklentiler, geliştirmeyi demokratikleştiriyor ve daha hızlı büyümeyi mümkün kılıyor.

MetaMask Snaps'in Web3 alanı için sunduğu fırsatlar ve açtığı olanaklar neler?

Daha fazla ağa erişim (özellikle EVM dışı olanlar); işlem yaşam döngüsüne müdahale ederek özel mantık ekleme (güvenlik kontrolleri gibi) veya UX'i özelleştirme imkânı; dapp'e özgü hassas içerikler için tarayıcıda şifrelenmiş depolama ve MetaMask Snaps aracılığıyla kullanıcılarınıza "kendi kriptografinizi getirme" olanağı.

MetaMask Snaps'i denemek isteyen geliştiricilere tavsiyeleriniz neler?

JS kütüphanelerini SES'te derlemek zorlu olabilir; ancak deneyimlerimize göre imkânsız değil. MetaMask geliştirmede geri bildirim döngüsü oldukça uzun, bu yüzden birim testleri yazmayı ihmal etmeyin.

MetaMask Snaps'te küçük ama aktif bir geliştirici topluluğu var; Discord'u, GitHub tartışmalarını vb. ziyaret etmek çok faydalı olabilir; özellikle ürün hâlâ yeni olduğundan bu çevre dışında mevcut eğitim kaynakları oldukça sınırlı.

MetaMask Snaps ile Geliştirme

MetaMask Snaps'e başlamak için:

1. Geliştirici belgelerine göz atın

2. MetaMask Flask'ı yükleyin

3. Bir MetaMask Snaps rehberine bakın

4. Twitter, GitHub tartışmaları ve Discord üzerinden bizimle bağlantıda kalın

Size yakın bir yerde düzenlenecek bir sonraki hackathon'da 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 sizin takdirinize ve riskinize bağlıdır; bu tür faaliyetlerden doğabilecek her türlü kayıp veya zarardan yalnızca siz sorumlu olacaksınız. Consensys, üçüncü taraflarca geliştirilen MetaMask Snaps için sözlü veya yazılı hiçbir açık ya da zımni garanti vermez ve bu Snaps'lerden doğan tüm sorumlulukları reddeder. Blockchain tabanlı yazılımların kullanımı çeşitli riskler barındırır ve MetaMask Snaps kullanımıyla bu riskleri tamamen üstlenmiş olursunuz.