BARU: Helius mengakuisisi Light Protocol
tutorial dompet tersemat Solana menggunakan Helius dan Dynamic SDK
Blog/Pengembangan

Onboarding Aplikasi Solana: Alasan Memilih Dompet Tersemat

Pengalaman Developer @ Dynamic.xyzMatthew Foyle di XMatthew Foyle di LinkedIn
Bacaan 7 menit

Anda memiliki ide inovatif untuk aplikasi seluler atau web.

Anda tahu bahwa Solana adalah blockchain yang tepat untuk membangunnya, dan Anda ingin segera meluncurkan pengalaman kaya fitur yang akan memikat pengguna sejak hari pertama.

Jadi, apa saja yang perlu ada dalam perangkat developer Anda untuk mewujudkannya?

Alat seperti Cursor dan v0 kemungkinan berada di urutan teratas daftar Anda, dan Next.js merupakan kandidat kuat untuk framework frontend pilihan Anda.

Namun, untuk memenuhi kebutuhan khusus Solana pada aplikasi Anda, solusi apa yang dapat membantu memastikan peluncuran yang lancar dan kemampuan untuk melakukan penskalaan secara efektif?

Membangun dan melakukan penskalaan di Solana memerlukan dua komponen penting:

  1. Solusi onboarding yang lancar untuk autentikasi dan pengelolaan dompet
  2. Layanan RPC yang tangguh untuk menangani transaksi berperforma tinggi

Komponen penting ini tidak hanya menyederhanakan pengembangan, tetapi juga memberikan pengalaman pengguna yang lancar.

Mari kita pelajari setiap elemen ini lebih dalam.

Solana Wallet Adapter

Proses onboarding paling sederhana adalah menghubungkan pengguna melalui dompet yang sudah ada seperti Phantom atau Solflare. Metode ini cocok untuk pengguna yang sudah mengenal Solana dan telah menyiapkan dompet.

Titik awal yang baik adalah Solana Wallet Adapter, yang menawarkan:

  • API terstandar untuk integrasi yang mudah
  • Fungsionalitas dasar untuk koneksi dompet dan penandatanganan transaksi
  • Fleksibilitas sumber terbuka untuk menyesuaikannya dengan kebutuhan aplikasi Anda

Solana Wallet Adapter cepat dan mudah diterapkan, sehingga menjadi pilihan andal bagi pengguna yang telah memiliki dompet.

Selain mendukung banyak dompet, Solana Wallet Adapter juga dilengkapi integrasi terstandar untuk fungsionalitas dompet yang konsisten serta komponen UI siap pakai seperti tombol koneksi dompet. Terakhir, solusi ini mengoptimalkan performa agar penandatanganan dan pengiriman transaksi lebih cepat dibandingkan API mentah seperti window.solana.

Desain sumber terbuka Solana Wallet Adapter memungkinkan developer menyesuaikannya dengan kebutuhan aplikasi tertentu. Desain ini juga memungkinkan implementasi komunitas untuk memperluas kompatibilitasnya ke framework seperti Vue, Angular, Svelte, dan TypeScript.

Namun, penggunaan adapter menambahkan dependensi ke proyek Anda, yang dapat meningkatkan beban kerja developer.

Meskipun adapter menyediakan banyak fitur siap pakai, kustomisasi ekstensif mungkin mengharuskan Anda mempelajari basis kodenya atau membuat solusi alternatif. Tergantung kasus penggunaannya, hal ini dapat memakan waktu.

Seperti pustaka pihak ketiga lainnya, developer mungkin menghadapi bug atau masalah di luar kendali mereka, yang berpotensi memengaruhi stabilitas aplikasi atau memerlukan dukungan eksternal untuk menyelesaikannya.

Meskipun penggunaan wallet adapter praktis bagi pengguna yang terbiasa dengan kripto, solusi ini kurang memadai jika tujuan Anda adalah melakukan onboarding audiens yang lebih luas, terutama pengguna yang belum mengenal blockchain atau belum memiliki dompet.

Melakukan Onboarding Pengguna Baru dengan Dompet Tersemat

Dompet tersemat dapat meningkatkan onboarding Solana secara signifikan dan membantu developer mendapatkan lebih banyak pengguna. Dompet tersemat memungkinkan pengguna baru mendaftar dan secara otomatis menerima dompet langsung di dalam aplikasi.

Dengan demikian, pengguna dapat:

  • Memulai tanpa menyiapkan dompet pihak ketiga
  • Menerima aset dengan lancar
  • Melakukan transaksi on-chain

Pendekatan ini meminimalkan hambatan dan bermanfaat bagi aplikasi konsumen yang menargetkan adopsi arus utama.

Menurut data dari Dynamic, lebih dari 50% pengguna memilih dompet tersemat daripada menghubungkan dompet yang sudah ada.

