diff --git a/apps/gallery/CHANGELOG.md b/apps/gallery/CHANGELOG.md index 969c25bf2f..1bbd460f90 100644 --- a/apps/gallery/CHANGELOG.md +++ b/apps/gallery/CHANGELOG.md @@ -1,5 +1,15 @@ # @apps/gallery +## 4.0.4 + +### Patch Changes + +- Fix theming issue for email + +- Updated dependencies []: + - @web3modal/common@4.0.4 + - @web3modal/ui@4.0.4 + ## 4.0.3 ### Patch Changes diff --git a/apps/gallery/package.json b/apps/gallery/package.json index 7e7b773042..689c24c502 100644 --- a/apps/gallery/package.json +++ b/apps/gallery/package.json @@ -1,6 +1,6 @@ { "name": "@apps/gallery", - "version": "4.0.3", + "version": "4.0.4", "private": true, "main": "index.js", "scripts": { @@ -9,8 +9,8 @@ "lint": "eslint . --ext .js,.jsx,.ts,.tsx" }, "dependencies": { - "@web3modal/common": "4.0.3", - "@web3modal/ui": "4.0.3", + "@web3modal/common": "4.0.4", + "@web3modal/ui": "4.0.4", "lit": "3.1.0", "storybook": "7.6.7" }, diff --git a/apps/gallery/stories/composites/wui-input-text.stories.ts b/apps/gallery/stories/composites/wui-input-text.stories.ts index 95d5c4dd7c..7dc82f95d5 100644 --- a/apps/gallery/stories/composites/wui-input-text.stories.ts +++ b/apps/gallery/stories/composites/wui-input-text.stories.ts @@ -17,7 +17,7 @@ export default { }, argTypes: { size: { - options: ['sm', 'md'], + options: ['sm', 'md', 'lg'], control: { type: 'select' } }, disabled: { diff --git a/apps/laboratory/CHANGELOG.md b/apps/laboratory/CHANGELOG.md index 10507ad739..3158faeae7 100644 --- a/apps/laboratory/CHANGELOG.md +++ b/apps/laboratory/CHANGELOG.md @@ -1,5 +1,16 @@ # @apps/laboratory +## 4.0.4 + +### Patch Changes + +- Fix theming issue for email + +- Updated dependencies []: + - @web3modal/ethers@4.0.4 + - @web3modal/ethers5@4.0.4 + - @web3modal/wagmi@4.0.4 + ## 4.0.3 ### Patch Changes diff --git a/apps/laboratory/package.json b/apps/laboratory/package.json index 2372151444..4187cde6bf 100644 --- a/apps/laboratory/package.json +++ b/apps/laboratory/package.json @@ -1,6 +1,6 @@ { "name": "@apps/laboratory", - "version": "4.0.3", + "version": "4.0.4", "private": true, "scripts": { "dev:laboratory": "next dev", @@ -22,9 +22,9 @@ "@sentry/browser": "7.92.0", "@sentry/react": "7.92.0", "@tanstack/react-query": "5.17.19", - "@web3modal/ethers": "4.0.3", - "@web3modal/ethers5": "4.0.3", - "@web3modal/wagmi": "4.0.3", + "@web3modal/ethers": "4.0.4", + "@web3modal/ethers5": "4.0.4", + "@web3modal/wagmi": "4.0.4", "framer-motion": "10.17.9", "next": "14.0.4", "next-auth": "4.24.5", diff --git a/apps/laboratory/src/components/Web3ModalButtons.tsx b/apps/laboratory/src/components/Web3ModalButtons.tsx index 8ab100672b..1b633ee34e 100644 --- a/apps/laboratory/src/components/Web3ModalButtons.tsx +++ b/apps/laboratory/src/components/Web3ModalButtons.tsx @@ -22,6 +22,12 @@ export function Web3ModalButtons() { + + + Onramp Widget + + + diff --git a/dangerfile.ts b/dangerfile.ts index 71961f4fe0..ea1313d570 100644 --- a/dangerfile.ts +++ b/dangerfile.ts @@ -1,7 +1,7 @@ /* eslint-disable no-await-in-loop */ import { danger, fail, message, warn } from 'danger' import corePackageJson from './packages/core/package.json' assert { type: 'json' } -import coreScaffoldUtilsJson from './packages/scaffold-utils/package.json' assert { type: 'json' } +import { ConstantsUtil } from './packages/scaffold-utils/src/ConstantsUtil' // -- Constants --------------------------------------------------------------- const TYPE_COMMENT = `// -- Types --------------------------------------------- //` @@ -10,6 +10,7 @@ const CONTROLLER_COMMENT = `// -- Controller ----------------------------------- const RENDER_COMMENT = `// -- Render -------------------------------------------- //` const STATE_PROPERTIES_COMMENT = `// -- State & Properties -------------------------------- //` const PRIVATE_COMMENT = `// -- Private ------------------------------------------- //` +const PACKAGE_VERSION = ConstantsUtil.VERSION // -- Data -------------------------------------------------------------------- const { modified_files, created_files, deleted_files, diffForFile } = danger.git @@ -283,7 +284,7 @@ checkClientPackages() // -- Check sdkVersion ------------------------------------------------------------ function checkSdkVersion() { - if (coreScaffoldUtilsJson.version !== corePackageJson.version) { + if (PACKAGE_VERSION !== corePackageJson.version) { fail(`VERSION in utils/constants does't match core package.json version`) } } diff --git a/examples/html-ethers5/CHANGELOG.md b/examples/html-ethers5/CHANGELOG.md index 54c275dbc0..976169dc9c 100644 --- a/examples/html-ethers5/CHANGELOG.md +++ b/examples/html-ethers5/CHANGELOG.md @@ -1,5 +1,14 @@ # @examples/html-ethers5 +## 4.0.4 + +### Patch Changes + +- Fix theming issue for email + +- Updated dependencies []: + - @web3modal/ethers5@4.0.4 + ## 4.0.3 ### Patch Changes diff --git a/examples/html-ethers5/package.json b/examples/html-ethers5/package.json index 25b6ac23fb..3ac2c231a0 100644 --- a/examples/html-ethers5/package.json +++ b/examples/html-ethers5/package.json @@ -1,13 +1,13 @@ { "name": "@examples/html-ethers5", "private": true, - "version": "4.0.3", + "version": "4.0.4", "scripts": { "dev:example": "vite --port 3011", "build:examples": "vite build" }, "dependencies": { - "@web3modal/ethers5": "4.0.3", + "@web3modal/ethers5": "4.0.4", "ethers": "5.7.2" }, "devDependencies": { diff --git a/examples/html-wagmi/CHANGELOG.md b/examples/html-wagmi/CHANGELOG.md index eea84779bc..320e367780 100644 --- a/examples/html-wagmi/CHANGELOG.md +++ b/examples/html-wagmi/CHANGELOG.md @@ -1,5 +1,14 @@ # @examples/html-wagmi +## 4.0.4 + +### Patch Changes + +- Fix theming issue for email + +- Updated dependencies []: + - @web3modal/wagmi@4.0.4 + ## 4.0.3 ### Patch Changes diff --git a/examples/html-wagmi/package.json b/examples/html-wagmi/package.json index df95e5c076..ec35e7f337 100644 --- a/examples/html-wagmi/package.json +++ b/examples/html-wagmi/package.json @@ -1,13 +1,13 @@ { "name": "@examples/html-wagmi", "private": true, - "version": "4.0.3", + "version": "4.0.4", "scripts": { "dev:example": "vite --port 3001", "build:examples": "vite build" }, "dependencies": { - "@web3modal/wagmi": "4.0.3", + "@web3modal/wagmi": "4.0.4", "react": "18.2.0", "react-dom": "18.2.0" }, diff --git a/examples/next-wagmi/CHANGELOG.md b/examples/next-wagmi/CHANGELOG.md index 9b7165a55f..4fad200446 100644 --- a/examples/next-wagmi/CHANGELOG.md +++ b/examples/next-wagmi/CHANGELOG.md @@ -1,5 +1,14 @@ # @examples/next-wagmi +## 4.0.4 + +### Patch Changes + +- Fix theming issue for email + +- Updated dependencies []: + - @web3modal/wagmi@4.0.4 + ## 4.0.3 ### Patch Changes diff --git a/examples/next-wagmi/package.json b/examples/next-wagmi/package.json index a355ab4b58..9847d82a9c 100644 --- a/examples/next-wagmi/package.json +++ b/examples/next-wagmi/package.json @@ -1,6 +1,6 @@ { "name": "@examples/next-wagmi", - "version": "4.0.3", + "version": "4.0.4", "private": true, "scripts": { "dev": "next dev", @@ -10,7 +10,7 @@ }, "dependencies": { "@tanstack/react-query": "5.17.19", - "@web3modal/wagmi": "4.0.3", + "@web3modal/wagmi": "4.0.4", "next": "14.1.0", "react": "18.2.0", "react-dom": "18.2.0", diff --git a/examples/react-ethers5/CHANGELOG.md b/examples/react-ethers5/CHANGELOG.md index 71f5bfb679..de79efe3e4 100644 --- a/examples/react-ethers5/CHANGELOG.md +++ b/examples/react-ethers5/CHANGELOG.md @@ -1,5 +1,14 @@ # @examples/react-ethers5 +## 4.0.4 + +### Patch Changes + +- Fix theming issue for email + +- Updated dependencies []: + - @web3modal/ethers5@4.0.4 + ## 4.0.3 ### Patch Changes diff --git a/examples/react-ethers5/package.json b/examples/react-ethers5/package.json index 110cf7288c..b95a2544d6 100644 --- a/examples/react-ethers5/package.json +++ b/examples/react-ethers5/package.json @@ -1,13 +1,13 @@ { "name": "@examples/react-ethers5", "private": true, - "version": "4.0.3", + "version": "4.0.4", "scripts": { "dev:example": "vite --port 3012", "build:examples": "vite build" }, "dependencies": { - "@web3modal/ethers5": "4.0.3", + "@web3modal/ethers5": "4.0.4", "ethers": "5.7.2", "react": "18.2.0", "react-dom": "18.2.0" diff --git a/examples/react-wagmi/CHANGELOG.md b/examples/react-wagmi/CHANGELOG.md index 8acdf5f5b6..0aeaac6a7a 100644 --- a/examples/react-wagmi/CHANGELOG.md +++ b/examples/react-wagmi/CHANGELOG.md @@ -1,5 +1,14 @@ # @examples/react-wagmi +## 4.0.4 + +### Patch Changes + +- Fix theming issue for email + +- Updated dependencies []: + - @web3modal/wagmi@4.0.4 + ## 4.0.3 ### Patch Changes diff --git a/examples/react-wagmi/package.json b/examples/react-wagmi/package.json index 21965b83ad..1aa26a2f28 100644 --- a/examples/react-wagmi/package.json +++ b/examples/react-wagmi/package.json @@ -1,14 +1,14 @@ { "name": "@examples/react-wagmi", "private": true, - "version": "4.0.3", + "version": "4.0.4", "scripts": { "dev:example": "vite --port 3002", "build:examples": "vite build" }, "dependencies": { "@tanstack/react-query": "5.17.19", - "@web3modal/wagmi": "4.0.3", + "@web3modal/wagmi": "4.0.4", "react": "18.2.0", "react-dom": "18.2.0", "viem": "2.5.0", diff --git a/examples/vue-ethers5/CHANGELOG.md b/examples/vue-ethers5/CHANGELOG.md index db228702da..9c6a6963a7 100644 --- a/examples/vue-ethers5/CHANGELOG.md +++ b/examples/vue-ethers5/CHANGELOG.md @@ -1,5 +1,14 @@ # @examples/vue-ethers5 +## 4.0.4 + +### Patch Changes + +- Fix theming issue for email + +- Updated dependencies []: + - @web3modal/ethers5@4.0.4 + ## 4.0.3 ### Patch Changes diff --git a/examples/vue-ethers5/package.json b/examples/vue-ethers5/package.json index 4e301015c6..7445fe6d16 100644 --- a/examples/vue-ethers5/package.json +++ b/examples/vue-ethers5/package.json @@ -1,13 +1,13 @@ { "name": "@examples/vue-ethers5", "private": true, - "version": "4.0.3", + "version": "4.0.4", "scripts": { "dev:example": "vite --port 3013", "build:examples": "vite build" }, "dependencies": { - "@web3modal/ethers5": "4.0.3", + "@web3modal/ethers5": "4.0.4", "ethers": "5.7.2" }, "devDependencies": { diff --git a/examples/vue-wagmi/CHANGELOG.md b/examples/vue-wagmi/CHANGELOG.md index 6ca170da75..d21ff02f63 100644 --- a/examples/vue-wagmi/CHANGELOG.md +++ b/examples/vue-wagmi/CHANGELOG.md @@ -1,5 +1,14 @@ # @examples/vue-wagmi +## 4.0.4 + +### Patch Changes + +- Fix theming issue for email + +- Updated dependencies []: + - @web3modal/wagmi@4.0.4 + ## 4.0.3 ### Patch Changes diff --git a/examples/vue-wagmi/package.json b/examples/vue-wagmi/package.json index 916ecabc63..e8650e794e 100644 --- a/examples/vue-wagmi/package.json +++ b/examples/vue-wagmi/package.json @@ -1,13 +1,13 @@ { "name": "@examples/vue-wagmi", "private": true, - "version": "4.0.3", + "version": "4.0.4", "scripts": { "dev:example": "vite --port 3003", "build:examples": "vite build" }, "dependencies": { - "@web3modal/wagmi": "4.0.3" + "@web3modal/wagmi": "4.0.4" }, "devDependencies": { "@vitejs/plugin-vue": "5.0.2" diff --git a/package-lock.json b/package-lock.json index 4cd38664a0..3447b37420 100644 --- a/package-lock.json +++ b/package-lock.json @@ -41,10 +41,10 @@ }, "apps/gallery": { "name": "@apps/gallery", - "version": "4.0.3", + "version": "4.0.4", "dependencies": { - "@web3modal/common": "4.0.3", - "@web3modal/ui": "4.0.3", + "@web3modal/common": "4.0.4", + "@web3modal/ui": "4.0.4", "lit": "3.1.0", "storybook": "7.6.7" }, @@ -70,7 +70,7 @@ }, "apps/laboratory": { "name": "@apps/laboratory", - "version": "4.0.3", + "version": "4.0.4", "dependencies": { "@chakra-ui/react": "2.8.2", "@emotion/react": "11.11.3", @@ -78,9 +78,9 @@ "@sentry/browser": "7.92.0", "@sentry/react": "7.92.0", "@tanstack/react-query": "5.17.19", - "@web3modal/ethers": "4.0.3", - "@web3modal/ethers5": "4.0.3", - "@web3modal/wagmi": "4.0.3", + "@web3modal/ethers": "4.0.4", + "@web3modal/ethers5": "4.0.4", + "@web3modal/wagmi": "4.0.4", "framer-motion": "10.17.9", "next": "14.0.4", "next-auth": "4.24.5", @@ -112,9 +112,9 @@ }, "examples/html-ethers5": { "name": "@examples/html-ethers5", - "version": "4.0.3", + "version": "4.0.4", "dependencies": { - "@web3modal/ethers5": "4.0.3", + "@web3modal/ethers5": "4.0.4", "ethers": "5.7.2" }, "devDependencies": { @@ -170,9 +170,9 @@ }, "examples/html-wagmi": { "name": "@examples/html-wagmi", - "version": "4.0.3", + "version": "4.0.4", "dependencies": { - "@web3modal/wagmi": "4.0.3", + "@web3modal/wagmi": "4.0.4", "react": "18.2.0", "react-dom": "18.2.0" }, @@ -182,10 +182,10 @@ }, "examples/next-wagmi": { "name": "@examples/next-wagmi", - "version": "4.0.3", + "version": "4.0.4", "dependencies": { "@tanstack/react-query": "5.17.19", - "@web3modal/wagmi": "4.0.3", + "@web3modal/wagmi": "4.0.4", "next": "14.1.0", "react": "18.2.0", "react-dom": "18.2.0", @@ -248,9 +248,9 @@ }, "examples/react-ethers5": { "name": "@examples/react-ethers5", - "version": "4.0.3", + "version": "4.0.4", "dependencies": { - "@web3modal/ethers5": "4.0.3", + "@web3modal/ethers5": "4.0.4", "ethers": "5.7.2", "react": "18.2.0", "react-dom": "18.2.0" @@ -309,10 +309,10 @@ }, "examples/react-wagmi": { "name": "@examples/react-wagmi", - "version": "4.0.3", + "version": "4.0.4", "dependencies": { "@tanstack/react-query": "5.17.19", - "@web3modal/wagmi": "4.0.3", + "@web3modal/wagmi": "4.0.4", "react": "18.2.0", "react-dom": "18.2.0", "viem": "2.5.0", @@ -326,9 +326,9 @@ }, "examples/vue-ethers5": { "name": "@examples/vue-ethers5", - "version": "4.0.3", + "version": "4.0.4", "dependencies": { - "@web3modal/ethers5": "4.0.3", + "@web3modal/ethers5": "4.0.4", "ethers": "5.7.2" }, "devDependencies": { @@ -384,9 +384,9 @@ }, "examples/vue-wagmi": { "name": "@examples/vue-wagmi", - "version": "4.0.3", + "version": "4.0.4", "dependencies": { - "@web3modal/wagmi": "4.0.3" + "@web3modal/wagmi": "4.0.4" }, "devDependencies": { "@vitejs/plugin-vue": "5.0.2" @@ -30284,7 +30284,7 @@ }, "packages/common": { "name": "@web3modal/common", - "version": "4.0.3", + "version": "4.0.4", "license": "Apache-2.0", "dependencies": { "dayjs": "1.11.10" @@ -30292,11 +30292,11 @@ }, "packages/core": { "name": "@web3modal/core", - "version": "4.0.3", + "version": "4.0.4", "license": "Apache-2.0", "dependencies": { - "@web3modal/common": "4.0.3", - "@web3modal/wallet": "4.0.3", + "@web3modal/common": "4.0.4", + "@web3modal/wallet": "4.0.4", "valtio": "1.11.2" }, "devDependencies": { @@ -30305,16 +30305,16 @@ }, "packages/ethers": { "name": "@web3modal/ethers", - "version": "4.0.3", + "version": "4.0.4", "license": "Apache-2.0", "dependencies": { "@coinbase/wallet-sdk": "3.9.1", "@walletconnect/ethereum-provider": "2.11.1", - "@web3modal/polyfills": "4.0.3", - "@web3modal/scaffold": "4.0.3", - "@web3modal/scaffold-react": "4.0.3", - "@web3modal/scaffold-utils": "4.0.3", - "@web3modal/scaffold-vue": "4.0.3", + "@web3modal/polyfills": "4.0.4", + "@web3modal/scaffold": "4.0.4", + "@web3modal/scaffold-react": "4.0.4", + "@web3modal/scaffold-utils": "4.0.4", + "@web3modal/scaffold-vue": "4.0.4", "valtio": "1.11.2" }, "devDependencies": { @@ -30325,7 +30325,7 @@ "vue": "3.4.3" }, "optionalDependencies": { - "@web3modal/siwe": "4.0.3", + "@web3modal/siwe": "4.0.4", "react": ">=17", "react-dom": ">=17", "vue": ">=3" @@ -30502,16 +30502,16 @@ }, "packages/ethers5": { "name": "@web3modal/ethers5", - "version": "4.0.3", + "version": "4.0.4", "license": "Apache-2.0", "dependencies": { "@coinbase/wallet-sdk": "3.9.1", "@walletconnect/ethereum-provider": "2.11.1", - "@web3modal/polyfills": "4.0.3", - "@web3modal/scaffold": "4.0.3", - "@web3modal/scaffold-react": "4.0.3", - "@web3modal/scaffold-utils": "4.0.3", - "@web3modal/scaffold-vue": "4.0.3", + "@web3modal/polyfills": "4.0.4", + "@web3modal/scaffold": "4.0.4", + "@web3modal/scaffold-react": "4.0.4", + "@web3modal/scaffold-utils": "4.0.4", + "@web3modal/scaffold-vue": "4.0.4", "valtio": "1.11.2" }, "devDependencies": { @@ -30522,7 +30522,7 @@ "vue": "3.4.3" }, "optionalDependencies": { - "@web3modal/siwe": "4.0.3", + "@web3modal/siwe": "4.0.4", "react": ">=17", "react-dom": ">=17", "vue": ">=3" @@ -30747,7 +30747,7 @@ }, "packages/polyfills": { "name": "@web3modal/polyfills", - "version": "4.0.3", + "version": "4.0.4", "license": "Apache-2.0", "dependencies": { "buffer": "6.0.3" @@ -30755,24 +30755,24 @@ }, "packages/scaffold": { "name": "@web3modal/scaffold", - "version": "4.0.3", + "version": "4.0.4", "license": "Apache-2.0", "dependencies": { - "@web3modal/common": "4.0.3", - "@web3modal/core": "4.0.3", - "@web3modal/ui": "4.0.3", + "@web3modal/common": "4.0.4", + "@web3modal/core": "4.0.4", + "@web3modal/ui": "4.0.4", "lit": "3.1.0" }, "devDependencies": { - "@web3modal/wallet": "4.0.3" + "@web3modal/wallet": "4.0.4" } }, "packages/scaffold-react": { "name": "@web3modal/scaffold-react", - "version": "4.0.3", + "version": "4.0.4", "license": "Apache-2.0", "dependencies": { - "@web3modal/scaffold": "4.0.3" + "@web3modal/scaffold": "4.0.4" }, "peerDependencies": { "react": ">=17", @@ -30781,20 +30781,20 @@ }, "packages/scaffold-utils": { "name": "@web3modal/scaffold-utils", - "version": "4.0.3", + "version": "4.0.4", "license": "Apache-2.0", "dependencies": { - "@web3modal/polyfills": "4.0.3", - "@web3modal/scaffold": "4.0.3", + "@web3modal/polyfills": "4.0.4", + "@web3modal/scaffold": "4.0.4", "valtio": "1.11.2" } }, "packages/scaffold-vue": { "name": "@web3modal/scaffold-vue", - "version": "4.0.3", + "version": "4.0.4", "license": "Apache-2.0", "dependencies": { - "@web3modal/scaffold": "4.0.3" + "@web3modal/scaffold": "4.0.4" }, "peerDependencies": { "vue": ">=3" @@ -30812,11 +30812,11 @@ }, "packages/siwe": { "name": "@web3modal/siwe", - "version": "4.0.3", + "version": "4.0.4", "license": "Apache-2.0", "dependencies": { - "@web3modal/core": "4.0.3", - "@web3modal/scaffold-utils": "4.0.3" + "@web3modal/core": "4.0.4", + "@web3modal/scaffold-utils": "4.0.4" }, "optionalDependencies": { "react": ">=17", @@ -30842,7 +30842,7 @@ }, "packages/ui": { "name": "@web3modal/ui", - "version": "4.0.3", + "version": "4.0.4", "license": "Apache-2.0", "dependencies": { "lit": "3.1.0", @@ -30850,7 +30850,7 @@ }, "devDependencies": { "@types/qrcode": "1.5.5", - "@web3modal/common": "4.0.3", + "@web3modal/common": "4.0.4", "eslint-plugin-lit": "1.11.0", "eslint-plugin-wc": "2.0.4" } @@ -30867,14 +30867,14 @@ }, "packages/wagmi": { "name": "@web3modal/wagmi", - "version": "4.0.3", + "version": "4.0.4", "license": "Apache-2.0", "dependencies": { - "@web3modal/polyfills": "4.0.3", - "@web3modal/scaffold": "4.0.3", - "@web3modal/scaffold-react": "4.0.3", - "@web3modal/scaffold-utils": "4.0.3", - "@web3modal/scaffold-vue": "4.0.3" + "@web3modal/polyfills": "4.0.4", + "@web3modal/scaffold": "4.0.4", + "@web3modal/scaffold-react": "4.0.4", + "@web3modal/scaffold-utils": "4.0.4", + "@web3modal/scaffold-vue": "4.0.4" }, "devDependencies": { "@wagmi/connectors": "4.1.4", @@ -30886,7 +30886,7 @@ "vue": "3.4.3" }, "optionalDependencies": { - "@web3modal/siwe": "4.0.3", + "@web3modal/siwe": "4.0.4", "react": ">=17", "react-dom": ">=17", "vue": ">=3" @@ -31188,7 +31188,7 @@ }, "packages/wallet": { "name": "@web3modal/wallet", - "version": "4.0.3", + "version": "4.0.4", "license": "Apache-2.0", "dependencies": { "zod": "3.22.4" diff --git a/packages/common/CHANGELOG.md b/packages/common/CHANGELOG.md index ba73b74c57..26f05e0bfc 100644 --- a/packages/common/CHANGELOG.md +++ b/packages/common/CHANGELOG.md @@ -1,5 +1,11 @@ # @web3modal/common +## 4.0.4 + +### Patch Changes + +- Fix theming issue for email + ## 4.0.3 ### Patch Changes diff --git a/packages/common/package.json b/packages/common/package.json index 65f1a70469..092d7ae9e4 100644 --- a/packages/common/package.json +++ b/packages/common/package.json @@ -1,6 +1,6 @@ { "name": "@web3modal/common", - "version": "4.0.3", + "version": "4.0.4", "type": "module", "main": "./dist/esm/index.js", "types": "./dist/types/index.d.ts", diff --git a/packages/common/src/utils/TypeUtil.ts b/packages/common/src/utils/TypeUtil.ts index 35060a9778..d723cbb3c8 100644 --- a/packages/common/src/utils/TypeUtil.ts +++ b/packages/common/src/utils/TypeUtil.ts @@ -9,7 +9,7 @@ export type TransactionDirection = 'in' | 'out' | 'self' export type TransactionImage = { type: 'FUNGIBLE' | 'NFT' | undefined - url: string + url: string | undefined } export interface Transaction { diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 569aa336d6..a8f4be5aee 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,15 @@ # @web3modal/core +## 4.0.4 + +### Patch Changes + +- Fix theming issue for email + +- Updated dependencies []: + - @web3modal/common@4.0.4 + - @web3modal/wallet@4.0.4 + ## 4.0.3 ### Patch Changes diff --git a/packages/core/package.json b/packages/core/package.json index 08c2971bd9..60fdb444dd 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@web3modal/core", - "version": "4.0.3", + "version": "4.0.4", "type": "module", "main": "./dist/esm/index.js", "types": "./dist/types/index.d.ts", @@ -17,8 +17,8 @@ "lint": "eslint . --ext .js,.jsx,.ts,.tsx" }, "dependencies": { - "@web3modal/common": "4.0.3", - "@web3modal/wallet": "4.0.3", + "@web3modal/common": "4.0.4", + "@web3modal/wallet": "4.0.4", "valtio": "1.11.2" }, "devDependencies": { diff --git a/packages/core/src/controllers/ApiController.ts b/packages/core/src/controllers/ApiController.ts index 67c37a4825..46ac773a11 100644 --- a/packages/core/src/controllers/ApiController.ts +++ b/packages/core/src/controllers/ApiController.ts @@ -81,6 +81,18 @@ export const ApiController = { AssetController.setConnectorImage(imageId, URL.createObjectURL(blob)) }, + async _fetchCurrencyImage(countryCode: string) { + const imageUrl = `${api.baseUrl}/public/getCurrencyImage/${countryCode}` + const blob = await api.getBlob({ path: imageUrl, headers: ApiController._getApiHeaders() }) + AssetController.setCurrencyImage(countryCode, URL.createObjectURL(blob)) + }, + + async _fetchTokenImage(symbol: string) { + const imageUrl = `${api.baseUrl}/public/getTokenImage/${symbol}` + const blob = await api.getBlob({ path: imageUrl, headers: ApiController._getApiHeaders() }) + AssetController.setTokenImage(symbol, URL.createObjectURL(blob)) + }, + async fetchNetworkImages() { const { requestedCaipNetworks } = NetworkController.state const ids = requestedCaipNetworks?.map(({ imageId }) => imageId).filter(Boolean) @@ -95,6 +107,16 @@ export const ApiController = { await Promise.allSettled((ids as string[]).map(id => ApiController._fetchConnectorImage(id))) }, + async fetchCurrencyImages(currencies: string[] = []) { + await Promise.allSettled( + currencies.map(currency => ApiController._fetchCurrencyImage(currency)) + ) + }, + + async fetchTokenImages(tokens: string[] = []) { + await Promise.allSettled(tokens.map(token => ApiController._fetchTokenImage(token))) + }, + async fetchFeaturedWallets() { const { featuredWalletIds } = OptionsController.state if (featuredWalletIds?.length) { diff --git a/packages/core/src/controllers/AssetController.ts b/packages/core/src/controllers/AssetController.ts index 3e5682ff77..0ac9af5199 100644 --- a/packages/core/src/controllers/AssetController.ts +++ b/packages/core/src/controllers/AssetController.ts @@ -7,6 +7,7 @@ export interface AssetControllerState { networkImages: Record connectorImages: Record tokenImages: Record + currencyImages: Record } type StateKey = keyof AssetControllerState @@ -16,7 +17,8 @@ const state = proxy({ walletImages: {}, networkImages: {}, connectorImages: {}, - tokenImages: {} + tokenImages: {}, + currencyImages: {} }) // -- Controller ---------------------------------------- // @@ -31,6 +33,10 @@ export const AssetController = { return subKey(state, key, callback) }, + subscribe(callback: (newState: AssetControllerState) => void) { + return sub(state, () => callback(state)) + }, + setWalletImage(key: string, value: string) { state.walletImages[key] = value }, @@ -45,5 +51,9 @@ export const AssetController = { setTokenImage(key: string, value: string) { state.tokenImages[key] = value + }, + + setCurrencyImage(key: string, value: string) { + state.currencyImages[key] = value } } diff --git a/packages/core/src/controllers/BlockchainApiController.ts b/packages/core/src/controllers/BlockchainApiController.ts index 08aacfb67b..05afa5fc1a 100644 --- a/packages/core/src/controllers/BlockchainApiController.ts +++ b/packages/core/src/controllers/BlockchainApiController.ts @@ -4,20 +4,88 @@ import type { BlockchainApiTransactionsRequest, BlockchainApiTransactionsResponse, BlockchainApiIdentityRequest, - BlockchainApiIdentityResponse + BlockchainApiIdentityResponse, + GenerateOnRampUrlArgs, + GetQuoteArgs, + OnrampQuote, + PaymentCurrency, + PurchaseCurrency } from '../utils/TypeUtil.js' import { OptionsController } from './OptionsController.js' -type DestinationWallet = { - address: string - blockchains: string[] - assets: string[] -} - -type GenerateOnRampT = { - destinationWallets: DestinationWallet[] - partnerUserId: string - defaultNetwork?: string +const DEFAULT_OPTIONS = { + purchaseCurrencies: [ + { + id: '2b92315d-eab7-5bef-84fa-089a131333f5', + name: 'USD Coin', + symbol: 'USDC', + networks: [ + { + name: 'ethereum-mainnet', + display_name: 'Ethereum', + chain_id: '1', + contract_address: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48' + }, + { + name: 'polygon-mainnet', + display_name: 'Polygon', + chain_id: '137', + contract_address: '0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174' + } + ] + }, + { + id: '2b92315d-eab7-5bef-84fa-089a131333f5', + name: 'Ether', + symbol: 'ETH', + networks: [ + { + name: 'ethereum-mainnet', + display_name: 'Ethereum', + chain_id: '1', + contract_address: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48' + }, + { + name: 'polygon-mainnet', + display_name: 'Polygon', + chain_id: '137', + contract_address: '0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174' + } + ] + } + ], + paymentCurrencies: [ + { + id: 'USD', + payment_method_limits: [ + { + id: 'card', + min: '10.00', + max: '7500.00' + }, + { + id: 'ach_bank_account', + min: '10.00', + max: '25000.00' + } + ] + }, + { + id: 'EUR', + payment_method_limits: [ + { + id: 'card', + min: '10.00', + max: '7500.00' + }, + { + id: 'ach_bank_account', + min: '10.00', + max: '25000.00' + } + ] + } + ] } // -- Helpers ------------------------------------------- // @@ -54,17 +122,66 @@ export const BlockchainApiController = { }) }, - async generateOnRampURL({ destinationWallets, partnerUserId, defaultNetwork }: GenerateOnRampT) { + async generateOnRampURL({ + destinationWallets, + partnerUserId, + defaultNetwork, + purchaseAmount, + paymentAmount + }: GenerateOnRampUrlArgs) { const response = await api.post<{ url: string }>({ path: `/v1/generators/onrampurl?projectId=${OptionsController.state.projectId}`, body: { destinationWallets, defaultNetwork, partnerUserId, - defaultExperience: 'buy' + defaultExperience: 'buy', + presetCryptoAmount: purchaseAmount, + presetFiatAmount: paymentAmount } }) return response.url + }, + + async getOnrampOptions() { + try { + const response = await api.get<{ + paymentCurrencies: PaymentCurrency[] + purchaseCurrencies: PurchaseCurrency[] + }>({ + path: `/v1/onramp/options?projectId=${OptionsController.state.projectId}` + }) + + return response + } catch (e) { + return DEFAULT_OPTIONS + } + }, + + async getOnrampQuote({ purchaseCurrency, paymentCurrency, amount, network }: GetQuoteArgs) { + try { + const response = await api.post({ + path: `/v1/onramp/quote?projectId=${OptionsController.state.projectId}`, + body: { + purchaseCurrency, + paymentCurrency, + amount, + network + } + }) + + return response + } catch (e) { + // Mocking response as 1:1 until endpoint is ready + return { + coinbaseFee: { amount, currency: paymentCurrency.id }, + networkFee: { amount, currency: paymentCurrency.id }, + paymentSubtotal: { amount, currency: paymentCurrency.id }, + paymentTotal: { amount, currency: paymentCurrency.id }, + purchaseAmount: { amount, currency: paymentCurrency.id }, + quoteId: 'mocked-quote-id' + } + } } } diff --git a/packages/core/src/controllers/ConnectorController.ts b/packages/core/src/controllers/ConnectorController.ts index a6eae69152..3893ed162e 100644 --- a/packages/core/src/controllers/ConnectorController.ts +++ b/packages/core/src/controllers/ConnectorController.ts @@ -2,6 +2,7 @@ import { subscribeKey as subKey } from 'valtio/utils' import { proxy, ref, snapshot } from 'valtio/vanilla' import type { Connector, EmailConnector } from '../utils/TypeUtil.js' import { OptionsController } from './OptionsController.js' +import { ThemeController } from './ThemeController.js' // -- Types --------------------------------------------- // export interface ConnectorControllerState { @@ -38,6 +39,10 @@ export const ConnectorController = { sdkVersion: optionsState.sdkVersion, projectId: optionsState.projectId }) + emailConnector.provider.syncTheme({ + themeMode: ThemeController.getSnapshot().themeMode, + themeVariables: ThemeController.getSnapshot().themeVariables + }) } }, diff --git a/packages/core/src/controllers/OnRampController.ts b/packages/core/src/controllers/OnRampController.ts index a801c8a23e..bdaf4880b8 100644 --- a/packages/core/src/controllers/OnRampController.ts +++ b/packages/core/src/controllers/OnRampController.ts @@ -1,6 +1,9 @@ import { subscribeKey as subKey } from 'valtio/utils' -import { proxy } from 'valtio/vanilla' +import { proxy, subscribe as sub } from 'valtio/vanilla' import { ONRAMP_PROVIDERS } from '../utils/ConstantsUtil.js' +import type { PurchaseCurrency, PaymentCurrency } from '../utils/TypeUtil.js' +import { BlockchainApiController } from './BlockchainApiController.js' +import { ApiController } from './ApiController.js' // -- Types --------------------------------------------- // export type OnRampProviderOption = 'coinbase' | 'moonpay' | 'stripe' | 'paypal' @@ -13,29 +16,123 @@ export type OnRampProvider = { } export interface OnRampControllerState { - providers: OnRampProvider[] selectedProvider: OnRampProvider | null + purchaseCurrency: PurchaseCurrency + paymentCurrency: PaymentCurrency + purchaseCurrencies: PurchaseCurrency[] + paymentCurrencies: PaymentCurrency[] + purchaseAmount?: number + paymentAmount?: number + providers: OnRampProvider[] error: string | null + quotesLoading: boolean } type StateKey = keyof OnRampControllerState +const USDC_CURRENCY_DEFAULT = { + id: '2b92315d-eab7-5bef-84fa-089a131333f5', + name: 'USD Coin', + symbol: 'USDC', + networks: [ + { + name: 'ethereum-mainnet', + display_name: 'Ethereum', + chain_id: '1', + contract_address: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48' + }, + { + name: 'polygon-mainnet', + display_name: 'Polygon', + chain_id: '137', + contract_address: '0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174' + } + ] +} + +const USD_CURRENCY_DEFAULT = { + id: 'USD', + payment_method_limits: [ + { + id: 'card', + min: '10.00', + max: '7500.00' + }, + { + id: 'ach_bank_account', + min: '10.00', + max: '25000.00' + } + ] +} + // -- State --------------------------------------------- // const state = proxy({ providers: ONRAMP_PROVIDERS as OnRampProvider[], selectedProvider: null, - error: null + error: null, + purchaseCurrency: USDC_CURRENCY_DEFAULT, + paymentCurrency: USD_CURRENCY_DEFAULT, + purchaseCurrencies: [USDC_CURRENCY_DEFAULT], + paymentCurrencies: [], + quotesLoading: false }) // -- Controller ---------------------------------------- // export const OnRampController = { state, + subscribe(callback: (newState: OnRampControllerState) => void) { + return sub(state, () => callback(state)) + }, + subscribeKey(key: K, callback: (value: OnRampControllerState[K]) => void) { return subKey(state, key, callback) }, setSelectedProvider(provider: OnRampProvider | null) { state.selectedProvider = provider + }, + + setPurchaseCurrency(currency: PurchaseCurrency) { + state.purchaseCurrency = currency + }, + + setPaymentCurrency(currency: PaymentCurrency) { + state.paymentCurrency = currency + }, + + setPurchaseAmount(amount: number) { + this.state.purchaseAmount = amount + }, + + setPaymentAmount(amount: number) { + this.state.paymentAmount = amount + }, + + async getAvailableCurrencies() { + const options = await BlockchainApiController.getOnrampOptions() + state.purchaseCurrencies = options.purchaseCurrencies + state.paymentCurrencies = options.paymentCurrencies + state.paymentCurrency = options.paymentCurrencies[0] || USD_CURRENCY_DEFAULT + state.purchaseCurrency = options.purchaseCurrencies[0] || USDC_CURRENCY_DEFAULT + await ApiController.fetchCurrencyImages(options.paymentCurrencies.map(currency => currency.id)) + await ApiController.fetchTokenImages( + options.purchaseCurrencies.map(currency => currency.symbol) + ) + }, + + async getQuote() { + state.quotesLoading = true + const quote = await BlockchainApiController.getOnrampQuote({ + purchaseCurrency: state.purchaseCurrency, + paymentCurrency: state.paymentCurrency, + amount: state.paymentAmount?.toString() || '0', + network: state.purchaseCurrency?.name + }) + state.quotesLoading = false + state.purchaseAmount = Number(quote.purchaseAmount.amount) + + return quote } } diff --git a/packages/core/src/controllers/RouterController.ts b/packages/core/src/controllers/RouterController.ts index b39e531c97..e09fb2914a 100644 --- a/packages/core/src/controllers/RouterController.ts +++ b/packages/core/src/controllers/RouterController.ts @@ -19,8 +19,10 @@ export interface RouterControllerState { | 'EmailVerifyDevice' | 'GetWallet' | 'Networks' - | 'OnRampProviders' | 'OnRampActivity' + | 'OnRampFiatSelect' + | 'OnRampProviders' + | 'OnRampTokenSelect' | 'SwitchNetwork' | 'Transactions' | 'UnsupportedChain' @@ -28,9 +30,9 @@ export interface RouterControllerState { | 'UpdateEmailPrimaryOtp' | 'UpdateEmailSecondaryOtp' | 'UpgradeEmailWallet' - | 'WhatIsABuy' | 'WhatIsANetwork' | 'WhatIsAWallet' + | 'WhatIsABuy' history: RouterControllerState['view'][] data?: { connector?: Connector diff --git a/packages/core/src/controllers/ThemeController.ts b/packages/core/src/controllers/ThemeController.ts index 68eb02fbda..b8ee87925d 100644 --- a/packages/core/src/controllers/ThemeController.ts +++ b/packages/core/src/controllers/ThemeController.ts @@ -1,5 +1,6 @@ import { proxy, subscribe as sub, snapshot } from 'valtio/vanilla' import type { ThemeMode, ThemeVariables } from '../utils/TypeUtil.js' +import { ConnectorController } from './ConnectorController.js' // -- Types --------------------------------------------- // export interface ThemeControllerState { @@ -23,10 +24,33 @@ export const ThemeController = { setThemeMode(themeMode: ThemeControllerState['themeMode']) { state.themeMode = themeMode + try { + const emailConnector = ConnectorController.getEmailConnector() + + if (emailConnector) { + emailConnector.provider.syncTheme({ + themeMode: ThemeController.getSnapshot().themeMode + }) + } + } catch { + // eslint-disable-next-line no-console + console.info('Unable to sync theme to email connector') + } }, setThemeVariables(themeVariables: ThemeControllerState['themeVariables']) { state.themeVariables = { ...state.themeVariables, ...themeVariables } + try { + const emailConnector = ConnectorController.getEmailConnector() + if (emailConnector) { + emailConnector.provider.syncTheme({ + themeVariables: ThemeController.getSnapshot().themeVariables + }) + } + } catch { + // eslint-disable-next-line no-console + console.info('Unable to sync theme to email connector') + } }, getSnapshot() { diff --git a/packages/core/src/controllers/TransactionsController.ts b/packages/core/src/controllers/TransactionsController.ts index 66a921f982..6e58ae1efb 100644 --- a/packages/core/src/controllers/TransactionsController.ts +++ b/packages/core/src/controllers/TransactionsController.ts @@ -3,26 +3,15 @@ import { proxy, subscribe as sub } from 'valtio/vanilla' import { OptionsController } from './OptionsController.js' import { EventsController } from './EventsController.js' import { SnackController } from './SnackController.js' -import type { CoinbaseTransaction } from '../utils/TypeUtil.js' import { BlockchainApiController } from './BlockchainApiController.js' -export type GroupedTransaction = - | { - type: 'zerion' - value: Transaction - } - | { - type: 'coinbase' - value: CoinbaseTransaction - } - // -- Types --------------------------------------------- // -type TransactionByMonthMap = Record +type TransactionByMonthMap = Record type TransactionByYearMap = Record export interface TransactionsControllerState { transactions: Transaction[] - coinbaseTransactions: CoinbaseTransaction[] + coinbaseTransactions: TransactionByYearMap transactionsByYear: TransactionByYearMap loading: boolean empty: boolean @@ -47,7 +36,7 @@ export const TransactionsController = { return sub(state, () => callback(state)) }, - async fetchTransactions(accountAddress?: string) { + async fetchTransactions(accountAddress?: string, onramp?: 'coinbase') { const { projectId } = OptionsController.state if (!projectId || !accountAddress) { @@ -60,18 +49,28 @@ export const TransactionsController = { const response = await BlockchainApiController.fetchTransactions({ account: accountAddress, projectId, - cursor: state.next + cursor: state.next, + onramp }) const nonSpamTransactions = this.filterSpamTransactions(response.data) const filteredTransactions = [...state.transactions, ...nonSpamTransactions] state.loading = false - state.transactions = filteredTransactions - state.transactionsByYear = this.groupTransactionsByYearAndMonth( - state.transactionsByYear, - nonSpamTransactions - ) + + if (onramp === 'coinbase') { + state.coinbaseTransactions = this.groupTransactionsByYearAndMonth( + state.coinbaseTransactions, + response.data + ) + } else { + state.transactions = filteredTransactions + state.transactionsByYear = this.groupTransactionsByYearAndMonth( + state.transactionsByYear, + nonSpamTransactions + ) + } + state.empty = filteredTransactions.length === 0 state.next = response.next ? response.next : undefined } catch (error) { @@ -102,30 +101,21 @@ export const TransactionsController = { const yearTransactions = grouped[year] ?? {} const monthTransactions = yearTransactions[month] ?? [] - grouped[year] = { - ...yearTransactions, - [month]: [...monthTransactions, { type: 'zerion', value: transaction }] + if ( + monthTransactions.find( + t => + t.metadata.hash === transaction.metadata.hash && + t.metadata.status === transaction.metadata.status + ) + ) { + return } - }) - - return grouped - }, - - groupCoinbaseTransactionsByYearAndMonth( - transactionsMap: TransactionByYearMap = {}, - transactions: CoinbaseTransaction[] = [] - ) { - const grouped: TransactionByYearMap = transactionsMap - - transactions.forEach(transaction => { - const year = new Date(transaction.created_at).getFullYear() - const month = new Date(transaction.created_at).getMonth() - const yearTransactions = grouped[year] ?? {} - const monthTransactions = yearTransactions[month] ?? [] grouped[year] = { ...yearTransactions, - [month]: [...monthTransactions, { type: 'coinbase', value: transaction }] + [month]: [...monthTransactions, transaction].sort( + (a, b) => new Date(b.metadata.minedAt).getTime() - new Date(a.metadata.minedAt).getTime() + ) } }) diff --git a/packages/core/src/utils/CoreHelperUtil.ts b/packages/core/src/utils/CoreHelperUtil.ts index 4fcfb50945..2955891b14 100644 --- a/packages/core/src/utils/CoreHelperUtil.ts +++ b/packages/core/src/utils/CoreHelperUtil.ts @@ -138,7 +138,7 @@ export const CoreHelperUtil = { } } - return formattedBalance ? `${formattedBalance} ${symbol ?? ''}` : '0.000' + return formattedBalance ? `${formattedBalance} ${symbol ?? ''}` : `0.000 ${symbol ?? ''}` }, formatBalance2(balance: string | undefined, symbol: string | undefined) { diff --git a/packages/core/src/utils/TypeUtil.ts b/packages/core/src/utils/TypeUtil.ts index 374d169b5d..2e2d434a42 100644 --- a/packages/core/src/utils/TypeUtil.ts +++ b/packages/core/src/utils/TypeUtil.ts @@ -154,35 +154,6 @@ export interface BlockchainApiTransactionsResponse { next: string | null } -export interface CoinbaseApiTransactionsRequest { - pageSize: number - pageKey: string - accountAddress: string -} - -export interface CoinbaseApiTransactionsResponse { - transactions: CoinbaseTransaction[] - next_page_key: string - total_count: number -} - -export interface CoinbaseAmount { - value: string - currency: string -} - -export interface CoinbaseTransaction { - status: string - purchaseCurrency: string - purchase_network: string - payment_total: CoinbaseAmount - payment_subtotal: CoinbaseAmount - purchase_amount: CoinbaseAmount - created_at: string - purchase_currency: string - transaction_id: string -} - // -- OptionsController Types --------------------------------------------------- export interface Token { address: string @@ -399,3 +370,64 @@ export interface SIWEConfig extends SIWEClientMethods { // Defaults to true signOutOnNetworkChange?: boolean } + +// Onramp Types +export type DestinationWallet = { + address: string + blockchains: string[] + assets: string[] +} + +export type GenerateOnRampUrlArgs = { + destinationWallets: DestinationWallet[] + partnerUserId: string + defaultNetwork?: string + purchaseAmount?: number + paymentAmount?: number +} + +export type CoinbaseNetwork = { + name: string + display_name: string + chain_id: string + contract_address: string +} + +export type PaymentLimits = { + id: string + min: string + max: string +} + +export type PaymentCurrency = { + id: string + payment_method_limits: PaymentLimits[] +} + +export type QuoteAmount = { + amount: string + currency: string +} + +export type PurchaseCurrency = { + id: string + name: string + symbol: string + networks: CoinbaseNetwork[] +} + +export type OnrampQuote = { + paymentTotal: QuoteAmount + paymentSubtotal: QuoteAmount + purchaseAmount: QuoteAmount + coinbaseFee: QuoteAmount + networkFee: QuoteAmount + quoteId: string +} + +export type GetQuoteArgs = { + purchaseCurrency: PurchaseCurrency + paymentCurrency: PaymentCurrency + amount: string + network: string +} diff --git a/packages/ethers/CHANGELOG.md b/packages/ethers/CHANGELOG.md index 6fba10a406..a9e6754c83 100644 --- a/packages/ethers/CHANGELOG.md +++ b/packages/ethers/CHANGELOG.md @@ -1,5 +1,19 @@ # @web3modal/ethers +## 4.0.4 + +### Patch Changes + +- Fix theming issue for email + +- Updated dependencies []: + - @web3modal/scaffold@4.0.4 + - @web3modal/polyfills@4.0.4 + - @web3modal/scaffold-react@4.0.4 + - @web3modal/scaffold-utils@4.0.4 + - @web3modal/scaffold-vue@4.0.4 + - @web3modal/siwe@4.0.4 + ## 4.0.3 ### Patch Changes diff --git a/packages/ethers/exports/react.tsx b/packages/ethers/exports/react.tsx index 77738a96fb..58ae46920d 100644 --- a/packages/ethers/exports/react.tsx +++ b/packages/ethers/exports/react.tsx @@ -49,6 +49,16 @@ export function useDisconnect() { } } +export function useSwitchNetwork() { + async function switchNetwork(chainId: number) { + await modal?.switchNetwork(chainId) + } + + return { + switchNetwork + } +} + export function useWeb3ModalAccount() { const { address, isConnected, chainId } = useSnapshot(EthersStoreUtil.state) diff --git a/packages/ethers/exports/vue.ts b/packages/ethers/exports/vue.ts index 34fb06bc89..a009cfdffd 100644 --- a/packages/ethers/exports/vue.ts +++ b/packages/ethers/exports/vue.ts @@ -56,6 +56,16 @@ export function useDisconnect() { } } +export function useSwitchNetwork() { + async function switchNetwork(chainId: number) { + await modal?.switchNetwork(chainId) + } + + return { + switchNetwork + } +} + export function useWeb3ModalAccount() { if (!modal) { throw new Error('Please call "createWeb3Modal" before using "useWeb3ModalAccount" composition') diff --git a/packages/ethers/package.json b/packages/ethers/package.json index cd0c07afcf..40f0022896 100644 --- a/packages/ethers/package.json +++ b/packages/ethers/package.json @@ -1,6 +1,6 @@ { "name": "@web3modal/ethers", - "version": "4.0.3", + "version": "4.0.4", "type": "module", "main": "./dist/esm/exports/index.js", "types": "./dist/types/exports/index.d.ts", @@ -45,11 +45,11 @@ "dependencies": { "@coinbase/wallet-sdk": "3.9.1", "@walletconnect/ethereum-provider": "2.11.1", - "@web3modal/polyfills": "4.0.3", - "@web3modal/scaffold": "4.0.3", - "@web3modal/scaffold-react": "4.0.3", - "@web3modal/scaffold-utils": "4.0.3", - "@web3modal/scaffold-vue": "4.0.3", + "@web3modal/polyfills": "4.0.4", + "@web3modal/scaffold": "4.0.4", + "@web3modal/scaffold-react": "4.0.4", + "@web3modal/scaffold-utils": "4.0.4", + "@web3modal/scaffold-vue": "4.0.4", "valtio": "1.11.2" }, "peerDependencies": { @@ -81,7 +81,7 @@ } }, "optionalDependencies": { - "@web3modal/siwe": "4.0.3", + "@web3modal/siwe": "4.0.4", "react": ">=17", "react-dom": ">=17", "vue": ">=3" diff --git a/packages/ethers/src/client.ts b/packages/ethers/src/client.ts index 86ef8e5df8..23bfd85620 100644 --- a/packages/ethers/src/client.ts +++ b/packages/ethers/src/client.ts @@ -860,13 +860,14 @@ export class Web3Modal extends Web3ModalScaffold { if (jsonRpcProvider) { const balance = await jsonRpcProvider.getBalance(address) const formattedBalance = formatEther(balance) + this.setBalance(formattedBalance, chain.currency) } } } } - private async switchNetwork(chainId: number) { + public async switchNetwork(chainId: number) { const provider = EthersStoreUtil.state.provider const providerType = EthersStoreUtil.state.providerType if (this.chains) { diff --git a/packages/ethers5/CHANGELOG.md b/packages/ethers5/CHANGELOG.md index 3e48c377a6..3b119d2411 100644 --- a/packages/ethers5/CHANGELOG.md +++ b/packages/ethers5/CHANGELOG.md @@ -1,5 +1,19 @@ # @web3modal/ethers5 +## 4.0.4 + +### Patch Changes + +- Fix theming issue for email + +- Updated dependencies []: + - @web3modal/scaffold@4.0.4 + - @web3modal/polyfills@4.0.4 + - @web3modal/scaffold-react@4.0.4 + - @web3modal/scaffold-utils@4.0.4 + - @web3modal/scaffold-vue@4.0.4 + - @web3modal/siwe@4.0.4 + ## 4.0.3 ### Patch Changes diff --git a/packages/ethers5/exports/react.tsx b/packages/ethers5/exports/react.tsx index b50a8b00d6..599b508e8c 100644 --- a/packages/ethers5/exports/react.tsx +++ b/packages/ethers5/exports/react.tsx @@ -49,6 +49,16 @@ export function useDisconnect() { } } +export function useSwitchNetwork() { + async function switchNetwork(chainId: number) { + await modal?.switchNetwork(chainId) + } + + return { + switchNetwork + } +} + export function useWeb3ModalAccount() { const { address, isConnected, chainId } = useSnapshot(EthersStoreUtil.state) diff --git a/packages/ethers5/exports/vue.ts b/packages/ethers5/exports/vue.ts index 6cdf0ebe72..1ab5816ff7 100644 --- a/packages/ethers5/exports/vue.ts +++ b/packages/ethers5/exports/vue.ts @@ -58,6 +58,16 @@ export function useDisconnect() { } } +export function useSwitchNetwork() { + async function switchNetwork(chainId: number) { + await modal?.switchNetwork(chainId) + } + + return { + switchNetwork + } +} + export function useWeb3ModalAccount() { if (!modal) { throw new Error('Please call "createWeb3Modal" before using "useWeb3ModalAccount" composition') diff --git a/packages/ethers5/package.json b/packages/ethers5/package.json index cde1c3fb80..0b6bc7be8c 100644 --- a/packages/ethers5/package.json +++ b/packages/ethers5/package.json @@ -1,6 +1,6 @@ { "name": "@web3modal/ethers5", - "version": "4.0.3", + "version": "4.0.4", "type": "module", "main": "./dist/esm/exports/index.js", "types": "./dist/types/exports/index.d.ts", @@ -45,11 +45,11 @@ "dependencies": { "@coinbase/wallet-sdk": "3.9.1", "@walletconnect/ethereum-provider": "2.11.1", - "@web3modal/polyfills": "4.0.3", - "@web3modal/scaffold": "4.0.3", - "@web3modal/scaffold-react": "4.0.3", - "@web3modal/scaffold-utils": "4.0.3", - "@web3modal/scaffold-vue": "4.0.3", + "@web3modal/polyfills": "4.0.4", + "@web3modal/scaffold": "4.0.4", + "@web3modal/scaffold-react": "4.0.4", + "@web3modal/scaffold-utils": "4.0.4", + "@web3modal/scaffold-vue": "4.0.4", "valtio": "1.11.2" }, "devDependencies": { @@ -81,7 +81,7 @@ } }, "optionalDependencies": { - "@web3modal/siwe": "4.0.3", + "@web3modal/siwe": "4.0.4", "react": ">=17", "react-dom": ">=17", "vue": ">=3" diff --git a/packages/ethers5/src/client.ts b/packages/ethers5/src/client.ts index dc693b0648..d0f3372f24 100644 --- a/packages/ethers5/src/client.ts +++ b/packages/ethers5/src/client.ts @@ -799,7 +799,7 @@ export class Web3Modal extends Web3ModalScaffold { } } - private async switchNetwork(chainId: number) { + public async switchNetwork(chainId: number) { const provider = EthersStoreUtil.state.provider const providerType = EthersStoreUtil.state.providerType if (this.chains) { diff --git a/packages/polyfills/CHANGELOG.md b/packages/polyfills/CHANGELOG.md index d870ec9fff..29b5ca7675 100644 --- a/packages/polyfills/CHANGELOG.md +++ b/packages/polyfills/CHANGELOG.md @@ -1,5 +1,11 @@ # @web3modal/polyfills +## 4.0.4 + +### Patch Changes + +- Fix theming issue for email + ## 4.0.3 ### Patch Changes diff --git a/packages/polyfills/package.json b/packages/polyfills/package.json index 538fc92874..c4c291ff81 100644 --- a/packages/polyfills/package.json +++ b/packages/polyfills/package.json @@ -1,6 +1,6 @@ { "name": "@web3modal/polyfills", - "version": "4.0.3", + "version": "4.0.4", "type": "module", "main": "./dist/esm/index.js", "types": "./dist/types/index.d.ts", diff --git a/packages/scaffold-react/CHANGELOG.md b/packages/scaffold-react/CHANGELOG.md index 3e2d426b1d..9ef61208e7 100644 --- a/packages/scaffold-react/CHANGELOG.md +++ b/packages/scaffold-react/CHANGELOG.md @@ -1,5 +1,14 @@ # @web3modal/scaffold-react +## 4.0.4 + +### Patch Changes + +- Fix theming issue for email + +- Updated dependencies []: + - @web3modal/scaffold@4.0.4 + ## 4.0.3 ### Patch Changes diff --git a/packages/scaffold-react/index.ts b/packages/scaffold-react/index.ts index c34a1e10cd..aec57f02d8 100644 --- a/packages/scaffold-react/index.ts +++ b/packages/scaffold-react/index.ts @@ -1,10 +1,11 @@ -import type { Web3ModalScaffold } from '@web3modal/scaffold' import { useEffect, useState } from 'react' import type { W3mAccountButton, W3mButton, W3mConnectButton, - W3mNetworkButton + W3mNetworkButton, + W3mOnrampWidget, + Web3ModalScaffold } from '@web3modal/scaffold' type OpenOptions = Parameters[0] @@ -20,6 +21,7 @@ declare global { 'w3m-account-button': Pick 'w3m-button': Pick 'w3m-network-button': Pick + 'w3m-onramp-widget': Pick } } } diff --git a/packages/scaffold-react/package.json b/packages/scaffold-react/package.json index a73e7186e2..2e1e1dca80 100644 --- a/packages/scaffold-react/package.json +++ b/packages/scaffold-react/package.json @@ -1,6 +1,6 @@ { "name": "@web3modal/scaffold-react", - "version": "4.0.3", + "version": "4.0.4", "type": "module", "main": "./dist/esm/index.js", "types": "./dist/types/index.d.ts", @@ -16,7 +16,7 @@ "lint": "eslint . --ext .js,.jsx,.ts,.tsx" }, "dependencies": { - "@web3modal/scaffold": "4.0.3" + "@web3modal/scaffold": "4.0.4" }, "peerDependencies": { "react": ">=17", diff --git a/packages/scaffold-utils/CHANGELOG.md b/packages/scaffold-utils/CHANGELOG.md index b632361ca5..12224b9706 100644 --- a/packages/scaffold-utils/CHANGELOG.md +++ b/packages/scaffold-utils/CHANGELOG.md @@ -1,5 +1,15 @@ # @web3modal/scaffold-utils +## 4.0.4 + +### Patch Changes + +- Fix theming issue for email + +- Updated dependencies []: + - @web3modal/scaffold@4.0.4 + - @web3modal/polyfills@4.0.4 + ## 4.0.3 ### Patch Changes diff --git a/packages/scaffold-utils/package.json b/packages/scaffold-utils/package.json index 1ea116e07a..1ef151b120 100644 --- a/packages/scaffold-utils/package.json +++ b/packages/scaffold-utils/package.json @@ -1,6 +1,6 @@ { "name": "@web3modal/scaffold-utils", - "version": "4.0.3", + "version": "4.0.4", "type": "module", "main": "./dist/esm/exports/index.js", "types": "./dist/types/exports/index.d.ts", @@ -35,8 +35,8 @@ "lint": "eslint . --ext .js,.jsx,.ts,.tsx" }, "dependencies": { - "@web3modal/polyfills": "4.0.3", - "@web3modal/scaffold": "4.0.3", + "@web3modal/polyfills": "4.0.4", + "@web3modal/scaffold": "4.0.4", "valtio": "1.11.2" }, "keywords": [ diff --git a/packages/scaffold-utils/src/ConstantsUtil.ts b/packages/scaffold-utils/src/ConstantsUtil.ts index 9257bb0614..0d3babcda7 100644 --- a/packages/scaffold-utils/src/ConstantsUtil.ts +++ b/packages/scaffold-utils/src/ConstantsUtil.ts @@ -11,5 +11,5 @@ export const ConstantsUtil = { ADD_CHAIN_METHOD: 'wallet_addEthereumChain', EIP6963_ANNOUNCE_EVENT: 'eip6963:announceProvider', EIP6963_REQUEST_EVENT: 'eip6963:requestProvider', - VERSION: '4.0.3' + VERSION: '4.0.4' } diff --git a/packages/scaffold-vue/CHANGELOG.md b/packages/scaffold-vue/CHANGELOG.md index 86529eda8b..faa78cf85f 100644 --- a/packages/scaffold-vue/CHANGELOG.md +++ b/packages/scaffold-vue/CHANGELOG.md @@ -1,5 +1,14 @@ # @web3modal/scaffold-vue +## 4.0.4 + +### Patch Changes + +- Fix theming issue for email + +- Updated dependencies []: + - @web3modal/scaffold@4.0.4 + ## 4.0.3 ### Patch Changes diff --git a/packages/scaffold-vue/index.ts b/packages/scaffold-vue/index.ts index a81ce5c2c1..6bedead2aa 100644 --- a/packages/scaffold-vue/index.ts +++ b/packages/scaffold-vue/index.ts @@ -1,10 +1,11 @@ -import type { Web3ModalScaffold } from '@web3modal/scaffold' import { onUnmounted, reactive, ref } from 'vue' import type { W3mAccountButton, W3mButton, W3mConnectButton, - W3mNetworkButton + W3mNetworkButton, + W3mOnrampWidget, + Web3ModalScaffold } from '@web3modal/scaffold' type OpenOptions = Parameters[0] @@ -19,6 +20,7 @@ declare module '@vue/runtime-core' { W3mAccountButton: Pick W3mButton: Pick W3mNetworkButton: Pick + W3mOnrampWidget: Pick } } diff --git a/packages/scaffold-vue/package.json b/packages/scaffold-vue/package.json index 0bd2d1a64f..ae7a6a5cee 100644 --- a/packages/scaffold-vue/package.json +++ b/packages/scaffold-vue/package.json @@ -1,6 +1,6 @@ { "name": "@web3modal/scaffold-vue", - "version": "4.0.3", + "version": "4.0.4", "type": "module", "main": "./dist/esm/index.js", "types": "./dist/types/index.d.ts", @@ -16,7 +16,7 @@ "lint": "eslint . --ext .js,.jsx,.ts,.tsx" }, "dependencies": { - "@web3modal/scaffold": "4.0.3" + "@web3modal/scaffold": "4.0.4" }, "peerDependencies": { "vue": ">=3" diff --git a/packages/scaffold/CHANGELOG.md b/packages/scaffold/CHANGELOG.md index 41fea8bbfc..5f099b0fde 100644 --- a/packages/scaffold/CHANGELOG.md +++ b/packages/scaffold/CHANGELOG.md @@ -1,5 +1,16 @@ # @web3modal/scaffold +## 4.0.4 + +### Patch Changes + +- Fix theming issue for email + +- Updated dependencies []: + - @web3modal/core@4.0.4 + - @web3modal/common@4.0.4 + - @web3modal/ui@4.0.4 + ## 4.0.3 ### Patch Changes diff --git a/packages/scaffold/index.ts b/packages/scaffold/index.ts index 42a501f64f..0c63888889 100644 --- a/packages/scaffold/index.ts +++ b/packages/scaffold/index.ts @@ -4,6 +4,7 @@ export * from './src/modal/w3m-connect-button/index.js' export * from './src/modal/w3m-modal/index.js' export * from './src/modal/w3m-network-button/index.js' export * from './src/modal/w3m-router/index.js' +export * from './src/modal/w3m-onramp-widget/index.js' export * from './src/views/w3m-account-settings-view/index.js' export * from './src/views/w3m-account-view/index.js' @@ -18,7 +19,9 @@ export * from './src/views/w3m-get-wallet-view/index.js' export * from './src/views/w3m-network-switch-view/index.js' export * from './src/views/w3m-networks-view/index.js' export * from './src/views/w3m-onramp-activity-view/index.js' +export * from './src/views/w3m-onramp-fiat-select-view/index.js' export * from './src/views/w3m-onramp-providers-view/index.js' +export * from './src/views/w3m-onramp-tokens-select-view/index.js' export * from './src/views/w3m-transactions-view/index.js' export * from './src/views/w3m-what-is-a-network-view/index.js' export * from './src/views/w3m-what-is-a-wallet-view/index.js' @@ -44,6 +47,7 @@ export * from './src/partials/w3m-connecting-wc-unsupported/index.js' export * from './src/partials/w3m-connecting-wc-web/index.js' export * from './src/partials/w3m-header/index.js' export * from './src/partials/w3m-help-widget/index.js' +export * from './src/partials/w3m-swap-input/index.js' export * from './src/partials/w3m-legal-footer/index.js' export * from './src/partials/w3m-mobile-download-links/index.js' export * from './src/partials/w3m-onramp-providers-footer/index.js' diff --git a/packages/scaffold/package.json b/packages/scaffold/package.json index 3b135b95f6..d175019c24 100644 --- a/packages/scaffold/package.json +++ b/packages/scaffold/package.json @@ -1,6 +1,6 @@ { "name": "@web3modal/scaffold", - "version": "4.0.3", + "version": "4.0.4", "type": "module", "main": "./dist/esm/index.js", "types": "./dist/types/index.d.ts", @@ -16,13 +16,13 @@ "lint": "eslint . --ext .js,.jsx,.ts,.tsx" }, "dependencies": { - "@web3modal/common": "4.0.3", - "@web3modal/core": "4.0.3", - "@web3modal/ui": "4.0.3", + "@web3modal/common": "4.0.4", + "@web3modal/core": "4.0.4", + "@web3modal/ui": "4.0.4", "lit": "3.1.0" }, "devDependencies": { - "@web3modal/wallet": "4.0.3" + "@web3modal/wallet": "4.0.4" }, "keywords": [ "web3", diff --git a/packages/scaffold/src/client.ts b/packages/scaffold/src/client.ts index e3d760a4a6..c9c050b5c5 100644 --- a/packages/scaffold/src/client.ts +++ b/packages/scaffold/src/client.ts @@ -96,33 +96,11 @@ export class Web3ModalScaffold { public setThemeMode(themeMode: ThemeControllerState['themeMode']) { ThemeController.setThemeMode(themeMode) setColorTheme(ThemeController.state.themeMode) - try { - const emailConnector = ConnectorController.getEmailConnector() - if (emailConnector) { - emailConnector.provider.syncTheme({ - themeMode: ThemeController.getSnapshot().themeMode - }) - } - } catch { - // eslint-disable-next-line no-console - console.info('Unable to sync theme to email connector') - } } public setThemeVariables(themeVariables: ThemeControllerState['themeVariables']) { ThemeController.setThemeVariables(themeVariables) setThemeVariables(ThemeController.state.themeVariables) - try { - const emailConnector = ConnectorController.getEmailConnector() - if (emailConnector) { - emailConnector.provider.syncTheme({ - themeVariables: ThemeController.getSnapshot().themeVariables - }) - } - } catch { - // eslint-disable-next-line no-console - console.info('Unable to sync theme to email connector') - } } public subscribeTheme(callback: (newState: ThemeControllerState) => void) { diff --git a/packages/scaffold/src/modal/w3m-onramp-widget/index.ts b/packages/scaffold/src/modal/w3m-onramp-widget/index.ts new file mode 100644 index 0000000000..fd735869f3 --- /dev/null +++ b/packages/scaffold/src/modal/w3m-onramp-widget/index.ts @@ -0,0 +1,146 @@ +import { AccountController, ModalController, OnRampController } from '@web3modal/core' +import { customElement } from '@web3modal/ui' +import { LitElement, html } from 'lit' +import { property, state } from 'lit/decorators.js' +import styles from './styles.js' + +const PAYMENT_CURRENCY_SYMBOLS: Record = { + USD: '$', + EUR: '€', + GBP: '£' +} + +const BUY_PRESET_AMOUNTS = [100, 250, 500, 1000] + +@customElement('w3m-onramp-widget') +export class W3mOnrampWidget extends LitElement { + public static override styles = styles + + // -- Members ------------------------------------------- // + private unsubscribe: (() => void)[] = [] + + // -- State & Properties -------------------------------- // + @property({ type: Boolean }) public disabled? = false + + @state() private connected = AccountController.state.isConnected + + @state() private loading = ModalController.state.loading + + @state() private paymentCurrency = OnRampController.state.paymentCurrency + + @state() private paymentAmount = OnRampController.state.paymentAmount + + @state() private purchaseAmount = OnRampController.state.purchaseAmount + + @state() private quoteLoading = OnRampController.state.quotesLoading + + // -- Lifecycle ----------------------------------------- // + public constructor() { + super() + this.unsubscribe.push( + ...[ + AccountController.subscribeKey('isConnected', val => { + this.connected = val + }), + ModalController.subscribeKey('loading', val => { + this.loading = val + }), + OnRampController.subscribe(val => { + this.paymentCurrency = val.paymentCurrency + this.paymentAmount = val.paymentAmount + this.purchaseAmount = val.purchaseAmount + this.quoteLoading = val.quotesLoading + }) + ] + ) + } + + public override disconnectedCallback() { + this.unsubscribe.forEach(unsubscribe => unsubscribe()) + } + + // -- Render -------------------------------------------- // + public override render() { + return html` + + + + + + ${BUY_PRESET_AMOUNTS.map( + amount => + html` this.selectPresetAmount(amount)} + >${`${ + PAYMENT_CURRENCY_SYMBOLS[this.paymentCurrency?.id || 'USD'] + } ${amount}`}` + )} + + ${this.templateButton()} + + + ` + } + + private templateButton() { + return this.connected + ? html` + Get quotes + ` + : html` + Connect wallet + ` + } + + // -- Private ------------------------------------------- // + private getQuotes() { + if (!this.loading) { + ModalController.open({ view: 'OnRampProviders' }) + } + } + + private openModal() { + ModalController.open({ view: 'Connect' }) + } + + private async onPaymentAmountChange(event: CustomEvent) { + OnRampController.setPaymentAmount(Number(event.detail)) + await OnRampController.getQuote() + } + + private async selectPresetAmount(amount: number) { + OnRampController.setPaymentAmount(amount) + await OnRampController.getQuote() + } +} + +declare global { + interface HTMLElementTagNameMap { + 'w3m-onramp-widget': W3mOnrampWidget + } +} diff --git a/packages/scaffold/src/modal/w3m-onramp-widget/styles.ts b/packages/scaffold/src/modal/w3m-onramp-widget/styles.ts new file mode 100644 index 0000000000..f7d00adaa8 --- /dev/null +++ b/packages/scaffold/src/modal/w3m-onramp-widget/styles.ts @@ -0,0 +1,17 @@ +import { css } from 'lit' + +export default css` + :host > wui-flex { + width: 100%; + max-width: 360px; + } + + :host > wui-flex > wui-flex { + border-radius: var(--wui-border-radius-l); + width: 100%; + } + + .amounts-container { + width: 100%; + } +` diff --git a/packages/scaffold/src/modal/w3m-router/index.ts b/packages/scaffold/src/modal/w3m-router/index.ts index 0ac31619cb..637289cc9a 100644 --- a/packages/scaffold/src/modal/w3m-router/index.ts +++ b/packages/scaffold/src/modal/w3m-router/index.ts @@ -103,6 +103,10 @@ export class W3mRouter extends LitElement { return html`` case 'OnRampActivity': return html`` + case 'OnRampTokenSelect': + return html`` + case 'OnRampFiatSelect': + return html`` case 'WhatIsABuy': return html`` case 'BuyInProgress': diff --git a/packages/scaffold/src/partials/w3m-header/index.ts b/packages/scaffold/src/partials/w3m-header/index.ts index 71a8598858..4ccd3793f7 100644 --- a/packages/scaffold/src/partials/w3m-header/index.ts +++ b/packages/scaffold/src/partials/w3m-header/index.ts @@ -47,7 +47,9 @@ function headings() { OnRampProviders: 'Choose Provider', OnRampActivity: 'Activity', WhatIsABuy: 'What is Buy?', - BuyInProgress: 'Buy' + BuyInProgress: 'Buy', + OnRampTokenSelect: 'Select Token', + OnRampFiatSelect: 'Select Currency' } } diff --git a/packages/scaffold/src/partials/w3m-swap-input/index.ts b/packages/scaffold/src/partials/w3m-swap-input/index.ts new file mode 100644 index 0000000000..a529042e66 --- /dev/null +++ b/packages/scaffold/src/partials/w3m-swap-input/index.ts @@ -0,0 +1,113 @@ +import { html, LitElement } from 'lit' +import { property, state } from 'lit/decorators.js' +import { ifDefined } from 'lit/directives/if-defined.js' +import { customElement } from '@web3modal/ui' +import styles from './styles.js' +import { + AssetController, + ModalController, + OnRampController, + type PaymentCurrency, + type PurchaseCurrency +} from '@web3modal/core' + +type Currency = { + name: string + symbol: string +} + +@customElement('w3m-swap-input') +export class W3mInputCurrency extends LitElement { + public static override styles = styles + + // -- Members ------------------------------------------- // + private unsubscribe: (() => void)[] = [] + + // -- State & Properties -------------------------------- // + @property({ type: String }) public type: 'Token' | 'Fiat' = 'Token' + @property({ type: Number }) public value = 0 + @state() public currencies: Currency[] | null = [] + @state() public selectedCurrency = this.currencies?.[0] + + // -- Private ------------------------------------------- // + @state() private currencyImages = AssetController.state.currencyImages + @state() private tokenImages = AssetController.state.tokenImages + + public constructor() { + super() + this.unsubscribe.push( + OnRampController.subscribeKey('purchaseCurrency', val => { + if (!val || this.type === 'Fiat') { + return + } + this.selectedCurrency = this.formatPurchaseCurrency(val) + }), + OnRampController.subscribeKey('paymentCurrency', val => { + if (!val || this.type === 'Token') { + return + } + this.selectedCurrency = this.formatPaymentCurrency(val) + }), + OnRampController.subscribe(val => { + if (this.type === 'Fiat') { + this.currencies = val.purchaseCurrencies.map(this.formatPurchaseCurrency) + } else { + this.currencies = val.paymentCurrencies.map(this.formatPaymentCurrency) + } + }), + AssetController.subscribe(val => { + this.currencyImages = { ...val.currencyImages } + this.tokenImages = { ...val.tokenImages } + }) + ) + } + + // -- Lifecycle ----------------------------------------- // + public override firstUpdated() { + OnRampController.getAvailableCurrencies() + } + + public override disconnectedCallback() { + this.unsubscribe.forEach(unsubscribe => unsubscribe()) + } + + // -- Render -------------------------------------------- // + public override render() { + const symbol = this.selectedCurrency?.symbol || '' + const image = this.currencyImages[symbol] || this.tokenImages[symbol] + + return html` + ${this.selectedCurrency + ? html` ModalController.open({ view: `OnRamp${this.type}Select` })} + > + + ${this.selectedCurrency.symbol} + ` + : html``} + ` + } + + private formatPaymentCurrency(currency: PaymentCurrency) { + return { + name: currency.id, + symbol: currency.id + } + } + private formatPurchaseCurrency(currency: PurchaseCurrency) { + return { + name: currency.name, + symbol: currency.symbol + } + } +} + +declare global { + interface HTMLElementTagNameMap { + 'w3m-swap-input': W3mInputCurrency + } +} diff --git a/packages/scaffold/src/partials/w3m-swap-input/styles.ts b/packages/scaffold/src/partials/w3m-swap-input/styles.ts new file mode 100644 index 0000000000..d3e50cdfdf --- /dev/null +++ b/packages/scaffold/src/partials/w3m-swap-input/styles.ts @@ -0,0 +1,36 @@ +import { css } from 'lit' + +export default css` + :host { + width: 100%; + } + + wui-loading-spinner { + position: absolute; + top: 50%; + right: 20px; + transform: translateY(-50%); + } + + .currency-container { + position: absolute; + top: 50%; + transform: translateY(-50%); + transition: all var(--wui-ease-in-power-2) var(--wui-duration-md); + right: var(--wui-spacing-1xs); + height: 40px; + padding: var(--wui-spacing-xs) var(--wui-spacing-1xs) var(--wui-spacing-xs) + var(--wui-spacing-xs); + min-width: 95px; + border-radius: var(--FULL, 1000px); + border: 1px solid var(--wui-gray-glass-002); + background: var(--wui-gray-glass-002); + cursor: pointer; + } + + .currency-container > wui-image { + height: 24px; + width: 24px; + border-radius: 50%; + } +` diff --git a/packages/scaffold/src/views/w3m-account-view/index.ts b/packages/scaffold/src/views/w3m-account-view/index.ts index 3b2bafb118..5d9a50a33f 100644 --- a/packages/scaffold/src/views/w3m-account-view/index.ts +++ b/packages/scaffold/src/views/w3m-account-view/index.ts @@ -193,7 +193,7 @@ export class W3mAccountView extends LitElement { ` diff --git a/packages/scaffold/src/views/w3m-onramp-activity-view/index.ts b/packages/scaffold/src/views/w3m-onramp-activity-view/index.ts index ea80e6d44e..fb9ebfb5df 100644 --- a/packages/scaffold/src/views/w3m-onramp-activity-view/index.ts +++ b/packages/scaffold/src/views/w3m-onramp-activity-view/index.ts @@ -1,11 +1,12 @@ import { DateUtil, type Transaction } from '@web3modal/common' import { AccountController, + AssetController, OnRampController, - BlockchainApiController, - OptionsController + OptionsController, + TransactionsController } from '@web3modal/core' -import { customElement } from '@web3modal/ui' +import { TransactionUtil, customElement } from '@web3modal/ui' import { LitElement, html } from 'lit' import { state } from 'lit/decorators.js' import styles from './styles.js' @@ -27,7 +28,9 @@ export class W3mOnRampActivityView extends LitElement { @state() protected loading = false - @state() private coinbaseTransactions: Transaction[] = [] + @state() private coinbaseTransactions = TransactionsController.state.coinbaseTransactions + + @state() private tokenImages = AssetController.state.tokenImages public constructor() { super() @@ -36,9 +39,13 @@ export class W3mOnRampActivityView extends LitElement { OnRampController.subscribeKey('selectedProvider', val => { this.selectedOnRampProvider = val }), + AssetController.subscribeKey('tokenImages', val => (this.tokenImages = val)), () => { clearTimeout(this.refetchTimeout) - } + }, + TransactionsController.subscribe(val => { + this.coinbaseTransactions = { ...val.coinbaseTransactions } + }) ] ) this.fetchTransactions() @@ -48,14 +55,14 @@ export class W3mOnRampActivityView extends LitElement { public override render() { return html` - ${this.loading ? this.templateLoading() : this.onRampActivitiesTemplate()} + ${this.loading ? this.templateLoading() : this.templateTransactionsByYear()} ` } // -- Private ------------------------------------------- // - private onRampActivitiesTemplate() { - return this.coinbaseTransactions?.map(transaction => { + private templateTransactions(transactions: Transaction[]) { + return transactions?.map(transaction => { const date = DateUtil.getRelativeDateFromNow(transaction.metadata.minedAt) const transfer = transaction.transfers[0] const fungibleInfo = transfer?.fungible_info @@ -64,6 +71,8 @@ export class W3mOnRampActivityView extends LitElement { return null } + const icon = fungibleInfo?.icon?.url || this.tokenImages?.[fungibleInfo.symbol || ''] + return html` ` }) } + private templateTransactionsByYear() { + const sortedYearKeys = Object.keys(this.coinbaseTransactions).sort().reverse() + + return sortedYearKeys.map(year => { + const yearInt = parseInt(year, 10) + + const sortedMonthIndexes = new Array(12) + .fill(null) + .map((_, idx) => idx) + .reverse() + + return sortedMonthIndexes.map(month => { + const groupTitle = TransactionUtil.getTransactionGroupTitle(yearInt, month) + const transactions = this.coinbaseTransactions[yearInt]?.[month] + + if (!transactions) { + return null + } + + return html` + + + ${groupTitle} + + + ${this.templateTransactions(transactions)} + + + ` + }) + }) + } + private async fetchTransactions() { const provider = 'coinbase' @@ -101,19 +148,16 @@ export class W3mOnRampActivityView extends LitElement { this.loading = true - const coinbaseResponse = await BlockchainApiController.fetchTransactions({ - account: address, - onramp: 'coinbase', - projectId - }) + await TransactionsController.fetchTransactions(address, 'coinbase') this.loading = false - this.coinbaseTransactions = coinbaseResponse.data || [] this.refetchLoadingTransactions() } private refetchLoadingTransactions() { - const loadingTransactions = this.coinbaseTransactions.filter( + const today = new Date() + const currentMonthTxs = this.coinbaseTransactions[today.getFullYear()]?.[today.getMonth()] || [] + const loadingTransactions = currentMonthTxs.filter( transaction => transaction.metadata.status === 'ONRAMP_TRANSACTION_STATUS_IN_PROGRESS' ) @@ -126,13 +170,7 @@ export class W3mOnRampActivityView extends LitElement { // Wait 2 seconds before refetching this.refetchTimeout = setTimeout(async () => { const address = AccountController.state.address - const projectId = OptionsController.state.projectId - const coinbaseResponse = await BlockchainApiController.fetchTransactions({ - account: address as `0x${string}`, - onramp: 'coinbase', - projectId - }) - this.coinbaseTransactions = coinbaseResponse.data || [] + await TransactionsController.fetchTransactions(address, 'coinbase') this.refetchLoadingTransactions() }, 3000) } diff --git a/packages/scaffold/src/views/w3m-onramp-activity-view/styles.ts b/packages/scaffold/src/views/w3m-onramp-activity-view/styles.ts index 398d2a70ab..a137c2f7ba 100644 --- a/packages/scaffold/src/views/w3m-onramp-activity-view/styles.ts +++ b/packages/scaffold/src/views/w3m-onramp-activity-view/styles.ts @@ -13,6 +13,10 @@ export default css` justify-content: flex-start; } + :host > wui-flex > wui-flex { + width: 100%; + } + wui-transaction-list-item-loader { width: 100%; } diff --git a/packages/scaffold/src/views/w3m-onramp-fiat-select-view/index.ts b/packages/scaffold/src/views/w3m-onramp-fiat-select-view/index.ts new file mode 100644 index 0000000000..f9401b084d --- /dev/null +++ b/packages/scaffold/src/views/w3m-onramp-fiat-select-view/index.ts @@ -0,0 +1,77 @@ +import { OnRampController, ModalController, AssetController } from '@web3modal/core' +import type { PaymentCurrency } from '@web3modal/core' +import { customElement } from '@web3modal/ui' +import { LitElement, html } from 'lit' +import { state } from 'lit/decorators.js' +import styles from './styles.js' +import { ifDefined } from 'lit/directives/if-defined.js' + +@customElement('w3m-onramp-fiat-select-view') +export class W3mOnrampFiatSelectView extends LitElement { + public static override styles = styles + + // -- Members ------------------------------------------- // + private unsubscribe: (() => void)[] = [] + + // -- State & Properties -------------------------------- // + @state() public selectedCurrency = OnRampController.state.paymentCurrency + @state() public currencies = OnRampController.state.paymentCurrencies + @state() private currencyImages = AssetController.state.currencyImages + + public constructor() { + super() + this.unsubscribe.push( + ...[ + OnRampController.subscribe(val => { + this.selectedCurrency = val.paymentCurrency + this.currencies = val.paymentCurrencies + }), + AssetController.subscribeKey('currencyImages', val => (this.currencyImages = val)) + ] + ) + } + + public override disconnectedCallback() { + this.unsubscribe.forEach(unsubscribe => unsubscribe()) + } + + // -- Render -------------------------------------------- // + public override render() { + return html` + + ${this.currenciesTemplate()} + + + ` + } + + // -- Private ------------------------------------------- // + private currenciesTemplate() { + return this.currencies.map( + currency => html` + this.selectCurrency(currency)} + variant="image" + > + ${currency.id} + + ` + ) + } + + private selectCurrency(currency: PaymentCurrency) { + if (!currency) { + return + } + + OnRampController.setPaymentCurrency(currency) + ModalController.close() + } +} + +declare global { + interface HTMLElementTagNameMap { + 'w3m-onramp-fiat-select-view': W3mOnrampFiatSelectView + } +} diff --git a/packages/scaffold/src/views/w3m-onramp-fiat-select-view/styles.ts b/packages/scaffold/src/views/w3m-onramp-fiat-select-view/styles.ts new file mode 100644 index 0000000000..fae4252e75 --- /dev/null +++ b/packages/scaffold/src/views/w3m-onramp-fiat-select-view/styles.ts @@ -0,0 +1,12 @@ +import { css } from 'lit' + +export default css` + :host > wui-grid { + max-height: 360px; + overflow: auto; + } + + wui-grid::-webkit-scrollbar { + display: none; + } +` diff --git a/packages/scaffold/src/views/w3m-onramp-providers-view/index.ts b/packages/scaffold/src/views/w3m-onramp-providers-view/index.ts index 04f29611ed..5a533b7957 100644 --- a/packages/scaffold/src/views/w3m-onramp-providers-view/index.ts +++ b/packages/scaffold/src/views/w3m-onramp-providers-view/index.ts @@ -97,12 +97,18 @@ export class W3mOnRampProvidersView extends LitElement { network.name as CoinbasePaySDKChainNameValues ] ?? ConstantsUtil.WC_COINBASE_PAY_SDK_FALLBACK_CHAIN + const purchaseCurrency = OnRampController.state.purchaseCurrency + const assets = purchaseCurrency + ? [purchaseCurrency.symbol] + : OnRampController.state.purchaseCurrencies.map(currency => currency.symbol) + return await BlockchainApiController.generateOnRampURL({ defaultNetwork, destinationWallets: [ - { address, blockchains: ConstantsUtil.WC_COINBASE_PAY_SDK_CHAINS, assets: ['USDC'] } + { address, blockchains: ConstantsUtil.WC_COINBASE_PAY_SDK_CHAINS, assets } ], - partnerUserId: address + partnerUserId: address, + purchaseAmount: OnRampController.state.purchaseAmount }) } } diff --git a/packages/scaffold/src/views/w3m-onramp-tokens-select-view/index.ts b/packages/scaffold/src/views/w3m-onramp-tokens-select-view/index.ts new file mode 100644 index 0000000000..654d7ec8d8 --- /dev/null +++ b/packages/scaffold/src/views/w3m-onramp-tokens-select-view/index.ts @@ -0,0 +1,80 @@ +import { OnRampController, ModalController, AssetController } from '@web3modal/core' +import type { PurchaseCurrency } from '@web3modal/core' +import { customElement } from '@web3modal/ui' +import { LitElement, html } from 'lit' +import { state } from 'lit/decorators.js' +import styles from './styles.js' +import { ifDefined } from 'lit/directives/if-defined.js' + +@customElement('w3m-onramp-token-select-view') +export class W3mOnrampTokensView extends LitElement { + public static override styles = styles + + // -- Members ------------------------------------------- // + private unsubscribe: (() => void)[] = [] + + // -- State & Properties -------------------------------- // + @state() public selectedCurrency = OnRampController.state.purchaseCurrencies + @state() public tokens = OnRampController.state.purchaseCurrencies + @state() private tokenImages = AssetController.state.tokenImages + + public constructor() { + super() + this.unsubscribe.push( + ...[ + OnRampController.subscribe(val => { + this.selectedCurrency = val.purchaseCurrencies + this.tokens = val.purchaseCurrencies + }), + AssetController.subscribeKey('tokenImages', val => (this.tokenImages = val)) + ] + ) + } + + public override disconnectedCallback() { + this.unsubscribe.forEach(unsubscribe => unsubscribe()) + } + + // -- Render -------------------------------------------- // + public override render() { + return html` + + ${this.currenciesTemplate()} + + + ` + } + + // -- Private ------------------------------------------- // + private currenciesTemplate() { + return this.tokens.map( + token => html` + this.selectToken(token)} + variant="image" + > + + ${token.name} + ${token.symbol} + + + ` + ) + } + + private selectToken(currency: PurchaseCurrency) { + if (!currency) { + return + } + + OnRampController.setPurchaseCurrency(currency) + ModalController.close() + } +} + +declare global { + interface HTMLElementTagNameMap { + 'w3m-onramp-token-select-view': W3mOnrampTokensView + } +} diff --git a/packages/scaffold/src/views/w3m-onramp-tokens-select-view/styles.ts b/packages/scaffold/src/views/w3m-onramp-tokens-select-view/styles.ts new file mode 100644 index 0000000000..fae4252e75 --- /dev/null +++ b/packages/scaffold/src/views/w3m-onramp-tokens-select-view/styles.ts @@ -0,0 +1,12 @@ +import { css } from 'lit' + +export default css` + :host > wui-grid { + max-height: 360px; + overflow: auto; + } + + wui-grid::-webkit-scrollbar { + display: none; + } +` diff --git a/packages/scaffold/src/views/w3m-transactions-view/index.ts b/packages/scaffold/src/views/w3m-transactions-view/index.ts index b4f45f75bf..0841315777 100644 --- a/packages/scaffold/src/views/w3m-transactions-view/index.ts +++ b/packages/scaffold/src/views/w3m-transactions-view/index.ts @@ -1,19 +1,16 @@ import { DateUtil } from '@web3modal/common' -import type { Transaction } from '@web3modal/common' +import type { Transaction, TransactionImage } from '@web3modal/common' import { AccountController, EventsController, OptionsController, - TransactionsController, - AssetController + TransactionsController } from '@web3modal/core' -import type { CoinbaseTransaction } from '@web3modal/core' import { TransactionUtil, customElement } from '@web3modal/ui' import { LitElement, html } from 'lit' import { state } from 'lit/decorators.js' import styles from './styles.js' import type { TransactionType } from '@web3modal/ui/src/utils/TypeUtil.js' -import type { GroupedTransaction } from '@web3modal/core/src/controllers/TransactionsController.js' // -- Helpers --------------------------------------------- // const PAGINATOR_ID = 'last-transaction' @@ -126,24 +123,6 @@ export class W3mTransactionsView extends LitElement { }) } - private templateRenderCoinbaseTransaction( - transaction: CoinbaseTransaction, - isLastTransaction: boolean - ) { - return html` - - ` - } - private templateRenderTransaction(transaction: Transaction, isLastTransaction: boolean) { const { date, descriptions, direction, isAllNFT, images, status, transfers, type } = this.getTransactionListItemProps(transaction) @@ -176,7 +155,7 @@ export class W3mTransactionsView extends LitElement { status=${status} type=${type} .onlyDirectionIcon=${true} - .images=${[images?.[index]]} + .images=${[images[index]] as TransactionImage[]} .descriptions=${[description]} >` }) @@ -195,15 +174,11 @@ export class W3mTransactionsView extends LitElement { ` } - private templateTransactions(transactions: GroupedTransaction[], isLastGroup: boolean) { + private templateTransactions(transactions: Transaction[], isLastGroup: boolean) { return transactions.map((transaction, index) => { const isLastTransaction = isLastGroup && index === transactions.length - 1 - if (transaction.type === 'coinbase') { - return this.templateRenderCoinbaseTransaction(transaction.value, isLastTransaction) - } - - return html`${this.templateRenderTransaction(transaction.value, isLastTransaction)}` + return html`${this.templateRenderTransaction(transaction, isLastTransaction)}` }) } diff --git a/packages/siwe/CHANGELOG.md b/packages/siwe/CHANGELOG.md index fd1ccc451c..1abf406c60 100644 --- a/packages/siwe/CHANGELOG.md +++ b/packages/siwe/CHANGELOG.md @@ -1,5 +1,15 @@ # @web3modal/siwe +## 4.0.4 + +### Patch Changes + +- Fix theming issue for email + +- Updated dependencies []: + - @web3modal/core@4.0.4 + - @web3modal/scaffold-utils@4.0.4 + ## 4.0.3 ### Patch Changes diff --git a/packages/siwe/package.json b/packages/siwe/package.json index a499f0d63f..a962c7fcce 100644 --- a/packages/siwe/package.json +++ b/packages/siwe/package.json @@ -1,6 +1,6 @@ { "name": "@web3modal/siwe", - "version": "4.0.3", + "version": "4.0.4", "type": "module", "main": "./dist/esm/exports/index.js", "types": "./dist/types/exports/index.d.ts", @@ -16,8 +16,8 @@ "lint": "eslint . --ext .js,.jsx,.ts,.tsx" }, "dependencies": { - "@web3modal/core": "4.0.3", - "@web3modal/scaffold-utils": "4.0.3" + "@web3modal/core": "4.0.4", + "@web3modal/scaffold-utils": "4.0.4" }, "peerDependencies": { "react": ">=17", diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index 355a3c363f..fbafad52aa 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -1,5 +1,11 @@ # @web3modal/ui +## 4.0.4 + +### Patch Changes + +- Fix theming issue for email + ## 4.0.3 ### Patch Changes diff --git a/packages/ui/package.json b/packages/ui/package.json index c7afc7eab1..ff3ea5ac74 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@web3modal/ui", - "version": "4.0.3", + "version": "4.0.4", "type": "module", "main": "./dist/esm/index.js", "types": "./dist/types/index.d.ts", @@ -21,7 +21,7 @@ }, "devDependencies": { "@types/qrcode": "1.5.5", - "@web3modal/common": "4.0.3", + "@web3modal/common": "4.0.4", "eslint-plugin-lit": "1.11.0", "eslint-plugin-wc": "2.0.4" }, diff --git a/packages/ui/src/composites/wui-button/index.ts b/packages/ui/src/composites/wui-button/index.ts index c3e86a81de..1365b95d9f 100644 --- a/packages/ui/src/composites/wui-button/index.ts +++ b/packages/ui/src/composites/wui-button/index.ts @@ -4,16 +4,23 @@ import '../../components/wui-icon/index.js' import '../../components/wui-loading-spinner/index.js' import '../../components/wui-text/index.js' import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js' -import type { ButtonType, SizeType } from '../../utils/TypeUtil.js' +import type { BorderRadiusType, ButtonType, SizeType } from '../../utils/TypeUtil.js' import { customElement } from '../../utils/WebComponentsUtil.js' import styles from './styles.js' +const TEXT_VARIANT_BY_SIZE = { + xs: 'small-600', + sm: 'paragraph-600', + md: 'small-600', + mdl: 'small-600', + lg: 'paragraph-600' +} @customElement('wui-button') export class WuiButton extends LitElement { public static override styles = [resetStyles, elementStyles, styles] // -- State & Properties -------------------------------- // - @property() public size: Exclude = 'md' + @property() public size: Exclude = 'md' @property({ type: Boolean }) public disabled = false @@ -27,13 +34,20 @@ export class WuiButton extends LitElement { @property({ type: Boolean }) private hasIconRight = false + @property() public borderRadius: Exclude = 'm' + + @property() public textVariant?: string + // -- Render -------------------------------------------- // public override render() { this.style.cssText = ` --local-width: ${this.fullWidth ? '100%' : 'auto'}; --local-opacity-100: ${this.loading ? 0 : 1}; - --local-opacity-000: ${this.loading ? 1 : 0};` - const textVariant = this.size === 'md' ? 'paragraph-600' : 'small-600' + --local-opacity-000: ${this.loading ? 1 : 0}; + --local-border-radius: var(--wui-border-radius-${this.borderRadius}); + ` + + const textVariant = this.textVariant ?? TEXT_VARIANT_BY_SIZE[this.size] return html`