利用 NFT 释放网站的潜力

2022-07-15 16:26

Smart Token Labs

2022-07-15 16:26

来源链接

订阅此专栏

收藏此文章

Token Negotiator（Brand Connect）是 Smart Token Labs 基于 TokenScript 框架创建的的一个新技术型产品。作为一个完全开源的 NPM package 允许任何网站基于此进行链上和链下的 token attestations（验证证明）。

链接：https://www.npmjs.com/package/@tokenscript/token-negotiator

本文旨在是展示如何将 Brand Connect 集成到网站中，从而构建您的第一个 tokenized 的应用网络（ TAPP –我们内部创造使用的词）。在这个过程中，我们将使用受众广泛的文库 React 来演示如何将 token 连接到不同网络的体验和操作。

为了确保能从本篇文章中收获最大的价值，让我们先以 Q & A 的形式来介绍一些基本的概念和会使用的专业术语。

什么是 token？

本文所提及的所有 tokens 都是指的 NFT（在区块链上发行的非同质化代币）或加密创建的不可伪造（复制）的 tokens（此资产主要储存在设备内存、电子邮件或网络存储协议中）。

这些类型的 tokens 可以代表任何数字格式的东西，如汽车钥匙、音乐会门票、艺术品或你的身份（DID）。除此之外，还有许多可能性待发现。

什么是 tokenized 的网络？

Tokenized 的网络是一个将 token 作为主轴的用户体验的革新想法。

什么是 attestation （验证证明）？

Attestation 是指某事的证据或证明。举例来说，你在机场需要出示有效的护照和机票来证明你有资格乘坐飞机。同样的概念适应于 tokenized 的网络，token 的所有权可以通过 attestation （验证证明）后进行后续操作。

为什么考虑使用 tokens ？

Tokens 不受特定场景例用局限或中心化服务的限制
Tokens 可以在任何地方被认证和使用。
Tokens 提供去中心化的安全和隐私类型。
与中心化服务相比，Tokens 给予用户更多的控制权。
通过采用 Tokens ，可以衍生出一种新的互联网形式，使交互操作的用户体验比现有的摩擦减少，并方便用户获得所需服务。

是否有替代方案？

传统的网络服务（通称之为 Web 2.0）提供了各种方法来完成可以用 tokens 完成的解决方案（有一定门槛的体验，创建了一个可以在不同领域使用的证明），然而，我们将在这篇文章中披露的内容将打开你的想象力，一个新的范式，比我们今天知道并使用的网络有着更多的可能性和应用能力。

使用（或不使用）tokens 的风险有什么？

Tokenized 的网络是一个相当新的概念，在这个领域有很多东西需要学习和创建，以了解其全部潜力和使用这种技术的风险。

迄今为止，我们发现，使用 tokens 对于保持想保证其凭证安全的用户和对需求合适的解决方案的企业来说风险更好。

有哪些优点？

对于企业来说，可以通过 NFT 集合从而接触到以前无法发现或者触碰的新受众群体。
作为用户，将能够在许多应用程序中使用相同的 tokens ，减少获取 tokens 授权给网络服务产生的用户摩擦。
对于开发者可以建立新型的应用程序，其中 tokens 的所有权可以作为推动新型体验的基础构建块。

好，接下来让我们正式开始！

首先安装一个新的 React App ，根据以下 command（要求）：

npx create-react-app my-app

一旦完成，改变 directory （目录）

cd my-app

然后

npm run start

现在你应该看到以下内容：

接下来让我们用下面的 command 安装 Token Negotiator (Brand Connector)。

npm i @tokenscript/token-negotiator

“tokenContextProvider.js” as shown in the application directory below.

一旦安装完毕，便可以将一些 tokens 加载到页面中。接下来，在你的目录中创建一个名为 “ tokenContextProvider.js “的脚本，流程下面的应用程序的目录所示：

在这个文件中，我们将配置通过 Reacts ContextProvider API 实现的 library （文库），将回通过 props 向 components（组件）提供 tokens 。

在新创建的文件中加入以下内容：

import React, { createContext, useState, useEffect } from 'react';import { Client } from '@tokenscript/token-negotiator';import "@tokenscript/token-negotiator/dist/theme/style.css";const TokenContext = createContext({   tokens: []});let negotiator;const TokenContextProvider = (props) => {  const [tokens, setTokens] = useState([]);  useEffect(() => {        negotiator.on("tokens-selected", (tokens) => {           let selectedTokensState = [];	      const { selectedTokens } = tokens;      if(selectedTokens["demo-tokens"].tokens) {        selectedTokensState.push(...selectedTokens["demo-tokens"].tokens);	      }	      setTokens(selectedTokensState);    });        }, []);  return (    <TokenNegotiatorInstance render={({ negotiator }) => (      <TokenContext.Provider props={negotiator} value={{ tokens, negotiator }}>        {props.children}      </TokenContext.Provider>    )} />  )}class TokenNegotiatorInstance extends React.Component {    constructor(props) {        super(props);    if(negotiator) return;    negotiator = new Client({      type: 'active',      issuers: [        { collectionID: "demo-tokens", contract: '0x26472AA24D795AbcB687bddb44d733ef55Ebdf09', chain: 'Rinkeby' }      ],      options: {        overlay: {          openingHeading: "Open a new world of discounts available with your tokens.",          issuerHeading: "Discount with your tokens",          repeatAction: "try again",          theme: "light",          position: "bottom-right"        }      },      filter: {}    });    negotiator.negotiate();      }  render() {    return this.props.render({ negotiator: negotiator })  };}export { TokenContext, TokenContextProvider }

