use-ink · peetzweg · Nov 10, 2023 · Jun 16, 2023 · Jun 16, 2023 · Jun 16, 2023
diff --git a/.gitignore b/.gitignore
@@ -3,7 +3,13 @@
 /**/target/
 /design/
 .idea/
+.vite/
+node_modules/
+/**/dist/
 
+pnpm-lock.yaml
+
+vite.config.ts.timestamp*
 
 # Ignore backup files creates by cargo fmt.
 **/*.rs.bk

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,4 @@
+{
+    "recommendations": ["rome.rome"],
+    "unwantedRecommendations": []
+  }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,13 @@
+{
+    "editor.codeActionsOnSave": {
+      "source.organizeImports.rome": true
+    },
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "rome.rome",
+    "[typescript]": {
+      "editor.defaultFormatter": "rome.rome"
+    },
+    "[typescriptreact]": {
+      "editor.defaultFormatter": "rome.rome"
+    }
+  }
diff --git a/README.md b/README.md
@@ -30,6 +30,26 @@ To build a single example and generate the contracts Wasm file, navigate to the
 You should now have an optimized `<contract-name>.wasm` file, a `metadata.json` file and a `<contract-name>.contract` file in the `target` folder of your contract.
 The `.contract` file combines the Wasm and metadata into one file and can be used for instantiation.
 
+## Running front end dApp examples
+
+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.
+
+### Commands
+
+* `pnpm basic_contract_caller`
+* `pnpm contract_terminate`
+* `pnpm contract_transfer`
+* `pnpm erc20`
+* `pnpm erc721`
+* `pnpm flipper`
+* `pnpm incrementer`
+
+All examples are built with [useink](https://use.ink/frontend/overview), a React hooks library built by the ink! team.
+
 ## License
 
 The examples in this folder are released into the public domain.

diff --git a/basic_contract_caller/frontend/.gitignore b/basic_contract_caller/frontend/.gitignore
@@ -0,0 +1,21 @@
+# Logs
+logs
+*.log
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/basic_contract_caller/frontend/README.md b/basic_contract_caller/frontend/README.md
@@ -0,0 +1,4 @@
+# Have Questions?
+
+For any questions about building front end applications with [useink](https://use.ink/frontend/overview/), join the [Element chat](https://matrix.to/#/%23useink:parity.io).
+
diff --git a/basic_contract_caller/frontend/index.html b/basic_contract_caller/frontend/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ink! Examples</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/basic_contract_caller/frontend/package.json b/basic_contract_caller/frontend/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "basic_contract_caller",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "ui": "workspace:ui@*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.37",
+    "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-react": "^4.0.0",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.38.0",
+    "postcss": "^8.4.24",
+    "tailwindcss": "^3.3.2",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.9"
+  }
+}
diff --git a/basic_contract_caller/frontend/postcss.config.js b/basic_contract_caller/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/basic_contract_caller/frontend/public/logo.svg b/basic_contract_caller/frontend/public/logo.svg
diff --git a/basic_contract_caller/frontend/src/App.tsx b/basic_contract_caller/frontend/src/App.tsx
@@ -0,0 +1,58 @@
+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';
+
+function App() {
+  const { account } = useWallet();
+  const basicContract = useContract(BASIC_CONTRACT_ROCOCO_ADDRESS, metadata);
+  const flipAndGet = useTx<boolean>(basicContract, 'flipAndGet');
+  useTxNotifications(flipAndGet);
+
+  const other = useCall<string>(basicContract, 'other');
+
+  useEffect(() => {
+    other?.send([], { defaultCaller: true });
+  }, [other.send]);
+
+  const otherAddress = pickDecoded(other.result);
+
+  return (
+    <InkLayout
+      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'>
+        <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)}
+          </h1>
+
+          {account ? (
+            <Button
+              disabled={shouldDisable(flipAndGet)}
+              onClick={() => flipAndGet.signAndSend()}
+              className='mt-6'
+            >
+              {isPendingSignature(flipAndGet)
+                ? 'Please sign transaction...'
+                : shouldDisable(flipAndGet)
+                ? 'Flipping...'
+                : 'Flip Other Contract'}
+            </Button>
+          ) : (
+            <ConnectButton className='mt-6' />
+          )}
+        </Card>
+
+        {otherAddress && <Other address={otherAddress} />}
+      </div>
+    </InkLayout>
+  );
+}
+
+export default App;
diff --git a/basic_contract_caller/frontend/src/Global.css b/basic_contract_caller/frontend/src/Global.css
@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+    background-color: #1A1452;
+}
diff --git a/basic_contract_caller/frontend/src/Other.tsx b/basic_contract_caller/frontend/src/Other.tsx
@@ -0,0 +1,30 @@
+import otherContractMetadata from './assets/other_contract.json';
+import { Card } from 'ui';
+import { useCallSubscription, useContract } from 'useink';
+import { pickDecoded } from 'useink/utils';
+
+interface Props {
+  address: string;
+}
+
+export const Other: React.FC<Props> = ({ address }) => {
+  const otherContract = useContract(address, otherContractMetadata);
+  const getOtherSub = useCallSubscription<boolean>(otherContract, 'get', [], {
+    defaultCaller: true,
+  });
+
+  return (
+    <Card className='p-6 flex flex-col w-full max-w-md backdrop-blur-sm bg-opacity-70'>
+      <h1 className='text-2xl font-bold'>
+        {otherContractMetadata.contract.name.toUpperCase()}
+      </h1>
+
+      <p className='mt-6'>
+        Flipped:{' '}
+        <b className='uppercase'>
+          {pickDecoded(getOtherSub.result)?.toString()}
+        </b>
+      </p>
+    </Card>
+  );
+};