Merge pull request #708 from anoma/feat/interface-ui-updates

Merging first Namadillo version

.github/workflows/deploy-wallet-at-merge-to-main.yml

@@ -4,7 +4,7 @@ on:
     branches:
       - main
     paths:
-      - "apps/namada-interface/**"
+      - "apps/namadillo/**"
       - ".github/workflows/**"
 env:
   CI: false
@@ -32,7 +32,7 @@ jobs:
           version: "v0.10.3"
 
       - name: build the site
-        working-directory: ./apps/namada-interface
+        working-directory: ./apps/namadillo
         run: yarn build
         env:
           NAMADA_INTERFACE_NAMADA_ALIAS: "Namada Devnet"
@@ -43,7 +43,7 @@ jobs:
         if: false
         uses: nwtgck/[email protected]
         with:
-          publish-dir: "./apps/namada-interface/build"
+          publish-dir: "./apps/namadillo/dist"
           production-branch: main
           github-token: ${{ secrets.GITHUB_TOKEN }}
           deploy-message: "Merged PR ${{ github.event.number }} to main"

.github/workflows/deploy-wallet-at-pr.yml

@@ -2,7 +2,7 @@ name: Deploy wallet preview to netlify at PR and pushes to it
 on:
   pull_request:
     paths:
-      - "apps/namada-interface/**"
+      - "apps/namadillo/**"
       - "apps/extension/**"
       - "packages/**"
       - ".github/workflows/**"
@@ -134,7 +134,7 @@ jobs:
         run: rustup target add wasm32-unknown-unknown
 
       - name: build the site
-        working-directory: ./apps/namada-interface
+        working-directory: ./apps/namadillo
         run: yarn build
         env:
           NAMADA_INTERFACE_NAMADA_ALIAS: "Namada Devnet"
@@ -143,7 +143,7 @@ jobs:
       - name: Deploy to Netlify
         uses: nwtgck/[email protected]
         with:
-          publish-dir: "./apps/namada-interface/build"
+          publish-dir: "./apps/namadillo/dist"
           production-branch: main
           github-token: ${{ secrets.GITHUB_TOKEN }}
           deploy-message: "deploy ${{ github.event.number }} at creating a PR"
