feat: wip setup for immutable records according to designs

kadena-community · Oct 4, 2023 · 492c9e8 · 492c9e8
1 parent 8f22363
commit 492c9e8
Show file tree

Hide file tree

Showing 31 changed files with 1,551 additions and 9 deletions.
diff --git a/packages/apps/immutable-records/.eslintrc.cjs b/packages/apps/immutable-records/.eslintrc.cjs
@@ -6,5 +6,12 @@ module.exports = {
   parserOptions: { tsconfigRootDir: __dirname },
   rules: {
     '@kadena-dev/typedef-var': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/naming-convention': 'off',
+    '@rushstack/no-new-null': 'off',
+    '@typescript-eslint/typedef': 'off',
+    '@typescript-eslint/strict-boolean-expressions': 'off',
+    // TODO: fix tsconfig paths configuration for eslint
+    'import/no-unresolved': 'off',
   },
 };
diff --git a/packages/apps/immutable-records/README.md b/packages/apps/immutable-records/README.md
@@ -16,10 +16,6 @@ A auctioning dApp for NFTs.
 First, run the development server:
 
 ```sh
-npm run dev
-# or
-yarn dev
-# or
 pnpm dev
 ```
 

diff --git a/packages/apps/immutable-records/next.config.mjs b/packages/apps/immutable-records/next.config.mjs
@@ -7,6 +7,13 @@ const nextConfig = {
   experimental: {
     appDir: true,
   },
+  images: {
+    remotePatterns: [
+      {
+        hostname: 'picsum.photos',
+      },
+    ],
+  },
 };
 
 export default withVanillaExtract(nextConfig);
diff --git a/packages/apps/immutable-records/package.json b/packages/apps/immutable-records/package.json
@@ -18,12 +18,19 @@
     "test": "echo 'boilerplate'"
   },
   "dependencies": {
+    "@kadena/client": "workspace:*",
     "@kadena/react-ui": "workspace:*",
     "@vanilla-extract/css": "1.12.0",
     "mini-css-extract-plugin": "2.7.6",
+    "@walletconnect/modal": "~2.6.1",
+    "@walletconnect/sign-client": "~2.8.1",
+    "clsx": "^2.0.0",
+    "evt": "^2.5.2",
     "next": "13.4.5",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-hook-form": "~7.45.0",
+    "usehooks-ts": "^2.9.1"
   },
   "devDependencies": {
     "@kadena-dev/eslint-config": "workspace:*",
@@ -39,6 +46,8 @@
     "@vanilla-extract/next-plugin": "2.3.1",
     "eslint": "^8.45.0",
     "eslint-config-next": "13.4.5",
+    "lokijs": "^1.5.12",
+    "pino-pretty": "^10.2.0",
     "prettier": "~3.0.0",
     "prettier-plugin-packagejson": "^2.4.5",
     "typescript": "5.2.2"

diff --git a/packages/apps/immutable-records/src/app/layout.css.ts b/packages/apps/immutable-records/src/app/layout.css.ts
@@ -0,0 +1,13 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const bodyClass = style([
+  {
+    margin: '0',
+    background: '#1E1726',
+    height: '100vh',
+  },
+]);
+
+globalStyle('*', {
+  boxSizing: 'border-box',
+});
diff --git a/packages/apps/immutable-records/src/app/layout.tsx b/packages/apps/immutable-records/src/app/layout.tsx
@@ -1,14 +1,22 @@
+import { bodyClass } from './layout.css';
+
+import { WalletConnectProvider } from '@/context/connect.context';
 import type { FC, PropsWithChildren } from 'react';
 
 export const metadata = {
   title: 'Immutable Records',
   description: 'Immutable Records',
 };
 
+const PROJECT_ID = process.env.NEXT_PUBLIC_PROJECT_ID!;
+const RELAY_URL = process.env.NEXT_PUBLIC_RELAY_URL!;
+
 const RootLayout: FC<PropsWithChildren> = ({ children }) => {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <WalletConnectProvider projectId={PROJECT_ID} relayUrl={RELAY_URL}>
+        <body className={bodyClass}>{children}</body>
+      </WalletConnectProvider>
     </html>
   );
 };

