Next.js-এর সাথে Metamask ব্যবহার করে DApp-এর জন্য পছন্দের স্টোরেজ

ওয়েব 3 অ্যাপ্লিকেশন যেমন DAOs এবং DAPP গুলি আরও বেশি জনপ্রিয় হয়ে উঠছে৷ Web3 এর প্রাঙ্গনে, এই প্ল্যাটফর্মগুলি তাদের ব্যবহারকারীদের জন্য আরও ব্যক্তিগত এবং কাস্টমাইজড অভিজ্ঞতা প্রদান করবে বলে মনে করা হয় যখন তাদের পরিচয় অন্যদের কাছে গোপন থাকে বা এমনকি নিজেদের অজানা থাকে৷

এই প্রকল্পে, আমরা এই ধরনের ক্ষেত্রে ব্যবহারকারীর অভিজ্ঞতা কীভাবে উন্নত করতে পারি তা আমরা অন্বেষণ করি৷

ওয়ালেটের মাধ্যমে প্রমাণীকরণ / পরিচয় পরীক্ষা

অনেক অ্যাপ্লিকেশনের জন্য, মেটামাস্কের মতো ব্লকচেইন ওয়ালেটগুলি ক্রিপ্টো সম্পদ যেমন ETH-এর মতো পরিচালনা করতে ব্যবহৃত হয়। এই ধরনের ওয়ালেট ব্যবহারকারীদের বিভিন্ন চেইনে অ্যাকাউন্ট তৈরি করতে দেয়। এই অ্যাকাউন্টগুলি ব্যক্তিগত কী দিয়ে তৈরি করা হয়েছে, তবে প্রতিটি অ্যাকাউন্টে তাদের প্রতিনিধিত্ব করে একটি সর্বজনীন ঠিকানা রয়েছে৷

যেহেতু সর্বজনীন কীগুলি যে কেউই দেখাতে পারে তবে এর সাথে সম্পর্কিত লেনদেনগুলি শুধুমাত্র মালিক দ্বারা পরিচালিত হতে পারে৷ ওয়ালেট সংযোগগুলি এই জাতীয় অ্যাপ্লিকেশনগুলির জন্য একটি শক্ত প্রমাণীকরণ প্রক্রিয়া সরবরাহ করে৷

প্রকল্প

এই প্রকল্পে, আমরা Next.js ব্যবহার করে একটি অগ্রাধিকার স্টোরেজ সিস্টেম বাস্তবায়ন করব, যেখানে ব্যবহারকারীরা তাদের দেওয়া ইন্টারফেস কাস্টমাইজ করবে। মানে, যখনই তারা সেই সাইটে ফিরে আসবে, তারা তাদের ইচ্ছামতো UI দেখতে পাবে।

এমনকি আরও শক্তিশালী ধারণাগুলি কোম্পানির সাব এবং ক্রস-প্ল্যাটফর্ম জুড়ে ব্যবহারকারী ইন্টারফেসকে স্বাভাবিক করতে পারে। এইভাবে, যখনই একজন ব্যবহারকারী একটি নির্দিষ্ট সাইটে নেভিগেট করে যা তারা অন্য সাইটগুলিতে সেট করা পছন্দগুলি সমর্থন করে, তাদের একই রকম অভিজ্ঞতা হবে৷

এছাড়াও, এই প্রকল্পটি কাস্টমাইজেশনের জন্য প্যারামিটারের সংখ্যা পরিবর্তন করতে পরিবর্তন করা যেতে পারে, যা আপনার মনের মতো কাঠামোতে এটিকে ঢালাই করার অনুমতি দেয়৷

এই নমুনা প্রকল্পের জন্য, শুধুমাত্র 2 প্যারামিটার আছে। যথা:

• ওয়েবসাইটের থিম
• ব্যবহারকারীর জন্য অভিবাদন নাম

শুরু করা

Upstash Redis এনভায়রনমেন্টাল ভেরিয়েবল কনফিগার করুন

• Upstash-এ একটি বিনামূল্যের Redis ডাটাবেস তৈরি করুন
• .env.local.example ফাইলটি .env.local এ কপি করুন (যা গিট দ্বারা উপেক্ষা করা হবে):
• UPSTASH_REDIS_REST_URL এবং UPSTASH_REDIS_REST_TOKEN আপস্ট্যাশ কনসোলের ডাটাবেস বিবরণ পৃষ্ঠায় পাওয়া যাবে।

নির্ভরতা

নির্ভরতা ইনস্টল করুন:npm i @upstash/redis @metamask/detect-provider @mui/material @emotion/react @emotion/styled

api/store.js তৈরি করুন ফাইল

Redis SDK কনফিগার করুন এবং হ্যান্ডলার ফাংশন এক্সপোর্ট করুন।

import { Redis } from "@upstash/redis"
const redis = Redis.fromEnv()