@@ -240,13 +240,12 @@ jobs:
           path: ./apps/extension/build/firefox/artifact/*
 
   E2E-tests:
-    needs:
-      [build-interface, build-extension-chrome]
+    needs: [build-interface, build-extension-chrome]
     timeout-minutes: 60
     runs-on: ubuntu-latest
     defaults:
       run:
-        working-directory: ./apps/namada-interface
+        working-directory: ./apps/namadillo
     steps:
       - uses: actions/checkout@v3
 

.github/workflows/release-wallet.yml

@@ -83,7 +83,7 @@ jobs:
         run: sudo apt-get install -y protobuf-compiler
 
       - name: Build the interface
-        working-directory: ./apps/namada-interface
+        working-directory: ./apps/namadillo
         run: yarn build
         env:
           NAMADA_INTERFACE_NAMADA_ALIAS: ${{ inputs.NAMADA_INTERFACE_NAMADA_ALIAS }}
@@ -99,8 +99,8 @@ jobs:
 
       - uses: actions/upload-artifact@v3
         with:
-          name: namada-interface
-          path: ./apps/namada-interface/build
+          name: namadillo
+          path: ./apps/namadillo/dist
 
   build-extension-chrome:
     needs: setup
@@ -196,8 +196,8 @@ jobs:
       - name: Download interface build
         uses: actions/download-artifact@v3
         with:
-          name: namada-interface
-          path: ./namada-interface
+          name: namadillo
+          path: ./namadillo
 
       - name: Download Chrome extension build
         uses: actions/download-artifact@v3
@@ -220,7 +220,7 @@ jobs:
       - name: Deploy interface to Netlify
         uses: nwtgck/[email protected]
         with:
-          publish-dir: ./namada-interface
+          publish-dir: ./namadillo
           production-branch: main
           github-token: ${{ secrets.GITHUB_TOKEN }}
           deploy-message: "Deployed release ${{ needs.setup.outputs.VERSION }}"

apps/extension/package.json

@@ -48,8 +48,8 @@
     "framer-motion": "6.2.4",
     "io-ts": "^2.2.21",
     "js-sha256": "^0.10.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-icons": "^4.12.0",
     "react-router-dom": "^6.0.0",
     "typescript": "^5.1.3",

apps/extension/src/App/Accounts/AddAccount.tsx

@@ -4,7 +4,7 @@ import { useNavigate } from "react-router-dom";
 
 import { Ledger, makeBip44Path } from "@heliax/namada-sdk/web";
 import { chains } from "@namada/chains";
-import { ActionButton, Input, Toggle } from "@namada/components";
+import { ActionButton, Input, ToggleButton } from "@namada/components";
 import { AccountType, DerivedAccount } from "@namada/types";
 
 import { TopLevelRoute } from "App/types";
@@ -371,9 +371,9 @@ const AddAccount: React.FC<Props> = ({
             {parentAccountType !== AccountType.Ledger && (
               <div className="my-3">
                 <div className="flex justify-end items-center pt-1 w-full">
-                  <span>Transparent&nbsp;</span>
-                  <Toggle
-                    onClick={() => setIsTransparent(!isTransparent)}
+                  <ToggleButton
+                    label="Transparent"
+                    onChange={() => setIsTransparent(!isTransparent)}
                     checked={isTransparent}
                   />
                   <span>&nbsp;Shielded</span>

apps/namada-interface/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@namada/namada-interface",
   "version": "0.2.1",
-  "description": "Namada Browser Extension",
+  "description": "Namada Interface",
   "repository": "https://github.com/anoma/namada-interface/",
   "author": "Heliax Dev <[email protected]>",
   "license": "MIT",
@@ -48,9 +48,6 @@
     "dev:local": "NODE_ENV=development NAMADA_INTERFACE_LOCAL=\"true\" yarn dev",
     "dev:proxy": "NAMADA_INTERFACE_PROXY=true && ./scripts/start-proxies.sh && yarn dev:local",
     "build": "NODE_ENV=production && yarn wasm:build && webpack-cli",
-    "lint": "eslint src --ext .ts,.tsx",
-    "lint:fix": "yarn lint -- --fix",
-    "lint:ci": "yarn lint --max-warnings 0",
     "test": "yarn wasm:build:test && yarn jest",
     "test:watch": "yarn wasm:build:test && yarn jest --watchAll=true",
     "test:coverage": "yarn wasm:build:test && yarn test --coverage",

apps/namada-interface/src/slices/settings.ts

@@ -1,40 +1,61 @@
 import { ChainKey } from "@namada/types";
-import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-
-import { atom } from "jotai";
-
-const SETTINGS_ACTIONS_BASE = "settings";
-
-export type SettingsState = {
-  connectedChains: string[];
+import { CurrencyType } from "@namada/utils";
+import { Getter, Setter, atom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+
+type SettingsStorage = {
+  fiat: CurrencyType;
+  hideBalances: boolean;
+  rpcUrl: string;
+  chainId: string;
 };
 
-const initialState: SettingsState = {
-  connectedChains: [],
-};
-
-const settingsSlice = createSlice({
-  name: SETTINGS_ACTIONS_BASE,
-  initialState,
-  reducers: {
-    setIsConnected: (state, action: PayloadAction<ChainKey>) => {
-      state.connectedChains = state.connectedChains.includes(action.payload)
-        ? state.connectedChains
-        : [...state.connectedChains, action.payload];
-    },
-  },
+export const namadaExtensionConnectedAtom = atom(false);
+
+export const namadilloSettingsAtom = atomWithStorage<SettingsStorage>(
+  "namadillo:settings",
+  {
+    fiat: "usd",
+    hideBalances: false,
+    rpcUrl: process.env.NAMADA_INTERFACE_NAMADA_URL || "",
+    chainId: process.env.NAMADA_INTERFACE_NAMADA_CHAIN_ID || "",
+  }
+);
+
+const changeSettings =
+  <T>(key: keyof SettingsStorage) =>
+  (get: Getter, set: Setter, value: T) => {
+    const settings = get(namadilloSettingsAtom);
+    set(namadilloSettingsAtom, { ...settings, [key]: value });
+  };
+
+export const selectedCurrencyAtom = atom(
+  (get) => get(namadilloSettingsAtom).fiat,
+  changeSettings<CurrencyType>("fiat")
+);
+
+export const hideBalancesAtom = atom(
+  (get) => get(namadilloSettingsAtom).hideBalances,
+  changeSettings<boolean>("hideBalances")
+);
+
+export const rpcUrlAtom = atom(
+  (get) => get(namadilloSettingsAtom).rpcUrl,
+  changeSettings<string>("rpcUrl")
+);
+
+export const chainIdAtom = atom(
+  (get) => get(namadilloSettingsAtom).chainId,
+  changeSettings<string>("chainId")
+);
+
+export const connectedChainsAtom = atom<ChainKey[]>([]);
+export const addConnectedChainAtom = atom(null, (get, set, chain: ChainKey) => {
+  const connectedChains = get(connectedChainsAtom);
+  set(
+    connectedChainsAtom,
+    connectedChains.includes(chain) ? connectedChains : (
+      [...connectedChains, chain]
+    )
+  );
 });
-
-const { actions, reducer } = settingsSlice;
-
-export const { setIsConnected } = actions;
-
-export default reducer;
-
-////////////////////////////////////////////////////////////////////////////////
-// JOTAI
-////////////////////////////////////////////////////////////////////////////////
-
-const namadaExtensionConnectedAtom = atom(false);
-
-export { namadaExtensionConnectedAtom };

apps/namada-interface/src/types/environment.d.ts

@@ -26,5 +26,3 @@ declare global {
     }
   }
 }
-
-export { };

apps/namadillo/.env.sample

@@ -0,0 +1,10 @@
+# Specify the following if you wish to override the defaults defined in @anoma/chains:
+
+# NAMADA
+NAMADA_INTERFACE_NAMADA_ALIAS=Namada Testnet
+NAMADA_INTERFACE_NAMADA_TOKEN=tnam1qxvg64psvhwumv3mwrrjfcz0h3t3274hwggyzcee
+NAMADA_INTERFACE_NAMADA_CHAIN_ID=namada-1.5.32ccad5356012a7
+NAMADA_INTERFACE_NAMADA_URL=http://127.0.0.1:26657
+NAMADA_INTERFACE_NAMADA_BECH32_PREFIX=atest
+NAMADA_INTERFACE_NO_INDEXER=true
+

apps/namadillo/.eslintignore

@@ -0,0 +1,2 @@
+*.css
+*.svg

apps/namadillo/.eslintrc.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: require.resolve("@namada/config/eslint/react.js"),
+};

apps/namadillo/.gitignore

@@ -0,0 +1,10 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+/build
+/dist
+.env
+/test-results/
+/playwright-report/
+/playwright/.cache/

apps/namadillo/.release-it.cjs

@@ -0,0 +1,7 @@
+const baseConfig = require("../../.release-it.base.cjs");
+
+const config = {
+  ...baseConfig,
+};
+
+module.exports = config;

apps/namadillo/.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+    "workbench.colorCustomizations": {
+        "[monokai]": {
+            "symbolIcon.namespaceForeground": "#ff0000"
+        },
+        "activityBar.background": "#007d3b",
+        "activityBar.activeForeground": "1e5388",
+        "titleBar.activeBackground": "#007d3b",
+        "titleBar.activeForeground": "#fff",
+        "activityBar.foreground": "#fff",
+    },
+    "window.title": "anoma-cli"
+}

apps/namadillo/README.md

@@ -0,0 +1,68 @@
+# Namadillo
+
+This is the React app for `namadillo`, the web client which integrates with the Namada `extension`.
+
+## Table of Contents
+
+- [Usage](#usage)
+- [Configuration](#configuration)
+
+### Usage
+
+```bash
+# Install dependencies
+yarn
+
+# Build wasm-dependencies (for using SDK Query)
+yarn wasm:build
+
+# Build wasm-dependencies with debugging enabled
+yarn wasm:build:dev
+
+# Start app in development mode
+yarn dev:local
+
+# If you are running chains locally, it is recommended that you instead proxy RPC requests:
+yarn dev:proxy
+
+# Build production release:
+yarn build
+
+# Run ESLint
+yarn lint
+
+# Run ESLint fix
+yarn lint:fix
+
+# Run tests
+yarn test
+```
+
+[ [Table of Contents](#table-of-contents) ]
+
+### Configuration
+
+Configuration is done by creating a `.env` file, based on [.env.sample](./.env.sample), and specifying the values you wish to override.
+
+The following is an example of configuring the interface and extension to connect to testnets:
+
+```bash
+# NAMADA
+NAMADA_INTERFACE_NAMADA_ALIAS=Namada Testnet
+NAMADA_INTERFACE_NAMADA_CHAIN_ID=public-testnet-14.5d79b6958580
+NAMADA_INTERFACE_NAMADA_URL=https://proxy.heliax.click/public-testnet-14.5d79b6958580/
+
+# COSMOS
+NAMADA_INTERFACE_COSMOS_ALIAS=Cosmos Testnet
+NAMADA_INTERFACE_COSMOS_CHAIN_ID=theta-testnet-001
+NAMADA_INTERFACE_COSMOS_URL=https://rpc.sentry-01.theta-testnet.polypore.xyz
+
+# ETH
+NAMADA_INTERFACE_ETH_ALIAS=Eth Testnet
+NAMADA_INTERFACE_ETH_CHAIN_ID=0x7A69
+NAMADA_INTERFACE_ETH_URL=https://rpc.ankr.com/eth_goerli
+```
+
+For more details on setting up your local environment for integration between the interface and the extension, see the [README.md](../../README.md) at the root of this repo.
+
+[ [Table of Contents](#table-of-contents) ]

apps/namadillo/e2e-tests/hello.spec.ts

@@ -0,0 +1,5 @@
+import { test } from "@playwright/test";
+
+test.skip("hello world", () => {
+  console.log("This is a placeholder test so CI is not complaining!");
+});