Promote develop to master

.gitignore

@@ -7,6 +7,3 @@ template.out
 aws.env
 *.log
 .idea
-
-# Hardhat
-contracts/evm/build/cache

.vscode/settings.json

@@ -2,6 +2,18 @@
     "editor.codeActionsOnSave": {
         "source.fixAll.eslint": true
     },
+    "[html]": {
+        "editor.defaultFormatter": "Vue.volar"
+    },
+    "[vue]": {
+        "editor.defaultFormatter": "Vue.volar"
+    },
+    "[javascript]": {
+        "editor.defaultFormatter": "vscode.typescript-language-features"
+    },
+    "[json]": {
+        "editor.defaultFormatter": "vscode.json-language-features"
+    },
     "eslint.validate": [
         "vue",
         "typescript"

README.md

@@ -95,21 +95,21 @@ You can get up and running without configuration. You can also mock local backen
 
 ### Hardhat
 
-EVM contract development is serviced through [Hardhat](https://hardhat.io/). The Hardhat development environment is configured in the [contracts/evm/hardhat.config.ts](contracts/evm/hardhat.config.ts) file.
+Ethereum contract development is serviced through [Hardhat](https://hardhat.io/). The Hardhat development environment is configured in the [contracts/ethereum/hardhat.config.ts](contracts/ethereum/hardhat.config.ts) file.
 
-1. Compile the contracts in [contracts/evm](contracts/evm).
+1. Compile the contracts in [contracts/ethereum](contracts/ethereum).
 
     ```zsh
     npm run task:compile
     ```
 
-2. Deploy a contract, specifically [contracts/evm/src/Sample.sol](contracts/evm/src/Sample.sol) with [contracts/evm/deploy/sample.ts](contracts/evm/deploy/sample.ts).
+2. Deploy a contract, specifically [contracts/ethereum/src/Sample.sol](contracts/ethereum/src/Sample.sol) with [contracts/ethereum/deploy/sample.ts](contracts/ethereum/deploy/sample.ts).
 
     ```zsh
     npm run deploy:sample
     ```
 
-3. Test the Sample with the tests in [contracts/evm/test/sample.ts](contracts/evm/test/sample.ts).
+3. Test the Sample with the tests in [contracts/ethereum/test/sample.ts](contracts/ethereum/test/sample.ts).
 
     ```zsh
     npm run test:contracts
@@ -127,7 +127,7 @@ EVM contract development is serviced through [Hardhat](https://hardhat.io/). The
     // Todo add Casimir Typescript usage
     ```
 
-7. Clean [contracts/evm/build/artifacts](contracts/evm/build/artifacts) and [contracts/evm/build/cache](contracts/evm/build/cache)).    
+7. Clean [contracts/ethereum/build/artifacts](contracts/ethereum/build/artifacts) and [contracts/ethereum/build/cache](contracts/ethereum/build/cache)).    
 
     ```zsh
     npm run task:clean

apps/web/package.json

@@ -11,9 +11,11 @@
   "dependencies": {
     "@heroicons/vue": "^1.0.6",
     "@ledgerhq/hw-app-eth": "^6.29.4",
-    "@ledgerhq/hw-transport-webhid": "^6.27.2",
+    "@ledgerhq/hw-transport-webusb": "^6.27.4",
+    "@solana/web3.js": "^1.63.1",
     "@walletconnect/client": "^1.8.0",
     "@walletconnect/qrcode-modal": "^1.8.0",
+    "borsh": "^0.7.0",
     "buffer": "^6.0.3",
     "ethers": "^5.6.9",
     "iotex-antenna": "^0.31.3",

apps/web/src/components/Wallet.vue

@@ -11,7 +11,10 @@
         </p>
       </div>
       <div class="coinbase-div">
-        <button class="coinbase-btn" @click="connectWallet('CoinbaseWallet')">
+        <button
+          class="coinbase-btn"
+          @click="connectWallet('CoinbaseWallet')"
+        >
           {{ coinbaseButtonText }}
         </button>
         <p>
@@ -20,15 +23,33 @@
         </p>
       </div>
       <div class="ioPay-div">
-        <button class="iopay-btn" @click="connectWallet('IoPay')">
+        <button
+          class="iopay-btn"
+          @click="connectWallet('IoPay')"
+        >
           {{ ioPayButtonText }}
         </button>
         <p>
           Connected ioPay Account:
           <span> {{ ioPayAccountsResult }} </span>
         </p>
       </div>
-      <button class="ledger-btn" @click="connectWallet('Ledger')">
+      <div class="phantom-div">
+        <button
+          class="phantom-btn"
+          @click="connectWallet('Phantom')"
+        >
+          {{ phantomButtonText }}
+        </button>
+        <p>
+          Connected phantom Account:
+          <span> {{ phantomAccountsResult }} </span>
+        </p>
+      </div>
+      <button
+        class="ledger-btn"
+        @click="connectWallet('Ledger')"
+      >
         Connect Ledger
       </button>
       <div>
@@ -38,28 +59,37 @@
         >
           WalletConnect
         </button>
-        <button
-          class="wallet-connect-btn"
-          @click="sendTransaction('WalletConnect')"
-        >
-          Send WalletConnect Transaction
-        </button>
-        <button
-          class="wallet-connect-btn"
-          @click="disconnectWallet('WalletConnect')"
-        >
-          Disable WalletConnect
-        </button>
       </div>
     </div>
     <div class="form-container">
-      <form @submit.prevent="sendTransaction(selectedProvider)">
+      <div class="sign-message-container">
+        <input
+          v-model="message"
+          type="text"
+          placeholder="Write a message to sign"
+        >
+        <button @click="signMessage(message)">
+          Sign Message
+        </button>
+        <p>{{ signedMessage }}</p>
+      </div>
+      <form @submit.prevent="sendTransaction()">
         <label for="address">Address</label>
-        <input v-model="toAddress" type="text" placeholder="To Address" />
-        <br />
+        <input
+          v-model="toAddress"
+          type="text"
+          placeholder="To Address"
+        >
+        <br>
         <label for="amount">Amount</label>
-        <input v-model="amount" type="text" placeholder="Amount Ether" />
-        <button type="submit">Send Transaction</button>
+        <input
+          v-model="amount"
+          type="text"
+          placeholder="Amount Ether"
+        >
+        <button type="submit">
+          Send Transaction
+        </button>
       </form>
     </div>
   </div>
@@ -69,21 +99,26 @@
 import { ref, watchEffect } from 'vue'
 import useWallet from '@/composables/wallet'
 
+const message = ref('')
+const signedMessage = ref('')
+
 const metamaskButtonText = ref<string>('Connect Metamask')
 const metamaskAccountsResult = ref<string>('Address Not Active')
 const coinbaseButtonText = ref<string>('Connect Coinbase')
 const coinbaseAccountsResult = ref<string>('Address Not Active')
 const ioPayButtonText = ref<string>('Connect ioPay')
 const ioPayAccountsResult = ref<string>('Address Not Active')
+const phantomButtonText = ref<string>('Connect Phantom')
+const phantomAccountsResult = ref<string>('Address Not Active')
 
 const {
   selectedProvider,
   selectedAccount,
   toAddress,
   amount,
   connectWallet,
-  disconnectWallet,
   sendTransaction,
+  signMessage,
 } = useWallet()
 
 watchEffect(() => {
@@ -94,20 +129,35 @@ watchEffect(() => {
     ioPayButtonText.value = 'Connect ioPay'
     coinbaseAccountsResult.value = 'Not Active'
     ioPayAccountsResult.value = 'Not Active'
+    phantomButtonText.value = 'Connect Phantom'
+    phantomAccountsResult.value = 'Not Active'
   } else if (selectedProvider.value === 'CoinbaseWallet') {
     metamaskButtonText.value = 'Connect Metamask'
     coinbaseButtonText.value = 'Coinbase Connected'
     ioPayButtonText.value = 'Connect ioPay'
     metamaskAccountsResult.value = 'Not Active'
     coinbaseAccountsResult.value = selectedAccount.value
     ioPayAccountsResult.value = 'Not Active'
+    phantomButtonText.value = 'Connect Phantom'
+    phantomAccountsResult.value = 'Not Active'
   } else if (selectedProvider.value === 'IoPay') {
     metamaskButtonText.value = 'Connect MetaMask'
     coinbaseButtonText.value = 'Connect Coinbase'
     ioPayButtonText.value = 'Connected'
     metamaskAccountsResult.value = 'Not Active'
     coinbaseAccountsResult.value = 'Not Active'
     ioPayAccountsResult.value = selectedAccount.value || 'Not Active'
+    phantomButtonText.value = 'Connect Phantom'
+    phantomAccountsResult.value = 'Not Active'
+  } else if (selectedProvider.value === 'Phantom') {
+    metamaskButtonText.value = 'Connect MetaMask'
+    coinbaseButtonText.value = 'Connect Coinbase'
+    ioPayButtonText.value = 'Connect ioPay'
+    phantomButtonText.value = 'Connected'
+    metamaskAccountsResult.value = 'Not Active'
+    coinbaseAccountsResult.value = 'Not Active'
+    ioPayAccountsResult.value = 'Not Active'
+    phantomAccountsResult.value = selectedAccount.value || 'Not Active'
   }
 })
 </script>
@@ -155,6 +205,10 @@ button {
   background-color: rgb(0, 0, 0);
 }
 
+.phantom-btn {
+  background-color: purple;
+}
+
 .connect-wallet-container {
   display: flex;
   flex-direction: column;

apps/web/src/composables/ethers.ts

@@ -1,13 +1,75 @@
+import { ref } from 'vue'
+import { ethers } from 'ethers'
+import { BrowserProviders } from '@/interfaces/BrowserProviders'
 import { EthersProvider } from '@/interfaces/EthersProvider'
+import { ProviderString } from '@/types/ProviderString'
+import { TransactionInit } from '@/interfaces/TransactionInit'
+import { MessageInit } from '@/interfaces/MessageInit'
+
+const defaultProviders = {
+  MetaMask: undefined,
+  CoinbaseWallet: undefined,
+}
+
+const ethereum: any = window.ethereum
+const availableProviders = ref<BrowserProviders>(getBrowserProviders(ethereum))
 
 export default function useEthers() {
-  async function requestEthersAccount(provider: EthersProvider) {
-    if (provider.request) {
-      return await provider.request({
+  const ethersProviderList = ['MetaMask', 'CoinbaseWallet']
+  async function requestEthersAccount(provider: ProviderString) {
+    const browserExtensionProvider =
+      availableProviders.value[provider as keyof BrowserProviders]
+    if (browserExtensionProvider?.request) {
+      return await browserExtensionProvider.request({
         method: 'eth_requestAccounts',
       })
     }
   }
 
-  return { requestEthersAccount }
+  async function sendEthersTransaction(
+    { to, value, providerString }: TransactionInit
+  ) {
+    const browserProvider =
+      availableProviders.value[providerString as keyof BrowserProviders]
+    const web3Provider: ethers.providers.Web3Provider =
+      new ethers.providers.Web3Provider(browserProvider as EthersProvider)
+    const signer = web3Provider.getSigner()
+    const etherAmount = ethers.utils.parseEther(value)
+    const tx = {
+      to,
+      value: etherAmount,
+    }
+    const { hash } = await signer.sendTransaction(tx)
+    return hash
+  }
+
+  async function signEthersMessage(messageInit: MessageInit): Promise<string> {
+    const { providerString, hashedMessage } = messageInit
+    const browserProvider =
+      availableProviders.value[
+      providerString as keyof BrowserProviders
+      ]
+    const web3Provider: ethers.providers.Web3Provider =
+      new ethers.providers.Web3Provider(browserProvider as EthersProvider)
+    const signer = web3Provider.getSigner()
+    const signature = await signer.signMessage(hashedMessage)
+    return signature
+  }
+
+  return { ethersProviderList, requestEthersAccount, getBrowserProviders, sendEthersTransaction, signEthersMessage }
 }
+
+function getBrowserProviders(ethereum: any) {
+  if (!ethereum) return defaultProviders
+  else if (!ethereum.providerMap) {
+    return {
+      MetaMask: ethereum.isMetaMask ? ethereum : undefined,
+      CoinbaseWallet: ethereum.isCoinbaseWallet ? ethereum : undefined,
+    }
+  } else {
+    return {
+      MetaMask: ethereum.providerMap.get('MetaMask'),
+      CoinbaseWallet: ethereum.providerMap.get('CoinbaseWallet'),
+    }
+  }
+}

apps/web/src/composables/iopay.ts

@@ -1,6 +1,8 @@
 import Antenna from 'iotex-antenna'
 import { WsSignerPlugin } from 'iotex-antenna/lib/plugin/ws'
 import { toRau } from 'iotex-antenna/lib/account/utils'
+import { TransactionInit } from '@/interfaces/TransactionInit'
+import { MessageInit } from '@/interfaces/MessageInit'
 
 export default function useIoPay() {
   const signer = new WsSignerPlugin()
@@ -12,22 +14,27 @@ export default function useIoPay() {
     return await signer.getAccounts()
   }
 
-  const sendIoPayTransaction = async (toAddress: string, amount: string) => {
+  const sendIoPayTransaction = async ({ to, value }: TransactionInit) => {
     try {
       const transResp = await antenna?.iotx.sendTransfer({
-        to: `${toAddress}`,
+        to: `${to}`,
         from: antenna.iotx.accounts[0].address,
-        value: toRau(amount, 'Iotx'),
+        value: toRau(value, 'Iotx'),
         gasLimit: '100000',
-        gasPrice: toRau('1', 'Qev')
+        gasPrice: toRau('1', 'Qev'),
       })
-      console.log('transResp :>> ', transResp)
+      return transResp
     } catch (err) {
       // TODO: handle submit error and guide user
       console.log(err)
     }
   }
 
+  const signIoPayMessage = async (messageInit: MessageInit): Promise<Buffer> => {
+    const { hashedMessage } = messageInit
+    return await signer.signMessage(hashedMessage)
+  }
+
   //   const stakeIoPay = async () => {
   //     // TODO: Replace with appropriate abi, etc.
   //     const transResp = await antenna?.iotx.executeContract(
@@ -49,6 +56,7 @@ export default function useIoPay() {
   return {
     getIoPayAccounts,
     sendIoPayTransaction,
+    signIoPayMessage,
     // stakeIoPay,
   }
 }