feat: add basic_contract_caller ui

use-ink · Nov 9, 2023 · e0e2a1e · e0e2a1e
1 parent 0ec6676
commit e0e2a1e
Show file tree

Hide file tree

Showing 28 changed files with 1,181 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -39,6 +39,12 @@ The `.contract` file combines the Wasm and metadata into one file and can be use
 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 flipper`
+* `pnpm incrementer`
+* `pnpm contract_transfer`
+
 All examples are built with [useink](https://use.ink/frontend/overview), a React hooks library built by the ink! team.
 
 ## License

diff --git a/basic-contract-caller/lib.rs b/basic-contract-caller/lib.rs
@@ -37,5 +37,12 @@ mod basic_contract_caller {
             self.other_contract.flip();
             self.other_contract.get()
         }
+
+        /// Get the address of the other contract after it has been instantiated. We can
+        /// use this so we can call the other contract on the frontend.
+        #[ink(message)]
+        pub fn other(&mut self) -> AccountId {
+            self.other_contract.account_id()
+        }
     }
 }
diff --git a/basic-contract-caller/other_contract/lib.rs b/basic-contract-caller/other_contract/lib.rs
@@ -29,5 +29,10 @@ mod other_contract {
         pub fn get(&self) -> bool {
             self.value
         }
+
+        #[ink(message)]
+        pub fn account_id(&self) -> AccountId {
+            self.env().account_id()
+        }
     }
 }
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,30 @@
+{
+  "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",
+    "@typescript-eslint/eslint-plugin": "^5.59.0",
+    "@typescript-eslint/parser": "^5.59.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.38.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "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,61 @@
+import { Other } from './Other';
+import basicContractMetadata from './assets/basic_contract_caller.json';
+import { BASIC_CONTRACT_ROCOCO_ADDRESS } from './constants';
+import { useEffect } from 'react';
+import { Button, Card, ConnectButton, InkLayout } 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,
+    basicContractMetadata,
+  );
+  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'>
+            {basicContractMetadata.contract.name.toUpperCase()}
+          </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>
+  );
+};