1
+ const NETWORK_ID = 5
2
+
3
+ const GREETER_CONTRACT_ADDRESS = "0x8b4751Bf2Ba59222EB3d40D9fe7FDD98496503b9"
4
+ const GREETER_CONTRACT_ABI_PATH = "./json_abi/Greeter.json"
5
+ var greeterContract
6
+
7
+ var accounts
8
+ var web3
9
+
10
+ function metamaskReloadCallback ( ) {
11
+ window . ethereum . on ( 'accountsChanged' , ( accounts ) => {
12
+ document . getElementById ( "web3_message" ) . textContent = "A message is from web3..." ;
13
+ window . location . reload ( )
14
+ } )
15
+ window . ethereum . on ( 'networkChanged' , ( accounts ) => {
16
+ document . getElementById ( "web3_message" ) . textContent = "A message is from web3..." ;
17
+ window . location . reload ( )
18
+ } )
19
+ }
20
+
21
+ const getWeb3 = async ( ) => {
22
+ return new Promise ( ( resolve , reject ) => {
23
+ if ( document . readyState == "complete" )
24
+ {
25
+ if ( window . ethereum ) {
26
+ const web3 = new Web3 ( window . ethereum )
27
+ window . location . reload ( )
28
+ resolve ( web3 )
29
+ } else {
30
+ reject ( "must install MetaMask" )
31
+ document . getElementById ( "web3_message" ) . textContent = "Error: please connect Metamask" ;
32
+ }
33
+ } else
34
+ {
35
+ window . addEventListener ( "load" , async ( ) => {
36
+ if ( window . ethereum ) {
37
+ const web3 = new Web3 ( window . ethereum )
38
+ resolve ( web3 )
39
+ } else {
40
+ reject ( "must install MetaMask" )
41
+ document . getElementById ( "web3_message" ) . textContent = "Error: Please install Metamask" ;
42
+ }
43
+ } ) ;
44
+ }
45
+ } ) ;
46
+ } ;
47
+
48
+ const getContract = async ( web3 , address , abi_path ) => {
49
+ const response = await fetch ( abi_path ) ;
50
+ const data = await response . json ( ) ;
51
+
52
+ const netId = await web3 . eth . net . getId ( ) ;
53
+ contract = new web3 . eth . Contract (
54
+ data ,
55
+ address
56
+ ) ;
57
+ return contract
58
+ }
59
+
60
+ async function loadDapp ( ) {
61
+ metamaskReloadCallback ( )
62
+ document . getElementById ( "web3_message" ) . textContent = "Please connect to Metamask"
63
+ var awaitWeb3 = async function ( ) {
64
+ web3 = await getWeb3 ( )
65
+ web3 . eth . net . getId ( ( err , netId ) => {
66
+ if ( netId == NETWORK_ID ) {
67
+ var awaitContract = async function ( ) {
68
+ greeterContract = await getContract ( web3 , GREETER_CONTRACT_ADDRESS , GREETER_CONTRACT_ABI_PATH )
69
+ document . getElementById ( "web3_message" ) . textContent = "You are connected to Metamask"
70
+ onContractInitCallback ( )
71
+ web3 . eth . getAccounts ( function ( err , _accounts ) {
72
+ accounts = _accounts
73
+ if ( err != null )
74
+ {
75
+ console . error ( "An error occurred: " + err )
76
+ } else if ( accounts . length > 0 )
77
+ {
78
+ onWalletConnectedCallback ( )
79
+ document . getElementById ( "account_address" ) . style . display = "block"
80
+ } else
81
+ {
82
+ document . getElementById ( "connect_button" ) . style . display = "block"
83
+ }
84
+ } ) ;
85
+ } ;
86
+ awaitContract ( ) ;
87
+ } else {
88
+ document . getElementById ( "web3_message" ) . textContent = "Please connect to Goerli" ;
89
+ }
90
+ } ) ;
91
+ } ;
92
+ awaitWeb3 ( ) ;
93
+ }
94
+
95
+ async function connectWallet ( ) {
96
+ await window . ethereum . request ( { method : "eth_requestAccounts" } )
97
+ accounts = await web3 . eth . getAccounts ( )
98
+ onWalletConnectedCallback ( )
99
+ }
100
+
101
+ loadDapp ( )
102
+
103
+ const onContractInitCallback = async ( ) => {
104
+ var greetingText = await greeterContract . methods . greetingText ( ) . call ( )
105
+ var greetingSender = await greeterContract . methods . greetingSender ( ) . call ( )
106
+
107
+ var contract_state = "Greeting Text: " + greetingText
108
+ + ", Greeting Setter: " + greetingSender
109
+
110
+ document . getElementById ( "contract_state" ) . textContent = contract_state ;
111
+ }
112
+
113
+ const onWalletConnectedCallback = async ( ) => {
114
+ }
115
+
116
+ // Sign and Relay functions
117
+
118
+ async function signMessage ( message , deadline )
119
+ {
120
+ const msgParams = JSON . stringify ( {
121
+ types : {
122
+ EIP712Domain : [
123
+ { name : 'name' , type : 'string' } ,
124
+ { name : 'version' , type : 'string' } ,
125
+ { name : 'chainId' , type : 'uint256' } ,
126
+ { name : 'verifyingContract' , type : 'address' } ,
127
+ ] ,
128
+ Greeting : [
129
+ { name : 'text' , type : 'string' } ,
130
+ { name : 'deadline' , type : 'uint' }
131
+ ] ,
132
+ } ,
133
+ primaryType : 'Greeting' ,
134
+ domain : {
135
+ name : 'Ether Mail' ,
136
+ version : '1' ,
137
+ chainId : NETWORK_ID ,
138
+ verifyingContract : GREETER_CONTRACT_ADDRESS ,
139
+ } ,
140
+ message : {
141
+ text : message ,
142
+ deadline : deadline ,
143
+ } ,
144
+ } ) ;
145
+ console . log ( msgParams )
146
+
147
+ const signature = await ethereum . request ( {
148
+ method : "eth_signTypedData_v4" ,
149
+ params : [ accounts [ 0 ] , msgParams ] ,
150
+ } ) ;
151
+
152
+ document . getElementById ( "signature" ) . textContent = "Signature: " + signature ;
153
+ }
154
+
155
+ async function relayGreeting ( greetingText , greetingDeadline , greetingSender , signature )
156
+ {
157
+ const r = signature . slice ( 0 , 66 ) ;
158
+ const s = "0x" + signature . slice ( 66 , 130 ) ;
159
+ const v = parseInt ( signature . slice ( 130 , 132 ) , 16 ) ;
160
+ console . log ( { v, r, s} )
161
+
162
+ var url = "http://localhost:8080/relay?"
163
+ url += "greetingText=" + greetingText
164
+ url += "&greetingDeadline=" + greetingDeadline
165
+ url += "&greetingSender=" + greetingSender
166
+ url += "&v=" + v
167
+ url += "&r=" + r
168
+ url += "&s=" + s
169
+
170
+ const relayRequest = new Request ( url , {
171
+ method : 'GET' ,
172
+ headers : new Headers ( ) ,
173
+ mode : 'cors' ,
174
+ cache : 'default' ,
175
+ } ) ;
176
+
177
+ fetch ( relayRequest ) ;
178
+
179
+ alert ( "Message sent!" )
180
+ }
0 commit comments