नेक्स्ट.जेएस के साथ मेटामास्क का उपयोग करने वाले डीएपी के लिए वरीयता संग्रहण

वेब3 एप्लिकेशन जैसे डीएओ और डीएपीपी अधिक से अधिक लोकप्रिय हो रहे हैं। Web3 के परिसर के अनुसार, इन प्लेटफार्मों को अपने उपयोगकर्ताओं के लिए एक अधिक व्यक्तिगत और अनुकूलित अनुभव प्रदान करना चाहिए, जबकि उनकी पहचान दूसरों के लिए निजी या यहां तक ​​​​कि खुद के लिए अज्ञात भी है।

इस परियोजना में, हम यह पता लगाते हैं कि हम ऐसे मामलों के लिए उपयोगकर्ता अनुभव को कैसे बढ़ा सकते हैं।

वॉलेट के माध्यम से प्रमाणीकरण / पहचान जांच

कई अनुप्रयोगों के लिए, मेटामास्क जैसे ब्लॉकचैन वॉलेट का उपयोग क्रिप्टो परिसंपत्तियों जैसे ईटीएच के प्रबंधन के लिए किया जाता है। ऐसे वॉलेट उपयोगकर्ताओं को विभिन्न श्रृंखलाओं पर खाते बनाने देते हैं। ये खाते निजी कुंजी के साथ बनाए जाते हैं, हालांकि प्रत्येक खाते में उनका प्रतिनिधित्व करने वाला एक सार्वजनिक पता होता है।

चूंकि सार्वजनिक कुंजी कोई भी दिखा सकता है लेकिन इससे संबंधित लेनदेन केवल स्वामी द्वारा ही प्रबंधित किया जा सकता है। वॉलेट कनेक्शन ऐसे अनुप्रयोगों के लिए एक ठोस प्रमाणीकरण तंत्र प्रदान करते हैं।

परियोजना

इस परियोजना में, हम Next.js का उपयोग करके एक वरीयता भंडारण प्रणाली को लागू करेंगे, जहां उपयोगकर्ता उन्हें प्रदान किए गए इंटरफ़ेस को अनुकूलित करते हैं। मतलब, जब भी वे उस साइट पर वापस आएंगे, तो वे UI को वैसा ही देखेंगे जैसा उनका इरादा था।

कंपनियों के उप और क्रॉस-प्लेटफ़ॉर्म पर उपयोगकर्ता इंटरफ़ेस को सामान्य बनाने के लिए और भी अधिक शक्तिशाली विचार हो सकते हैं। इस तरह, जब भी कोई उपयोगकर्ता अन्य साइटों पर सेट की गई प्राथमिकताओं का समर्थन करने वाली किसी निश्चित साइट पर नेविगेट करता है, तो उन्हें भी ऐसा ही अनुभव होगा।

साथ ही, इस परियोजना को अनुकूलन के लिए मापदंडों की संख्या को बदलने के लिए संशोधित किया जा सकता है, जिससे आप इसे अपने मन में किसी भी संरचना में ढाल सकते हैं।

इस नमूना परियोजना के लिए, केवल 2 पैरामीटर हैं। अर्थात्:

• वेबसाइट की थीम
• उपयोगकर्ता के लिए अभिवादन नाम

आरंभ करना

अपस्टैश Redis पर्यावरण चर कॉन्फ़िगर करें

• अपस्टैश पर एक निःशुल्क रेडिस डेटाबेस बनाएं
• .env.local.example फ़ाइल को .env.local में कॉपी करें (जिसे Git द्वारा अनदेखा कर दिया जाएगा):
• UPSTASH_REDIS_REST_URL और UPSTASH_REDIS_REST_TOKEN को Upstash कंसोल में डेटाबेस विवरण पृष्ठ पर पाया जा सकता है।

निर्भरता

निर्भरताएँ स्थापित करें: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 फ़ाइल

इसी तरह, रेडिस एसडीके को कॉन्फ़िगर करें और हैंडलर को निर्यात करें।

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>
  );
}

कार्यप्रवाह

उपयोगकर्ता अभी तक मेटामास्क के माध्यम से कनेक्ट नहीं है। डिफ़ॉल्ट टेम्प्लेट.

उपयोगकर्ता पहली बार Metamask के माध्यम से जुड़ा है। डिफ़ॉल्ट टेम्प्लेट.

• उपयोगकर्ता एक नाम दर्ज करता है जिसे वे प्लेटफॉर्म पर अभिवादन करते समय देखना चाहते हैं।
• उपयोगकर्ता थीम के बीच चयन करता है, अर्थात् हल्का और गहरा।

उपयोगकर्ता वरीयताएँ सेट की गई हैं। अब से, एक ही इंटरफ़ेस प्रदान किए गए वरीयता इंटरफ़ेस का समर्थन करने वाले किसी भी प्लेटफ़ॉर्म में दिखाया जा सकता है। उपयोगकर्ता-अनुकूलित टेम्पलेट।

घटक टेक्स्ट प्रारूप में उपयोगकर्ता द्वारा निर्धारित प्राथमिकताओं को दिखाता है, आप उन्हें अपनी पसंद के अनुसार पार्स कर सकते हैं।

जैसा कि आप इस सरल उदाहरण में देख सकते हैं, आप उपयोगकर्ता को दिखाए जाने वाले किसी भी घटक को पैरामीट्रिज कर सकते हैं। आप हमेशा डिज़ाइन में सुधार करके और मापदंडों की संख्या बढ़ाकर इस परियोजना में जोड़ सकते हैं; हालांकि मौलिक तर्क वही रहता है।

अंतिम शब्द

प्रोजेक्ट का डेमो देखने के लिए, यहां देखें।

समाप्त प्रोजेक्ट देखने के लिए, प्रोजेक्ट के Github रेपो पर जाएं।

वहां, आपको वर्सेल परिनियोजन के लिए एक त्वरित परिनियोजन बटन दिखाई देगा; आपको प्रोजेक्ट को शीघ्रता से परिनियोजित करने देता है, स्वचालित रूप से एक Upstash Redis एकीकरण बनाता है।

हम आपके विचारों और विचारों को सुनने के लिए उत्सुक हैं। आप ट्विटर या कलह के माध्यम से हम तक पहुँच सकते हैं।