改变合约地址’0x264…‘和链’ rinkeby ‘以匹配你拥有的 NFT 所在的智能合约地址和位置。如果并未拥有 NFT ，有很多方法可以在测试网上 mint 币，有的有代码，有的没有代码，如 OpenSea 。

issuers: [  {     collectionID: "demo-tokens",     contract: '0x26472AA24D795AbcB687bddb44d733ef55Ebdf09',     chain: 'rinkeby'   }]

一旦持有了 NFT ，并且同时配置了 Token Negotiator ，接下来我们需要添加四个变化，使 library（文库）能够读取用户的 tokens 。

接下来，在 “App.js “中包括以下更改。连接 library（文库），并在 class element （分类元素）”overlay-tn “中注入了一个标记性的覆盖 component（组件）。

import { TokenContextProvider } from './TokenContextProvider';import StoreFront from './StoreFront';const App = () => {  return (    <TokenContextProvider>      <>        <StoreFront />        <div className="overlay-tn"></div>      </>    </TokenContextProvider>  )}export default App;

在那之后创建一个名为 “StoreFront.js “的新 component（组件），用于显示待售产品的列表。

import React, { useContext } from 'react';import StoreItem from "./StoreItem";import { TokenContext } from "./TokenContextProvider";export default function StoreFront() {  const { tokens } = useContext(TokenContext);  const mockStoreFrontItems = [    { size: "140px", price: 200, src: "https://picsum.photos/id/100/200/300", title: "Lorem" },    { size: "90px", price: 150, src: "https://picsum.photos/id/200/200/300", title: "Aliqua" },    { size: "170px", price: 400, src: "https://picsum.photos/id/300/200/300", title: "Adipiscing" },    { size: "120px", price: 300, src: "https://picsum.photos/id/400/200/300", title: "Sit" },    { size: "100px", price: 600, src: "https://picsum.photos/id/500/200/300", title: "Exercitation" },    { size: "110px", price: 300, src: "https://picsum.photos/id/600/200/300", title: "Consectetur" },  ];    const tokenSelected = tokens.length > 0;  const storeWideDiscount = tokenSelected ? 0.9 : undefined;  return (    <div>      <h1 style={{ textAlign: "center", marginTop: "38px", fontSize: "24px" }}>        The Art Gallery      </h1>      <h2 style={{ textAlign: "center", marginTop: "38px", fontSize: "16px", margin: 0, fontWeight: 400 }}>        Discover original paintings & artwork in our beautiful online collection.      </h2>      <div style={{ display: 'flex', flexFlow: "row wrap", justifyContent: "center", margin: "20px" }}>        {mockStoreFrontItems.map((item, index) => {          return <StoreItem key={index} discount={ storeWideDiscount } item={item} />;        })}      </div>    </div>  );}

最后，创建一个名为 “StoreItem.js “的新组件，将用于显示每个商店产品的数据。

export default function StoreItem({ item, discount }) {  const { price, title, src, size } = item;  const itemPrice = discount ? (price * discount).toFixed(2) : price;  return (    <div style={{ textAlign: "center", margin: "20px" }}>      <p style={{ fontWeight: "800" }}>{title}</p>      <img style={{ border: "4px solid black", width: size }} src={src} />      <div>Price: ${itemPrice}</div>      { discount &&           <span style={{ textDecoration: "line-through" }}> ${price} </span>      }    </div>  );}

配置步骤：基于 Create-React-App / webpack 5 进行改变，或者用我们之前做的完成版过渡。

在 Webpack 的第 5 版中，不再默认提供 Node.js 的配置文件，且要求开发者导入他们需要的配置文件。这影响了许多项目的开发创建，包括 Create-React-App ，不过庆幸的是下面有一个解决方案可以解决这个问题：

https://www.alchemy.com/blog/how-to-polyfill-node-core-modules-in-webpack-5

或者，如果你想不完成这一步可以选择跳到前面的步骤，在以下链接中找到完整的示例代码：

https://github.com/TokenScript/token-negotiator-examples/tree/main/art-gallery-medium-article-website

很好，现在已经完成配置了，我们可以开始测试应用程序：你将会在为应用程序提供服务时看到以下显示：

在项目 Directory（目录）中，在 Command（命令）行上运行