feat: react-dapp-v2 updated for Tezos

Updated for Tezos:
 - fixed RPC calls
 - fixed modals for better user experience
 - added examples for contract calls, delegation, and more
 - added balance and token metadata

advanced/dapps/react-dapp-v2/package.json

@@ -5,12 +5,14 @@
   "scripts": {
     "dev": "next dev -p 3000",
     "build": "next build",
+    "clean": "rm -rf dist",
     "start": "next start",
     "lint": "next lint",
     "prettier": "prettier --check '**/*.{js,ts,jsx,tsx}'",
     "prettier:write": "prettier --write '**/*.{js,ts,jsx,tsx}'"
   },
   "dependencies": {
+    "@airgap/beacon-types": "^4.2.2",
     "@celo/wallet-base": "^5.1.1",
     "@ethereumjs/tx": "^3.5.0",
     "@kadena/client": "^0.5.0",
@@ -20,6 +22,8 @@
     "@multiversx/sdk-wallet": "4.2.0",
     "@polkadot/util-crypto": "^10.1.2",
     "@solana/web3.js": "^1.36.0",
+    "@taquito/rpc": "^20.0.1",
+    "@taquito/taquito": "^20.0.1",
     "@walletconnect/encoding": "^1.0.1",
     "@walletconnect/sign-client": "2.15.2",
     "@walletconnect/types": "2.15.2",
@@ -52,14 +56,14 @@
     "@types/pino": "^7.0.5",
     "@types/prop-types": "^15.7.4",
     "@types/qr-image": "^3.2.5",
-    "@types/react": "18.0.15",
-    "@types/react-dom": "18.0.6",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/styled-components": "^5.1.25",
     "eslint": "8.21.0",
     "eslint-config-next": "12.2.4",
     "eslint-plugin-package-json": "^0.13.1",
     "jsonc-eslint-parser": "^2.4.0",
     "prettier": "^2.8.8",
-    "typescript": "^4.7.4"
+    "typescript": "^5.5.4"
   }
 }

advanced/dapps/react-dapp-v2/src/chains/tezos.ts

