Skip to content

Commit

Permalink
Feat/action callbacks (#31)
Browse files Browse the repository at this point in the history 
* Init `useBridgeQuoteCallback`

* Add guardrail statements for useBRidgeQuoteCallback states

* getBridgeQuote

* Add FetchStatusCallback to clean `getBridgeQuoet` progress updates

* Return `getBridgeQuote` as callback in useBridgeQuoteCallback`

* Add return type

* BridgeQuote callback working

* `useBridgeQuoteCallback` working properly in Widget

* approveErc20Token util

* init useApproveCallback

* getErc20TokenAllowance

* Init `useAllowance` hook

* Update fetchErc20TokenAllowance prop naming

* Add guardrail statements in useAllowance

* Return checkAllowance callback in useAllowance hook

* Clean useAllowance

* useAllowance return type

* Integrating

* Add error handling for fetchErc20TokenAllowance

* Import supported Chain constants, Wagmi setup

* rollup image plugin

* Basic Wagmi setup

* Update roll up config, add back WagmiConfig

* Working Viem

* Update f
etchErc20TokenAllowance with viem

* Update `approveErc20Token` util action for viem

* Basic useApprove callback

* Basic approve callback flow working

* Prevent approve callback from firing if guardrails fail

* UseBridgeCallbackArgs interface

* Pass synapseSDK object into useBridgeCallback

* useBridgeCallback guardrail checks

* Basic useBridgeCallback working with callback

* Working

* Wrap error handler on fetchBridgeQuote

* Add Polygon on Consumer side

* Set Polygon as Destination for testing bridge callback

* Bridge Callback working

* Add static Approve and Bridge button with states when Quote is reuiqred

* rm assets/constants not being used yet

* Fix merge

* Setup Example with latest Redux work
  • Loading branch information
@bigboydiamonds
bigboydiamonds authored Dec 6, 2023
1 parent 99f349e commit a2a36c2
Show file tree
Hide file tree
Showing 20 changed files with 840 additions and 197 deletions.
Binary file added .DS_Store
View file
Binary file not shown.
141 changes: 101 additions & 40 deletions examples/with-react/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,12 @@ const tokens = [
chainId: 42161,
decimals: 6,
},
{
tokenAddress: '0x2791bca1f2de4661ed88a30c99a7a9449aa84174',
symbol: 'USDC',
chainId: 137,
decimals: 6,
},
]

function App() {
Expand All @@ -51,9 +57,16 @@ function App() {
'https://arbitrum.llamarpc.com',
42161
)
const polygonProvider = new StaticJsonRpcProvider(
'https://polygon.llamarpc.com',
137
)

const providers = [ethersProvider, aribtrumProvider]
const chainIds = [1, 42161]
// const providers = [ethersProvider, aribtrumProvider]
// const chainIds = [1, 42161]

const providers = [aribtrumProvider, ethersProvider, polygonProvider]
const chainIds = [42161, 1, 137]

const [customTheme, setCustomTheme] = useState({})

Expand Down Expand Up @@ -84,7 +97,8 @@ function App() {
a: 100 * a,
}
}
const hslString = (h: number, s: number, l: number, a: number) => `hsl(${h}deg ${s}% ${l}% / ${a}%)`
const hslString = (h: number, s: number, l: number, a: number) =>
`hsl(${h}deg ${s}% ${l}% / ${a}%)`

const colorPicker = document.getElementById(
'color-picker'
Expand All @@ -95,26 +109,64 @@ function App() {
'accent-color-picker'
) as HTMLInputElement | null

setCustomTheme(l < 50
? {
'--synapse-text-primary': hslString(h, s, l * 0.96 + 96, a),
'--synapse-text-secondary': hslString(h, s, l * 0.86 + 86, a),
'--synapse-bg-select': hslString(h, s, l * 0.25 + 25, a),
'--synapse-bg-surface': hslString(h, s, l * 0.12 + 12, a),
'--synapse-bg-root': hslString(h, s, l * 0.07 + 7, a),
'--synapse-border': hslString(h, s, l * 0.12 + 12, a),
'--synapse-border-hover': hslString(h, s, l * 0.66 + 66, a),
'--synapse-brand': accentColorPicker?.value ?? '#ffffff',
} : {
'--synapse-text-primary': hslString(h, s, Math.min(100, l * 1.07) * 0.07, a),
'--synapse-text-secondary': hslString(h, s, Math.min(100, l * 1.41) * 0.41, a),
'--synapse-bg-select': hslString(h, s, Math.min(100, l * 1.96) * 0.96, a),
'--synapse-bg-surface': hslString(h, s, Math.min(100, l * 2.0) * 1.0, a),
'--synapse-bg-root': hslString(h, s, Math.min(100, l * 1.96) * 0.96, a),
'--synapse-border': hslString(h, s, Math.min(100, l * 1.86) * 0.86, a),
'--synapse-border-hover': hslString(h, s, Math.min(100, l * 1.66) * 0.66, a),
'--synapse-brand': accentColorPicker?.value ?? '#000000',
})
setCustomTheme(
l < 50
? {
'--synapse-text-primary': hslString(h, s, l * 0.96 + 96, a),
'--synapse-text-secondary': hslString(h, s, l * 0.86 + 86, a),
'--synapse-bg-select': hslString(h, s, l * 0.25 + 25, a),
'--synapse-bg-surface': hslString(h, s, l * 0.12 + 12, a),
'--synapse-bg-root': hslString(h, s, l * 0.07 + 7, a),
'--synapse-border': hslString(h, s, l * 0.12 + 12, a),
'--synapse-border-hover': hslString(h, s, l * 0.66 + 66, a),
'--synapse-brand': accentColorPicker?.value ?? '#ffffff',
}
: {
'--synapse-text-primary': hslString(
h,
s,
Math.min(100, l * 1.07) * 0.07,
a
),
'--synapse-text-secondary': hslString(
h,
s,
Math.min(100, l * 1.41) * 0.41,
a
),
'--synapse-bg-select': hslString(
h,
s,
Math.min(100, l * 1.96) * 0.96,
a
),
'--synapse-bg-surface': hslString(
h,
s,
Math.min(100, l * 2.0) * 1.0,
a
),
'--synapse-bg-root': hslString(
h,
s,
Math.min(100, l * 1.96) * 0.96,
a
),
'--synapse-border': hslString(
h,
s,
Math.min(100, l * 1.86) * 0.86,
a
),
'--synapse-border-hover': hslString(
h,
s,
Math.min(100, l * 1.66) * 0.66,
a
),
'--synapse-brand': accentColorPicker?.value ?? '#000000',
}
)
}

const customThemeDFK = {
Expand Down Expand Up @@ -142,10 +194,6 @@ function App() {
const { web3Provider, connectedAddress, connectedNetwork } =
useEthereumWallet()

console.log('Consumer address:', connectedAddress)
console.log('Consumer web3 provider: ', web3Provider)
console.log('Consumer connectedNetwork: ', connectedNetwork)

return (
<>
<header>
Expand Down Expand Up @@ -203,26 +251,39 @@ function App() {
</dl>
<h3>Color Values</h3>
<dl>
<dt>--synapse-text-primary</dt><dd>hsl(0deg 0% 0% / 100%)</dd>
<dt>--synapse-text-secondary</dt><dd>hsl(0deg 0% 0% / 100%)</dd>
<dt>--synapse-text-primary</dt>
<dd>hsl(0deg 0% 0% / 100%)</dd>
<dt>--synapse-text-secondary</dt>
<dd>hsl(0deg 0% 0% / 100%)</dd>
</dl>
<dl>
<dt>--synapse-bg-select</dt><dd>hsl(0deg 0% 0% / 100%)</dd>
<dt>--synapse-bg-surface</dt><dd>hsl(0deg 0% 0% / 100%)</dd>
<dt>--synapse-bg-root</dt><dd>hsl(0deg 0% 0% / 100%)</dd>
<dt>--synapse-bg-select</dt>
<dd>hsl(0deg 0% 0% / 100%)</dd>
<dt>--synapse-bg-surface</dt>
<dd>hsl(0deg 0% 0% / 100%)</dd>
<dt>--synapse-bg-root</dt>
<dd>hsl(0deg 0% 0% / 100%)</dd>
</dl>
<dl>
<dt>--synapse-border</dt><dd>hsl(0deg 0% 0% / 100%)</dd>
<dt>--synapse-border-hover</dt><dd>hsl(0deg 0% 0% / 100%)</dd>
<dt>--synapse-brand</dt><dd>hsl(0deg 0% 0% / 100%)</dd>
<dt>--synapse-border</dt>
<dd>hsl(0deg 0% 0% / 100%)</dd>
<dt>--synapse-border-hover</dt>
<dd>hsl(0deg 0% 0% / 100%)</dd>
<dt>--synapse-brand</dt>
<dd>hsl(0deg 0% 0% / 100%)</dd>
</dl>
<h3>Typography — WIP, not reflected in code</h3>
<dl>
<dt>--synapse-font-size</dt><dd>100%</dd>
<dt>--synapse-font-family-display</dt><dd>system-ui</dd>
<dt>--synapse-font-family-text</dt><dd>system-ui</dd>
<dt>--synapse-font-weight-display</dt><dd>600 (semibold)</dd>
<dt>--synapse-font-weight-text</dt><dd>500 (medium)</dd>
<dt>--synapse-font-size</dt>
<dd>100%</dd>
<dt>--synapse-font-family-display</dt>
<dd>system-ui</dd>
<dt>--synapse-font-family-text</dt>
<dd>system-ui</dd>
<dt>--synapse-font-weight-display</dt>
<dd>600 (semibold)</dd>
<dt>--synapse-font-weight-text</dt>
<dd>500 (medium)</dd>
</dl>
</main>

Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
},
"devDependencies": {
"@rollup/plugin-commonjs": "^25.0.7",
"@rollup/plugin-image": "^3.0.3",
"@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-typescript": "^11.1.5",
"@types/react": "^18.2.39",
Expand All @@ -50,6 +51,6 @@
"ethers": "^6.9.0",
"react-redux": "^9.0.2",
"viem": "^1.19.11",
"wagmi": "^1.4.7"
"wagmi": "^1.4.8"
}
}
4 changes: 3 additions & 1 deletion rollup.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import commonjs from '@rollup/plugin-commonjs'
import typescript from '@rollup/plugin-typescript'
import dts from 'rollup-plugin-dts'
import postcss from 'rollup-plugin-postcss'
import image from '@rollup/plugin-image';

import packageJson from './package.json' assert { type: 'json' }

Expand All @@ -19,7 +20,7 @@ export default [
format: 'esm',
},
],
external: ['react', 'react/jsx-runtime'],
external: ['react', 'react/jsx-runtime', 'viem'],
plugins: [
resolve(),
commonjs(),
Expand All @@ -31,6 +32,7 @@ export default [
postcss({
plugins: [],
}),
image()
],
watch: {
buildDelay: 200,
Expand Down
Binary file added src/.DS_Store
View file
Binary file not shown.
Loading

0 comments on commit a2a36c2

Please sign in to comment.