利用 NFT 释放网站的潜力

July 15th, 2022

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 ，不过庆幸的是下面有一个解决方案可以解决这个问题：

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

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

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

npm run start

1. 当点击 Token Negotiator 组件 fab 按钮时，它将显示围绕 tokens 的使用时所需配置全部细节。

2.接下来，终端用户将需要连接他们的钱包，以便于在那里可以找到他们的 tokens 。

3. 用户之后可以选择将他们的哪些 tokens 集合加载到网站中。在这个例子中，只使用了一个 token 的集合。在现实世界的中，你可能是希望包含几个不同的用途功能，在用户的网络体验中，tokens 可以直接开发不同的功能。

4.现在，终端用户可以将他们的 tokens 加载到网站上进而享有折扣。这种技术可用于网站企业为特定系列的 tokens 持有者提供的任何特别的服务。

总结来说

在本篇，我们展示了如何在 React JS 项目中安装 Token Negotiator （Brand Connect ），这使特定的 NFT 集合的所有者能够启用折扣或者别的专属服务。

我们希望这篇文章能给你带来一些启发，并通过使用 TokenScript 的技术框架，赋能 tokens 有无限的可能性。

" TokenScript 将在 Web3 的未来为 tokens 的可组合性提供一个新的标准，在那里，tokens 像网页一样无处不在，tokens 是所有权、身份和交互的主要对象。" -- CTO Weiwu

感谢阅读

我们愿景是建立一个开源的技术从而为所有人建立一个更好的网络。

请不要介意在下方分享任何您的反馈和想法。我们将很快推出另一篇文章，来解释链下 tokens 的使用，这些 tokens 是使用加密技术设计的，但无需使用学习区块链。