Adding in application skeleton

app/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

app/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

app/README.md

@@ -0,0 +1,11 @@
+## Getting Started
+
+```bash
+npm install
+```
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

app/components/cardano-wallet/index.tsx

@@ -0,0 +1,76 @@
+import { useEffect, useState } from 'react';
+import { useWallet, useWalletList } from '@meshsdk/react';
+import { MenuItem } from './menu-item';
+import { WalletBalance } from './wallet-balance';
+
+interface CardanoWalletProps {
+  label?: string;
+  onConnected?: () => void;
+  isDark?: boolean;
+}
+
+export const CardanoWallet: React.FC<CardanoWalletProps> = ({
+  label = 'Connect Wallet',
+  onConnected,
+}) => {
+  const wallets = useWalletList();
+  const [hideMenuList, setHideMenuList] = useState<boolean>(true);
+  const { connect, connecting, connected, disconnect, name } = useWallet();
+
+  useEffect(() => {
+    if (connected && onConnected) {
+      onConnected();
+    }
+  }, [connected, onConnected]);
+
+  const bgClass = 'blue-bg dark-text';
+
+  return (
+    <div className="w-fit relative" onMouseEnter={() => setHideMenuList(false)} onMouseLeave={() => setHideMenuList(true)}>
+  <button
+    type="button"
+    className={`flex items-center justify-center w-30 px-4 py-2 rounded font-bold ${bgClass}`}
+    onClick={() => setHideMenuList(!hideMenuList)}
+  >
+    <WalletBalance
+      name={name}
+      connected={connected}
+      connecting={connecting}
+      label={label}
+    />
+  </button>
+  <div
+    className={`absolute rounded text-center w-60 ${bgClass} ${hideMenuList ? 'hidden' : ''}`}
+  >
+    {!connected && wallets.length > 0 ? (
+      <>
+        {wallets.map((wallet, index) => (
+          <MenuItem
+            key={index}
+            icon={wallet.icon}
+            label={wallet.name}
+            action={() => {
+              connect(wallet.name);
+              setHideMenuList(!hideMenuList);
+            }}
+            active={name === wallet.name}
+          />
+        ))}
+      </>
+    ) : wallets.length === 0 ? (
+      <span>No Wallet Found</span>
+    ) : (
+      <>
+        <MenuItem
+          active={false}
+          label="Disconnect"
+          action={disconnect}
+          icon={undefined}
+        />
+      </>
+    )}
+  </div>
+</div>
+
+  );
+};

app/components/cardano-wallet/menu-item.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+interface MenuItemProps {
+  icon?: string;
+  label: string;
+  action: () => void;
+  active?: boolean;
+}
+
+export const MenuItem: React.FC<MenuItemProps> = ({ icon, label, action, active }) => {
+  return (
+    <div
+      className="opacity-80 hover:opacity-100 blue-bg-hover flex fex-col items-center justify-center cursor-pointer px-1 py-1 rounded"
+      onClick={action}
+    >
+      <span className="text-xl flex dark-text font-semibold">
+        {icon && <img src={icon} alt="" className="h-5 m-1" />}
+        {label
+          .split(' ')
+          .map((word: string) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+          .join(' ')}
+      </span>
+      {active}
+    </div>
+  );
+};

app/components/cardano-wallet/wallet-balance.tsx

@@ -0,0 +1,40 @@
+import { useLovelace, useWalletList } from '@meshsdk/react';
+import React from 'react';
+
+interface WalletBalanceProps {
+  connected: boolean;
+  name?: string;
+  connecting: boolean;
+  label: string;
+}
+
+export const WalletBalance: React.FC<WalletBalanceProps> = ({ connected, name, connecting, label }) => {
+  const wallet = useWalletList().find((wallet) => wallet.name === name);
+  const balance = useLovelace();
+
+  return (
+    <div className='flex item-center'>
+      {connected && balance && wallet?.icon ? (
+        <>
+          <img src={wallet.icon} className="h-5 m-0.5" alt="Wallet Icon" />
+          <span className="">
+            {parseInt((parseInt(balance, 10) / 1_000_000).toString(), 10)}.
+          </span>
+          <span className="">
+            {balance.substring(balance.length - 6)} ₳
+          </span>
+        </>
+      ) : connected && wallet?.icon ? (
+        <>
+          <img src={wallet.icon} className="h-5 m-1" alt="Wallet Icon" />
+        </>
+      ) : connecting ? (
+        <span>Connecting...</span>
+      ) : (
+        <>
+          {label}
+        </>
+      )}
+    </div>
+  );
+};

app/components/nav-bar.tsx

@@ -0,0 +1,21 @@
+import { CardanoWallet } from './cardano-wallet';
+
+
+const NavBar: React.FC = () => {
+
+  return (
+    <nav className="light-bg py-1 w-full">
+      <div className="flex items-center">
+        <div className="flex mx-5">
+          <CardanoWallet />
+        </div>
+        <div className="flex-grow"></div>
+        <div className='dark-text font-bold py-1 px-4 mx-2 h-8 hidden md:block'>
+          <p>Seedelf Wallet</p>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default NavBar;

app/next.config.mjs

@@ -0,0 +1,13 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  webpack: function (config, options) {
+    config.experiments = {
+      asyncWebAssembly: true,
+      layers: true,
+    };
+    return config;
+  },
+};
+
+export default nextConfig;