3box-profile-edit-react 中文文档教程

Question

3Box Profile Edit Plugin ????

3box-profile-edit-react 节点包是一个嵌入式 React 组件，它为 Web3 开发人员提供 UI 和逻辑，用于在他们的用户配置文件中编辑用户配置文件以太坊应用。 使用 text、textarea 和 select 选项，在基本输入字段之上快速添加与您的 dapp 相关的可自定义字段（下拉菜单) 样式输入。 3Box Edit Profile 插件是使用 3Box 基础架构构建的。 阅读 docs.3box.io 上的文档。

Try the demo here

How it Works

Architecture

Edit Profile 插件实现了简单的set & Profiles API 和 get 方法.3box.io/api/storage">Spaces API 用于标准字段（name、image、coverPhoto、表情符号、description）取决于用户选择的默认配置文件（3Box 或 App），但只会使用开发人员添加的自定义字段的 Spaces API 作为 prop 传递给组件。 这两种方法都可以通过 3Box.js SDK 获得。 在用户设置了他们想要使用的默认配置文件后，通过在空间的公共存储中为键 isAppProfileDefault 设置一个布尔值，dapp 应该从 dapp 的其他地方适当地获取该配置文件。

Authentication

在第一次渲染 Edit Profile 组件之前，dapp 应该已经运行了 const box = await Box.openBox(userAddress, ethereumProvider) 和 const space = await box.openSpace(spaceName)< /code> 并将 box 和 space 对象作为同名的道具传递。



Getting Started

1. Install the component
2. Configure application settings and props to component
3. Usage
4. Display correct profile in your app

1. Install the component

npm i -S 3box-profile-edit-react

2. Configure application settings and props to component

首先，为您的应用程序的 3Box 空间选择一个名称。

虽然您可以自由地为您的应用程序空间选择您喜欢的任何名称，但我们建议使用您的应用程序的名称。 如果您的应用程序已经有一个 3Box 空间，欢迎您将同一个空间用于聊天框。

然后，配置要添加到组件的自定义字段

customFields 属性必须接收一个数组以下结构中的 任意 个对象：

    { // for a field with a text input
        inputType: 'text',
        key: 'backupAddress', // the key used to save the value
        field: 'Backup Address' // how to display the key in the UI
      }, 

      { // for a field with a textarea input
        inputType: 'textarea',
        key: 'spiritCryptoKittie',
        field: 'Spirit CryptoKitty'
      },

      { // for a field with a dropdown input
        inputType: 'dropdown',
        key: 'preferredCoin',
        field: 'Preferred Coin',
        options: [{ // dropdown input requires an array of objects
          value: 'eth', // value passed after selection
          display: 'Ethereum' // what the user will see in the dropdown
        }, {
          value: 'btc',
          display: 'Bitcoin'
        }, {
          value: 'ltc',
          display: 'Litecoin'
        }]
      }

Edit Profile 组件标配 Name、Emoji 和 Description 字段。 该组件默认使用 3Box 配置文件（因为空间中的 isAppProfileDefault 布尔值仍未定义）。 然而，传递给 customFields 的字段将始终保存到应用程序的空间中。

3. Usage

编辑配置文件组件当然可以以开发人员喜欢的任何方式使用，但我们建议将其用于开发人员设计的专用编辑配置文件页面或弹出模式（未包含）中。 请记住，box 和 space 实例都必须在安装之前传递给组件。

Example

import EditProfile from '3box-profile-edit-react';

const MyComponent = ({ customFields, box, space, myAddress, myProfile, redirectFn }) => (
    <EditProfile
        // required
        box={box}
        space={space}
        currentUserAddr={myAddress}

        // optional
        customFields={customFields}
        currentUser3BoxProfile={myProfile}
        redirectFn={redirectFn}
    />
);

4. Display correct profile in your app

一旦用户选择了默认配置文件（3Box 或应用程序），该决定应反映在您的 dapp 的其他地方。 为此，您应该检查 isAppProfileDefault 标志，然后在字段 name、image 的相应配置文件上调用 get 、coverPhoto、emoji 和 description。 但是，添加到“编辑配置文件”组件的自定义字段都保存到您的 dapp 使用的 space 中的应用程序配置文件中，应该从那里获取。

检查并从适当的默认配置文件中获取应该看起来像这样：

  const isAppProfileDefault = await space.public.get('isAppProfileDefault');

  let profile;
  if (isAppProfileDefault) {
    profile = await Box.getProfile(currentUserAddr);
  } else {
    profile = await space.public.all();
  }

  this.setState({
    name: profile.name,
    image: profile.image,
    coverPhoto: profile.coverPhoto,
    emoji: profile.emoji,
    description: profile.description,
  })

Prop Types

Property	Type	Required	Description
box	Object	True	The box instance returned from running await Box.openBox(address, web3) somewhere in your dApp.
space	Object	True	The space instance returned from running await box.openSpace(spaceName) somewhere in your dApp.
currentUserAddr	String (Ethereum Address)	True	The current user's Ethereum address. Used to fetch the user's profile if it's not provided and for other various uses in the component.
customFields	Array		An array of any amount of objects structured in one of three ways outlined above.
currentUser3BoxProfile	Object		If passed, it must be the object returned from calling const currentUser3BoxProfile = await Box.getProfile(myAddress);. If this is not passed, the component runs the same static method using the currentUserAddr prop
redirectFn	Function		A function that runs after the user hits cancel. If no redirect function has been provided, then the cancel button will not be present in the form. The user's ethereum address will be passed as a param in the event that the dapp uses this in the route
onSaveComplete	Function		A function that runs after all updated fields in the form have been saved. You may also pass your redirect function to this prop should you choose to. If no function is passed to this prop, the form will save as usual.

License

麻省理工学院