Namun, tingkat adopsi bervariasi tergantung metode onboarding dan basis pengguna yang ditargetkan.

Audiens yang terbiasa dengan kripto mungkin lebih memilih menghubungkan dompet yang sudah ada, sedangkan pengguna arus utama kemungkinan akan memilih kemudahan solusi tersemat.

Menemukan keseimbangan yang tepat adalah kuncinya.

Likuiditas ritel masih terutama berada di hot wallet. Artinya, meskipun dompet tersemat menyederhanakan onboarding, solusi ini tidak selalu menjadi titik awal terbaik. Developer perlu mempertimbangkan audiens target awal mereka dan merancang pengalaman onboarding yang sesuai dengan kebutuhan pengguna.

SDK Komprehensif untuk Onboarding dan Infrastruktur Dompet

Bagi developer yang ingin menghadirkan fitur di luar yang disediakan Solana Wallet Adapter, solusi seperti Dynamic SDK menawarkan pendekatan yang lebih komprehensif.

Dengan Dynamic, Anda dapat:

1. Mendukung beberapa opsi dompet

Izinkan pengguna menghubungkan dompet Solana yang sudah ada seperti Phantom dan sediakan dompet tersemat bagi pengguna baru.

2. Mengaktifkan login melalui media sosial dan email

Sederhanakan penyiapan dompet dengan metode login yang sudah dikenal seperti X dan Telegram.

3. Menyesuaikan pengalaman pengguna

Gunakan komponen UI siap pakai untuk integrasi cepat atau pilih opsi headless sepenuhnya untuk merancang alur Anda sendiri.

4. Menyiapkan aplikasi Anda untuk masa depan

Tambahkan dukungan multi-dompet, alat perlindungan penipuan, dan kemampuan analitik untuk melakukan penskalaan dan mengoptimalkan aplikasi Anda.

5. Menjangkau pengguna dari chain lain

Perluas fungsionalitas aplikasi Anda dari Solana ke chain lain saat Anda siap.

Dengan solusi seperti Dynamic, Anda dapat menyederhanakan pengembangan sekaligus memberikan pengalaman onboarding yang lancar kepada pengguna.

Solusi ini melengkapi Solana Wallet Adapter dengan memberikan lebih banyak fungsionalitas onboarding, skalabilitas, dan kustomisasi kepada developer.

Solana Wallet Adapter vs. Dompet Tersemat

Berikut perbandingan yang dapat membantu:

FiturSolana Wallet AdapterDynamic
Koneksi dompet✅✅
Dompet tersemat❌✅
Login melalui media sosial❌✅
Dukungan multichain❌✅
UI yang dapat disesuaikan❌✅
Perlindungan penipuan❌✅
Daftar akses❌✅
Pengelolaan pengguna❌✅
Webhook❌✅

Apa pun fiturnya, waktu implementasi akan selalu menjadi faktor penentu. Anda mungkin mengira bahwa dengan semua kemampuan ini, implementasi Dynamic lebih rumit daripada Solana Wallet Adapter, tetapi kenyataannya tidak demikian.

Berikut adalah perbandingan implementasi React default:

Solana Wallet Adapter: Implementasi Default

Kode
import React, { FC, useMemo } from 'react';
import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
import { UnsafeBurnerWalletAdapter } from '@solana/wallet-adapter-wallets';
import {
WalletModalProvider,
WalletDisconnectButton,
WalletMultiButton
} from '@solana/wallet-adapter-react-ui';
import { clusterApiUrl } from '@solana/web3.js';

// Default styles that can be overridden by your app
require('@solana/wallet-adapter-react-ui/styles.css');

export const Wallet: FC = () => {
// The network can be set to 'devnet', 'testnet', or 'mainnet-beta'.
const network = WalletAdapterNetwork.Devnet;

// You can also provide a custom RPC endpoint.
const endpoint = useMemo(() => clusterApiUrl(network), [network]);

const wallets = useMemo(
() => [
new UnsafeBurnerWalletAdapter(),
],
// eslint-disable-next-line react-hooks/exhaustive-deps
[network]
);

return (
<ConnectionProvider endpoint={endpoint}>
<WalletProvider wallets={wallets} autoConnect>
<WalletModalProvider>
<WalletMultiButton />
<WalletDisconnectButton />
{ /* Your app's components go here, nested within the context providers. */ }
</WalletModalProvider>
</WalletProvider>
</ConnectionProvider>
);
};

Dynamic: Implementasi Default

Kode
import React from 'react'
import { DynamicContextProvider, DynamicWidget } from '@dynamic-labs/sdk-react-core'
import { SolanaWalletConnectors } from '@dynamic-labs/solana'

export const App = () => {
return (
<div className="App">
<DynamicContextProvider
settings={{
environmentId: process.env.REACT_APP_DYNAMIC_ENVIRONMENT_ID,
walletConnectors: [SolanaWalletConnectors],
}}
>
{ /* Your app's components go here, nested within the context providers. */ }
<DynamicWidget />
</DynamicContextProvider>
</div>
)
}

