Scroll payment bridge (#8)

* scroll payment bridge

.env.example

@@ -0,0 +1,2 @@
+PRIVATE_KEY=
+SEPOLIA_ETHERSCAN_API_KEY=

.github/workflows/foundry-pr.yml

@@ -20,9 +20,10 @@ jobs:
 
  steps:
  - uses: actions/checkout@v3
- with:
- submodules: recursive
-
+ #with:
+ # submodules: recursive
+ - name: Install JS libs
+ run : npm install
  - name: Install Foundry
  uses: foundry-rs/foundry-toolchain@v1
  with:

.gitignore

@@ -12,6 +12,7 @@ docs/
 
 # Dotenv file
 blockchain/.env
+blockchain/node_modules
 
 
 # Frontend
@@ -46,3 +47,5 @@ frontend/.env.production.local
 
 # vercel
 frontend/.vercel
+
+.env

.gitmodules

@@ -1,3 +1,4 @@
 [submodule "blockchain/lib/forge-std"]
  path = blockchain/lib/forge-std
- url = https://github.com/foundry-rs/forge-std
+ url = https://github.com/foundry-rs/forge-stdw
+

Makefile

@@ -1,3 +1,7 @@
+# The .env file should be filled or the next commands will fail
+include .env
+
+
 # It will generate the TypeScript types for a specific smart contract
 # contrac=NameOfContract without the .sol extension
 # Usage:
@@ -8,4 +12,21 @@ generate-types:
 .PHONY: generate-types
 
 
+# It will deploy a contract on Sepolia
+# usage:
+# make contract=Counter deploy-sepolia
+deploy-sepolia:
+ cd blockchain && forge create 'src/$(contract).sol:$(contract)' --rpc-url 'https://eth-sepolia-public.unifra.io/' --private-key $(PRIVATE_KEY) --legacy --verify --etherscan-api-key $(ETHERSCAN_API_KEY) 
+.PHONY: deploy-sepolia
+
+# It will deploy a Smart contract into the Scroll Sepolia blockchain
+# make contract=Counter deploy-scroll-sepolia
+deploy-scroll-sepolia:
+ cd blockchain && forge create 'src/$(contract).sol:$(contract)' --rpc-url "https://sepolia-rpc.scroll.io/" --private-key $(PRIVATE_KEY) --legacy
+.PHONY: deploy-scroll-sepolia
 
+# It will verify a previous contract deployed to Scroll Sepolia
+# make contract=Counter address=0x765656 verify-scroll-sepolia
+verify-scroll-sepolia:
+ cd blockchain && forge verify-contract $(address) 'src/$(contract).sol:$(contract)' --chain-id 534351 --verifier-url https://sepolia-blockscout.scroll.io/api? --verifier blockscout
+.PHONY: verify-scroll-sepolia

blockchain/.github/workflows/test.yml

@@ -0,0 +1,34 @@
+name: test
+
+on: workflow_dispatch
+
+env:
+ FOUNDRY_PROFILE: ci
+
+jobs:
+ check:
+ strategy:
+ fail-fast: true
+
+ name: Foundry project
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v3
+ with:
+ submodules: recursive
+
+ - name: Install Foundry
+ uses: foundry-rs/foundry-toolchain@v1
+ with:
+ version: nightly
+
+ - name: Run Forge build
+ run: |
+ forge --version
+ forge build --sizes
+ id: build
+
+ - name: Run Forge tests
+ run: |
+ forge test -vvv
+ id: test

blockchain/.gitignore

@@ -0,0 +1,14 @@
+# Compiler files
+cache/
+out/
+
+# Ignores development broadcast logs
+!/broadcast
+/broadcast/*/31337/
+/broadcast/**/dry-run/
+
+# Docs
+docs/
+
+# Dotenv file
+.env

blockchain/foundry.toml

@@ -5,7 +5,7 @@
  cbor_metadata = false
  fuzz = { runs = 1_000 }
  gas_reports = ["*"]
- libs = ["lib"]
+ libs = ["lib", "node_modules"]
  optimizer = true
  optimizer_runs = 10_000
  out = "out"

blockchain/package.json

@@ -0,0 +1,5 @@
+{
+ "dependencies": {
+ "@scroll-tech/contracts": "^0.1.0"
+ }
+}

blockchain/src/ETHToScrollPaymentBridge.sol

@@ -0,0 +1,19 @@
+// SPDX-License-Identifier: UNLICENSED
+pragma solidity ^0.8.16;
+
+import "@scroll-tech/contracts/L1/gateways/IL1ETHGateway.sol";
+
+// ETHToScrollPaymentBridge is a bridge from ETH blockchain and ScrollBlockchain
+// NOTE: be sure to deploy this contract on ETH blockchains (Mainent, Sepolia)
+// this should NOT be deployed on Scroll. 
+contract ETHToScrollPaymentBridge {
+
+ // @notice this function will deposit ETH from L1 to L2
+ // @param to the address of recipient's account on L2.
+ // @param gasLimit to process the transaction
+ function depositETHToScroll(address to, uint gasLimit) public payable {
+ IL1ETHGateway(to).depositETH(msg.sender, msg.value, gasLimit);
+ }
+
+ receive() external payable {}
+}

blockchain/src/ScrollToETHPaymentBridge.sol

@@ -0,0 +1,16 @@
+// SPDX-License-Identifier: UNLICENSED
+pragma solidity ^0.8.16;
+
+import "@scroll-tech/contracts/L2/gateways/IL2ETHGateway.sol";
+
+// ScrollToETHPaymentBridge is in charge to manage transaction from L2 to L1
+// NOTE: this contract should be deployed on L2 Scroll, Scroll-Sepolia
+contract ScrollToETHPaymentBridge {
+
+ // @notice this function will withdraw ETH from L2 to L1
+ // @param to the address of recipient's account on L1
+ // @param gasLimit to process the transaction
+ function withdrawETH(address to, uint gasLimit) public payable {
+ IL2ETHGateway(to).withdrawETH(msg.sender, msg.value, gasLimit);
+ }
+}

frontend/components/ConnectWallet.tsx

@@ -1,36 +1,29 @@
 import { useState } from 'react';
 import Container from './Container'
 import { ethers } from 'ethers'
+import WalletService from '../services/wallet';
 
 
-declare let window:any;
-
 const ConnectWallet = (props:any) => {
 
+ const walletService = new WalletService()
  const [address, setAddress] = useState<string>();
  const [balance, setBalance] = useState<string>();
 
  const handleConnectWallet = async () => {
- if (window.ethereum) { 
- const provider = new ethers.providers.Web3Provider(window.ethereum);
- await provider.send('eth_requestAccounts', [])
- const signer = provider.getSigner()
- setAddress(await signer.getAddress())
- setBalance(ethers.utils.formatEther(await signer.getBalance())) 
- props.setIsConnected(true);
- } else {
- alert("Please Install Metamask!!!");
- }
+ const signer = await walletService.getSigner()
+ setAddress(await signer.getAddress())
+ setBalance(ethers.utils.formatEther(await signer.getBalance())) 
+ props.setIsConnected(true)
  }
 
  return (
  <Container className={`flex w-full flex-col mt-4 ${
  props.align === "left" ? "" : "items-center justify-center text-center"
  }`}>
  {/** show the connect wallet button just if is not connect **/}
- {!address &&
- <button type="button" className="btn btn-primary w-full" onClick={handleConnectWallet}>{props.label}</button>
-
+ {!props.isConnected &&
+ <button type="button" className="btn btn-primary w-full" onClick={handleConnectWallet}>{props.label}</button>
  } 
 
  <div className="ml-2 flex flex-col">

frontend/components/ScrollDeposit.tsx

@@ -1,7 +1,24 @@
 
+import React, { useState } from 'react';
+import ScrollPaymentBridgeService from '../services/scroll';
+import WalletService from '../services/wallet';
 import Container from './Container'
 
+
 const ScrollDeposit = () => {
+ const [amount, setAmount] = useState<string>("")
+ const walletService = new WalletService()
+ const scrollService = new ScrollPaymentBridgeService()
+
+ const onChangeAmount = (event: React.ChangeEvent<HTMLInputElement>) => {
+ setAmount(event.currentTarget.value)
+ }
+
+ const onClickDeposit = async () => {
+ const signer = await walletService.getSigner()
+ scrollService.TransferL1L2(signer, amount)
+ }
+
  return (
  <Container>
  <div className="mx-auto flex w-full max-w-sm flex-col gap-6">
@@ -12,12 +29,12 @@ const ScrollDeposit = () => {
  <div className="form-field">
  <label className="form-label">Amount</label>
  <div className="form-control">
- <input placeholder="Example: 1000 ETH" className="input max-w-full" />
+ <input value={amount} onChange={onChangeAmount} placeholder="Example: 1000 ETH" className="input max-w-full" />
  </div>
  </div>
  <div className="form-field pt-5">
  <div className="form-control justify-between">
- <button type="button" className="btn btn-primary w-full">Deposit</button>
+ <button onClick={onClickDeposit} type="button" className="btn btn-primary w-full">Deposit</button>
  </div>
  </div>
 

frontend/components/Sidebar.tsx

@@ -2,27 +2,27 @@ import React from 'react'
 
 const Sidebar = (props:any) => {
  return (
- <div className="flex flex-row gap-10">
+ <div>
+ {props.isConnected &&
+ <div className="sticky flex h-screen flex-row gap-4 overflow-y-auto rounded-lg sm:overflow-x-hidden">
  <div className="w-full max-w-[18rem]">
  <aside className="sidebar h-full justify-start">
  <section className="sidebar-content h-fit min-h-[20rem] overflow-visible">
  <nav className="menu rounded-md">
  <section className="menu-section px-4">
- <span className="menu-title">Main menu</span>
  <ul className="menu-items">
-
+ <li className="menu-item">
+ <span>Deposit</span>
+ </li>
  <li className="menu-item">
  <span>Transactions</span>
  </li>
-
  <li className="menu-item menu-active">
  <span>Loans</span>
  </li>
-
  <li className="menu-item">
  <span>Scoring</span>
  </li>
-
  </ul>
  </section>
  </nav>
@@ -31,31 +31,18 @@ const Sidebar = (props:any) => {
  </aside> 
  </div>
 
- <div className="flex flex-col p-4 w-full">
- {props.topmenu}
-
- <div className="w-fit">
- <label htmlFor="sidebar-mobile-fixed" className="btn btn-primary sm:hidden">Open Sidebar</label>
- </div>
-
- <div className="grid grid-cols-2 gap-4 my-4">
- <div className="h-40 w-full border-dashed border-2 border-border bg-gray-1 flex justify-center items-center">+</div>
+ <div className="flex flex-col p-4 w-full">
+ {props.topmenu}
+
+ <div className="w-fit">
+ <label htmlFor="sidebar-mobile-fixed" className="btn btn-primary sm:hidden">Open Sidebar</label>
+ </div>
 
- <div className="h-40 w-full border-dashed border-2 border-border bg-gray-1 flex justify-center items-center">+</div>
- <div className="h-40 w-full border-dashed border-2 border-border bg-gray-1 flex justify-center items-center">+</div>
- <div className="h-40 w-full border-dashed border-2 border-border bg-gray-1 flex justify-center items-center">+</div>
- <div className="h-40 w-full border-dashed border-2 border-border bg-gray-1 flex justify-center items-center">+</div>
- <div className="h-40 w-full border-dashed border-2 border-border bg-gray-1 flex justify-center items-center">+</div>
- <div className="h-40 w-full border-dashed border-2 border-border bg-gray-1 flex justify-center items-center">+</div>
- <div className="h-40 w-full border-dashed border-2 border-border bg-gray-1 flex justify-center items-center">+</div>
- <div className="h-40 w-full border-dashed border-2 border-border bg-gray-1 flex justify-center items-center">+</div>
- <div className="h-40 w-full border-dashed border-2 border-border bg-gray-1 flex justify-center items-center">+</div>
- <div className="h-40 w-full border-dashed border-2 border-border bg-gray-1 flex justify-center items-center">+</div>
- <div className="h-40 w-full border-dashed border-2 border-border bg-gray-1 flex justify-center items-center">+</div>
+ {props.content}
  </div>
- </div>
-
  </div>
+ }
+ </div>
  )
 }