diff --git a/packages/apps/immutable-records/src/components/Accounts/Accounts.css.ts b/packages/apps/immutable-records/src/components/Accounts/Accounts.css.ts
@@ -0,0 +1,9 @@
+import { sprinkles } from '@kadena/react-ui/theme';
+
+import { style } from '@vanilla-extract/css';
+
+export const container = style([
+  sprinkles({
+    marginY: '$4',
+  }),
+]);
diff --git a/packages/apps/immutable-records/src/components/Accounts/Accounts.tsx b/packages/apps/immutable-records/src/components/Accounts/Accounts.tsx
@@ -0,0 +1,144 @@
+'use client';
+
+import { Option, Select } from '@kadena/react-ui';
+
+import { container } from './Accounts.css';
+
+import { useWalletConnect } from '@/hooks/connect.hook';
+import type { BalanceItem } from '@/services/chainweb/chainweb';
+import { getBalance } from '@/services/chainweb/chainweb';
+import type { KadenaAccount } from '@/services/connect/connect.client';
+import type { FC } from 'react';
+import { useEffect, useState } from 'react';
+
+const KadenaAccountBalance: FC<{
+  account: KadenaAccount;
+  network: string;
+  chain: string;
+}> = ({ account, network, chain }) => {
+  const [balance, setBalance] = useState<string | null>(null);
+
+  useEffect(() => {
+    console.log(`fetch balance ${account.name}, ${network}, ${chain}`);
+    getBalance(account.name, network, chain as BalanceItem['chain'])
+      .then((balance) => {
+        setBalance(balance.balance);
+      })
+      .catch((e) => {});
+  }, [account.name, chain, network]);
+
+  return <span>{balance ?? 'loading...'}</span>;
+};
+
+const KadenaAccounts: FC<{
+  selected: string | null;
+  accounts: Record<string, KadenaAccount[] | undefined>;
+}> = ({ selected, accounts }) => {
+  if (!selected) {
+    return <span>No accounts selected</span>;
+  }
+  // console.log('test', accounts, selected);
+  if (!accounts[selected]) {
+    return <span>Loading accounts...</span>;
+  }
+
+  const network = 'testnet04';
+
+  return (
+    <div className={container}>
+      <table>
+        <thead>
+          <tr>
+            <td>account</td>
+            <td>balance</td>
+          </tr>
+        </thead>
+        <tbody>
+          {accounts[selected]?.map((account) => (
+            <tr key={account.name}>
+              <td>{account.name}</td>
+              {account.chains.map((chain) => (
+                <td key={`account-${account.name}-${chain}`}>
+                  <KadenaAccountBalance
+                    account={account}
+                    network={network}
+                    chain={chain}
+                  />
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export const Accounts: FC = () => {
+  const {
+    sessionTopic,
+    accounts,
+    kadenaAccounts,
+    fetchKadenaAccounts,
+    setNetwork,
+    networks,
+    network,
+  } = useWalletConnect();
+
+  const [selectedAccount, setSelectedAccount] = useState<string>('');
+  const hasSession = !!sessionTopic;
+
+  // Select first network and account on load
+  useEffect(() => {
+    if (!selectedAccount) {
+      setSelectedAccount(accounts[0]);
+    }
+  }, [selectedAccount, accounts]);
+
+  useEffect(() => {
+    if (network && selectedAccount) {
+      fetchKadenaAccounts(selectedAccount).catch((e) => {});
+    }
+  }, [fetchKadenaAccounts, network, selectedAccount]);
+
+  return (
+    <div>
+      <h3>Select account</h3>
+      {!hasSession ? (
+        'Not connected to wallet'
+      ) : (
+        <div style={{ display: 'flex' }}>
+          <Select
+            id="network"
+            ariaLabel="network"
+            value={network ?? ''}
+            onChange={(e) => setNetwork(e.target.value)}
+          >
+            {networks.map((network) => (
+              <Option key={network} value={network}>
+                {network}
+              </Option>
+            ))}
+          </Select>
+          <Select
+            id="account"
+            ariaLabel="account"
+            value={selectedAccount}
+            onChange={(e) => setSelectedAccount(e.target.value)}
+          >
+            {accounts.map((account) => (
+              <Option key={account} value={account}>
+                {account}
+              </Option>
+            ))}
+          </Select>
+        </div>
+      )}
+
+      <div className={container}>
+        <h3>Selected accounts</h3>
+        <KadenaAccounts selected={selectedAccount} accounts={kadenaAccounts} />
+      </div>
+    </div>
+  );
+};
diff --git a/packages/apps/immutable-records/src/components/BackgroundGrid/BackgroundGrid.css.ts b/packages/apps/immutable-records/src/components/BackgroundGrid/BackgroundGrid.css.ts
@@ -0,0 +1,25 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const container = style([
+  {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    alignContent: 'space-around',
+    justifyContent: 'center',
+    flexWrap: 'wrap',
+    overflow: 'hidden',
+  },
+]);
+
+globalStyle(`${container} > div`, {
+  flexBasis: '2.5%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  fontSize: '24px',
+  fontWeight: 'bold',
+  color: '#33263f',
+});
diff --git a/packages/apps/immutable-records/src/components/BackgroundGrid/BackgroundGrid.tsx b/packages/apps/immutable-records/src/components/BackgroundGrid/BackgroundGrid.tsx
@@ -0,0 +1,11 @@
+import { container } from './BackgroundGrid.css';
+
+export const BackgroundGrid = () => {
+  return (
+    <div className={container}>
+      {Array.from({ length: 800 }, (_, i) => i).map((i) => (
+        <div key={i}>+</div>
+      ))}
+    </div>
+  );
+};
diff --git a/packages/apps/immutable-records/src/components/Bid/Bid.tsx b/packages/apps/immutable-records/src/components/Bid/Bid.tsx
@@ -0,0 +1,21 @@
+import type { FC } from 'react';
+import { useForm } from 'react-hook-form';
+
+interface BidForm {
+  amount: number;
+}
+
+export const Bid: FC = () => {
+  const form = useForm({
+    defaultValues: {
+      amount: 0,
+    } as BidForm,
+  });
+
+  return (
+    <form>
+      <input type="number" {...form.register('amount')} />
+      <button type="submit">Bid</button>
+    </form>
+  );
+};
diff --git a/packages/apps/immutable-records/src/components/Connect/Connect.css.ts b/packages/apps/immutable-records/src/components/Connect/Connect.css.ts
@@ -0,0 +1,33 @@
+import { sprinkles } from '@kadena/react-ui/theme';
+
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const container = style([sprinkles({})]);
+
+export const debugContainerButton = style([
+  sprinkles({
+    marginTop: '$2',
+  }),
+]);
+
+export const debugContainer = style([
+  sprinkles({
+    marginY: '$2',
+    backgroundColor: '$gray40',
+    borderColor: '$gray60',
+    borderStyle: 'solid',
+    borderWidth: '$md',
+    padding: '$2',
+  }),
+  {
+    display: 'inline-block',
+  },
+]);
+
+export const tooltipContainer = style({});
+
+globalStyle(`${tooltipContainer} div`, {
+  zIndex: 2,
+  backgroundColor: '#e88e00',
+  borderColor: '#e88e00',
+});