export default async function handler(req, res) {
  const accountID = await JSON.parse(req.body).accountID
  const body = req.body
  const setResult = await redis.set(accountID, body);
  res.status(200).json({ result: setResult })
}

api/[accountAddress].js তৈরি করুন ফাইল

একইভাবে, Redis SDK কনফিগার করুন এবং হ্যান্ডলার রপ্তানি করুন।

import { Redis } from "@upstash/redis"
const redis = Redis.fromEnv()

export default async function handler(req, res) {
    const accountID = req.query.accountAddress
    const getResult = await redis.get(accountID)
    res.status(200).json({ result: getResult })
}

কনফিগার করুন index.js ফাইল

প্রজেক্টের জন্য আপনার ভেরিয়েবল সেট করুন

const [accountAddress, setAccountAddress] = useState(null)
const [themePreference, setThemePreference] = useState("light")
const [greetingMessage, setGreetingMessage] = useState("Anonymous Person")
const [userSettings, setUserSettings] = useState(null)

// Check if connection already established. If so, fetch the data.
useEffect(() => {
    checkConnection()
    getPreferences()
}, [accountAddress])

মেটামাস্ক সংযোগ করা হচ্ছে

async function connect() {
    const provider = await detectEthereumProvider()
    console.log("provider:", provider)

    if (provider) {
      console.log('Ethereum successfully detected!')
      provider.request({ method: "eth_requestAccounts" }).then((accounts) => {
        if (!accountAddress) {
          setAccountAddress(accounts[0])
        }
      }).catch((err) => console.log(err))
      console.log("window.ethereum:", window.ethereum)
      getPreferences()
    } else {
      alert('Please install MetaMask!')
    }
  }

কিছু ​​সময় পর রিফ্রেশ বা নেভিগেট করা হলে সংযোগ পরীক্ষা করা হচ্ছে

async function checkConnection() {
    const provider = await detectEthereumProvider()
    if (provider) {
      provider
        .request({ method: 'eth_accounts' })
        .then(accounts => {
          setAccountAddress(accounts[0])
        })
        .catch(console.log)
    } else {
      console.log("Not connected, window.ethereum not found")
    }
}

অভিরুচি সেট করতে

async function setPreferences(themePreference, greetingMessage) {
    if (accountAddress) {
      const res = await fetch(`/api/store`, {
        method: "POST",
        body: JSON.stringify({
          accountID: accountAddress,
          themePreference: themePreference,
          greetingMessage: greetingMessage,
        })
      })
      const data = await res.json()
    }
    else {
      alert("No account address detected")
    }
}

পছন্দ পেতে

async function getPreferences(e) {
    if (accountAddress) {
      console.log("Fetching user preferences...")
      const res = await fetch(`/api/${accountAddress}`, { method: "GET" })
      const data = await res.json()

      setUserSettings(data.result)
      if (data.result) {
        setThemePreference(data.result.themePreference)
        setGreetingMessage(data.result.greetingMessage)
      }
    }
    else {
      console.log("No account connected yet!")
    }
}

ভেরিয়েবলের অবস্থা পরিবর্তন করুন

ইনপুট ক্ষেত্র/বোতাম ইত্যাদিতে নিম্নলিখিত ফাংশনগুলি আবদ্ধ করুন।

async function handleDarkMode(e) {
    console.log("themePreference:", themePreference)
    const newPreference = themePreference == "light" ? "dark" : "light"
    setThemePreference(newPreference)
    await setPreferences(newPreference, greetingMessage)
    await getPreferences()
}

async function takeGreetingMessage(e) {
    // submit with enter/return key
    if (e.keyCode == 13) {
        const message = e.target.value
        setGreetingMessage(message)
        console.log(message)
        await setPreferences(themePreference, message)
        await getPreferences()
        e.target.value = ""
    }
}

উপরের ফাংশনগুলি ব্যবহার করে একটি সাধারণ UI তৈরি করুন

নিশ্চিত করুন যে আপনি প্রাসঙ্গিক উপাদান-ইউআই নির্ভরতা আমদানি করেছেন৷

return (
    <div className={styles.container}>

      <h2>Web3 Preferences Holder</h2>
      <Button variant="contained" onClick={connect}>Connect Metamask</Button>
      <p>
        Lets you keep user preferences on cross-websites
      </p>
      <br />
      <p>For example, take a greeter message from user.</p>
      <TextField label="Call me..." variant="outlined" size="small" onKeyDown={takeGreetingMessage} />
      <br />
      <br />

      <Button onClick={handleDarkMode} variant="contained" size="small" style={{ backgroundColor: "#3D3B3B" }} > Switch Dark Mode </Button>

      <p>Sample Component/Page:</p>
      <Showcase userSettings={userSettings} />

    </div>
)

sampleComponent.jsx তৈরি করুন একটি ডিরেক্টরিতে components