Semua kebutuhan onboarding Anda telah disiapkan karena kami menggunakan DynamicWidget, komponen UI lengkap yang menangani tombol Login/Daftar, alur autentikasi penuh, profil pengguna, dan banyak lagi.

Saat menjalankan aplikasi, Anda akan melihat tampilan berikut:

Jika Anda lebih suka membuat UI sendiri atau menyesuaikan elemen tertentu, semuanya dapat dikonfigurasi sepenuhnya hingga tingkat piksel. Pelajari dokumentasi desain atau opsi integrasi headless untuk panduan mendetail.

Untuk mengaktifkan pendaftaran melalui dompet tersemat di Solana, cukup buka dashboard dan ikuti langkah-langkah berikut:

Selesai!

Siapa pun yang mendaftar menggunakan email, nomor telepon, atau akun media sosial akan mendapatkan dompet Solana dan dapat langsung menggunakan aplikasi Anda.

Dengan beberapa baris kode, Anda mendapatkan onboarding terbaik di kelasnya, termasuk semua fungsionalitas yang dibutuhkan sekarang dan di masa mendatang.

Menambahkan Penyedia RPC dan Menetapkan Priority Fee

Meskipun onboarding masih menjadi salah satu hambatan terbesar bagi pengguna saat ini, pemrosesan transaksi berada tepat di urutan berikutnya. Menangani kepadatan jaringan di Solana dapat menjadi tantangan. Tanpa layanan RPC khusus, transaksi pengguna mungkin gagal diproses sehingga menimbulkan frustrasi. Demikian pula, penetapan biaya prioritas yang tidak tepat dapat mengganggu pengalaman pengguna dan menurunkan keandalan aplikasi.

Anda dapat menghindari masalah ini dengan menggunakan Helius sebagai endpoint RPC sekaligus menetapkan biaya secara dinamis melalui Priority Fee API. Mengintegrasikannya ke Dynamic semudah mengatur URL RPC di dashboard.

Saat membuat transaksi, ambil biaya menggunakan Priority Fee API.

Kode
async function getPriorityFeeEstimate(priorityLevel, transaction) {
    const response = await fetch(HeliusURL, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
            jsonrpc: "2.0",
            id: "1",
            method: "getPriorityFeeEstimate",
            params: [
                {
                    transaction: bs58.encode(transaction.serialize()), // Pass serialized transaction in Base58
                    options: { priorityLevel: priorityLevel },
                },
            ],
        }),
    });

    const data = await response.json();
    console.log(
        "Fee in function for",
        priorityLevel,
        "",
        data.result.priorityFeeEstimate
    );
    return data.result;
}

Studi Kasus Magic Eden

Infrastruktur dompet yang tangguh sangat penting untuk mengembangkan aplikasi Solana yang andal dan dapat diskalakan.

Magic Eden, marketplace NFT terkemuka, telah berkembang pesat dengan menambahkan chain baru. Mereka membutuhkan dompet fleksibel yang mendukung pendekatan ini dan tetap unggul saat lalu lintas tinggi, seperti ketika pencetakan NFT berlangsung.

Dengan mengintegrasikan Dynamic SDK, Magic Eden dapat menawarkan dukungan dompet multichain, penautan akun sosial, dan pengelolaan multi-dompet. Mengelola beberapa dompet dan mengoleksi aset di berbagai jaringan menjadi mudah.

Magic Eden juga mengandalkan Helius untuk mengelola node RPC dan mengoptimalkan throughput transaksi. Melalui Priority Fee API Helius, Magic Eden mempertahankan keandalan dan kecepatan, bahkan selama puncak lalu lintas.

Kombinasi Dynamic dan Helius ini memungkinkan Magic Eden melakukan penskalaan secara efisien sekaligus memberikan pengalaman unggul kepada jutaan pengguna bulanannya.

Dengan memprioritaskan skalabilitas, kecepatan, dan pengalaman pengguna, Magic Eden menetapkan tolok ukur tentang hal yang dapat dicapai marketplace NFT.

Bagi developer yang ingin membangun aplikasi yang menarik bagi audiens yang terbiasa dengan kripto maupun audiens arus utama, berinvestasi pada solusi dompet yang andal dapat menyederhanakan pengembangan, menjangkau basis pengguna yang lebih luas, dan membangun fondasi untuk pertumbuhan jangka panjang.

Sumber Daya Tambahan

Terima kasih banyak kepada @__lostin__ dan Brady Werkheiser yang telah meninjau versi awal artikel ini.

Berlangganan Helius

Ikuti perkembangan terbaru dalam pengembangan Solana dan dapatkan pembaruan saat kami memublikasikan postingan

Gambar diperbesar