♻️ 📄 Transfer as example (#180)

* 📝 ♻️ Move transfer and tests, add docs

* ✅ Add app testing, refactor ownedTokens method

* 🤖 npm publish version  0.0.4-transfer-as-example.0

* ♻️ Move transfer out, rename v1 to lessen diff

* 🧪 Comments on integration test, mv for clarity

* 📝 Add more docs to transfer method

* ✏️ Fix code example mistake in docs

* 🤖 npm publish version  0.0.4-transfer-as-example.1

* 🔥 Unused npmignore

* 🤖 npm publish version  0.0.4-transfer-as-example.2

* 👷 Try using deployments

* 🤖 npm publish version  0.0.4-transfer-as-example.3

Co-authored-by: mintbaseteam <eng@mintbase.io>

.github/workflows/docs.yml

@@ -1,9 +1,9 @@
-name: Build and Publish Docs
+name: SDK Gitbook Sync
 
 on:
   release:
     types: [released, prereleased]
-  # Remove me: Going rapid fire today on full docs improvement, running each time.
+  # Remove me: Going rapid fire on full docs improvement until we launch
   push:
 
 jobs:

.github/workflows/publish.yml

@@ -1,4 +1,4 @@
-name: Publish Packages to NPM
+name: SDK Check & Publish
 
 on:
   release:
@@ -28,9 +28,26 @@ jobs:
         run: |
           npm ci
           npm run bootstrap
+          npm run lint
           npm run build
           npm run test
 
+      - name: Aggregate LCOV results
+        uses: RauliL/lerna-lcov-aggregate-action@master
+
+      - name: Coveralls
+        uses: coverallsapp/github-action@master
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Deployment Status
+        uses: altinukshini/deployment-action@releases/v1
+        id: deployment
+        with:
+          token: "${{ github.token }}"
+          target_url: https://www.npmjs.com/settings/mintbase-js/packages
+          environment: production
+
       - name: Publish Push Prerelease
         if: ${{ github.event.head_commit.message }}
         run: |
@@ -50,3 +67,21 @@ jobs:
           git commit -m "🤖 Release ${{ github.event.release.tag_name }}"
           lerna publish from-package --yes --dist-tag ${{ github.event.action == 'released' && 'released' || 'prerelease'}}
           git push
+
+      - name: Update deployment status (success)
+        if: success()
+        uses: altinukshini/deployment-status@releases/v1
+        with:
+          token: "${{ github.token }}"
+          target_url: https://www.npmjs.com/settings/mintbase-js/packages
+          state: "success"
+          deployment_id: ${{ steps.deployment.outputs.deployment_id }}
+
+      - name: Update deployment status (failure)
+        if: failure()
+        uses: altinukshini/deployment-status@releases/v1
+        with:
+          token: "${{ github.token }}"
+          target_url: https://www.npmjs.com/settings/mintbase-js/packages
+          state: "failure"
+          deployment_id: ${{ steps.deployment.outputs.deployment_id }}

lerna.json

@@ -2,7 +2,7 @@
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
   "useNx": true,
   "useWorkspaces": true,
-  "version": "0.0.4-publish-on-push.6",
+  "version": "0.0.4-transfer-as-example.3",
   "packages": [
     "packages/*"
   ]

packages/app/components/TransferTest.tsx

@@ -0,0 +1,60 @@
+import { ReactElement, useState, useEffect, SetStateAction } from 'react';
+import { useWallet } from '@mintbase-js/react';
+import { ownedTokens, Token } from '@mintbase-js/data';
+import { execute, transfer } from '@mintbase-js/sdk';
+import type { FinalExecutionOutcome } from '@mintbase-js/sdk';
+
+export const TransferTest = (): ReactElement => {
+  const { selector, activeAccountId } = useWallet();
+  const [isTransferring, setIsTransferring] = useState<boolean>(false);
+  const [transferResult, setTransferResult] = useState<FinalExecutionOutcome>(null);
+  const [token, setToken] = useState<Token>(null);
+  const [error, setError] = useState<Error>(null);
+
+  useEffect(() => {
+    (async function load(): Promise<void> {
+      const result = await ownedTokens(activeAccountId, { limit: 1 })
+        .catch((err: SetStateAction<Error>) => setError(err));
+      setToken(result[0]);
+      return;
+    })();
+  }, []);
+
+  const handleTransfer = async (): Promise<void> => {
+    setIsTransferring(true);
+    const wallet = await selector.wallet();
+    const result = await execute(
+      transfer({
+        nftContractId: token.contractId,
+        transfers: [{
+          receiverId: 'mb_carol.testnet',
+          tokenId: token.tokenId,
+        }],
+      }),
+      { wallet },
+    );
+    setTransferResult(result as FinalExecutionOutcome);
+  };
+
+  if (!token) {
+    return <div>TokenTest Waiting for token owned by {activeAccountId}</div>;
+  }
+
+  return (
+    <div>
+      {error
+        ? <p>{error.message}</p>
+        : null
+      }
+      {isTransferring
+        ? <p>Transferring...</p>
+        // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+        : <button onClick={() => handleTransfer()}>
+            Transfer {token.tokenId} of {token.contractId} to mb_carol.testnet
+        </button>
+      }
+
+      {transferResult ? <div>{JSON.stringify(transferResult)}</div> : null}
+    </div>
+  );
+};

packages/app/package.json

@@ -1,13 +1,13 @@
 {
   "name": "mintbase-next-test-suite",
-  "version": "0.0.4-publish-on-push.6",
+  "version": "0.0.4-transfer-as-example.3",
   "private": true,
   "scripts": {
     "dev": "next dev",
     "lint": "eslint . --fix --ext ts --ext tsx"
   },
   "dependencies": {
-    "@mintbase-js/sdk": "^0.0.4-publish-on-push.6",
+    "@mintbase-js/sdk": "^0.0.4-transfer-as-example.3",
     "next": "12.3.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"

packages/app/pages/index.tsx

@@ -1,8 +1,9 @@
 import { useWallet } from '@mintbase-js/react';
 import type { NextPage } from 'next';
 import Head from 'next/head';
+import { TransferTest } from '../components/TransferTest';
 import styles from '../styles/Home.module.css';
-import { callContractMethod, MAX_GAS, ONE_YOCTO } from '@mintbase-js/sdk';
+
 const Home: NextPage = () => {
   const {
     connect,
@@ -11,6 +12,7 @@ const Home: NextPage = () => {
     selector,
     // isConnected,
     isWaitingForConnection,
+    isWalletSelectorSetup,
     signMessage,
   } = useWallet();
 
@@ -22,22 +24,6 @@ const Home: NextPage = () => {
       meta:JSON.stringify({ type: 'signature' }),
     });
   };
-
-  const callTransferTest = async (): Promise<void> => {
-    const result = await callContractMethod({
-      signerId: activeAccountId,
-      contractAddress: 'nobase.mintspace2.testnet',
-      methodName: 'nft_transfer',
-      args: {
-        'receiver_id': 'benipsen.testnet',
-        'token_id': '0',
-      },
-      gas: MAX_GAS,
-      deposit: ONE_YOCTO,
-    }, { wallet: await selector.wallet() });
-    console.log('got result!', result);
-  };
-
   return (
     <div className={styles.container}>
       <Head>
@@ -58,30 +44,45 @@ const Home: NextPage = () => {
           This is a test suite for development and testing with NextJS.<br />
         </p>
 
-        {isWaitingForConnection ? <div>Waiting for connetcion to be established...</div> : null}
+        {isWaitingForConnection ? <div>Waiting for a wallet connection...</div> : null}
 
-        {activeAccountId ?
-          <div className={styles.description}>
-            <h2>You are logged in as {activeAccountId}</h2>
-            <button className={styles.button} onClick={callTransferTest}>
-                TRANSFER CALL
-            </button>
-            <button className={styles.button} onClick={disconnect}>
-                DISCONNECT
-            </button>
+        {isWalletSelectorSetup
+          ?
+          <div>
+            {activeAccountId
+              ?
+              <div className={styles.description}>
+                <h2>You are logged in as {activeAccountId}</h2>
+                <button className={styles.button} onClick={disconnect}>
+                      DISCONNECT
+                </button>
+              </div>
+              :
+              <div className={styles.description}>
+                <h2>To continue, login with NEAR</h2>
+                <button className={styles.button} onClick={connect}>
+                      CONNECT
+                </button>
+              </div>
+            }
           </div>
           :
-          <div className={styles.description}>
-            <h2>To continue, login with NEAR</h2>
-            <button className={styles.button} onClick={connect}>
-                CONNECT
-            </button>
-          </div>
+          <div>Waiting for wallet selector components...</div>
         }
 
-        {activeAccountId && <button className={styles.button} onClick={signMessageTest}>
-          SIGN MESSAGE
-        </button>}
+
+        {activeAccountId ?
+          <button className={styles.button} onClick={signMessageTest}>
+            SIGN MESSAGE
+          </button>
+          : null
+        }
+
+        <h2>Test Components</h2>
+        {activeAccountId ?
+          <TransferTest />
+          : null
+        }
 
       </main>
 

packages/app/styles/globals.css

@@ -24,3 +24,8 @@ a {
     background: black;
   }
 }
+
+button {
+  padding: 10px 50px;
+  margin: 10px 10px 0 0;
+}

packages/auth/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mintbase-js/auth",
-  "version": "0.0.4-publish-on-push.6",
+  "version": "0.0.4-transfer-as-example.3",
   "description": "Wallet and auth functions for Mintbase JS SDK",
   "main": "lib/index.js",
   "scripts": {
@@ -19,7 +19,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@mintbase-js/sdk": "^0.0.4-publish-on-push.6",
+    "@mintbase-js/sdk": "^0.0.4-transfer-as-example.3",
     "@near-wallet-selector/coin98-wallet": "^7.2.0",
     "@near-wallet-selector/core": "^7.1.0",
     "@near-wallet-selector/default-wallets": "^7.2.0",

packages/data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mintbase-js/data",
-  "version": "0.0.4-publish-on-push.6",
+  "version": "0.0.4-transfer-as-example.3",
   "description": "Query wrappers for  Mintbase JS SDK",
   "main": "lib/index.js",
   "scripts": {

packages/data/src/api/ownedTokens/ownedTokens.ts

@@ -1,28 +1,15 @@
-import { Pagination } from '../../types';
+import { Pagination, Token } from '../../types';
 import { fetchGraphQl } from '../../graphql/fetch';
 import { ownedTokensQuery } from './ownedTokens.query';
 
-export type OwnedTokens = {
-  lastTransferredAt: string;
-  tokenId: string;
-  contractId: string;
-  baseUri: string;
-  metadataId: string;
-  title: string;
-  minter: string;
-  media: string;
-  document: string;
-  animationUrl: string;
-}
-
 export type OwnedTokensQueryResult = {
-  tokens: OwnedTokens[];
+  tokens: Token[];
 }
 
 export const ownedTokens = async (
   ownerId: string,
   { limit, offset = 0 }: Pagination,
-): Promise<OwnedTokens[]> => {
+): Promise<Token[]> => {
   const { data, error } = await fetchGraphQl<OwnedTokensQueryResult>({
     query: ownedTokensQuery,
     variables: {

packages/data/src/constants.ts

@@ -1,4 +1,6 @@
 export type NearDataEnv = 'mainnet' | 'testnet' | 'sandbox';
-export const NEAR_DATA_ENV = process.env.NEAR_DATA_ENV || 'mainnet';
+export const NEAR_DATA_ENV = process.env.NEAR_DATA_ENV ||
+  process.env.NEXT_PUBLIC_NEAR_DATA_ENV ||
+  'mainnet';
 export const GRAPHQL_ENDPOINT = `https://interop-${NEAR_DATA_ENV}.hasura.app/v1/graphql`;
 export const QUERY_OPS_PREFIX = 'mintbase_js_data_';

packages/data/src/index.ts

@@ -1,3 +1,4 @@
 export * from './constants';
-export * from './graphql/index';
 export * from './api/index';
+export * from './graphql/index';
+export * from './types';

packages/data/src/types.ts

@@ -3,3 +3,16 @@ export type Pagination = {
   limit: number;
   offset?: number;
 }
+
+export type Token = {
+  lastTransferredAt: string;
+  tokenId: string;
+  contractId: string;
+  baseUri: string;
+  metadataId: string;
+  title: string;
+  minter: string;
+  media: string;
+  document: string;
+  animationUrl: string;
+}

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mintbase-js/react",
-  "version": "0.0.4-publish-on-push.6",
+  "version": "0.0.4-transfer-as-example.3",
   "description": "React app tools for  Mintbase JS SDK",
   "main": "lib/index.js",
   "scripts": {