juice-shop

1
import { Component, ChangeDetectorRef } from '@angular/core'
2
import { KeysService } from '../Services/keys.service'
3
import { SnackBarHelperService } from '../Services/snack-bar-helper.service'
4
import { web3WalletABI } from '../../assets/public/ContractABIs'
5
import { getDefaultProvider, ethers } from 'ethers'
6
import {
7
  createClient,
8
  connect,
9
  disconnect,
10
  getAccount,
11
  InjectedConnector
12
} from '@wagmi/core'
13
const { ethereum } = window
14
const BankAddress = '0x413744D59d31AFDC2889aeE602636177805Bd7b0'
15
// eslint-disable-next-line @typescript-eslint/no-unused-vars
16
const client = createClient({
17
  autoConnect: true,
18
  provider: getDefaultProvider()
19
})
20

21
@Component({
22
  selector: 'app-wallet-web3',
23
  templateUrl: './wallet-web3.component.html',
24
  styleUrls: ['./wallet-web3.component.scss']
25
})
26
export class WalletWeb3Component {
27
  constructor (
28
    private readonly keysService: KeysService,
29
    private readonly snackBarHelperService: SnackBarHelperService,
30
    private readonly changeDetectorRef: ChangeDetectorRef
31
  ) {}
32

33
  userData: object
34
  session = false
35
  walletBalance = '0'
36
  myBEEBalance = 0
37
  inputAmount: number = null
38
  successResponse = false
39
  mintButtonDisabled = true
40
  challengeSolved = false
41
  errorMessage = ''
42
  metamaskAddress = ''
43
  ngOnInit (): void {
44
    this.handleAuth()
45
    window.ethereum.on('chainChanged', this.handleChainChanged.bind(this))
46
  }
47

48
  async handleChainChanged (chainId: string) {
49
    await this.handleAuth()
50
  }
51

52
  async depositETH () {
53
    try {
54
      const provider = new ethers.providers.Web3Provider(window.ethereum)
55
      const signer = provider.getSigner()
56

57
      const contract = new ethers.Contract(BankAddress, web3WalletABI, signer)
58
      const depositAmount = this.inputAmount.toString()
59
      const transaction = await contract.ethdeposit(this.metamaskAddress, {
60
        value: ethers.utils.parseEther(depositAmount)
61
      })
62
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
63
      const txConfirmation = await transaction.wait()
64
      this.getUserEthBalance()
65
    } catch (error) {
66
      this.errorMessage = error.message
67
    }
68
  }
69

70
  async withdrawETH () {
71
    try {
72
      const provider = new ethers.providers.Web3Provider(window.ethereum)
73
      const signer = provider.getSigner()
74

75
      const contract = new ethers.Contract(BankAddress, web3WalletABI, signer)
76
      const withdrawalAmount = this.inputAmount.toString()
77
      const transaction = await contract.withdraw(
78
        ethers.utils.parseEther(withdrawalAmount)
79
      )
80
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
81
      const txConfirmation = await transaction.wait()
82
      this.getUserEthBalance()
83
    } catch (error) {
84
      this.errorMessage = error.message
85
    }
86
  }
87

88
  async getUserEthBalance () {
89
    try {
90
      const provider = new ethers.providers.Web3Provider(window.ethereum)
91
      const signer = provider.getSigner()
92
      const contract = new ethers.Contract(BankAddress, web3WalletABI, signer)
93
      const userBalance = await contract.balanceOf(this.metamaskAddress)
94
      const formattedBalance = ethers.utils.formatEther(userBalance)
95
      this.walletBalance = formattedBalance
96
    } catch (error) {
97
      this.errorMessage = error.message
98
    }
99
  }
100

101
  async handleAuth () {
102
    try {
103
      const { isConnected } = getAccount()
104

105
      if (isConnected) {
106
        await disconnect()
107
      }
108
      if (!window.ethereum) {
109
        this.snackBarHelperService.open('PLEASE_INSTALL_WEB3_WALLET', 'errorBar')
110
        return
111
      }
112

113
      const provider = await connect({ connector: new InjectedConnector() })
114
      this.metamaskAddress = provider.account
115
      this.keysService.walletAddressSend(this.metamaskAddress).subscribe(
116
        (response) => {
117
          if (response.success) {
118
            this.successResponse = response.status
119
            this.mintButtonDisabled = true
120
          }
121
        },
122
        (error) => {
123
          console.error(error)
124
        }
125
      )
126
      this.userData = {
127
        address: provider.account,
128
        chain: provider.chain.id,
129
        network: 'evm'
130
      }
131
      await ethereum.request({
132
        method: 'wallet_addEthereumChain',
133
        params: [
134
          {
135
            chainId: '0xaa36a7',
136
            chainName: 'Sepolia Test Network',
137
            nativeCurrency: {
138
              name: 'SepoliaETH',
139
              symbol: 'ETH',
140
              decimals: 18
141
            },
142
            rpcUrls: ['https://ethereum-sepolia.blockpi.network/v1/rpc/public'],
143
            blockExplorerUrls: ['https://sepolia.etherscan.io/']
144
          }
145
        ]
146
      })
147
      const targetChainId = '11155111'
148
      const currentChainId = String(provider.chain?.id)
149

150
      if (provider && currentChainId !== targetChainId) {
151
        this.session = false
152
        this.snackBarHelperService.open('PLEASE_CONNECT_TO_SEPOLIA_NETWORK', 'errorBar')
153
      } else {
154
        this.session = true
155
        this.getUserEthBalance()
156
      }
157
      this.changeDetectorRef.detectChanges()
158
    } catch (err) {
159
      console.log(err)
160
    }
161
  }
162
}
163