এটি আপনার ওয়েব ইন্টারফেস, অ্যাপ্লিকেশন ইত্যাদির প্রতিনিধিত্বকারী প্রধান উপাদান৷ এই উপাদানটি কীভাবে সিস্টেম কাজ করে তা কল্পনা করবে এবং মূল লক্ষ্য প্রদান করবে৷ এখানে, আপনার পছন্দ মতো প্যারামিটারগুলিকে পার্স করুন এবং আপনার নমুনা ইন্টারফেস তৈরি করুন৷

এই উদাহরণে, প্রকল্পটি এইভাবে কনফিগার করা হয়েছে:

import React from "react";
import { useState} from 'react'

import { ThemeProvider, createTheme } from '@mui/material/styles'
import { orange, grey } from '@mui/material/colors'

const lightTheme = createTheme({
  palette: {
    primary: {
      main: grey[400],
    },
  }
})

const darkTheme = createTheme({
  palette: {
    primary: {
      main: orange[400],
    },
  }
})

export default function Showcase(parameters) {

  const userSettings = parameters.userSettings
  const [theme, setTheme] = useState("light")
  const [greetingMessage, setGreetingMessage] = useState("Anonymous Person")

  const items = []
  if (userSettings) {

    const obj = userSettings[0]

    for (const key in userSettings) {
      items.push(<li key={key}> {key}: {userSettings[key]} </li>)
    }

    if (userSettings["themePreference"] != theme) {
      setTheme(userSettings["themePreference"] == "light" ? "light" : "dark")
    }

    if (!greetingMessage || userSettings["greetingMessage"] != greetingMessage) {
      if (userSettings["greetingMessage"]) {
        setGreetingMessage(userSettings["greetingMessage"])
      }
      else {
        setGreetingMessage("not the same message")
      }
    }
  }

  return (
    <div>
      <div style={{
        padding: 10,
        margin: 10,
        backgroundColor: theme == "light" ? "grey" : "orange",
        border: "solid",
        borderWidth: "30px",
        borderColor: theme == "light" ? "#B2B2B2" : "black"
      }}>
        <ThemeProvider
          theme={theme == "light" ? lightTheme : darkTheme}
        >

          <h2>Hi, {greetingMessage}!</h2>
          <p>User and their preferences:</p>
          {items}

        </ThemeProvider>

      </div>
    </div>
  );
}

ওয়ার্কফ্লো

ব্যবহারকারী এখনও মেটামাস্কের মাধ্যমে সংযুক্ত নয়৷ ডিফল্ট টেমপ্লেট।

প্রথমবার মেটামাস্কের মাধ্যমে সংযুক্ত ব্যবহারকারী৷ ডিফল্ট টেমপ্লেট।

• ব্যবহারকারী প্ল্যাটফর্মে অভ্যর্থনা জানানোর সময় একটি নাম প্রবেশ করান যা তারা দেখতে চায়।
• ব্যবহারকারী থিমগুলির মধ্যে নির্বাচন করে, যেমন আলো এবং অন্ধকার৷
৷

ব্যবহারকারীর পছন্দগুলি সেট আপ করা হয়েছে৷ এখন থেকে, একই ইন্টারফেস প্রদত্ত পছন্দ ইন্টারফেস সমর্থন করে যে কোনো প্ল্যাটফর্মে দেখানো যাবে। ব্যবহারকারী-কাস্টমাইজড টেমপ্লেট।

উপাদানটি পাঠ্য বিন্যাসে ব্যবহারকারীর দ্বারা সেট করা পছন্দগুলি দেখায়, আপনি যেভাবে চান সেগুলিকে পার্স করতে পারেন৷

আপনি এই সাধারণ উদাহরণে দেখতে পাচ্ছেন, আপনি ব্যবহারকারীকে দেখান এমন যেকোনো উপাদানকে প্যারামেট্রিজ করতে পারেন। আপনি সর্বদা নকশা উন্নত করে এবং পরামিতি সংখ্যা বৃদ্ধি করে এই প্রকল্পে যোগ করতে পারেন; তবে মৌলিক যুক্তি একই থাকে।

অন্তিম শব্দ

প্রকল্পের ডেমো দেখতে এখানে চেক করুন৷

সমাপ্ত প্রকল্প দেখতে, প্রকল্পের গিথুব রেপোতে যান৷

সেখানে, আপনি Vercel স্থাপনার জন্য একটি দ্রুত স্থাপনার বোতাম দেখতে পাবেন; স্বয়ংক্রিয়ভাবে একটি Upstash Redis ইন্টিগ্রেশন তৈরি করে আপনাকে দ্রুত প্রকল্প স্থাপন করতে দেয়।

আমরা আপনার ধারনা এবং চিন্তা শোনার জন্য উন্মুখ. আপনি টুইটার বা বিরোধের মাধ্যমে আমাদের সাথে যোগাযোগ করতে পারেন।