@@ -22,14 +22,16 @@ export const TezosChainData: ChainsMap = {
   mainnet: {
     name: "Tezos",
     id: "tezos:mainnet",
-    rpc: ["https://mainnet.api.tez.ie"],
+    rpc: ["https://rpc.tzbeta.net"],
+    indexer: "https://api.tzkt.io/v1",
     slip44: 1729,
     testnet: false,
   },
   testnet: {
     name: "Tezos Testnet",
     id: "tezos:testnet",
-    rpc: ["https://ghostnet.ecadinfra.com"],
+    rpc: ["https://rpc.ghostnet.teztnets.com"],
+    indexer: "https://api.ghostnet.tzkt.io/v1",
     slip44: 1729,
     testnet: true,
   },

advanced/dapps/react-dapp-v2/src/components/Asset.tsx

@@ -10,6 +10,7 @@ import { getChainMetadata } from "../chains";
 const xdaiLogo = getChainMetadata("eip155:100").logo;
 const maticLogo = getChainMetadata("eip155:137").logo;
 const kadenaLogo = getChainMetadata("kadena:testnet04").logo;
+const tezosLogo = getChainMetadata("tezos:testnet").logo;
 
 const SAsset = styled.div`
   width: 100%;
@@ -48,11 +49,22 @@ function getAssetIcon(asset: AssetData): JSX.Element {
       return <Icon src={maticLogo} />;
     case "kda":
       return <Icon src={kadenaLogo} />;
+    case "xtz":
+      return <Icon src={tezosLogo} />;
     default:
       return <Icon src={"/assets/eth20.svg"} />;
   }
 }
 
+function getDecimals(asset: AssetData) : number {
+  switch (asset?.symbol?.toLowerCase()) {
+    case "xtz":
+      return 6;
+    default:
+      return 18;
+  }
+}
+
 interface AssetProps {
   asset: AssetData;
 }
@@ -67,7 +79,7 @@ const Asset = (props: AssetProps) => {
       </SAssetLeft>
       <SAssetRight>
         <SAssetBalance>
-          {fromWad(asset.balance || "0")} {asset.symbol}
+          {fromWad(asset.balance || "0", getDecimals(asset))} {asset.symbol}
         </SAssetBalance>
       </SAssetRight>
     </SAsset>

advanced/dapps/react-dapp-v2/src/components/Blockchain.tsx

@@ -81,6 +81,16 @@ const SBlockchainChildrenContainer = styled(SFullWidthContainer)`
   flex-direction: column;
 `;
 
+const SPre = styled.div`
+  background-color: #f4f4f4;
+  width: 100%;
+  min-width: 700px;
+  textAlign: 'left';
+  padding: 10px;
+  border-radius: 5px;
+  overflow-x: auto;
+`;
+
 interface BlockchainProps {
   chainData: ChainNamespaces;
   fetching?: boolean;
@@ -126,6 +136,8 @@ const Blockchain: FC<PropsWithChildren<BlockchainProps>> = (
     balances,
     actions,
   } = props;
+  const [hoveredDescription, setHoveredDescription] = React.useState<string | null>(null);
+
   if (!Object.keys(chainData).length) return null;
 
   const chain = getBlockchainDisplayData(chainId, chainData);
@@ -139,6 +151,15 @@ const Blockchain: FC<PropsWithChildren<BlockchainProps>> = (
     typeof account !== "undefined" && typeof balances !== "undefined"
       ? balances[account]
       : [];
+
+  const handleActionHover = (description: string | undefined) => {
+    if (description) {
+      setHoveredDescription(JSON.stringify(description, null, 2));
+    } else {
+      setHoveredDescription(null);
+    }
+  };
+
   return (
     <React.Fragment>
       <SAccount
@@ -181,6 +202,7 @@ const Blockchain: FC<PropsWithChildren<BlockchainProps>> = (
                       left
                       rgb={chain.meta.rgb}
                       onClick={() => action.callback(chainId, address)}
+                      onMouseEnter={() => handleActionHover(action.description)}
                     >
                       {action.method}
                     </SAction>
@@ -191,7 +213,13 @@ const Blockchain: FC<PropsWithChildren<BlockchainProps>> = (
           )}
         </SBlockchainChildrenContainer>
       </SAccount>
+      {hoveredDescription && (
+        <SPre>
+          <pre style={{ textAlign: 'left' }}>{hoveredDescription}</pre>
+        </SPre>
+      )}
     </React.Fragment>
   );
 };
+
 export default Blockchain;

advanced/dapps/react-dapp-v2/src/constants/default.ts

@@ -1,4 +1,12 @@
 import { getAppMetadata } from "@walletconnect/utils";
+import {
+  PartialTezosDelegationOperation,
+  PartialTezosIncreasePaidStorageOperation,
+  PartialTezosOriginationOperation as PartialTezosOriginationOperationOriginal,
+  PartialTezosTransactionOperation,
+  TezosOperationType }
+  from "@airgap/beacon-types";
+import { ScriptedContracts } from "@taquito/rpc";
 
 if (!process.env.NEXT_PUBLIC_PROJECT_ID)
   throw new Error("`NEXT_PUBLIC_PROJECT_ID` env variable is missing.");
@@ -244,11 +252,125 @@ export enum DEFAULT_TRON_EVENTS {}
 /**
  * TEZOS
  */
+// Can be removed when the fix for Origination is released:
+// https://github.com/airgap-it/beacon-sdk/pull/806
+interface PartialTezosOriginationOperation
+  extends Omit<PartialTezosOriginationOperationOriginal, "script"> {
+  script: ScriptedContracts;
+}
+
 export enum DEFAULT_TEZOS_METHODS {
   TEZOS_GET_ACCOUNTS = "tezos_getAccounts",
   TEZOS_SEND = "tezos_send",
   TEZOS_SIGN = "tezos_sign",
 }
+
+export enum TEZOS_SAMPLE_KINDS {
+  GET_ACCOUNTS = "tezos_getAccounts",
+  SEND = "tezos_send",
+  SEND_TRANSACTION = "tezos_send:transaction",
+  SEND_ORGINATION = "tezos_send:origination",
+  SEND_CONTRACT_CALL = "tezos_send:contract_call",
+  SEND_DELEGATION = "tezos_send:delegation",
+  SEND_UNDELEGATION = "tezos_send:undelegation",
+  SEND_STAKE = "tezos_send:stake",
+  SEND_UNSTAKE = "tezos_send:unstake",
+  SEND_FINALIZE = "tezos_send:finalize",
+  SEND_INCREASE_PAID_STORAGE = "tezos_send:increase_paid_storage",
+  SIGN = "tezos_sign",
+}
+
+const tezosTransactionOperation: PartialTezosTransactionOperation = {
+  kind: TezosOperationType.TRANSACTION,
+  destination: "tz3ZmB8oWUmi8YZXgeRpgAcPnEMD8VgUa4Ve", // Tezos Foundation Ghost Baker
+  amount: "100000"
+};
+
+const tezosOriginationOperation: PartialTezosOriginationOperation = {
+  kind: TezosOperationType.ORIGINATION,
+  balance: '1',
+  script: { // This contract adds the parameter to the storage value
+    code: [
+      { prim: "parameter", args: [{ prim: "int" }] },
+      { prim: "storage", args: [{ prim: "int" }] },
+      { prim: "code",
+        args: [[
+            { prim: "DUP" },                                // Duplicate the parameter (parameter is pushed onto the stack)
+            { prim: "CAR" },                                // Access the parameter from the stack (parameter is on top)
+            { prim: "DIP", args: [[{ prim: "CDR" }]] },     // Access the storage value (storage is on the stack)
+            { prim: "ADD" },                                // Add the parameter to the storage value
+            { prim: "NIL", args: [{ prim: "operation" }] }, // Create an empty list of operations
+            { prim: "PAIR" }                                // Pair the updated storage with the empty list of operations
+        ]]
+      }
+    ],
+    storage: { int: "10" }
+  },
+};
+
+const tezosContractCallOperation: PartialTezosTransactionOperation = {
+  kind: TezosOperationType.TRANSACTION,
+  destination: "[contract address]",
+  amount: "0",
+  parameters: { entrypoint: "default", value: { int: "20" } } // Add 20 to the current storage value
+};
+
+const tezosDelegationOperation: PartialTezosDelegationOperation = {
+  kind: TezosOperationType.DELEGATION,
+  delegate: "tz3ZmB8oWUmi8YZXgeRpgAcPnEMD8VgUa4Ve" // Tezos Foundation Ghost Baker. Cannot delegate to ourself as that would block undelegation
+};
+
+const tezosUndelegationOperation: PartialTezosDelegationOperation = {
+  kind: TezosOperationType.DELEGATION
+};
+
+const tezosStakeOperation: PartialTezosTransactionOperation = {
+  kind: TezosOperationType.TRANSACTION,
+  destination:"[own adress]",
+  amount: "1000000",
+  parameters: {
+    entrypoint: "stake",
+    value: { prim: "Unit" },
+  },
+};
+
+const tezosUnstakeOperation: PartialTezosTransactionOperation = {
+  kind: TezosOperationType.TRANSACTION,
+  destination:"[own adress]",
+  amount: "1000000",
+  parameters: {
+    entrypoint: "unstake",
+    value: { prim: "Unit" },
+  },
+};
+
+const tezosFinalizeOperation: PartialTezosTransactionOperation = {
+  kind: TezosOperationType.TRANSACTION,
+  destination:"[own adress]",
+  amount: "0",
+  parameters: {
+    entrypoint: "finalize_unstake",
+    value: { prim: "Unit" },
+  },
+};
+
+const TezosIncreasePaidStorageOperation: PartialTezosIncreasePaidStorageOperation = {
+  kind: TezosOperationType.INCREASE_PAID_STORAGE,
+  amount: "10",
+  destination: "[contract address]"
+};
+
+export const TEZOS_SAMPLES = {
+  "tezos_send:transaction": tezosTransactionOperation,
+  "tezos_send:origination": tezosOriginationOperation,
+  "tezos_send:contract_call": tezosContractCallOperation,
+  "tezos_send:delegation": tezosDelegationOperation,
+  "tezos_send:undelegation": tezosUndelegationOperation,
+  "tezos_send:stake": tezosStakeOperation,
+  "tezos_send:unstake": tezosUnstakeOperation,
+  "tezos_send:finalize": tezosFinalizeOperation,
+  "tezos_send:increase_paid_storage": TezosIncreasePaidStorageOperation,
+};
 
 export enum DEFAULT_TEZOS_EVENTS {}