feat: add Submarine UI / UX (#37)

* feat: add flipper ui example * feat: add incrementer ui * feat: add basic_contract_caller ui * feat: add contract_transfer example * chore: remove unused js packages * chore: rename contract-terminate -> contract_terminate * feat: format contract names for examples * feat: add contract_terminate example * feat: add erc20 frontend * feat: add erc721 frontend * feat: add submarine navigation * removes outdated duplicate code due to folder renaming * align package, file and folder names * updates author * removes need to compile `ui` package separately * chore: replace deprecated rome with new biome replacement * chore: update instructions in readme * chore: adds lockfile * chore: align use of quotes with biome * chore: consistently sorts imports using biome * chore: ci ignore .vscode folder --------- Co-authored-by: peetzweg/ <[email protected]>
use-ink · Nov 13, 2023 · 254fa73 · 254fa73
1 parent d194f1c
commit 254fa73
Show file tree

Hide file tree

Showing 73 changed files with 6,213 additions and 431 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -49,6 +49,7 @@ jobs:
           dir_names_max_depth: 1
           files_ignore: |
             .github/**
+            .vscode/**
             **/.gitignore
             **/*.md
             multi-contract-caller/**

diff --git a/.gitignore b/.gitignore
@@ -7,8 +7,6 @@
 node_modules/
 /**/dist/
 
-pnpm-lock.yaml
-
 vite.config.ts.timestamp*
 
 # Ignore backup files creates by cargo fmt.

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -1,4 +1,4 @@
 {
-    "recommendations": ["rome.rome"],
-    "unwantedRecommendations": []
-  }
+  "recommendations": ["biomejs.biome"],
+  "unwantedRecommendations": []
+}
diff --git a/README.md b/README.md
@@ -34,17 +34,16 @@ The `.contract` file combines the Wasm and metadata into one file and can be use
 
 1. Install [nodejs](https://nodejs.org/en/) and then install [pnpm](https://pnpm.io/) `npm install -g pnpm`
 2. Install dependencies `pnpm i`
-3. Build the UI package `pnpm build:ui` (You only need to do this once)
-4. Run each example with `pnpm <contract-example-name>`. e.g. `pnpm flipper`
-5. Visit [http://localhost:5173](http://localhost:5173) in your browser.
+3. Run each example with `pnpm <contract-example-name>`. e.g. `pnpm flipper`
+4. Visit [http://localhost:5173](http://localhost:5173) in your browser.
 
 ### Commands
 
-* `pnpm erc20`
-* `pnpm erc721`
 * `pnpm basic-contract-caller`
 * `pnpm contract-terminate`
 * `pnpm contract-transfer`
+* `pnpm erc20`
+* `pnpm erc721`
 * `pnpm flipper`
 * `pnpm incrementer`
 

diff --git a/basic-contract-caller/frontend/package.json b/basic-contract-caller/frontend/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "basic_contract_caller",
+  "name": "basic-contract-caller",
   "private": true,
   "version": "0.1.0",
   "type": "module",

diff --git a/basic-contract-caller/frontend/src/App.tsx b/basic-contract-caller/frontend/src/App.tsx
@@ -1,11 +1,11 @@
-import { Other } from './Other';
-import metadata from './assets/basic_contract_caller.json';
-import { BASIC_CONTRACT_ROCOCO_ADDRESS } from './constants';
 import { useEffect } from 'react';
 import { Button, Card, ConnectButton, InkLayout, formatContractName } from 'ui';
 import { useCall, useContract, useTx, useWallet } from 'useink';
 import { useTxNotifications } from 'useink/notifications';
 import { isPendingSignature, pickDecoded, shouldDisable } from 'useink/utils';
+import { Other } from './Other';
+import metadata from './assets/basic_contract_caller.json';
+import { BASIC_CONTRACT_ROCOCO_ADDRESS } from './constants';
 
 function App() {
   const { account } = useWallet();
@@ -26,7 +26,7 @@ function App() {
       className='md:py-12 md:p-6 p-4 h-screen flex items-center justify-center'
       animationSrc='https://raw.githubusercontent.com/paritytech/ink-workshop/d819d10a35b2ac3d2bff4f77a96701a527b3ad3a/frontend/public/dark-sea-creatures.json'
     >
-      <div className='flex flex-col md:flex-row md:justify-center justify-start items-stretch gap-3'>
+      <div className='flex flex-col justify-center items-center gap-3 h-full'>
         <Card className='p-6 flex flex-col w-full max-w-md backdrop-blur-sm bg-opacity-70'>
           <h1 className='text-2xl font-bold'>
             {formatContractName(metadata.contract.name)}

diff --git a/basic-contract-caller/frontend/src/Other.tsx b/basic-contract-caller/frontend/src/Other.tsx
@@ -1,7 +1,7 @@
-import otherContractMetadata from './assets/other_contract.json';
 import { Card } from 'ui';
 import { useCallSubscription, useContract } from 'useink';
 import { pickDecoded } from 'useink/utils';
+import otherContractMetadata from './assets/other_contract.json';
 
 interface Props {
   address: string;

diff --git a/basic-contract-caller/frontend/src/main.tsx b/basic-contract-caller/frontend/src/main.tsx
@@ -1,12 +1,12 @@
-import App from './App.tsx';
-import './Global.css';
-import metadata from './assets/basic_contract_caller.json';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import 'ui/style.css';
 import { UseInkProvider } from 'useink';
 import { RococoContractsTestnet } from 'useink/chains';
 import { NotificationsProvider } from 'useink/notifications';
+import App from './App.tsx';
+import './Global.css';
+import metadata from './assets/basic_contract_caller.json';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>

diff --git a/basic-contract-caller/frontend/tailwind.config.js b/basic-contract-caller/frontend/tailwind.config.js
@@ -1,2 +1,2 @@
 import config from '../../ui/tailwind.config';
-export default config;
+export default config;
diff --git a/biome.json b/biome.json
@@ -0,0 +1,41 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.0.0/schema.json",
+  "files": {
+    "ignore": [
+      "**/node_modules",
+      ".next",
+      "public",
+      "dist",
+      "**/*.json",
+      "*.yaml",
+      ".vscode"
+    ]
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "formatter": {
+    "enabled": true,
+    "formatWithErrors": false,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 80
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "correctness": {
+        "noUnusedVariables": "error"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single",
+      "jsxQuoteStyle": "single",
+      "trailingComma": "all",
+      "semicolons": "always"
+    }
+  }
+}
diff --git a/contract-terminate/frontend/package.json b/contract-terminate/frontend/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "contract_terminate",
+  "name": "contract-terminate",
   "private": true,
   "version": "0.1.0",
   "type": "module",

diff --git a/contract-terminate/frontend/src/App.tsx b/contract-terminate/frontend/src/App.tsx
@@ -1,4 +1,3 @@
-import metadata from './assets/contract_terminate.json';
 import { useEffect, useMemo } from 'react';
 import {
   Button,
@@ -17,6 +16,7 @@ import {
   planckToDecimalFormatted,
   shouldDisable,
 } from 'useink/utils';
+import metadata from './assets/contract_terminate.json';
 
 // We already deployed the contract Wasm blob on chain. We use this code hash to
 // re-deploy;

diff --git a/contract-terminate/frontend/src/main.tsx b/contract-terminate/frontend/src/main.tsx
@@ -1,12 +1,12 @@
-import App from './App.tsx';
-import './Global.css';
-import metadata from './assets/contract_terminate.json';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import 'ui/style.css';
 import { UseInkProvider } from 'useink';
 import { RococoContractsTestnet } from 'useink/chains';
 import { NotificationsProvider } from 'useink/notifications';
+import App from './App.tsx';
+import './Global.css';
+import metadata from './assets/contract_terminate.json';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>

diff --git a/contract-terminate/frontend/tailwind.config.js b/contract-terminate/frontend/tailwind.config.js
@@ -1,2 +1,2 @@
 import config from '../../ui/tailwind.config';
-export default config;
+export default config;
diff --git a/contract-transfer/frontend/package.json b/contract-transfer/frontend/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "contract_transfer",
+  "name": "contract-transfer",
   "private": true,
   "version": "0.1.0",
   "type": "module",

diff --git a/contract-transfer/frontend/src/App.tsx b/contract-transfer/frontend/src/App.tsx
@@ -1,5 +1,3 @@
-import metadata from './assets/contract_transfer.json';
-import { CONTRACT_ROCOCO_ADDRESS } from './constants';
 import { useMemo, useState } from 'react';
 import {
   Button,
@@ -13,13 +11,15 @@ import {
 import { useBalance, useContract, useTx, useWallet } from 'useink';
 import { useTxNotifications } from 'useink/notifications';
 import {
-  BN,
   decimalToPlanck,
   isPendingSignature,
   planckToDecimal,
   planckToDecimalFormatted,
   shouldDisable,
+  stringNumberToBN,
 } from 'useink/utils';
+import metadata from './assets/contract_transfer.json';
+import { CONTRACT_ROCOCO_ADDRESS } from './constants';
 
 function App() {
   const { account } = useWallet();
@@ -37,7 +37,9 @@ function App() {
 
   const needsMoreFunds = useMemo(
     () =>
-      contractBalance?.freeBalance.lt(new BN(planckAmount?.toString() || '0')),
+      contractBalance?.freeBalance.lt(
+        stringNumberToBN(planckAmount?.toString() || '0'),
+      ),
     [contractBalance?.freeBalance, planckAmount],
   );
 
@@ -46,79 +48,80 @@ function App() {
       className='md:py-12 md:p-6 p-4 h-screen flex items-center justify-center'
       animationSrc='https://raw.githubusercontent.com/paritytech/ink-workshop/d819d10a35b2ac3d2bff4f77a96701a527b3ad3a/frontend/public/dark-sea-creatures.json'
     >
-      <Card className='mx-auto p-6 flex flex-col w-full max-w-md backdrop-blur-sm bg-opacity-70'>
-        <h1 className='text-2xl font-bold'>
-          {formatContractName(metadata.contract.name)}
-        </h1>
+      <div className='flex flex-col justify-center items-center h-full'>
+        <Card className='mx-auto p-6 flex flex-col w-full max-w-md backdrop-blur-sm bg-opacity-70'>
+          <h1 className='text-2xl font-bold'>
+            {formatContractName(metadata.contract.name)}
+          </h1>
 
-        <hgroup className='mt-6 mb-2 ml-2 text-white/80 text-xs'>
-          <h3>
-            Contract Balance:{' '}
-            <b className='uppercase'>
-              {contractBalance
-                ? planckToDecimalFormatted(contractBalance?.freeBalance, {
-                    api: chainContract?.contract.api,
-                    significantFigures: 4,
-                  })
-                : '--'}
-            </b>
-          </h3>
+          <hgroup className='mt-6 mb-2 ml-2 text-white/80 text-xs'>
+            <h3>
+              Contract Balance:{' '}
+              <b className='uppercase'>
+                {contractBalance
+                  ? planckToDecimalFormatted(contractBalance?.freeBalance, {
+                      api: chainContract?.contract.api,
+                      significantFigures: 4,
+                    })
+                  : '--'}
+              </b>
+            </h3>
 
-          <h3>
-            Your Balance:{' '}
-            <b className='uppercase'>
-              {userBalance
-                ? planckToDecimalFormatted(userBalance?.freeBalance, {
-                    api: chainContract?.contract.api,
-                    significantFigures: 4,
-                  })
-                : '--'}
-            </b>
-          </h3>
-        </hgroup>
+            <h3>
+              Your Balance:{' '}
+              <b className='uppercase'>
+                {userBalance
+                  ? planckToDecimalFormatted(userBalance?.freeBalance, {
+                      api: chainContract?.contract.api,
+                      significantFigures: 4,
+                    })
+                  : '--'}
+              </b>
+            </h3>
+          </hgroup>
 
-        <NumberInput
-          disabled={shouldDisable(giveMe)}
-          onChange={(v: number) => setAmount(v)}
-          value={amount}
-          min={1}
-          max={Math.floor(
-            planckToDecimal(
-              contractBalance?.freeBalance,
-              chainContract?.contract.api,
-            ) || 0,
-          )}
-        />
-
-        {account ? (
-          <Button
-            disabled={shouldDisable(giveMe) || needsMoreFunds}
-            onClick={() => giveMe.signAndSend([planckAmount])}
-            className='mt-6'
-          >
-            {isPendingSignature(giveMe)
-              ? 'Please sign transaction...'
-              : shouldDisable(giveMe)
-              ? `Sending you ${amount} ROC...`
-              : `Withdraw ${amount} ROC`}
-          </Button>
-        ) : (
-          <ConnectButton className='mt-6' />
-        )}
+          <NumberInput
+            disabled={shouldDisable(giveMe)}
+            onChange={(v: number) => setAmount(v)}
+            value={amount}
+            min={1}
+            max={Math.floor(
+              planckToDecimal(contractBalance?.freeBalance, {
+                api: chainContract?.contract.api,
+              }) || 0,
+            )}
+          />
 
-        <div className='text-center mt-6'>
-          {needsMoreFunds && (
-            <p className='mb-3'>There are not enough funds.</p>
+          {account ? (
+            <Button
+              disabled={shouldDisable(giveMe) || needsMoreFunds}
+              onClick={() => giveMe.signAndSend([planckAmount])}
+              className='mt-6'
+            >
+              {isPendingSignature(giveMe)
+                ? 'Please sign transaction...'
+                : shouldDisable(giveMe)
+                ? `Sending you ${amount} ROC...`
+                : `Withdraw ${amount} ROC`}
+            </Button>
+          ) : (
+            <ConnectButton className='mt-6' />
           )}
 
-          <Link
-            href={`https://use.ink/faucet?acc=${CONTRACT_ROCOCO_ADDRESS}`}
-            target='_blank'
-          >
-            Add ROC to contract with faucet
-          </Link>
-        </div>
-      </Card>
+          <div className='text-center mt-6'>
+            {needsMoreFunds && (
+              <p className='mb-3'>There are not enough funds.</p>
+            )}
+
+            <Link
+              href={`https://use.ink/faucet?acc=${CONTRACT_ROCOCO_ADDRESS}`}
+              target='_blank'
+            >
+              Add ROC to contract with faucet
+            </Link>
+          </div>
+        </Card>
+      </div>
     </InkLayout>
   );
 }

diff --git a/contract-transfer/frontend/src/main.tsx b/contract-transfer/frontend/src/main.tsx
@@ -1,12 +1,12 @@
-import App from './App.tsx';
-import './Global.css';
-import metadata from './assets/contract_transfer.json';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import 'ui/style.css';
 import { UseInkProvider } from 'useink';
 import { RococoContractsTestnet } from 'useink/chains';
 import { NotificationsProvider } from 'useink/notifications';
+import App from './App.tsx';
+import './Global.css';
+import metadata from './assets/contract_transfer.json';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>