diff --git a/.circleci/config.yml b/.circleci/config.yml index 8dca86e90..bb68b14a6 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -1,985 +1,31 @@ +# Use the latest 2.1 version of CircleCI pipeline process engine. +# See: https://circleci.com/docs/reference/configuration-reference version: 2.1 -aliases: - - &docker-image - docker: - - image: cimg/node:16.13.1 - - - &install_typescript_globally - run: - name: Install Typescript globally - command: yarn global add typescript - - - &deploy - run: - name: Deploy - command: yarn deploy - - - &deploy_production_filters - filters: - branches: - only: main - - - &deploy_staging_filters - filters: - branches: - only: develop - - - &test_package_version_for_alpha_tag_break_false - run: - name: Tagged as Alpha version if True Continue Flow - command: | - PACKAGE_VERSION=$(cat package.json \ - | grep version \ - | head -1 \ - | awk -F: '{ print $2 }' \ - | sed 's/[",]//g'); - if [[ $PACKAGE_VERSION =~ "-alpha" ]]; - then - echo true - else - echo false - circleci step halt - fi; - - - &test_package_version_for_alpha_tag_break_true - run: - name: Tagged as Alpha version if True Stop Flow - command: | - PACKAGE_VERSION=$(cat package.json \ - | grep version \ - | head -1 \ - | awk -F: '{ print $2 }' \ - | sed 's/[",]//g'); - if [[ $PACKAGE_VERSION =~ "-alpha" ]]; - then - echo true - circleci step halt - else - echo false - fi; - - - &restore-build-flag - restore_cache: - keys: - - build-flag-{{ checksum "package.json" }} - - - &test-build-flag - run: - name: Exit if build flag exists - command: | - FILE=build.flag - if test -f "$FILE"; then - echo "$FILE exist" - circleci step halt - fi - - - &generate-lock-file - run: - name: Generate lock file - command: yarn generate-lock-entry >> yarn.lock - - - &restore-cache - restore_cache: - keys: - - dependencies-cache-v1-{{ checksum "yarn.lock" }} - - - &save-cache - save_cache: - paths: - - node_modules - key: dependencies-cache-v1-{{ checksum "yarn.lock" }} - - - &create-npm-config - run: - name: Create NPM rc file - command: echo "//registry.npmjs.org/:_authToken=$npm_TOKEN" > ~/.npmrc - - - &publish-npm - run: - name: Publish package to NPM - command: | - npm config set //registry.npmjs.org/:_authToken=${npm_TOKEN} - npm publish --access public - - - &publish-npm-tag-as-next - run: - name: Publish package to NPM - command: npm publish --tag next --access public - -commands: - save-build-flag: - steps: - - run: - name: Create build flag - command: touch build.flag - - save_cache: - paths: - - build.flag - key: build-flag-{{ checksum "package.json" }} - - node-build-steps: - steps: - - checkout: - # Since our working_directory is deeper than the root, - # remind the job where it needs to checkout. - path: ~/web3-onboard-monorepo - - *restore-build-flag - - *test-build-flag - - *test_package_version_for_alpha_tag_break_true - # Services and packages in a Workspace don't get their own - # yarn.lock so we need to generate them manually. - - *generate-lock-file - - *restore-cache - - run: - name: Build - command: | - yarn - yarn type-check - yarn build - - *save-cache - - *create-npm-config - - *publish-npm - - save-build-flag - - node-staging-build-steps: - steps: - - checkout: - # Since our working_directory is deeper than the root, - # remind the job where it needs to checkout. - path: ~/web3-onboard-monorepo - - *restore-build-flag - - *test-build-flag - - *test_package_version_for_alpha_tag_break_false - # Services and packages in a Workspace don't get their own - # yarn.lock so we need to generate them manually. - - *generate-lock-file - - *restore-cache - - run: - name: Build - command: | - yarn - yarn type-check - yarn build - - *save-cache - - *create-npm-config - - *publish-npm-tag-as-next - - save-build-flag - +# Define a job to be invoked later in a workflow. +# See: https://circleci.com/docs/guides/orchestrate/jobs-steps/#jobs-overview & https://circleci.com/docs/reference/configuration-reference/#jobs jobs: - build-core: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/core - steps: - - node-build-steps - build-common: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/common - steps: - - node-build-steps - build-fortmatic: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/fortmatic - steps: - - node-build-steps - build-gnosis: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/gnosis - steps: - - node-build-steps - build-injected: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/injected - steps: - - node-build-steps - build-frame: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/frame - steps: - - node-build-steps - build-keepkey: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/keepkey - steps: - - node-build-steps - build-keystone: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/keystone - steps: - - node-build-steps - build-ledger: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/ledger - steps: - - node-build-steps - build-mew: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/mew - steps: - - node-build-steps - build-mew-wallet: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/mew-wallet - steps: - - node-build-steps - build-portis: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/portis - steps: - - node-build-steps - build-torus: - docker: - - image: cimg/node:16.18.1 - working_directory: ~/web3-onboard-monorepo/packages/torus - steps: - - node-build-steps - build-trezor: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/trezor - steps: - - node-build-steps - build-trust: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/trust - steps: - - node-build-steps - build-frontier: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/frontier - steps: - - node-build-steps - build-walletconnect: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/walletconnect - steps: - - node-build-steps - build-walletlink: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/walletlink - steps: - - node-build-steps - build-react: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/react - steps: - - node-build-steps - build-magic: + say-hello: + # Specify the execution environment. You can specify an image from Docker Hub or use one of our convenience images from CircleCI's Developer Hub. + # See: https://circleci.com/docs/guides/execution-managed/executor-intro/ & https://circleci.com/docs/reference/configuration-reference/#executor-job docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/magic - steps: - - node-build-steps - build-coinbase: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/coinbase - steps: - - node-build-steps - build-web3auth: - docker: - - image: cimg/node:16.18.1 - working_directory: ~/web3-onboard-monorepo/packages/web3auth - steps: - - node-build-steps - build-dcent: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/dcent - steps: - - node-build-steps - build-vue: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/vue - steps: - - node-build-steps - build-gas: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/gas - steps: - - node-build-steps - build-hw-common: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/hw-common - steps: - - node-build-steps - build-sequence: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/sequence - steps: - - node-build-steps - build-tallyho: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/tallyho - steps: - - node-build-steps - build-enkrypt: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/enkrypt - steps: - - node-build-steps - build-uauth: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/uauth - steps: - - node-build-steps - build-transaction-preview: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/transaction-preview - steps: - - node-build-steps - build-zeal: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/zeal - steps: - - node-build-steps - build-phantom: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/phantom - steps: - - node-build-steps - build-xdefi: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/xdefi - steps: - - node-build-steps - build-infinity-wallet: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/infinity-wallet - steps: - - node-build-steps - build-taho: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/taho - steps: - - node-build-steps - build-unstoppable-resolution: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/unstoppable-resolution - steps: - - node-build-steps - build-cede-store: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/cede-store - steps: - - node-build-steps - build-arcana-auth: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/arcana-auth - steps: - - node-build-steps - build-blocto: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/blocto - steps: - - node-build-steps - build-venly: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/venly - steps: - - node-build-steps - build-bitget: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/bitget - steps: - - node-build-steps - build-bitkeep: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/bitkeep - steps: - - node-build-steps - build-metamask: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/metamask - steps: - - node-build-steps - build-solid: - docker: - - image: cimg/node:16.14.2 - working_directory: ~/web3-onboard-monorepo/packages/solid - steps: - - node-build-steps + # Specify the version you desire here + # See: https://circleci.com/developer/images/image/cimg/base + - image: cimg/base:current - # Build staging/Alpha releases - build-staging-core: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/core - steps: - - node-staging-build-steps - build-staging-common: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/common - steps: - - node-staging-build-steps - build-staging-fortmatic: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/fortmatic - steps: - - node-staging-build-steps - build-staging-gnosis: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/gnosis - steps: - - node-staging-build-steps - build-staging-injected: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/injected - steps: - - node-staging-build-steps - build-staging-frame: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/frame + # Add steps to the job + # See: https://circleci.com/docs/guides/orchestrate/jobs-steps/#steps-overview & https://circleci.com/docs/reference/configuration-reference/#steps steps: - - node-staging-build-steps - build-staging-keepkey: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/keepkey - steps: - - node-staging-build-steps - build-staging-keystone: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/keystone - steps: - - node-staging-build-steps - build-staging-ledger: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/ledger - steps: - - node-staging-build-steps - build-staging-mew: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/mew - steps: - - node-staging-build-steps - build-staging-mew-wallet: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/mew-wallet - steps: - - node-staging-build-steps - build-staging-portis: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/portis - steps: - - node-staging-build-steps - build-staging-torus: - docker: - - image: cimg/node:16.18.1 - working_directory: ~/web3-onboard-monorepo/packages/torus - steps: - - node-staging-build-steps - build-staging-trezor: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/trezor - steps: - - node-staging-build-steps - build-staging-trust: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/trust - steps: - - node-staging-build-steps - build-staging-frontier: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/frontier - steps: - - node-staging-build-steps - build-staging-walletconnect: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/walletconnect - steps: - - node-staging-build-steps - build-staging-walletlink: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/walletlink - steps: - - node-staging-build-steps - build-staging-react: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/react - steps: - - node-staging-build-steps - build-staging-magic: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/magic - steps: - - node-staging-build-steps - build-staging-coinbase: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/coinbase - steps: - - node-staging-build-steps - build-staging-web3auth: - docker: - - image: cimg/node:16.18.1 - working_directory: ~/web3-onboard-monorepo/packages/web3auth - steps: - - node-staging-build-steps - build-staging-dcent: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/dcent - steps: - - node-staging-build-steps - build-staging-vue: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/vue - steps: - - node-staging-build-steps - build-staging-gas: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/gas - steps: - - node-staging-build-steps - build-staging-hw-common: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/hw-common - steps: - - node-staging-build-steps - build-staging-sequence: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/sequence - steps: - - node-staging-build-steps - build-staging-tallyho: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/tallyho - steps: - - node-staging-build-steps - build-staging-enkrypt: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/enkrypt - steps: - - node-staging-build-steps - build-staging-uauth: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/uauth - steps: - - node-staging-build-steps - build-staging-transaction-preview: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/transaction-preview - steps: - - node-staging-build-steps - build-staging-zeal: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/zeal - steps: - - node-staging-build-steps - build-staging-phantom: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/phantom - steps: - - node-staging-build-steps - build-staging-xdefi: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/xdefi - steps: - - node-staging-build-steps - build-staging-infinity-wallet: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/infinity-wallet - steps: - - node-staging-build-steps - build-staging-taho: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/taho - steps: - - node-staging-build-steps - build-staging-unstoppable-resolution: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/unstoppable-resolution - steps: - - node-staging-build-steps - build-staging-cede-store: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/cede-store - steps: - - node-staging-build-steps - build-staging-arcana-auth: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/arcana-auth - steps: - - node-staging-build-steps - build-staging-blocto: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/blocto - steps: - - node-staging-build-steps - build-staging-venly: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/venly - steps: - - node-staging-build-steps - build-staging-bitget: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/bitget - steps: - - node-staging-build-steps - build-staging-bitkeep: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/bitkeep - steps: - - node-staging-build-steps - build-staging-metamask: - docker: - - image: cimg/node:16.13.1 - working_directory: ~/web3-onboard-monorepo/packages/metamask - steps: - - node-staging-build-steps - build-staging-solid: - docker: - - image: cimg/node:16.14.2 - working_directory: ~/web3-onboard-monorepo/packages/solid - steps: - - node-staging-build-steps + # Checkout the code as the first step. + - checkout + - run: + name: "Say hello" + command: "echo Hello, World!" +# Orchestrate jobs using workflows +# See: https://circleci.com/docs/guides/orchestrate/workflows/ & https://circleci.com/docs/reference/configuration-reference/#workflows workflows: - version: 2 - common: - jobs: - - build-common: - <<: *deploy_production_filters - - build-staging-common: - <<: *deploy_staging_filters - core: - jobs: - - build-core: - <<: *deploy_production_filters - - build-staging-core: - <<: *deploy_staging_filters - - fortmatic: - jobs: - - build-fortmatic: - <<: *deploy_production_filters - - build-staging-fortmatic: - <<: *deploy_staging_filters - gnosis: - jobs: - - build-gnosis: - <<: *deploy_production_filters - - build-staging-gnosis: - <<: *deploy_staging_filters - injected: - jobs: - - build-injected: - <<: *deploy_production_filters - - build-staging-injected: - <<: *deploy_staging_filters - frame: - jobs: - - build-frame: - <<: *deploy_production_filters - - build-staging-frame: - <<: *deploy_staging_filters - keepkey: - jobs: - - build-keepkey: - <<: *deploy_production_filters - - build-staging-keepkey: - <<: *deploy_staging_filters - keystone: - jobs: - - build-keystone: - <<: *deploy_production_filters - - build-staging-keystone: - <<: *deploy_staging_filters - ledger: - jobs: - - build-ledger: - <<: *deploy_production_filters - - build-staging-ledger: - <<: *deploy_staging_filters - mew: - jobs: - - build-mew: - <<: *deploy_production_filters - - build-staging-mew: - <<: *deploy_staging_filters - mew-wallet: - jobs: - - build-mew-wallet: - <<: *deploy_production_filters - - build-staging-mew-wallet: - <<: *deploy_staging_filters - portis: - jobs: - - build-portis: - <<: *deploy_production_filters - - build-staging-portis: - <<: *deploy_staging_filters - torus: - jobs: - - build-torus: - <<: *deploy_production_filters - - build-staging-torus: - <<: *deploy_staging_filters - trezor: - jobs: - - build-trezor: - <<: *deploy_production_filters - - build-staging-trezor: - <<: *deploy_staging_filters - trust: - jobs: - - build-trust: - <<: *deploy_production_filters - - build-staging-trust: - <<: *deploy_staging_filters - frontier: - jobs: - - build-frontier: - <<: *deploy_production_filters - - build-staging-frontier: - <<: *deploy_staging_filters - walletconnect: - jobs: - - build-walletconnect: - <<: *deploy_production_filters - - build-staging-walletconnect: - <<: *deploy_staging_filters - walletlink: - jobs: - - build-walletlink: - <<: *deploy_production_filters - - build-staging-walletlink: - <<: *deploy_staging_filters - react: - jobs: - - build-react: - <<: *deploy_production_filters - - build-staging-react: - <<: *deploy_staging_filters - magic: - jobs: - - build-magic: - <<: *deploy_production_filters - - build-staging-magic: - <<: *deploy_staging_filters - coinbase: - jobs: - - build-coinbase: - <<: *deploy_production_filters - - build-staging-coinbase: - <<: *deploy_staging_filters - web3auth: - jobs: - - build-web3auth: - <<: *deploy_production_filters - - build-staging-web3auth: - <<: *deploy_staging_filters - dcent: - jobs: - - build-dcent: - <<: *deploy_production_filters - - build-staging-dcent: - <<: *deploy_staging_filters - vue: - jobs: - - build-vue: - <<: *deploy_production_filters - - build-staging-vue: - <<: *deploy_staging_filters - gas: - jobs: - - build-gas: - <<: *deploy_production_filters - - build-staging-gas: - <<: *deploy_staging_filters - hw-common: - jobs: - - build-hw-common: - <<: *deploy_production_filters - - build-staging-hw-common: - <<: *deploy_staging_filters - sequence: - jobs: - - build-sequence: - <<: *deploy_production_filters - - build-staging-sequence: - <<: *deploy_staging_filters - tallyho: - jobs: - - build-tallyho: - <<: *deploy_production_filters - - build-staging-tallyho: - <<: *deploy_staging_filters - enkrypt: - jobs: - - build-enkrypt: - <<: *deploy_production_filters - - build-staging-enkrypt: - <<: *deploy_staging_filters - uauth: - jobs: - - build-uauth: - <<: *deploy_production_filters - - build-staging-uauth: - <<: *deploy_staging_filters - transaction-preview: - jobs: - - build-transaction-preview: - <<: *deploy_production_filters - - build-staging-transaction-preview: - <<: *deploy_staging_filters - zeal: - jobs: - - build-zeal: - <<: *deploy_production_filters - - build-staging-zeal: - <<: *deploy_staging_filters - phantom: - jobs: - - build-phantom: - <<: *deploy_production_filters - - build-staging-phantom: - <<: *deploy_staging_filters - xdefi: - jobs: - - build-xdefi: - <<: *deploy_production_filters - - build-staging-xdefi: - <<: *deploy_staging_filters - infinity-wallet: - jobs: - - build-infinity-wallet: - <<: *deploy_production_filters - - build-staging-infinity-wallet: - <<: *deploy_staging_filters - taho: - jobs: - - build-taho: - <<: *deploy_production_filters - - build-staging-taho: - <<: *deploy_staging_filters - unstoppable-resolution: - jobs: - - build-unstoppable-resolution: - <<: *deploy_production_filters - - build-staging-unstoppable-resolution: - <<: *deploy_staging_filters - cede-store: - jobs: - - build-cede-store: - <<: *deploy_production_filters - - build-staging-cede-store: - <<: *deploy_staging_filters - arcana-auth: - jobs: - - build-arcana-auth: - <<: *deploy_production_filters - - build-staging-arcana-auth: - <<: *deploy_staging_filters - blocto: - jobs: - - build-blocto: - <<: *deploy_production_filters - - build-staging-blocto: - <<: *deploy_staging_filters - venly: - jobs: - - build-venly: - <<: *deploy_production_filters - - build-staging-venly: - <<: *deploy_staging_filters - bitget: - jobs: - - build-bitget: - <<: *deploy_production_filters - - build-staging-bitget: - <<: *deploy_staging_filters - bitkeep: - jobs: - - build-bitkeep: - <<: *deploy_production_filters - - build-staging-bitkeep: - <<: *deploy_staging_filters - metamask: - jobs: - - build-metamask: - <<: *deploy_production_filters - - build-staging-metamask: - <<: *deploy_staging_filters - solid: + say-hello-workflow: # This is the name of the workflow, feel free to change it to better match your workflow. + # Inside the workflow, you define the jobs you want to run. jobs: - - build-solid: - <<: *deploy_production_filters - - build-staging-solid: - <<: *deploy_staging_filters + - say-hello \ No newline at end of file diff --git a/.circleci/deploy.yml b/.circleci/deploy.yml new file mode 100644 index 000000000..4a7885a47 --- /dev/null +++ b/.circleci/deploy.yml @@ -0,0 +1,1016 @@ +version: 2.1 + +aliases: + - &docker-image + docker: + - image: cimg/node:16.13.1 + + - &install_typescript_globally + run: + name: Install Typescript globally + command: yarn global add typescript + + - &deploy + run: + name: Deploy + command: yarn deploy + + - &deploy_production_filters + filters: + branches: + only: main + + - &deploy_staging_filters + filters: + branches: + only: develop + + - &test_package_version_for_alpha_tag_break_false + run: + name: Tagged as Alpha version if True Continue Flow + command: | + PACKAGE_VERSION=$(jq -r '.version' package.json); + if [[ $PACKAGE_VERSION =~ "-alpha" ]]; + then + echo true + else + echo false + circleci step halt + fi; + + - &test_package_version_for_alpha_tag_break_true + run: + name: Tagged as Alpha version if True Stop Flow + command: | + PACKAGE_VERSION=$(cat package.json \ + | grep version \ + | head -1 \ + | awk -F: '{ print $2 }' \ + | sed 's/[",]//g'); + if [[ $PACKAGE_VERSION =~ "-alpha" ]]; + then + echo true + circleci step halt + else + echo false + fi; + + - &restore-build-flag + restore_cache: + keys: + - build-flag-{{ checksum "package.json" }} + + - &test-build-flag + run: + name: Exit if build flag exists + command: | + FILE=build.flag + if test -f "$FILE"; then + echo "$FILE exist" + circleci step halt + fi + + - &generate-lock-file + run: + name: Generate lock file + command: yarn generate-lock-entry >> yarn.lock + + - &restore-cache + restore_cache: + keys: + - dependencies-cache-v1-{{ checksum "yarn.lock" }} + + - &save-cache + save_cache: + paths: + - node_modules + key: dependencies-cache-v1-{{ checksum "yarn.lock" }} + + - &create-npm-config + run: + name: Create NPM rc file + command: echo "//registry.npmjs.org/:_authToken=$npm_TOKEN" > ~/.npmrc + + - &publish-npm + run: + name: Publish package to NPM + command: npm publish --access public + + - &publish-npm-tag-as-next + run: + name: Publish package to NPM + command: npm publish --tag next --access public + +commands: + save-build-flag: + steps: + - run: + name: Create build flag + command: touch build.flag + - save_cache: + paths: + - build.flag + key: build-flag-{{ checksum "package.json" }} + + node-build-steps: + steps: + - checkout: + # Since our working_directory is deeper than the root, + # remind the job where it needs to checkout. + path: ~/web3-onboard-monorepo + - *restore-build-flag + - *test-build-flag + - *test_package_version_for_alpha_tag_break_true + # Services and packages in a Workspace don't get their own + # yarn.lock so we need to generate them manually. + - *generate-lock-file + - *restore-cache + - run: + name: Build + command: | + yarn + yarn type-check + yarn build + - *save-cache + - *create-npm-config + - *publish-npm + - save-build-flag + + node-staging-build-steps: + steps: + - checkout: + # Since our working_directory is deeper than the root, + # remind the job where it needs to checkout. + path: ~/web3-onboard-monorepo + - *restore-build-flag + - *test-build-flag + - *test_package_version_for_alpha_tag_break_false + # Services and packages in a Workspace don't get their own + # yarn.lock so we need to generate them manually. + - *generate-lock-file + - *restore-cache + - run: + name: Build + command: | + yarn + yarn type-check + yarn build + - *save-cache + - *create-npm-config + - *publish-npm-tag-as-next + - save-build-flag + +jobs: + build-core: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/core + steps: + - node-build-steps + build-common: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/common + steps: + - node-build-steps + build-fortmatic: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/fortmatic + steps: + - node-build-steps + build-gnosis: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/gnosis + steps: + - node-build-steps + build-injected: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/injected + steps: + - node-build-steps + build-frame: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/frame + steps: + - node-build-steps + build-keepkey: + docker: + - image: cimg/node:16.20.2 + working_directory: ~/web3-onboard-monorepo/packages/keepkey + steps: + - node-build-steps + build-keystone: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/keystone + steps: + - node-build-steps + build-ledger: + docker: + - image: cimg/node:18.0.0 + working_directory: ~/web3-onboard-monorepo/packages/ledger + steps: + - node-build-steps + build-mew: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/mew + steps: + - node-build-steps + build-mew-wallet: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/mew-wallet + steps: + - node-build-steps + build-portis: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/portis + steps: + - node-build-steps + build-torus: + docker: + - image: cimg/node:16.18.1 + working_directory: ~/web3-onboard-monorepo/packages/torus + steps: + - node-build-steps + build-trezor: + docker: + - image: cimg/node:18.18.2 + working_directory: ~/web3-onboard-monorepo/packages/trezor + steps: + - node-build-steps + build-trust: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/trust + steps: + - node-build-steps + build-frontier: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/frontier + steps: + - node-build-steps + build-walletconnect: + docker: + - image: cimg/node:18.0.0 + working_directory: ~/web3-onboard-monorepo/packages/walletconnect + steps: + - node-build-steps + build-walletlink: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/walletlink + steps: + - node-build-steps + build-react: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/react + steps: + - node-build-steps + build-magic: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/magic + steps: + - node-build-steps + build-coinbase: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/coinbase + steps: + - node-build-steps + build-web3auth: + docker: + - image: cimg/node:16.18.1 + working_directory: ~/web3-onboard-monorepo/packages/web3auth + steps: + - node-build-steps + build-dcent: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/dcent + steps: + - node-build-steps + build-vue: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/vue + steps: + - node-build-steps + build-gas: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/gas + steps: + - node-build-steps + build-hw-common: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/hw-common + steps: + - node-build-steps + build-sequence: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/sequence + steps: + - node-build-steps + build-tallyho: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/tallyho + steps: + - node-build-steps + build-enkrypt: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/enkrypt + steps: + - node-build-steps + build-uauth: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/uauth + steps: + - node-build-steps + build-transaction-preview: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/transaction-preview + steps: + - node-build-steps + build-zeal: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/zeal + steps: + - node-build-steps + build-phantom: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/phantom + steps: + - node-build-steps + build-xdefi: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/xdefi + steps: + - node-build-steps + build-infinity-wallet: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/infinity-wallet + steps: + - node-build-steps + build-taho: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/taho + steps: + - node-build-steps + build-unstoppable-resolution: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/unstoppable-resolution + steps: + - node-build-steps + build-cede-store: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/cede-store + steps: + - node-build-steps + build-arcana-auth: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/arcana-auth + steps: + - node-build-steps + build-blocto: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/blocto + steps: + - node-build-steps + build-venly: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/venly + steps: + - node-build-steps + build-bitget: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/bitget + steps: + - node-build-steps + build-bitkeep: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/bitkeep + steps: + - node-build-steps + build-metamask: + docker: + - image: cimg/node:18.18.2 + working_directory: ~/web3-onboard-monorepo/packages/metamask + steps: + - node-build-steps + resource_class: large + build-solid: + docker: + - image: cimg/node:16.14.2 + working_directory: ~/web3-onboard-monorepo/packages/solid + steps: + - node-build-steps + build-capsule: + docker: + - image: cimg/node:16.14.2 + working_directory: ~/web3-onboard-monorepo/packages/capsule + steps: + - node-build-steps + build-particle: + docker: + - image: cimg/node:18.0.0 + working_directory: ~/web3-onboard-monorepo/packages/particle-network + steps: + - node-build-steps + + # Build staging/Alpha releases + build-staging-core: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/core + steps: + - node-staging-build-steps + build-staging-common: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/common + steps: + - node-staging-build-steps + build-staging-fortmatic: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/fortmatic + steps: + - node-staging-build-steps + build-staging-gnosis: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/gnosis + steps: + - node-staging-build-steps + build-staging-injected: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/injected + steps: + - node-staging-build-steps + build-staging-frame: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/frame + steps: + - node-staging-build-steps + build-staging-keepkey: + docker: + - image: cimg/node:16.20.2 + working_directory: ~/web3-onboard-monorepo/packages/keepkey + steps: + - node-staging-build-steps + build-staging-keystone: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/keystone + steps: + - node-staging-build-steps + build-staging-ledger: + docker: + - image: cimg/node:18.0.0 + working_directory: ~/web3-onboard-monorepo/packages/ledger + steps: + - node-staging-build-steps + build-staging-mew: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/mew + steps: + - node-staging-build-steps + build-staging-mew-wallet: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/mew-wallet + steps: + - node-staging-build-steps + build-staging-portis: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/portis + steps: + - node-staging-build-steps + build-staging-torus: + docker: + - image: cimg/node:16.18.1 + working_directory: ~/web3-onboard-monorepo/packages/torus + steps: + - node-staging-build-steps + build-staging-trezor: + docker: + - image: cimg/node:18.18.2 + working_directory: ~/web3-onboard-monorepo/packages/trezor + steps: + - node-staging-build-steps + build-staging-trust: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/trust + steps: + - node-staging-build-steps + build-staging-frontier: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/frontier + steps: + - node-staging-build-steps + build-staging-walletconnect: + docker: + - image: cimg/node:18.0.0 + working_directory: ~/web3-onboard-monorepo/packages/walletconnect + steps: + - node-staging-build-steps + build-staging-walletlink: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/walletlink + steps: + - node-staging-build-steps + build-staging-react: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/react + steps: + - node-staging-build-steps + build-staging-magic: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/magic + steps: + - node-staging-build-steps + build-staging-coinbase: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/coinbase + steps: + - node-staging-build-steps + build-staging-web3auth: + docker: + - image: cimg/node:16.18.1 + working_directory: ~/web3-onboard-monorepo/packages/web3auth + steps: + - node-staging-build-steps + build-staging-dcent: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/dcent + steps: + - node-staging-build-steps + build-staging-vue: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/vue + steps: + - node-staging-build-steps + build-staging-gas: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/gas + steps: + - node-staging-build-steps + build-staging-hw-common: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/hw-common + steps: + - node-staging-build-steps + build-staging-sequence: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/sequence + steps: + - node-staging-build-steps + build-staging-tallyho: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/tallyho + steps: + - node-staging-build-steps + build-staging-enkrypt: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/enkrypt + steps: + - node-staging-build-steps + build-staging-uauth: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/uauth + steps: + - node-staging-build-steps + build-staging-transaction-preview: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/transaction-preview + steps: + - node-staging-build-steps + build-staging-zeal: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/zeal + steps: + - node-staging-build-steps + build-staging-phantom: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/phantom + steps: + - node-staging-build-steps + build-staging-xdefi: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/xdefi + steps: + - node-staging-build-steps + build-staging-infinity-wallet: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/infinity-wallet + steps: + - node-staging-build-steps + build-staging-taho: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/taho + steps: + - node-staging-build-steps + build-staging-unstoppable-resolution: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/unstoppable-resolution + steps: + - node-staging-build-steps + build-staging-cede-store: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/cede-store + steps: + - node-staging-build-steps + build-staging-arcana-auth: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/arcana-auth + steps: + - node-staging-build-steps + build-staging-blocto: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/blocto + steps: + - node-staging-build-steps + build-staging-venly: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/venly + steps: + - node-staging-build-steps + build-staging-bitget: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/bitget + steps: + - node-staging-build-steps + build-staging-bitkeep: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/bitkeep + steps: + - node-staging-build-steps + build-staging-metamask: + docker: + - image: cimg/node:18.18.2 + working_directory: ~/web3-onboard-monorepo/packages/metamask + steps: + - node-staging-build-steps + build-staging-solid: + docker: + - image: cimg/node:16.14.2 + working_directory: ~/web3-onboard-monorepo/packages/solid + steps: + - node-staging-build-steps + build-staging-capsule: + docker: + - image: cimg/node:16.14.2 + working_directory: ~/web3-onboard-monorepo/packages/capsule + steps: + - node-staging-build-steps + build-staging-particle: + docker: + - image: cimg/node:18.0.0 + working_directory: ~/web3-onboard-monorepo/packages/particle-network + steps: + - node-staging-build-steps + +workflows: + version: 2 + common: + jobs: + - build-common: + <<: *deploy_production_filters + - build-staging-common: + <<: *deploy_staging_filters + core: + jobs: + - build-core: + <<: *deploy_production_filters + - build-staging-core: + <<: *deploy_staging_filters + + fortmatic: + jobs: + - build-fortmatic: + <<: *deploy_production_filters + - build-staging-fortmatic: + <<: *deploy_staging_filters + gnosis: + jobs: + - build-gnosis: + <<: *deploy_production_filters + - build-staging-gnosis: + <<: *deploy_staging_filters + injected: + jobs: + - build-injected: + <<: *deploy_production_filters + - build-staging-injected: + <<: *deploy_staging_filters + frame: + jobs: + - build-frame: + <<: *deploy_production_filters + - build-staging-frame: + <<: *deploy_staging_filters + keepkey: + jobs: + - build-keepkey: + <<: *deploy_production_filters + - build-staging-keepkey: + <<: *deploy_staging_filters + keystone: + jobs: + - build-keystone: + <<: *deploy_production_filters + - build-staging-keystone: + <<: *deploy_staging_filters + ledger: + jobs: + - build-ledger: + <<: *deploy_production_filters + - build-staging-ledger: + <<: *deploy_staging_filters + mew: + jobs: + - build-mew: + <<: *deploy_production_filters + - build-staging-mew: + <<: *deploy_staging_filters + mew-wallet: + jobs: + - build-mew-wallet: + <<: *deploy_production_filters + - build-staging-mew-wallet: + <<: *deploy_staging_filters + portis: + jobs: + - build-portis: + <<: *deploy_production_filters + - build-staging-portis: + <<: *deploy_staging_filters + torus: + jobs: + - build-torus: + <<: *deploy_production_filters + - build-staging-torus: + <<: *deploy_staging_filters + trezor: + jobs: + - build-trezor: + <<: *deploy_production_filters + - build-staging-trezor: + <<: *deploy_staging_filters + trust: + jobs: + - build-trust: + <<: *deploy_production_filters + - build-staging-trust: + <<: *deploy_staging_filters + frontier: + jobs: + - build-frontier: + <<: *deploy_production_filters + - build-staging-frontier: + <<: *deploy_staging_filters + walletconnect: + jobs: + - build-walletconnect: + <<: *deploy_production_filters + - build-staging-walletconnect: + <<: *deploy_staging_filters + walletlink: + jobs: + - build-walletlink: + <<: *deploy_production_filters + - build-staging-walletlink: + <<: *deploy_staging_filters + react: + jobs: + - build-react: + <<: *deploy_production_filters + - build-staging-react: + <<: *deploy_staging_filters + magic: + jobs: + - build-magic: + <<: *deploy_production_filters + - build-staging-magic: + <<: *deploy_staging_filters + coinbase: + jobs: + - build-coinbase: + <<: *deploy_production_filters + - build-staging-coinbase: + <<: *deploy_staging_filters + web3auth: + jobs: + - build-web3auth: + <<: *deploy_production_filters + - build-staging-web3auth: + <<: *deploy_staging_filters + dcent: + jobs: + - build-dcent: + <<: *deploy_production_filters + - build-staging-dcent: + <<: *deploy_staging_filters + vue: + jobs: + - build-vue: + <<: *deploy_production_filters + - build-staging-vue: + <<: *deploy_staging_filters + gas: + jobs: + - build-gas: + <<: *deploy_production_filters + - build-staging-gas: + <<: *deploy_staging_filters + hw-common: + jobs: + - build-hw-common: + <<: *deploy_production_filters + - build-staging-hw-common: + <<: *deploy_staging_filters + sequence: + jobs: + - build-sequence: + <<: *deploy_production_filters + - build-staging-sequence: + <<: *deploy_staging_filters + tallyho: + jobs: + - build-tallyho: + <<: *deploy_production_filters + - build-staging-tallyho: + <<: *deploy_staging_filters + enkrypt: + jobs: + - build-enkrypt: + <<: *deploy_production_filters + - build-staging-enkrypt: + <<: *deploy_staging_filters + uauth: + jobs: + - build-uauth: + <<: *deploy_production_filters + - build-staging-uauth: + <<: *deploy_staging_filters + transaction-preview: + jobs: + - build-transaction-preview: + <<: *deploy_production_filters + - build-staging-transaction-preview: + <<: *deploy_staging_filters + zeal: + jobs: + - build-zeal: + <<: *deploy_production_filters + - build-staging-zeal: + <<: *deploy_staging_filters + phantom: + jobs: + - build-phantom: + <<: *deploy_production_filters + - build-staging-phantom: + <<: *deploy_staging_filters + xdefi: + jobs: + - build-xdefi: + <<: *deploy_production_filters + - build-staging-xdefi: + <<: *deploy_staging_filters + infinity-wallet: + jobs: + - build-infinity-wallet: + <<: *deploy_production_filters + - build-staging-infinity-wallet: + <<: *deploy_staging_filters + taho: + jobs: + - build-taho: + <<: *deploy_production_filters + - build-staging-taho: + <<: *deploy_staging_filters + unstoppable-resolution: + jobs: + - build-unstoppable-resolution: + <<: *deploy_production_filters + - build-staging-unstoppable-resolution: + <<: *deploy_staging_filters + cede-store: + jobs: + - build-cede-store: + <<: *deploy_production_filters + - build-staging-cede-store: + <<: *deploy_staging_filters + arcana-auth: + jobs: + - build-arcana-auth: + <<: *deploy_production_filters + - build-staging-arcana-auth: + <<: *deploy_staging_filters + blocto: + jobs: + - build-blocto: + <<: *deploy_production_filters + - build-staging-blocto: + <<: *deploy_staging_filters + venly: + jobs: + - build-venly: + <<: *deploy_production_filters + - build-staging-venly: + <<: *deploy_staging_filters + bitget: + jobs: + - build-bitget: + <<: *deploy_production_filters + - build-staging-bitget: + <<: *deploy_staging_filters + bitkeep: + jobs: + - build-bitkeep: + <<: *deploy_production_filters + - build-staging-bitkeep: + <<: *deploy_staging_filters + metamask: + jobs: + - build-metamask: + <<: *deploy_production_filters + - build-staging-metamask: + <<: *deploy_staging_filters + solid: + jobs: + - build-solid: + <<: *deploy_production_filters + - build-staging-solid: + <<: *deploy_staging_filters + capsule: + jobs: + - build-capsule: + <<: *deploy_production_filters + - build-staging-capsule: + <<: *deploy_staging_filters + particle: + jobs: + - build-particle: + <<: *deploy_production_filters + - build-staging-particle: + <<: *deploy_staging_filters diff --git a/.github/ISSUE_TEMPLATE/BUG.yml b/.github/ISSUE_TEMPLATE/BUG.yml index e3cf85ad5..59142c886 100644 --- a/.github/ISSUE_TEMPLATE/BUG.yml +++ b/.github/ISSUE_TEMPLATE/BUG.yml @@ -46,7 +46,7 @@ body: - '@web3-onboard/decent' - '@web3-onboard/formatic' - '@web3-onboard/gnosis' - - '@web3-onboard/injected' + - '@web3-onboard/injected-wallets' - '@web3-onboard/keepkey' - '@web3-onboard/keystone' - '@web3-onboard/ledger' diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml index 8c34c823b..489291950 100644 --- a/.github/workflows/docs.yml +++ b/.github/workflows/docs.yml @@ -2,10 +2,6 @@ name: Deploy documentation to Pages on: - # Runs on pushes targeting the default branch - push: - branches: ["docs"] - # Allows you to run this workflow manually from the Actions tab workflow_dispatch: @@ -32,15 +28,15 @@ jobs: working-directory: ./docs steps: - name: Checkout - uses: actions/checkout@v3 + uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 - name: Setup Pages - uses: actions/configure-pages@v2 + uses: actions/configure-pages@983d7736d9b0ae728b81ab479565c72886d7745b - name: Setup Nodejs and yarn - uses: actions/setup-node@v2 + uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 with: - node-version: "16" + node-version: "18.18" cache: yarn - name: Install dependencies @@ -52,21 +48,21 @@ jobs: run: yarn build - name: Generate the sitemap - uses: cicirello/generate-sitemap@v1 + uses: cicirello/generate-sitemap@f76c8312a5a364c49e2610b8af12ae861805a056 with: path-to-root: './docs/build' drop-html-extension: true - base-url-path: https://onboard.blocknative.com + base-url-path: https://web3onboard.thirdweb.com - name: Peak at folder contents run: ls -al - name: Upload artifact - uses: actions/upload-pages-artifact@v1 + uses: actions/upload-pages-artifact@56afc609e74202658d3ffba0e8f6dda462b719fa with: # Upload entire repository path: './docs/build' - name: Deploy to GitHub Pages id: deployment - uses: actions/deploy-pages@v1 + uses: actions/deploy-pages@d6db90164ac5ed86f2b6aed7e0febac5b3c0c03e diff --git a/.github/workflows/issue-to-notion.yml b/.github/workflows/issue-to-notion.yml deleted file mode 100644 index a1ada2c06..000000000 --- a/.github/workflows/issue-to-notion.yml +++ /dev/null @@ -1,32 +0,0 @@ -name: Github issue -> Notion card -on: - workflow_dispatch: - issues: - types: [opened] -jobs: - issue: - name: "Issue to Notion" - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v2 - - run: | - people=$(for i in $(echo $NOTION_USER_IDS | tr "," " "); do echo -n '{"object":"user","id":"'$i'"},'; done) - curl 'https://api.notion.com/v1/pages' \ - -H 'Authorization: Bearer '"$NOTION_TOKEN"'' \ - -H "Content-Type: application/json" \ - -H "Notion-Version: 2022-02-22" \ - --data '{"parent":{"type":"database_id","database_id":"'"$DATABASE_ID"'"},"icon":{"type":"emoji","emoji":"🐛"},"properties":{"Name":{"type":"title","title":[{"type":"text","text":{"content":"'"$(echo $TITLE | tr '"' "'")"'"}}]},"Assigned":{"people":['${people:0:-1}']},"Status":{"select":{"name":"'"$STATUS"'"}},"Flag":{"multi_select":[{"name":"'"$FLAG"'"}]},"Database":{"multi_select":[{"name":"'"$DATABASE_NAME"'"}]},"Type":{"multi_select":[{"name":"bug"}]},"Project":{"multi_select":[{"name":"'"$PROJECT_NAME"'"}]}},"children":[{"object":"block","type":"bookmark","bookmark":{"url":"'"$ISSUE_URL"'"}}]}' - env: - NOTION_TOKEN: ${{ secrets.NOTION_TOKEN }} - STATE: ${{ github.event.issue.state }} - ISSUE_URL: ${{ github.event.issue.html_url }} - TITLE: ${{ github.event.issue.title }} - FLAG: Next Sprint - DATABASE_NAME: Product - STATUS: Backlog - # Product Work Board - DATABASE_ID: 69f0e513a59d445b87a1baed729c75c5 - PROJECT_NAME: web3-onboard - # User ids of who to assign the card to in notion: Taylor, Adam, Aaron - NOTION_USER_IDS: f6cbb362-4908-4138-9ef0-434003d9a9f8,8a3a2287-5d2c-4665-906d-02ae9a113340,3b407adf-6552-40de-b22f-5efa852c34a2,436b76c5-fed3-42d2-b3ca-49bb882843f8 - shell: bash diff --git a/.github/workflows/jekyll-gh-pages.yml b/.github/workflows/jekyll-gh-pages.yml new file mode 100644 index 000000000..e31d81c58 --- /dev/null +++ b/.github/workflows/jekyll-gh-pages.yml @@ -0,0 +1,51 @@ +# Sample workflow for building and deploying a Jekyll site to GitHub Pages +name: Deploy Jekyll with GitHub Pages dependencies preinstalled + +on: + # Runs on pushes targeting the default branch + push: + branches: ["main"] + + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: + +# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages +permissions: + contents: read + pages: write + id-token: write + +# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. +# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. +concurrency: + group: "pages" + cancel-in-progress: false + +jobs: + # Build job + build: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + - name: Setup Pages + uses: actions/configure-pages@v5 + - name: Build with Jekyll + uses: actions/jekyll-build-pages@v1 + with: + source: ./ + destination: ./_site + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + + # Deployment job + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + needs: build + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/.github/workflows/node-production.yml b/.github/workflows/node-production.yml new file mode 100644 index 000000000..63f0f3f28 --- /dev/null +++ b/.github/workflows/node-production.yml @@ -0,0 +1,175 @@ +name: Node Packages – Production Release + +on: + push: + branches: [main] + +permissions: + contents: read + id-token: write # for provenance / npm‑pkg OIDC + packages: write + +env: + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} + +jobs: + build-and-publish: + name: Build & publish ${{ matrix.package }} + runs-on: ubuntu-latest + + strategy: + fail-fast: false + matrix: + include: + - package: core # 1 + node: 22 + - package: common # 2 + node: 22 + - package: fortmatic # 3 + node: 22 + - package: gnosis # 4 + node: 22 + - package: injected # 5 + node: 22 + - package: frame # 6 + node: 22 + - package: keepkey # 7 + node: 22 + - package: keystone # 8 + node: 22 + - package: ledger # 9 + node: 22 + - package: mew # 10 + node: 22 + - package: mew-wallet # 11 + node: 22 + - package: portis # 12 + node: 22 + - package: torus # 13 + node: 22 + - package: trezor # 14 + node: 22 + - package: trust # 15 + node: 22 + - package: okx # 16 + node: 22 + - package: frontier # 17 + node: 22 + - package: walletconnect # 18 + node: 22 + - package: walletlink # 19 + node: 22 + - package: react # 20 + node: 22 + - package: magic # 21 + node: 22 + - package: coinbase # 22 + node: 22 + - package: web3auth # 23 + node: 22 + - package: dcent # 24 + node: 22 + - package: vue # 25 + node: 22 + - package: gas # 26 + node: 22 + - package: hw-common # 27 + node: 22 + - package: sequence # 28 + node: 22 + - package: tallyho # 29 + node: 22 + - package: enkrypt # 30 + node: 22 + - package: uauth # 31 + node: 22 + - package: transaction-preview # 32 + node: 22 + - package: zeal # 33 + node: 22 + - package: phantom # 34 + node: 22 + - package: xdefi # 35 + node: 22 + - package: infinity-wallet # 36 + node: 22 + - package: taho # 37 + node: 22 + - package: unstoppable-resolution # 38 + node: 22 + - package: cede-store # 39 + node: 22 + - package: arcana-auth # 40 + node: 22 + - package: blocto # 41 + node: 22 + - package: venly # 42 + node: 22 + - package: bitget # 43 + node: 22 + - package: bitkeep # 44 + node: 22 + - package: metamask # 45 + node: 22 + - package: solid # 46 + node: 22 + - package: para # 47 + node: 22 + - package: particle-network # 48 + node: 22 + - package: finoaconnect # 49 + node: 22 + - package: wagmi # 50 + node: 22 + - package: passport # 51 + node: 22 + - package: bloom # 52 + node: 22 + - package: keplr # 53 + node: 22 + + defaults: + run: + shell: bash + working-directory: packages/${{ matrix.package }} + + steps: + - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 + + - name: Use Node ${{ matrix.node }} + uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0 + with: + node-version: ${{ matrix.node }} + registry-url: https://registry.npmjs.org/ + + # ────── skip alpha versions ────── + - id: version + run: echo "v=$(node -p 'require(\"./package.json\").version')" >> "$GITHUB_OUTPUT" + + - name: Skip alpha builds on main + if: contains(steps.version.outputs.v, '-alpha') + run: echo "Alpha version detected – skipping publish." + # ───────────────────────────────── + + - name: Cache Yarn + uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3 + with: + path: | + ~/.cache/yarn + node_modules + key: ${{ runner.os }}-${{ matrix.node }}-${{ hashFiles('**/yarn.lock') }} + + - name: Generate workspace lock‑file + run: yarn generate-lock-entry >> yarn.lock + + - name: Install dependencies + run: yarn --immutable + + - name: Type‑check & build + run: | + yarn type-check + yarn build + + - name: Publish to npm (latest) + if: ${{ !contains(steps.version.outputs.v, '-alpha') }} + run: npm publish --access public diff --git a/.github/workflows/node-staging.yml b/.github/workflows/node-staging.yml new file mode 100644 index 000000000..d4d0463ff --- /dev/null +++ b/.github/workflows/node-staging.yml @@ -0,0 +1,175 @@ +name: Node Packages – Staging (Alpha ➜ next) + +on: + push: + branches: [develop] + +permissions: + contents: read + id-token: write + packages: write + +env: + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} + +jobs: + build-and-publish: + name: Build & publish alpha ${{ matrix.package }} + runs-on: ubuntu-latest + + strategy: + fail-fast: false + matrix: + include: + - package: core + node: 22 + - package: common + node: 22 + - package: fortmatic + node: 22 + - package: gnosis + node: 22 + - package: injected + node: 22 + - package: frame + node: 22 + - package: keepkey + node: 22 + - package: keystone + node: 22 + - package: ledger + node: 22 + - package: mew + node: 22 + - package: mew-wallet + node: 22 + - package: portis + node: 22 + - package: torus + node: 22 + - package: trezor + node: 22 + - package: trust + node: 22 + - package: okx + node: 22 + - package: frontier + node: 22 + - package: walletconnect + node: 22 + - package: walletlink + node: 22 + - package: react + node: 22 + - package: magic + node: 22 + - package: coinbase + node: 22 + - package: web3auth + node: 22 + - package: dcent + node: 22 + - package: vue + node: 22 + - package: gas + node: 22 + - package: hw-common + node: 22 + - package: sequence + node: 22 + - package: tallyho + node: 22 + - package: enkrypt + node: 22 + - package: uauth + node: 22 + - package: transaction-preview + node: 22 + - package: zeal + node: 22 + - package: phantom + node: 22 + - package: xdefi + node: 22 + - package: infinity-wallet + node: 22 + - package: taho + node: 22 + - package: unstoppable-resolution + node: 22 + - package: cede-store + node: 22 + - package: arcana-auth + node: 22 + - package: blocto + node: 22 + - package: venly + node: 22 + - package: bitget + node: 22 + - package: bitkeep + node: 22 + - package: metamask + node: 22 + - package: solid + node: 22 + - package: para + node: 22 + - package: particle-network + node: 22 + - package: finoaconnect + node: 22 + - package: wagmi + node: 22 + - package: passport + node: 22 + - package: bloom + node: 22 + - package: keplr + node: 22 + + defaults: + run: + shell: bash + working-directory: packages/${{ matrix.package }} + + steps: + - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 + + - name: Use Node ${{ matrix.node }} + uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0 + with: + node-version: ${{ matrix.node }} + registry-url: https://registry.npmjs.org/ + + # ────── only publish *alpha* versions ────── + - id: version + run: echo "v=$(node -p 'require(\"./package.json\").version')" >> "$GITHUB_OUTPUT" + + - name: Skip non‑alpha builds on develop + if: ${{ !contains(steps.version.outputs.v, '-alpha') }} + run: echo "Not an alpha – skipping publish." + # ─────────────────────────────────────────── + + - name: Cache Yarn + uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3 + with: + path: | + ~/.cache/yarn + node_modules + key: ${{ runner.os }}-${{ matrix.node }}-${{ hashFiles('**/yarn.lock') }} + + - name: Generate workspace lock‑file + run: yarn generate-lock-entry >> yarn.lock + + - name: Install dependencies + run: yarn --immutable + + - name: Type‑check & build + run: | + yarn type-check + yarn build + + - name: Publish to npm (next) + if: contains(steps.version.outputs.v, '-alpha') + run: npm publish --tag next --access public diff --git a/.github/workflows/pr-status-checks.yml b/.github/workflows/pr-status-checks.yml index 22046747b..5d2c1bb66 100644 --- a/.github/workflows/pr-status-checks.yml +++ b/.github/workflows/pr-status-checks.yml @@ -19,8 +19,7 @@ jobs: - name: Setup Nodejs and yarn uses: actions/setup-node@v2 with: - node-version: "16" - cache: yarn + node-version: 22 - name: Install dependencies run: yarn @@ -31,5 +30,5 @@ jobs: - name: Check formatting and types run: yarn type-check - - name: Check that versions of the package dependencies match those in yarn’s lock file + - name: Check that versions of the package dependencies match those in yarn's lock file run: yarn file-check diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml new file mode 100644 index 000000000..f2c9e97c9 --- /dev/null +++ b/.github/workflows/static.yml @@ -0,0 +1,43 @@ +# Simple workflow for deploying static content to GitHub Pages +name: Deploy static content to Pages + +on: + # Runs on pushes targeting the default branch + push: + branches: ["main"] + + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: + +# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages +permissions: + contents: read + pages: write + id-token: write + +# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. +# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. +concurrency: + group: "pages" + cancel-in-progress: false + +jobs: + # Single deploy job since we're just deploying + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + - name: Setup Pages + uses: actions/configure-pages@v5 + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + # Upload entire repository + path: '.' + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/.github/workflows/sw-build.yml b/.github/workflows/sw-build.yml deleted file mode 100644 index 837b9961d..000000000 --- a/.github/workflows/sw-build.yml +++ /dev/null @@ -1,43 +0,0 @@ -name: SubWallet Build -on: - pull_request: - branches: - - main - - sw-dev - push: - branches: - - main - - sw-dev - -jobs: - master: - if: "! startsWith(github.event.head_commit.message, '[CI Skip]')" - runs-on: ubuntu-22.04 - name: Build and Deploy - steps: - - uses: actions/checkout@v3 - with: - fetch-depth: 0 - - name: Build - uses: actions/setup-node@v3 - with: - node-version: '18' - cache: 'yarn' - - name: Build - id: build - run: | - yarn install - yarn build - - # === Deploy static pages === - - name: Deploy to Cloudflare Pages - id: cloudflare_deployment - uses: cloudflare/pages-action@v1 - with: - apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }} - accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }} - projectName: 'w3o' - gitHubToken: ${{ secrets.GH_AUTOMATION_TOKEN }} - branch: 'main' - directory: './packages/demo/build' - wranglerVersion: '3' diff --git a/.github/workflows/web-sdk.yml b/.github/workflows/web-sdk.yml new file mode 100644 index 000000000..f9da77972 --- /dev/null +++ b/.github/workflows/web-sdk.yml @@ -0,0 +1,141 @@ +name: Web3-Onboard +on: + pull_request: + branches: + - develop + - master + push: + branches: + - develop + - master + +jobs: + master: + if: "! startsWith(github.event.head_commit.message, '[CI Skip]')" + runs-on: ubuntu-22.04 + name: Build and Deploy + steps: + - uses: actions/checkout@v3 + with: + fetch-depth: 0 + - name: Web3-Onboard + uses: actions/setup-node@v3 + with: + node-version: '18''20''22' + cache: 'yarn''npm''pnpm' + - name: Web3-Onboard & Web SDK + id: Install the Web SDK dependencies + run: | + npm i @web3-onboard/core @web3-onboard/injected-wallets ethers + # or + yarn add @web3-onboard/core @web3-onboard/injected-wallets ethers + #Install the Web SDK dependencies + npm install @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query + # or + pnpm install @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query + # or + yarn add @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query + + # === Deploy static pages === + - name: Deploy to Cloudflare Pages + id: cloudflare_deployment + uses: cloudflare/pages-action@v1 + with: + apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }} + accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }} + projectName: 'w3o' + gitHubToken: ${{ secrets.GH_AUTOMATION_TOKEN }} + branch: 'main' + directory: './packages/demo/build' + wranglerVersion: '3' + +# Sample workflow for building and deploying a Next.js site to GitHub Pages +# +# To get started with Next.js see: https://nextjs.org/docs/getting-started +# +# Runs on pushes targeting the default branch + push: + branches: ["master"] + + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: + +# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages +permissions: + contents: read + pages: write + id-token: write + +# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. +# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. +concurrency: + group: "pages" + cancel-in-progress: false + +jobs: + # Build job + build: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + - name: Detect package manager + id: detect-package-manager + run: | + if [ -f "${{ github.workspace }}/yarn.lock" ]; then + echo "manager=yarn" >> $GITHUB_OUTPUT + echo "command=install" >> $GITHUB_OUTPUT + echo "runner=yarn" >> $GITHUB_OUTPUT + exit 0 + elif [ -f "${{ github.workspace }}/package.json" ]; then + echo "manager=npm" >> $GITHUB_OUTPUT + echo "command=ci" >> $GITHUB_OUTPUT + echo "runner=npx --no-install" >> $GITHUB_OUTPUT + exit 0 + else + echo "Unable to determine package manager" + exit 1 + fi + - name: Setup Node + uses: actions/setup-node@v4 + with: + node-version: "20" + cache: ${{ steps.detect-package-manager.outputs.manager }} + - name: Setup Pages + uses: actions/configure-pages@v5 + with: + # Automatically inject basePath in your Next.js configuration file and disable + # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized). + # + # You may remove this line if you want to manage the configuration yourself. + static_site_generator: next + - name: Restore cache + uses: actions/cache@v4 + with: + path: | + .next/cache + # Generate a new cache whenever packages or source files change. + key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }} + # If source files changed but packages didn't, rebuild from a prior cache. + restore-keys: | + ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}- + - name: Install dependencies + run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }} + - name: Build with Next.js + run: ${{ steps.detect-package-manager.outputs.runner }} next build + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + path: ./out + + # Deployment job + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + needs: build + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/README.md b/README.md index 9c528e397..85ecc1e06 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,6 @@ -## SubConnect +# Web3-Onboard -**Providing an efficient and easy solution for connecting Polkadot, Substrate, & Ethereum wallets. Drawing insights from [Blocknative](https://github.com/blocknative)'s [web3-onboard](https://onboard.blocknative.com/), we've enhanced our capabilities for seamless integration with Substrate wallets.** - -## New Update -**We have developed the ability to further extend the connection of substrate wallets.** -**SDK Substrate Wallets** -- [SubWallet-Polkadot](https://github.com/Koniverse/SubWallet-Connect/wiki/SubWallet%E2%80%90Polkadot) -- [WalletConnect-Polkadot](https://github.com/Koniverse/SubWallet-Connect/wiki/WalletConnect%E2%80%90Polkadot) -- [Talisman](https://github.com/Koniverse/SubWallet-Connect/wiki/Talisman) -- [Polkadot{.js}](https://github.com/Koniverse/SubWallet-Connect/wiki/Polkadot%E2%80%90Js) -- [Polkadot Vault](https://github.com/Koniverse/SubWallet-Connect/wiki/Polkadot-Vault) -- [Ledger Polkadot](https://github.com/Koniverse/SubWallet-Connect/wiki/Ledger%E2%80%90Polkadot) +**easy way to connect users to dapps** ## Features @@ -18,68 +8,68 @@ - **Multiple Wallets and Accounts Connection**: Allow your users to connect multiple wallets and multiple accounts within each wallet at the same time to your app. - **Multiple Chain Support**: Allow users to switch between chains/networks with ease. - **Account Center**: A persistent interface to manage wallet connections and networks, with a minimal version for mobile -- **Notify**: Real-time transaction notifications for the connected wallet addresses for all transaction states -- **Wallet Provider Ethereum Standardization**: All wallet modules expose a provider that is patched to be compliant with the [EIP-1193](https://eips.ethereum.org/EIPS/eip-1193), [EIP-1102](https://eips.ethereum.org/EIPS/eip-1102), [EIP-3085](https://eips.ethereum.org/EIPS/eip-3085) and [EIP-3326](https://ethereum-magicians.org/t/eip-3326-wallet-switchethereumchain/5471) specifications. -- **Wallet Provider Substrate**: For Substrate wallets, we provide 2 connection solutions. This includes injected wallets with available signers, and other connections like hardware wallets, WalletConnect, and Polkadot Vault. Additionally, we offer a provider similar to Ethereum wallets, supporting various methods such as `polkadot_signTransaction`, `polkadot_signMessage`, `polkadot_sendTransaction`, `polkadot_getBalance`, and `polkadot_requestAccounts` +- **Wallet Provider Standardization**: All wallet modules expose a provider that is patched to be compliant with the [EIP-1193](https://eips.ethereum.org/EIPS/eip-1193), [EIP-1102](https://eips.ethereum.org/EIPS/eip-1102), [EIP-3085](https://eips.ethereum.org/EIPS/eip-3085) and [EIP-3326](https://ethereum-magicians.org/t/eip-3326-wallet-switchethereumchain/5471) specifications. - **Dynamic Imports**: Supporting multiple wallets in your app requires a lot of dependencies. Onboard dynamically imports a wallet and its dependencies only when the user selects it, so that minimal bandwidth is used. ## Quickstart -**Note**: If you're still unsure about following our instructions below, you can run the [demo](https://github.com/Koniverse/SubWallet-Connect/wiki#test-out-the-demo-app) that we have prepared. The result is our [SubWallet-Connect](https://w3o-demo.subwallet.app/). -Install the core Onboard library, the injected wallets module and optionally ethers js and polkadot js to support browser extension and mobile wallets: + +Install the core Onboard library, the injected wallets module and optionally ethers js to support browser extension and mobile wallets: **NPM** -`npm i @subwallet-connect/core @subwallet-connect/injected-wallets ethers ` +`npm i @web3-onboard/core @web3-onboard/injected-wallets ethers` **Yarn** -`yarn add @subwallet-connect/core @subwallet-connect/injected-wallets ethers @polkadot/extension-inject` +`yarn add @web3-onboard/core @web3-onboard/injected-wallets ethers` Then initialize in your app: -```typescript -import Onboard from '@subwallet-connect/core'; -import injectedModule from '@subwallet-connect/injected-wallets'; -import subwalletModule from '@subwallet-connect/subwallet'; -import subwalletPolkadotModule from '@subwallet-connect/subwallet-polkadot'; -import type {EIP1193Provider, SubstrateProvider} from "@subwallet-connect/common"; -import {ethers} from 'ethers'; -import {ApiPromise, WsProvider} from '@polkadot/api'; +```javascript +import Onboard from '@web3-onboard/core' +import injectedModule from '@web3-onboard/injected-wallets' +import { ethers } from 'ethers' const MAINNET_RPC_URL = 'https://mainnet.infura.io/v3/' -const ws = 'wss://rpc.polkadot.io' const injected = injectedModule() -const subwalletWallet = subwalletModule() -const subwalletPolkadotWalet = subwalletPolkadotModule() const onboard = Onboard({ - wallets: [injected, subwalletWallet, subwalletPolkadotWalet], + wallets: [injected], chains: [ { id: '0x1', token: 'ETH', label: 'Ethereum Mainnet', rpcUrl: MAINNET_RPC_URL - } - ], - chainsPolkadot: [ + }, + { + id: 42161, + token: 'ARB-ETH', + label: 'Arbitrum One', + rpcUrl: 'https://rpc.ankr.com/arbitrum' + }, { - id: '0x91b171bb158e2d3848fa23a9f1c25182fb8e20313b2c1eb49219da7a70ce90c3', - namespace: 'substrate', - token: 'DOT', - label: 'Polkadot', - rpcUrl: `polkadot.api.subscan.io`, - decimal: 10 + id: '0xa4ba', + token: 'ARB', + label: 'Arbitrum Nova', + rpcUrl: 'https://nova.arbitrum.io/rpc' + }, + { + id: '0x2105', + token: 'ETH', + label: 'Base', + rpcUrl: 'https://mainnet.base.org' } ] }) const wallets = await onboard.connectWallet() -const wallet = wallets[0] -if (wallet?.type === 'evm') { +console.log(wallets) + +if (wallets[0]) { // create an ethers provider with the last connected wallet provider const ethersProvider = new ethers.providers.Web3Provider( - wallet.provider as EIP1193Provider, + wallets[0].provider, 'any' ) @@ -92,84 +82,76 @@ if (wallet?.type === 'evm') { }) const receipt = await txn.wait() -} else if (wallet?.type === 'substrate') { - - const api = new ApiPromise({ - provider: new WsProvider(ws) - }); - api.isReady().then(() => { - const transferExtrinsic = api.tx.balances.transferKeepAlive(recipientAddress, amount); - - transferExtrinsic.signAndSend(senderAddress, {signer: wallet.signer}, ({status, txHash}) => { - if (status.isInBlock) { - console.log(txHash.toString()); - console.log(`Completed at block hash #${status.asInBlock.toString()}`); - } else { - console.log(`Current status: ${status.type}`); - } - }) - }) + console.log(receipt) } ``` +**Onboard v1 migration guide** + +If you're coming from v1, we've created a [migration guide for you](https://web3onboard.thirdweb.com/docs/overview/onboard.js-migration-guide#background). + ## Documentation -For full documentation, check out the README.md for each package or the [docs page here](https://github.com/Koniverse/SubWallet-Connect/wiki) from ethereum wallet: +For full documentation, check out the README.md for each package or the [docs page here](https://web3onboard.thirdweb.com/docs/overview/introduction#features): **Core Repo** -- [Core](https://github.com/Koniverse/SubWallet-Connect/wiki/Core) +- [Core](packages/core/README.md) **Injected Wallets** -- [Injected](https://github.com/Koniverse/SubWallet-Connect/wiki/Injected) +- [Injected](packages/injected/README.md) **SDK Wallets** -- [SubWallet](https://github.com/Koniverse/SubWallet-Connect/wiki/SubWallet) -- [SubWallet-Polkadot](https://github.com/Koniverse/SubWallet-Connect/wiki/SubWallet%E2%80%90Polkadot) -- [WalletConnect-Polkadot](https://github.com/Koniverse/SubWallet-Connect/wiki/WalletConnect%E2%80%90Polkadot) -- [Talisman](https://github.com/Koniverse/SubWallet-Connect/wiki/Talisman) -- [Polkadot{.js}](https://github.com/Koniverse/SubWallet-Connect/wiki/Polkadot%E2%80%90Js) -- [Arcana](https://github.com/Koniverse/SubWallet-Connect/wiki/Arcana) -- [Coinbase](https://github.com/Koniverse/SubWallet-Connect/wiki/Coinbase) -- [Trust](https://github.com/Koniverse/SubWallet-Connect/wiki/Trust) -- [WalletConnect](https://github.com/Koniverse/SubWallet-Connect/wiki/WalletConnect) -- [Magic](https://github.com/Koniverse/SubWallet-Connect/wiki/Magic) -- [Fortmatic](https://github.com/Koniverse/SubWallet-Connect/wiki/Fortmatic) -- [Portis](https://github.com/Koniverse/SubWallet-Connect/wiki/Portis) -- [MEW-Wallet](https://github.com/Koniverse/SubWallet-Connect/wiki/Mew) -- [Web3Auth](https://github.com/Koniverse/SubWallet-Connect/wiki/Web3Auth) -- [Taho (previously Tally Ho)](https://github.com/Koniverse/SubWallet-Connect/wiki/Taho) -- [Enkrypt](https://github.com/Koniverse/SubWallet-Connect/wiki/Enkrypt) -- [Frontier](https://github.com/Koniverse/SubWallet-Connect/wiki/Frontier) -- [Infinity Wallet](https://github.com/Koniverse/SubWallet-Connect/wiki/Infinity-Wallet) -- [Frame](https://github.com/Koniverse/SubWallet-Connect/wiki/Frame) -- [Blocto](https://github.com/Koniverse/SubWallet-Connect/wiki/Blockto) + +- [Arcana](packages/arcana-auth/README.md) +- [Bitget](packages/bitget/README.md) +- [Blocto](packages/blocto/README.md) +- [Para](packages/para/README.md) +- [Coinbase](packages/coinbase/README.md) +- [Enkrypt](packages/enkrypt/README.md) +- [FinoaConnect](packages/finoaconnect/README.md) +- [Fortmatic](packages/fortmatic/README.md) +- [Frame](packages/frame/README.md) +- [Frontier](packages/frontier/README.md) +- [Infinity Wallet](packages/infinity-wallet/README.md) +- [Keplr](packages/keplr/README.md) +- [Magic](packages/magic/README.md) +- [MetaMask](packages/metamask/README.md) +- [MEW-Wallet](packages/mew-wallet/README.md) +- [OKX](packages/okx/README.md) +- [Particle Network](packages/particle-network/README.md) +- [Portis](packages/portis/README.md) +- [Safe](packages/gnosis/README.md) +- [Sequence](packages/sequence/README.md) +- [Taho (previously Tally Ho)](packages/tallyho/README.md) +- [Trust](packages/trust/README.md) +- [Unstoppable Domains](packages/uauth/README.md) +- [WalletConnect](packages/walletconnect/README.md) +- [Web3Auth](packages/web3auth/README.md) +- [XDEFI](packages/xdefi/README.md) **Hardware Wallets** -- [Polkadot Vault](https://github.com/Koniverse/SubWallet-Connect/wiki/Polkadot-Vault) -- [Ledger Polkadot](https://github.com/Koniverse/SubWallet-Connect/wiki/Ledger%E2%80%90Polkadot) -- [Ledger](https://github.com/Koniverse/SubWallet-Connect/wiki/Ledger) -- [Trezor](https://github.com/Koniverse/SubWallet-Connect/wiki/Trezor) -- [Keystone](https://github.com/Koniverse/SubWallet-Connect/wiki/Keystone) -- [KeepKey](https://github.com/Koniverse/SubWallet-Connect/wiki/KeepKey) -- [D'CENT](https://github.com/Koniverse/SubWallet-Connect/wiki/D'CENT) -**Frameworks** +- [D'CENT](packages/dcent/README.md) +- [KeepKey](packages/keepkey/README.md) +- [Keystone](packages/keystone/README.md) +- [Ledger](packages/ledger/README.md) +- [Trezor](packages/trezor/README.md) -- [React](https://github.com/Koniverse/SubWallet-Connect/wiki/React) +**Frameworks** +- [React](packages/react/README.md) +- [Solid](packages/solid/README.md) +- [Vue](packages/vue/README.md) ## Test out the demo app -If you would like to test out the current functionality of SubWallet Connect in a small browser demo, then: +If you would like to test out the current functionality of V2 in a small browser demo, then: -- Clone the repo: `git clone git@github.com:Koniverse/SubWallet-Connect.git` -- Checkout the SubWallet Connect feature branch: `git checkout sw-dev` -- Install the dependencies: `yarn install` (if running a M1 mac - `yarn install-m1-mac`) -- Run build all packages in dev mode: `yarn build` -- Direct to package\demo: `cd .\packages\demo\` -- Running start to view demo : `yarn start` +- Clone the repo: `git clone git@github.com:blocknative/onboard.git` +- Change in to the onboard directory: `cd onboard` +- Checkout the V2 feature branch: `git checkout main` +- Install the dependencies: `yarn` (if running a M1 mac - `yarn install-m1-mac`) +- Run all packages in dev mode: `yarn dev` - To view the demo app in the browser after running the above steps navigate to [http://localhost:8080](http://localhost:8080) - -*** diff --git a/docs/package.json b/docs/package.json index 6da75f3a6..99af7ee4f 100644 --- a/docs/package.json +++ b/docs/package.json @@ -12,8 +12,8 @@ "format": "prettier --plugin-search-dir . --write .", "prepare": "svelte-kit sync", "test": "playwright test", - "w3o-latest-prod": "yarn add '@web3-onboard/core' '@web3-onboard/coinbase' '@web3-onboard/transaction-preview' '@web3-onboard/dcent' '@web3-onboard/frontier' '@web3-onboard/fortmatic' '@web3-onboard/frame' '@web3-onboard/gas' '@web3-onboard/gnosis' '@web3-onboard/keepkey' '@web3-onboard/keystone' '@web3-onboard/ledger' '@web3-onboard/infinity-wallet' '@web3-onboard/injected-wallets' '@web3-onboard/magic' '@web3-onboard/phantom' '@web3-onboard/portis' '@web3-onboard/sequence' '@web3-onboard/trezor' '@web3-onboard/trust' '@web3-onboard/torus' '@web3-onboard/taho' '@web3-onboard/web3auth' '@web3-onboard/walletconnect' '@web3-onboard/enkrypt' '@web3-onboard/mew-wallet' '@web3-onboard/xdefi' '@web3-onboard/uauth' '@web3-onboard/zeal' '@web3-onboard/cede-store' '@web3-onboard/blocto'", - "w3o-latest-alpha": "yarn add '@web3-onboard/core@next' '@web3-onboard/coinbase@next' '@web3-onboard/transaction-preview@next' '@web3-onboard/dcent@next' '@web3-onboard/frontier@next' '@web3-onboard/fortmatic@next' '@web3-onboard/frame@next' '@web3-onboard/gas@next' '@web3-onboard/gnosis@next' '@web3-onboard/keepkey@next' '@web3-onboard/keystone@next' '@web3-onboard/ledger@next' '@web3-onboard/infinity-wallet@next' '@web3-onboard/injected-wallets@next' '@web3-onboard/magic@next' '@web3-onboard/phantom@next' '@web3-onboard/portis@next' '@web3-onboard/sequence@next' '@web3-onboard/trezor@next' '@web3-onboard/trust@next' '@web3-onboard/torus@next' '@web3-onboard/taho@next' '@web3-onboard/web3auth@next' '@web3-onboard/walletconnect@next' '@web3-onboard/enkrypt@next' '@web3-onboard/mew-wallet@next' '@web3-onboard/xdefi@next' '@web3-onboard/uauth@next' '@web3-onboard/zeal@next' '@web3-onboard/cede-store@next' '@web3-onboard/blocto@next'" + "w3o-latest-prod": "yarn add '@web3-onboard/core' '@web3-onboard/coinbase' '@web3-onboard/transaction-preview' '@web3-onboard/dcent' '@web3-onboard/frontier' '@web3-onboard/fortmatic' '@web3-onboard/frame' '@web3-onboard/gas' '@web3-onboard/gnosis' '@web3-onboard/keepkey' '@web3-onboard/keystone' '@web3-onboard/ledger' '@web3-onboard/infinity-wallet' '@web3-onboard/injected-wallets' '@web3-onboard/magic' '@web3-onboard/phantom' '@web3-onboard/portis' '@web3-onboard/sequence' '@web3-onboard/trezor' '@web3-onboard/trust' '@web3-onboard/okx' '@web3-onboard/torus' '@web3-onboard/taho' '@web3-onboard/web3auth' '@web3-onboard/walletconnect' '@web3-onboard/enkrypt' '@web3-onboard/mew-wallet' '@web3-onboard/xdefi' '@web3-onboard/uauth' '@web3-onboard/zeal' '@web3-onboard/cede-store' '@web3-onboard/blocto' '@web3-onboard/para' '@web3-onboard/particle-network' '@web3-onboard/metamask' '@web3-onboard/bitget' '@web3-onboard/arcana-auth' '@web3-onboard/venly'", + "w3o-latest-alpha": "yarn add '@web3-onboard/core@next' '@web3-onboard/coinbase@next' '@web3-onboard/transaction-preview@next' '@web3-onboard/dcent@next' '@web3-onboard/frontier@next' '@web3-onboard/fortmatic@next' '@web3-onboard/frame@next' '@web3-onboard/gas@next' '@web3-onboard/gnosis@next' '@web3-onboard/keepkey@next' '@web3-onboard/keystone@next' '@web3-onboard/ledger@next' '@web3-onboard/infinity-wallet@next' '@web3-onboard/injected-wallets@next' '@web3-onboard/magic@next' '@web3-onboard/phantom@next' '@web3-onboard/portis@next' '@web3-onboard/sequence@next' '@web3-onboard/trezor@next' '@web3-onboard/trust@next' '@web3-onboard/okx@next' '@web3-onboard/torus@next' '@web3-onboard/taho@next' '@web3-onboard/web3auth@next' '@web3-onboard/walletconnect@next' '@web3-onboard/enkrypt@next' '@web3-onboard/mew-wallet@next' '@web3-onboard/xdefi@next' '@web3-onboard/uauth@next' '@web3-onboard/zeal@next' '@web3-onboard/cede-store@next' '@web3-onboard/blocto@next' '@web3-onboard/para@next' '@web3-onboard/metamask@next' '@web3-onboard/bitget@next' '@web3-onboard/arcana-auth@next' '@web3-onboard/venly@next' '@web3-onboard/particle-network@next'" }, "devDependencies": { "@algolia/client-search": "^4.17.0", @@ -26,6 +26,7 @@ "@tailwindcss/typography": "^0.5.9", "@types/animejs": "^3.1.7", "@types/react": "^18.0.37", + "@vitejs/plugin-react": "^4.2.1", "assert": "^2.0.0", "autoprefixer": "^10.4.14", "browserify-zlib": "^0.2.0", @@ -35,7 +36,6 @@ "prettier-plugin-svelte": "^2.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", - "rollup-plugin-polyfill-node": "^0.12.0", "shiki": "^0.12.0", "stream-browserify": "^3.0.0", "stream-http": "^3.2.0", @@ -43,49 +43,53 @@ "svelte-check": "^3.0.1", "svelte-preprocess": "^5.0.3", "tslib": "^2.4.1", - "typescript": "^5.0.4", + "typescript": "^5.4.5", "unplugin-icons": "^0.14.0", - "vite": "^4.5.0" + "vite": "^4.5.3", + "vite-plugin-node-polyfills": "^0.22.0" }, "type": "module", "dependencies": { "@safe-global/safe-apps-provider": "^0.18.0", "@safe-global/safe-apps-sdk": "^8.1.0", - "@web3-onboard/arcana-auth": "^2.0.0", - "@web3-onboard/bitget": "^2.0.0", - "@web3-onboard/blocto": "^2.0.0", - "@web3-onboard/cede-store": "^2.1.0", - "@web3-onboard/coinbase": "^2.2.5", - "@web3-onboard/core": "^2.21.2", - "@web3-onboard/dcent": "^2.2.7", - "@web3-onboard/enkrypt": "^2.0.4", - "@web3-onboard/fortmatic": "^2.0.19", - "@web3-onboard/frame": "^2.0.2", - "@web3-onboard/frontier": "^2.0.4", - "@web3-onboard/gas": "^2.1.8", - "@web3-onboard/gnosis": "^2.1.10", - "@web3-onboard/infinity-wallet": "^2.0.4", - "@web3-onboard/injected-wallets": "^2.10.9", - "@web3-onboard/keepkey": "^2.3.7", - "@web3-onboard/keystone": "^2.3.7", - "@web3-onboard/ledger": "^2.5.1", - "@web3-onboard/magic": "^2.1.7", - "@web3-onboard/metamask": "^2.0.1", - "@web3-onboard/mew-wallet": "^2.0.4", - "@web3-onboard/phantom": "^2.0.3", - "@web3-onboard/portis": "^2.1.7", - "@web3-onboard/sequence": "^2.0.8", - "@web3-onboard/taho": "^2.0.5", - "@web3-onboard/torus": "^2.2.6", - "@web3-onboard/transaction-preview": "^2.0.8", - "@web3-onboard/trezor": "^2.4.3", - "@web3-onboard/trust": "^2.0.4", - "@web3-onboard/uauth": "^2.1.1", - "@web3-onboard/venly": "^2.0.0", - "@web3-onboard/walletconnect": "^2.5.0", - "@web3-onboard/web3auth": "^2.2.3", - "@web3-onboard/xdefi": "^2.0.4", - "@web3-onboard/zeal": "^2.0.4", + "@web3-onboard/bitget": "^2.1.1", + "@web3-onboard/blocto": "^2.1.1", + "@web3-onboard/para": "^1.0.0", + "@web3-onboard/cede-store": "^2.3.1", + "@web3-onboard/coinbase": "^2.3.1", + "@web3-onboard/core": "^2.23.1-alpha.1", + "@web3-onboard/dcent": "^2.2.8", + "@web3-onboard/enkrypt": "^2.1.1", + "@web3-onboard/finoaconnect": "^2.0.0", + "@web3-onboard/fortmatic": "^2.1.1", + "@web3-onboard/frame": "^2.1.1", + "@web3-onboard/frontier": "^2.1.1", + "@web3-onboard/gas": "^2.2.1", + "@web3-onboard/gnosis": "^2.3.1", + "@web3-onboard/infinity-wallet": "^2.1.1", + "@web3-onboard/injected-wallets": "^2.11.3", + "@web3-onboard/keepkey": "^2.3.8", + "@web3-onboard/keystone": "^2.3.8", + "@web3-onboard/ledger": "^2.7.1", + "@web3-onboard/magic": "^2.2.1", + "@web3-onboard/metamask": "^2.2.0", + "@web3-onboard/mew-wallet": "^2.1.1", + "@web3-onboard/okx": "2.0.0", + "@web3-onboard/particle-network": "^2.1.1", + "@web3-onboard/phantom": "^2.1.1", + "@web3-onboard/portis": "^2.2.1", + "@web3-onboard/sequence": "^2.1.1", + "@web3-onboard/taho": "^2.1.1", + "@web3-onboard/torus": "^2.3.1", + "@web3-onboard/transaction-preview": "^2.1.1", + "@web3-onboard/trezor": "^2.4.4", + "@web3-onboard/trust": "^2.1.1", + "@web3-onboard/uauth": "^2.2.1", + "@web3-onboard/venly": "^2.1.1", + "@web3-onboard/walletconnect": "^2.6.2", + "@web3-onboard/web3auth": "^2.3.1", + "@web3-onboard/xdefi": "^2.1.1", + "@web3-onboard/zeal": "^2.1.1", "animejs": "^3.2.1", "bnc-sdk": "^4.6.6", "ethers": "^5.7.0", diff --git a/docs/src/lib/components/FeaturesSection.svelte b/docs/src/lib/components/FeaturesSection.svelte index 931cc0cca..56d3024ca 100644 --- a/docs/src/lib/components/FeaturesSection.svelte +++ b/docs/src/lib/components/FeaturesSection.svelte @@ -7,7 +7,6 @@ import FeatureCard from './FeatureCard.svelte' import FrameworksGraphic from './svg/frameworks-group.svelte' - import NotifyGraphic from './svg/notify-group.svelte' import NetworksGraphic from './svg/networks-graphic.svg' import AccountCenterGraphic from './svg/account-center-graphic.svg' import WalletsGraphic from './svg/wallet-row.svg' @@ -48,11 +47,11 @@ /> - -
-
- Transaction Preview -
-
- - - - - -
- -
- -
-
- - -
- - - - - - -
-
-
diff --git a/docs/src/lib/components/SEO/Twitter.svelte b/docs/src/lib/components/SEO/Twitter.svelte index f8304b226..cdd11c517 100644 --- a/docs/src/lib/components/SEO/Twitter.svelte +++ b/docs/src/lib/components/SEO/Twitter.svelte @@ -6,10 +6,10 @@ - - - - + + + + {#if image} diff --git a/docs/src/lib/components/SEO/index.svelte b/docs/src/lib/components/SEO/index.svelte index eb9fa108f..71b095194 100644 --- a/docs/src/lib/components/SEO/index.svelte +++ b/docs/src/lib/components/SEO/index.svelte @@ -1,14 +1,13 @@ - -
- {#await blocknativeSdk && transactionPreview then Preview} - {#if Preview} - - -
- {/if} - {/await} -
- - diff --git a/docs/src/lib/components/gas/Gas.svelte b/docs/src/lib/components/gas/Gas.svelte index aacf39c23..4784f9289 100644 --- a/docs/src/lib/components/gas/Gas.svelte +++ b/docs/src/lib/components/gas/Gas.svelte @@ -24,7 +24,6 @@ onMount(() => { ethMainnetGasBlockPrices = gasModule.stream({ chains: ['0x1'], - apiKey: 'da1b962d-314d-4903-bfe1-426821d14a35', endpoint: 'blockPrices' }) gasSub = ethMainnetGasBlockPrices.subscribe(() => { diff --git a/docs/src/lib/components/icons/thirdweb-icon.js b/docs/src/lib/components/icons/thirdweb-icon.js new file mode 100644 index 000000000..078eda040 --- /dev/null +++ b/docs/src/lib/components/icons/thirdweb-icon.js @@ -0,0 +1,33 @@ +export default ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +` diff --git a/docs/src/lib/components/index.ts b/docs/src/lib/components/index.ts index 151d51101..cae2dab62 100644 --- a/docs/src/lib/components/index.ts +++ b/docs/src/lib/components/index.ts @@ -1,3 +1,2 @@ export * from './examples' export * from './gas' -export { default as TransactionPreviewButton } from './TransactionPreviewButton.svelte' diff --git a/docs/src/lib/components/svg/hero-img.svg b/docs/src/lib/components/svg/hero-img.svg index 1de752cfb..3d2512614 100644 --- a/docs/src/lib/components/svg/hero-img.svg +++ b/docs/src/lib/components/svg/hero-img.svg @@ -1,437 +1,436 @@ - + - - + + - + + - - - - - - - - - - - - + + + + + + + + + + + - + - - - - - + + + + + - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + - - + + - + - - - - + + + + + + - - + + - - - + + + - + - - - + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - + + + + + + + + + - + - - - - - + + + + + - - + + + + - + - + - + - + + + + + + + + + + + - - - - - - + - - - + + + + + - - + - - - - - + + - + + - - + + - - - - - + + + + + + + + + - + - - - - - - - - - - - + - - - - + + + + - + - + + + + + - - - - - - - - - - - + + + + + + - - - - - + + + + + - - - - - + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - + + - - - - + + + + + + + + - - - - + + + + + + - - + - - - + + + - - - - - + + + + + + + + + - - - - - - - - - - - - - - - + + - - - - - - - - - - - + + + + + - - + + + + + + + + + - + - + + - - - - - + + + + + - + - + - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + - + - - - - + + + - - + + - + - + - - - - - - - + + + + + + + - + - - - + + + + + + - - - - + + - + + + + - - - - + - + - - - - + + + + + - - - - - - - - - + + + + + + + + + - + - - - + - - + + + - + - - - - - + + + + - + - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + - + @@ -441,13 +440,13 @@ - + - + - + @@ -457,40 +456,30 @@ - + - + - + - + - + - - - - - - - - - - - + @@ -500,13 +489,10 @@ - + - - - - + @@ -515,7 +501,7 @@ - + @@ -524,7 +510,7 @@ - + @@ -533,7 +519,7 @@ - + @@ -542,7 +528,7 @@ - + @@ -551,7 +537,7 @@ - + @@ -560,10 +546,10 @@ - + - + @@ -572,10 +558,10 @@ - + - + @@ -584,7 +570,7 @@ - + @@ -593,7 +579,7 @@ - + @@ -602,218 +588,218 @@ - - + + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/docs/src/lib/components/svg/logos-group.svg b/docs/src/lib/components/svg/logos-group.svg index fa6f39604..f56486269 100644 --- a/docs/src/lib/components/svg/logos-group.svg +++ b/docs/src/lib/components/svg/logos-group.svg @@ -1,1607 +1,1635 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + + + + + + + + + + + + - - + + + + + + + + + + + + + + - - - - - - + + + + + + - - - - + + + + + + + + + - - - - - - - - - + + + + + + + + + + + + + + + + - - - - - - - - - - - - - + + + + + + + + - - - - + - + - + - + - + - + - + - + - + + + + diff --git a/docs/src/lib/components/svg/powered-by-blocknative.svg b/docs/src/lib/components/svg/powered-by-blocknative.svg deleted file mode 100644 index a777adfd7..000000000 --- a/docs/src/lib/components/svg/powered-by-blocknative.svg +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs/src/lib/components/svg/powered-by-thirdweb.svg b/docs/src/lib/components/svg/powered-by-thirdweb.svg new file mode 100644 index 000000000..eaa945efd --- /dev/null +++ b/docs/src/lib/components/svg/powered-by-thirdweb.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/src/lib/services/onboard.js b/docs/src/lib/services/onboard.js index 7495bb236..a7b0fd163 100644 --- a/docs/src/lib/services/onboard.js +++ b/docs/src/lib/services/onboard.js @@ -1,7 +1,7 @@ -import blocknativeIcon from '../components/icons/blocknative-icon' +import thirdwebIcon from '../components/icons/thirdweb-icon' let onboard -const getOnboard = async (passedTheme) => { +const getOnboard = async passedTheme => { const key = 'svelteness::color-scheme' const scheme = localStorage[key] let theme = passedTheme || scheme @@ -10,8 +10,8 @@ const getOnboard = async (passedTheme) => { return onboard } -const classMutationsCheck = (mutationsList) => { - mutationsList.forEach((mutation) => { +const classMutationsCheck = mutationsList => { + mutationsList.forEach(mutation => { if (onboard && mutation.attributeName === 'class') { if (mutation.target.className.includes('dark')) { onboard.state.actions.updateTheme('dark') @@ -28,7 +28,7 @@ const classMutationListener = () => { mutationObserver.observe(document.querySelector('html'), { attributes: true }) } -const intiOnboard = async (theme) => { +const intiOnboard = async theme => { const { default: Onboard } = await import('@web3-onboard/core') const { default: injectedModule } = await import('@web3-onboard/injected-wallets') const { default: trezorModule } = await import('@web3-onboard/trezor') @@ -51,30 +51,36 @@ const intiOnboard = async (theme) => { const { default: torusModule } = await import('@web3-onboard/torus') const { default: uauthModule } = await import('@web3-onboard/uauth') const { default: trustModule } = await import('@web3-onboard/trust') + const { default: okxModule } = await import('@web3-onboard/okx') const { default: xdefiModule } = await import('@web3-onboard/xdefi') const { default: cedeModule } = await import('@web3-onboard/cede-store') const { default: frameModule } = await import('@web3-onboard/frame') - const { default: arcanaModule } = await import('@web3-onboard/arcana-auth') + // const { default: arcanaModule } = await import('@web3-onboard/arcana-auth') const { default: bloctoModule } = await import('@web3-onboard/blocto') const { default: venlyModule } = await import('@web3-onboard/venly') const { default: bitgetModule } = await import('@web3-onboard/bitget') + const { default: finoaConnectModule } = await import('@web3-onboard/finoaconnect') + const { default: paraModule, Environment } = await import('@web3-onboard/para') + const { default: particleAuthModule } = await import('@web3-onboard/particle-network') const INFURA_ID = '8b60d52405694345a99bcb82e722e0af' const injected = injectedModule() const infinityWallet = infinityWalletModule() - const arcanaWallet = arcanaModule({ - clientID: 'xar_test_c9c3bc702eb13255c58dab0e74cfa859711c13cb' - }) + // const arcanaWallet = arcanaModule({ + // clientID: 'xar_test_c9c3bc702eb13255c58dab0e74cfa859711c13cb' + // }) const coinbase = coinbaseModule() - const metamask = metamaskModule({options: { - dappMetadata: { - name: 'Web3Onboard', + const metamask = metamaskModule({ + options: { + dappMetadata: { + name: 'Web3Onboard' + } } - }}) + }) const dcent = dcentModule() const walletConnect = walletConnectModule({ projectId: 'f6bd6e2911b56f5ac3bc8b2d0e2d7ad5', - dappUrl: 'https://onboard.blocknative.com/' + dappUrl: 'https://web3onboard.thirdweb.com/' }) const ledger = ledgerModule({ walletConnectVersion: 2, @@ -89,6 +95,7 @@ const intiOnboard = async (theme) => { const taho = tahoModule() const torus = torusModule() const trust = trustModule() + const okx = okxModule() const xdefi = xdefiModule() const cede = cedeModule() const bitget = bitgetModule() @@ -107,9 +114,12 @@ const intiOnboard = async (theme) => { } const trezor = trezorModule(trezorOptions) + const finoaConnectOptions = {} + const finoaconnect = finoaConnectModule(finoaConnectOptions) + const uauthOptions = { - clientID: 'a25c3a65-a1f2-46cc-a515-a46fe7acb78c', - redirectUri: 'http://localhost:8080/', + clientID: "a7371c4a-a61e-4fac-af48-4471c2e69e93", + redirectUri: "https://web3onboard.thirdweb.com", scope: 'openid wallet email:optional humanity_check:optional profile:optional social:optional', walletConnectProjectId: 'f6bd6e2911b56f5ac3bc8b2d0e2d7ad5' } @@ -127,23 +137,35 @@ const intiOnboard = async (theme) => { environment: 'staging' }) + const para = paraModule({ + environment: Environment.DEVELOPMENT, + apiKey: '992bbd9146d5de8ad0419f141d9a7ca7' + }) + + const particle = particleAuthModule({ + projectId: 'b385ccf0-73c3-485a-9941-159b7855b806', + clientKey: 'cSTLqhvONB5j588Wz6E5WJLMPrHeUlGbymf1DFhO', + appId: 'b1f0239a-edb0-41f9-b0f5-ab780bb02a9e' + }) + return Onboard({ connect: { autoConnectAllPreviousWallet: true }, wallets: [ metamask, + coinbase, injected, walletConnect, - coinbase, ledger, trezor, trust, + okx, gnosis, taho, bitget, xdefi, uauth, cede, - arcanaWallet, + // arcanaWallet, torus, sequence, dcent, @@ -156,8 +178,11 @@ const intiOnboard = async (theme) => { portis, frame, infinityWallet, - blocto - // venly + blocto, + particle, + venly, + finoaconnect, + para ], chains: [ { @@ -175,12 +200,6 @@ const intiOnboard = async (theme) => { } ] }, - { - id: '0x5', - token: 'ETH', - label: 'Goerli', - rpcUrl: `https://goerli.infura.io/v3/${INFURA_ID}` - }, { id: 11155111, token: 'ETH', @@ -226,19 +245,31 @@ const intiOnboard = async (theme) => { { id: '0xA', token: 'OETH', - label: 'Optimism', + label: 'OP Mainnet', rpcUrl: 'https://mainnet.optimism.io' + }, + { + id: 666666666, + token: 'DEGEN', + label: 'Degen', + rpcUrl: 'https://rpc.degen.tips' + }, + { + id: 2192, + token: 'SNAXETH', + label: 'SNAX Chain', + rpcUrl: 'https://mainnet.snaxchain.io' } ], appMetadata: { name: 'Web3 Onboard Documentation', - icon: blocknativeIcon, + icon: thirdwebIcon, description: 'Example showcasing how to connect a wallet.', recommendedInjectedWallets: [ { name: 'MetaMask', url: 'https://metamask.io' }, { name: 'Coinbase', url: 'https://wallet.coinbase.com/' } ], - explore: 'https://onboard.blocknative.com/' + explore: 'https://web3onboard.thirdweb.com/' }, accountCenter: { desktop: { enabled: true }, mobile: { enabled: true } }, theme: theme || 'system', diff --git a/docs/src/routes/+layout.svelte b/docs/src/routes/+layout.svelte index 950150093..ed5b5dbb0 100644 --- a/docs/src/routes/+layout.svelte +++ b/docs/src/routes/+layout.svelte @@ -28,7 +28,6 @@ { title: 'Documentation', slug: '/docs', match: /\/docs/ }, { title: 'Examples', slug: '/examples', match: /\/examples/ }, { title: 'FAQ', slug: '/faq', match: /\/faq/ }, - { title: 'Blog', slug: 'https://www.blocknative.com/blog/tag/web3-onboard' } ] } @@ -37,7 +36,7 @@ const title = 'Web3-Onboard | Framework-agnostic Web3 Connect Wallet Button' const metadescription = 'Open-source, framework-agnostic JavaScript library to onboard users to web3 apps. Help your users transact with ease by enabling wallet connection, real-time transaction states, and more.' - const url = 'https://onboard.blocknative.com/' + const url = 'https://web3onboard.thirdweb.com/' @@ -71,8 +70,6 @@
-
diff --git a/docs/src/routes/+page.md b/docs/src/routes/+page.md index 8ecc94d75..f96f23264 100644 --- a/docs/src/routes/+page.md +++ b/docs/src/routes/+page.md @@ -13,14 +13,14 @@ ```sh copy -npm i @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-preview +npm i @web3-onboard/core @web3-onboard/injected-wallets @web3-onboard/transaction-preview ``` ```sh copy -yarn add @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-preview +yarn add @web3-onboard/core @web3-onboard/injected-wallets @web3-onboard/transaction-preview ``` @@ -32,14 +32,14 @@ yarn add @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-pre ```sh copy -npm i @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-preview +npm i @web3-onboard/core @web3-onboard/injected-wallets @web3-onboard/transaction-preview ``` ```sh copy -yarn add @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-preview +yarn add @web3-onboard/core @web3-onboard/injected-wallets @web3-onboard/transaction-preview ``` @@ -48,14 +48,14 @@ yarn add @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-pre ```sh copy -npm i @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-preview +npm i @web3-onboard/core @web3-onboard/injected-wallets @web3-onboard/transaction-preview ``` ```sh copy -yarn add @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-preview +yarn add @web3-onboard/core @web3-onboard/injected-wallets @web3-onboard/transaction-preview ``` @@ -90,7 +90,7 @@ yarn add @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-pre ## Installation -Install the core Onboard library and the injected wallets module to support browser extension and mobile wallets: +Install the core Web3 Onboard library and the injected wallets module to support browser extension and mobile wallets: ```bash copy npm i @web3-onboard/core @web3-onboard/injected-wallets diff --git a/docs/src/routes/docs/[...1]overview/[...1]introduction/+page.md b/docs/src/routes/docs/[...1]overview/[...1]introduction/+page.md index 91b7302c5..fd497afc7 100644 --- a/docs/src/routes/docs/[...1]overview/[...1]introduction/+page.md +++ b/docs/src/routes/docs/[...1]overview/[...1]introduction/+page.md @@ -12,7 +12,7 @@ The best way to connect a wallet 🚀 Web3-Onboard connect wallet modal -Web3-Onboard is the quickest and easiest way to add multi-wallet and multi-chain support to your project. With built-in modules for more than 35 unique hardware and software wallets, Web3-Onboard saves you time and headaches. +Web3 Onboard is the quickest and easiest way to add multi-wallet and multi-chain support to your project. With built-in modules for more than 80 unique hardware and software wallets, Web3 Onboard saves you time and headaches. ## Features @@ -24,51 +24,39 @@ Web3-Onboard is the quickest and easiest way to add multi-wallet and multi-chain - **Themable:** Powerful customization options for all your needs. Style Web3 Onboard to fit into your existing designs, or pick from our pre-made themes. -- **Unified Provider Interface:** All wallet modules expose a provider that is patched to be compliant with the EIP-1193, EIP-1102, EIP-3085 and EIP-3326 specifications. Whether your user is using Ledger or Metamask the provider will operate identically. +- **Unified Provider Interface:** All wallet modules expose a provider that is patched to be compliant with the EIP-1193, EIP-1102, EIP-3085, EIP-3326, and EIP-6963 specifications. Whether your user is using Ledger or Metamask, the provider will operate identically. -- **Dynamic Imports:** Supporting multiple wallets in your app requires a lot of dependencies. Onboard dynamically imports a wallet and its dependencies only when the user selects it, so that minimal bandwidth is used. +- **Dynamic Imports:** Supporting multiple wallets in your app requires a lot of dependencies. Web3 Onboard dynamically imports a wallet and its dependencies only when the user selects it, so that minimal bandwidth is used. -- **Framework Agnostic:** Avoid framework lock in -- Web3-Onboard works with any framework and includes helper packages for vue & react. +- **Framework Agnostic:** Avoid framework lock in -- Web3 Onboard works with any framework and includes helper packages for vue & react. -- **Notify:** Real-time transaction notifications for all transaction states for the connected wallet address(es). In-notification speedups & cancels for hardware wallet connections. +### Natively Supported EVM Chains -### Supported Networks - -web3-onboard supports all EVM networks. Supporting a new network is simply a matter of adding its details in the Chains section upon initialization. For more information see [initialization options](../../modules/core.md#initialization). +Web3 Onboard supports all EVM networks. Supporting a new network is simply a matter of adding its details in the Chains section upon initialization. For more information see [initialization options](../../modules/core.md#initialization). - Ethereum - Arbitrum One - Arbitrum Nova - Base - Polygon -- Optimism +- OP Mainnet - Avalanche - BNB Chain - Celo +- Degen +- SNAX - Fantom - Gnosis Chain - Harmony One - Moonriver -- Goerli - Sepolia - Base Goerli +- Degen - All other EVM networks -### Optional - Use an API key to fetch real time transaction data, balances & gas - -Using a Blocknative API key with web3-onboard on the free plan will allow you to gain the benefits of Blocknative balance & transaction services. Blocknative has a free forever plan you can always use. - -This step is not required to use web3-onboard. You can skip to the [**Quickstart**](/docs/overview/introduction#quickstart) step below if you want to use web3-onboard without API services or if you already have a Blocknative account & API key. - -**Setup your Account** -Go to the Account Dashboard at [https://explorer.blocknative.com/account](https://explorer.blocknative.com/account) and setup an account with an email address. You will receive an email to confirm your account. - -**Create your API Key** -On the Account Dashboard at [https://explorer.blocknative.com/account](https://explorer.blocknative.com/account), create an API key with your choice of name or use/rename the Default Key. Consider using different API keys for development, staging, and production releases. - ## Quickstart -Install the core Onboard library, the injected wallets module and optionally ethers.js to support browser extension and mobile wallets: +Install the core web3-onboard library, the injected wallets module, and optionally ethers.js to support browser extension and mobile wallets: @@ -87,7 +75,7 @@ npm i @web3-onboard/core @web3-onboard/injected-wallets ethers -You can find a link to web3-onboard's official NPM Documentation here: [@web3-onboard/core Official NPM Documentation](https://www.npmjs.com/package/@web3-onboard/core) +You can find a link to Web3 Onboard's official NPM Documentation here: [@web3-onboard/core Official NPM Documentation](https://www.npmjs.com/package/@web3-onboard/core) Then initialize in your app: @@ -101,6 +89,7 @@ const MAINNET_RPC_URL = 'https://mainnet.infura.io/v3/' const injected = injectedModule() const onboard = Onboard({ + // This javascript object is unordered meaning props do not require a certain order wallets: [injected], chains: [ { @@ -126,6 +115,24 @@ const onboard = Onboard({ token: 'ETH', label: 'Base', rpcUrl: 'https://mainnet.base.org' + }, + { + id: '0xa4ec', + token: 'ETH', + label: 'Celo', + rpcUrl: 'https://1rpc.io/celo' + }, + { + id: 666666666, + token: 'DEGEN', + label: 'Degen', + rpcUrl: 'https://rpc.degen.tips' + }, + { + id: 2192, + token: 'SNAXETH', + label: 'SNAX Chain', + rpcUrl: 'https://mainnet.snaxchain.io' } ] }) @@ -159,9 +166,9 @@ if (wallets[0]) { ## Wallet Modules -Add other wallet modules such as Wallet Connect or Ledger to increase the support and functionality of your web3-onboard implementation. All modules can be accessed through the subpages of web3-onboard docs on the left. +Add other wallet modules such as Wallet Connect or Ledger to increase the support and functionality of your Web3 Onboard implementation. All modules can be accessed through the subpages of Web3 Onboard docs on the left. -We recommend you add the [Core Repo](../../modules/core.md#install) and consider adding the [Injected Wallets](../../wallets/injected.md#install) module to get connected with wallets like Metamask, Trust, Coinbase Wallet & more right away. +We recommend you add the [Core Repo](../../modules/core.md#install) and consider adding the [Injected Wallets](../../wallets/injected.md#install) module to get connected with wallets like Metamask, Trust, Coinbase Wallet, and more right away. [**Core Repo**](../../modules/core.md#install) @@ -171,6 +178,7 @@ We recommend you add the [Core Repo](../../modules/core.md#install) and consider - [Arcana Auth](../../wallets/arcana.md#install) - [Blocto](../../wallets/blocto.md#install) +- [Para](../../wallets/para.md#install) - [Coinbase](../../wallets/coinbase.md#install) - [Fortmatic](../../wallets/fortmatic.md#install) - [Frame](../../wallets/frame.md#install) @@ -178,6 +186,7 @@ We recommend you add the [Core Repo](../../modules/core.md#install) and consider - [Magic](../../wallets/magic.md#login-options) - [MetaMask](../../wallets/metamask.md#install) - [MEW](../../wallets/mewwallet.md#install) +- [OKX](../../wallets/okx.md#install) - [Portis](../../wallets/portis.md#install) - [Web3Auth](../../wallets/web3auth.md#install) - [WalletConnect](../../wallets/walletconnect.md#install) @@ -198,7 +207,7 @@ We recommend you add the [Core Repo](../../modules/core.md#install) and consider ## Test out the demo app -Test out the current functionality of web3-onboard in a small browser demo: +Test out the current functionality of Web3 Onboard in a small browser demo: - Clone the repo: `git clone git@github.com:blocknative/web3-onboard.git` - Change it to the onboard directory: `cd web3-onboard` @@ -211,10 +220,10 @@ Test out the current functionality of web3-onboard in a small browser demo: Checkout our live demo using React at [https://reactdemo.blocknative.com/](https://reactdemo.blocknative.com/) -The demo is open source so you can see a sample implementation of web3-onboard: [https://github.com/blocknative/react-demo](https://github.com/blocknative/react-demo) +The demo is open source so you can see a sample implementation of Web3 Onboard: [https://github.com/blocknative/react-demo](https://github.com/blocknative/react-demo) ## More Examples -You can find starter examples from the web3 community here using web3-onboard: +You can find starter examples from the web3 community here using Web3 Onboard: - [eth-scaffold](https://github.com/scaffold-eth/scaffold-eth-examples/tree/bnc-onboard) diff --git a/docs/src/routes/docs/[...1]overview/[...2]contribution-guide/+page.md b/docs/src/routes/docs/[...1]overview/[...2]contribution-guide/+page.md index c2988ccff..fa09901a3 100644 --- a/docs/src/routes/docs/[...1]overview/[...2]contribution-guide/+page.md +++ b/docs/src/routes/docs/[...1]overview/[...2]contribution-guide/+page.md @@ -41,7 +41,7 @@ Example 2 : Bug fix within the `core` package - ## How can I add a new wallet? 💳 -To add a new wallet to the official Web3 Onboard packages and repo, create a [pull request](#pull-requests-🗂️). Web3 Onboard does not require a wallet to be a part of the main code, so a separate wallet module can be created without any changes to the Web3Onboard codebase. Your PR must include a detailed README for the package, keeping in mind that this README is the the first point of contact for dapp devs looking to implement your wallet. +To add a new wallet to the official Web3 Onboard packages and repo, create a [pull request](#pull-requests-🗂️). Web3 Onboard does not require a wallet to be a part of the main code, so a separate wallet module can be created without any changes to the Web3 Onboard codebase. Your PR must include a detailed README for the package, keeping in mind that this README is the the first point of contact for dapp developers looking to implement your wallet. Please also include updates to documentation in your PR. Refer to the [docs contributions section](#documentation-contributions-📄) and the PR template docs checklist. @@ -69,7 +69,7 @@ PRs for adding/updating a wallet should include a README (new or updated) for th [See here for an example of a docs pull request.](https://github.com/blocknative/web3-onboard/pull/1544/files) -We highly encourage the community to help us improve the web3-onboard docs! If you have any questions don't hesitate to reach out. +We highly encourage the community to help us improve the Web3 Onboard docs! If you have any questions don't hesitate to [reach out](https://discord.com/invite/KZaBVME). ## Feedback 💬 diff --git a/docs/src/routes/docs/[...1]overview/[...3]onboard.js-migration-guide/+page.md b/docs/src/routes/docs/[...1]overview/[...3]onboard.js-migration-guide/+page.md index 7c914e84e..c485b5553 100644 --- a/docs/src/routes/docs/[...1]overview/[...3]onboard.js-migration-guide/+page.md +++ b/docs/src/routes/docs/[...1]overview/[...3]onboard.js-migration-guide/+page.md @@ -4,11 +4,11 @@ title: 'Migration Guide from v1' # Migration Guide from onboard.js to web3-onboard -Follow the steps below to easily migrate from onboard.js to Web3-Onboard. +Follow the steps below to easily migrate from onboard.js to Web3 Onboard. ### Background -With Web3-Onboard, we’ve introduced significant architectural changes that provide a more robust and efficient web3 onboarding experience. While this upgrade may result in breaking changes, the improved overall experience makes it worthwhile. +With Web3 Onboard, we’ve introduced significant architectural changes that provide a more robust and efficient web3 onboarding experience. While this upgrade may result in breaking changes, the improved overall experience makes it worthwhile. ### Steps @@ -23,15 +23,15 @@ To help you get started quickly we’ve put together [a set of examples across m ### Package Upgrade - Modularization -This is the biggest change you might experience as an onboard.js user. With Web3-Onboard, we’ve separated all supported wallets into their modules, meaning you only need to integrate specific wallet modules you intend to support in your app. +This is the biggest change you might experience as an onboard.js user. With Web3 Onboard, we’ve separated all supported wallets into their modules, meaning you only need to integrate specific wallet modules you intend to support in your app. For example with Onboard, if you wanted to support only Metamask and Coinbase in your app, you had to install Onboard complete with all other wallets: `npm install bnc-onboard`. -With Web3-Onboard, you only need to install core along with the desired wallet modules: `npm i @web3-onboard/core @web3-onboard/injected-wallets @web3-onboard/coinbase` +With Web3 Onboard, you only need to install core along with the desired wallet modules: `npm i @web3-onboard/core @web3-onboard/injected-wallets @web3-onboard/coinbase` This change allows us to support many web3 wallets without affecting the overall library performance. ### Expansive Initialization Options -We’ve made initialization simpler while introducing more powerful options like [Account Center](https://www.blocknative.com/blog/multichain-and-multiwallet-account-management-on-your-dapp-with-account-center) and Notify in Web3-Onboard. -Onboard now requires two compulsory initial setup options: `wallets` (Wallet modules, as shown above, to be initialized and added to wallet selection modal) and `chains` (EVM networks your app should work with). You can also pass multiple wallets and chains. +We’ve made initialization simpler while introducing more powerful options like [Account Center](https://www.blocknative.com/blog/multichain-and-multiwallet-account-management-on-your-dapp-with-account-center) in Web3 Onboard. +Web3 Onboard now requires two compulsory initial setup options: `wallets` (Wallet modules, as shown above, to be initialized and added to wallet selection modal) and `chains` (EVM networks your app should work with). You can also pass multiple wallets and chains. ``` const onboard = Onboard({ @@ -56,19 +56,19 @@ Now, you only need to call the connectWallet API: `await onboard.connectWallet()` -Learn more about state changes tracked with the Onboard API [here](/docs/modules/core#state) and the exposed actions you can use to modify the state [here](/docs/modules/core#actions-to-modify-state). +Learn more about state changes tracked with the Web3 Onboard API [here](/docs/modules/core#state) and the exposed actions you can use to modify the state [here](/docs/modules/core#actions-to-modify-state). ### Framework Support -Although Onboard is still framework-agnostic, we’ve introduced a couple of framework-specific modules that are frequently asked for by our users. +Although Web3 Onboard is still framework-agnostic, we’ve introduced a couple of framework-specific modules that are frequently asked for by our users. -`@web3-onboard/react` - React Hooks to connect users to web3 dApps better. You can check out [a comprehensive React Hooks guide](https://www.blocknative.com/blog/react-hooks-ethereum) we've written on it. +`@web3-onboard/react` - React Hooks to connect users to web3 dapps better. You can check out [a comprehensive React Hooks guide](https://www.blocknative.com/blog/react-hooks-ethereum) we've written on it. -`@web3-onboard/vue` - A set of reusable functions for integrating Web3-Onboard into a Vue 3 project. This is also compatible with a Vue 2 + composition-api dApp. +`@web3-onboard/vue` - A set of reusable functions for integrating Web3 Onboard into a Vue 3 project. This is also compatible with a Vue 2 + composition-api dApp. ### CSS Customizations -We've also added more expansive custom CSS properties so you can style every part of your onboarding experience to match the overall experience of your dApp. To apply Web3-Onboard CSS customizations, you don't need to attach them to the `.bn-onboard-custom` class like before. Instead, you can simply place them in the `:root` CSS pseudo-class, as shown below: +We've also added more expansive custom CSS properties so you can style every part of your onboarding experience to match the overall experience of your dApp. To apply Web3 Onboard CSS customizations, you don't need to attach them to the `.bn-onboard-custom` class like before. Instead, you can simply place them in the `:root` CSS pseudo-class, as shown below: ``` :root { @@ -90,11 +90,11 @@ We've also added more expansive custom CSS properties so you can style every par } ``` -The full list of CSS variables for web3-onboard is available [here](/docs/modules/core#custom-styling). +The full list of CSS variables for Web3 Onboard is available [here](/docs/modules/core#custom-styling). ### Other Important Changes -There are also other notable infrastructural changes in Web3-Onboard: +There are also other notable infrastructural changes in Web3 Onboard: - Dynamic Imports of dependencies - Wallet Provider Standardization diff --git a/docs/src/routes/docs/[...2]getting-started/[...1]installation/+page.md b/docs/src/routes/docs/[...2]getting-started/[...1]installation/+page.md index b409ecd2f..851183733 100644 --- a/docs/src/routes/docs/[...2]getting-started/[...1]installation/+page.md +++ b/docs/src/routes/docs/[...2]getting-started/[...1]installation/+page.md @@ -4,11 +4,11 @@ title: Installation # {$frontmatter.title} -Get up and running with Web3-Onboard +Get up and running with Web3 Onboard ### Install -Install the core Onboard library and the injected wallets module to support browser extension and mobile wallets: +Install the core Web3 Onboard library and the injected wallets module to support browser extension and mobile wallets: @@ -110,6 +110,7 @@ const appMetadata = { ```ts const onboard = Onboard({ + // This javascript object is unordered meaning props do not require a certain order wallets, chains, appMetadata diff --git a/docs/src/routes/docs/[...2]getting-started/[...2]theming/+page.md b/docs/src/routes/docs/[...2]getting-started/[...2]theming/+page.md index 5ee617f0d..1b5640804 100644 --- a/docs/src/routes/docs/[...2]getting-started/[...2]theming/+page.md +++ b/docs/src/routes/docs/[...2]getting-started/[...2]theming/+page.md @@ -8,7 +8,7 @@ To customize the color theme of web3-onboard and match it with your dapp, you ca ## Available Themes -To set the color theme of web3-onboard to one of the available native themes, import Onboard from `@web3-onboard/core` and pass the theme as a string to the `theme` init option. +To set the color theme of Web3 Onboard to one of the available native themes, import Web3 Onboard from `@web3-onboard/core` and pass the theme as a string to the `theme` init option. | theme | description | | --------- | --------------------------------------------------------------------------------- | @@ -32,7 +32,7 @@ const onboard = Onboard({ ## Variables -In the table below, you'll find a list of css variables that you can use to theme web3-onboard. +In the table below, you'll find a list of css variables that you can use to theme Web3 Onboard. | variable | description | | ---------------------- | ----------------- | @@ -47,7 +47,7 @@ In the table below, you'll find a list of css variables that you can use to them ## Custom Theme -To create a custom theme, you can define a `ThemingMap` object with CSS variables for different components of web3-onboard. Pass this object as the theme option. +To create a custom theme, you can define a `ThemingMap` object with CSS variables for different components of Web3 Onboard. Pass this object as the theme option. ```typescript copy import Onboard, { ThemingMap } from '@web3-onboard/core' @@ -71,7 +71,7 @@ const onboard = Onboard({ ## Dynamically Update Theme with API -**`updateTheme`** is an exposed API method for actively updating the theme of web3-onboard. The function accepts `Theme` types (see below). +**`updateTheme`** is an exposed API method for actively updating the theme of Web3 Onboard. The function accepts `Theme` types (see below). _If using the `@web3-onboard/react` package there is a hook exposed called `updateTheme`_ The function also accepts a custom built `ThemingMap` object that contains all or some of the theming variables @@ -122,7 +122,7 @@ export type ThemingMap = { ## Theming Tool -You can preview how web3-onboard will look on your site by using our [theming tool](/theming-tool) to customize the look and feel of web3-onboard. You can try different themes or create your own and preview the result by entering a URL or adding a screenshot. +You can preview how Web3 Onboard will look on your site by using our [theming tool](/theming-tool) to customize the look and feel of Web3 Onboard. You can try different themes or create your own and preview the result by entering a URL or adding a screenshot. To do this: diff --git a/docs/src/routes/docs/[...2]getting-started/[...3]custom-styling/+page.md b/docs/src/routes/docs/[...2]getting-started/[...3]custom-styling/+page.md index 91a074815..380d115e4 100644 --- a/docs/src/routes/docs/[...2]getting-started/[...3]custom-styling/+page.md +++ b/docs/src/routes/docs/[...2]getting-started/[...3]custom-styling/+page.md @@ -4,17 +4,17 @@ title: Custom Styling # {$frontmatter.title} -You can customize web3-onboard to match the look and feel of your dapp. web3-onboard exposes css variables for each of its UI components. +You can customize Web3 Onboard to match the look and feel of your dapp. Web3 Onboard exposes css variables for each of its UI components. -Interested in seeing how web3-onboard will look on your site? +Interested in seeing how Web3 Onboard will look on your site? [Try out our theming tool](/theming-tool) -It will allow you to customize the look and feel of web3-onboard, try different themes or create your own, and preview how web3-onboard will look on your site by entering a URL or adding a screenshot. +It will allow you to customize the look and feel of Web3 Onboard, try different themes or create your own, and preview how Web3 Onboard will look on your site by entering a URL or adding a screenshot. ## CSS custom properties (variables) -The Onboard styles can customized via [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). The following properties and their default properties can be customized by adding these variables to the `:root` in your CSS file: +The Web3 Onboard styles can be customized via [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). The following properties and their default properties can be customized by adding these variables to the `:root` in your CSS file: ```css :root { diff --git a/docs/src/routes/docs/[...3]modules/[...1]core/+page.md b/docs/src/routes/docs/[...3]modules/[...1]core/+page.md index 6bb769ac4..4867a2d7d 100644 --- a/docs/src/routes/docs/[...3]modules/[...1]core/+page.md +++ b/docs/src/routes/docs/[...3]modules/[...1]core/+page.md @@ -15,7 +15,7 @@ title: Core # {$frontmatter.title} -This is the core package that contains all of the UI and logic to be able to seamlessly connect user's wallets to your app and track the state of those wallets. Onboard no longer contains any wallet specific code, so wallets need to be passed in upon initialization. +This is the core package that contains all of the UI and logic to be able to seamlessly connect user's wallets to your app and track the state of those wallets. Web3 Onboard no longer contains any wallet specific code, so wallets need to be passed in upon initialization. :::admonition type="tip" _note: Release 2.24.0 moves the default position of the account center from topRight to bottomRight. To reset your application to topRight, include the following when initializing onboard:_ @@ -101,16 +101,19 @@ Checkout our full library of quick start examples for connecting and interacting ## Initialization -Onboard needs to be initialized with an options object before the API can be used: +Web3 Onboard needs to be initialized with an options object before the API can be used: ```ts type InitOptions { wallets: WalletInit[] chains: Chain[] appMetadata?: AppMetadata + /** Web3-Onboard module to add Wagmi support + * see https://www.npmjs.com/package/@web3-onboard/wagmi + */ + wagmi?: typeof wagmi i18n?: i18nOptions accountCenter?: AccountCenterOptions - apiKey?: string notify?: Partial gas?: typeof gas /** @@ -133,6 +136,11 @@ type InitOptions { * the Theme initialization object or set as css variable */ disableFontDownload?: boolean + /** + * @deprecated apiKey parameter has been deprecated and is no + * longer used within Web3-Onboard to provide notifications + */ + apiKey?: string } ``` @@ -142,6 +150,7 @@ type InitOptions { #### wallets An array of wallet modules that you would like to be presented to the user to select from when connecting a wallet. A wallet module is an abstraction that allows for easy interaction without needing to know the specifics of how that wallet works and are separate packages that can be included. + These modules are separate @web3-onboard packages such as `@web3-onboard/injected-wallets` or `@web3-onboard/ledger`. For a full list click [here](#all-wallet-modules). @@ -243,7 +252,7 @@ onboard.state.actions.updateAppMetadata({ #### connect -An object that allows for customizing the connect modal layout and behavior +An object that allows for customizing the connect modal layout and behavior: Web3-Onboard connect wallet modal @@ -308,9 +317,12 @@ type ConnectModalOptions = { #### i18n An object that defines the display text for different locales. Can also be used to override the default text. To override the default text, pass in an object for the `en` locale. +Currently there is built-in support for: +- English (`en`) - Default +- Simplified Chinese (`zh`) ```typescript -type Locale = string // eg 'en', 'es' +type Locale = string // eg 'en', 'zh', 'es' type i18nOptions = Record ``` @@ -344,9 +356,9 @@ Default Message- with no i18n override: #### theme -A string or an object that defines the color theme web3-onboard will render the components. +A string or an object that defines the color theme. Web3 Onboard will render the components. -Define a custom or predefined theme for Web3Onboard using either: +Define a custom or predefined theme for Web3 Onboard using either: ###### **Native themes available** @@ -378,15 +390,67 @@ type ThemingMap = { ``` :::admonition type=tip -Interested in seeing how web3-onboard will look on your site? +Interested in seeing how Web3 Onboard will look on your site? [Try out our theming tool](/theming-tool) or our in depth theming walkthrough [here](/docs/getting-started/theming) -It will allow you to customize the look and feel of web3-onboard, try different themes or create your own, and preview how web3-onboard will look on your site by entering a URL or adding a screenshot. +It will allow you to customize the look and feel of Web3 Onboard, try different themes or create your own, and preview how Web3 Onboard will look on your site by entering a URL or adding a screenshot. ::: --- +#### wagmi + +To add [WAGMI API](https://wagmi.sh/core/getting-started) support to your project you can simply install `web3-onboard/wagmi` import and pass in the [wagmi package](/docs/modules/wagmi) export directly into your onboard configuration. After doing so you can use all of the native WAGMI API functions directly from `@web3-onboard/wagmi`. This will give access to all WAGMI function available on or before `@wagmi/core` version `2.10.4`. +After initialization an up-to-date WAGMI config will will be available from the onboard state object `onboard.state.get().wagmiConfig` which will need to be passed as the first prop of most [@wagmi/core](https://wagmi.sh/core/getting-started) methods. Wallets will also have a [wagmiConnector](#state) prop within the onboard state object which will allow you to target specific wallets for interactions. This can also be bi-passed if the primary or most recently connected wallet is the wallet meant for the transactions. +The config and connectors can be used with the WAGMI API returned from this module or an external WAGMI instance. + +Full documentation for the `@web3-onboard/wagmi` module can be found [here](/docs/modules/wagmi). + +```typescript +import Onboard from '@web3-onboard/core' +import wagmi from '@web3-onboard/wagmi' +import { + sendTransaction as wagmiSendTransaction, + switchChain, + disconnect, + getConnectors +} from '@web3-onboard/wagmi' + +const injected = injectedModule() + +const onboard = Onboard({ + // This javascript object is unordered meaning props do not require a certain order + wagmi, + wallets: [injected], + chains: [ + { + id: '0x1', + token: 'ETH', + label: 'Ethereum', + rpcUrl: 'https://mainnet.infura.io/v3/17c1e1500e384acfb6a72c5d2e67742e' + } + ] + // ... other Onboard options +}) + +const sendTransaction = async () => { + // current primary wallet - as multiple wallets can connect this value is the currently active + const [activeWallet] = onboard.state.get().wallets + const { wagmiConnector } = activeWallet + const wagmiConfig = onboard.state.get().wagmiConfig + const result = await wagmiSendTransaction(wagmiConfig, { + to: toAddress, + // desired connector to send txn from + connector: wagmiConnector, + value: parseEther('0.001') + }) + console.log(result) +} +``` + +--- + #### disableFontDownload If set to `true` the default `Inter` font will not be imported and instead the web based `sans-serif` font will be used if a font is not defined through the `Theme` or exposed css variable. @@ -450,7 +514,7 @@ type AccountCenterPosition = 'topRight' | 'bottomRight' | 'bottomLeft' | 'topLef #### containerElements -An object mapping for W3O components with the key being the DOM element to mount the specified component to. +An object mapping for Web3 Onboard components with the key being the DOM element to mount the specified component to. This defines the DOM container element for svelte to attach the component. **NOTE**: containerElement must be a DOM element with a styleSheet property attached and the element must be available on the DOM at the time of component mounting. @@ -477,23 +541,18 @@ type ContainerElements = { #### notify -Notify is a feature that provides transaction notifications for all connected wallets on the current blockchain. This document will provide you with an overview of Notify and guide you through the process of integrating it into your decentralized application (DApp). +Notify is a feature that provides DApps with the ability to send custom messages to the client. This document will provide you with an overview of Notify and guide you through the process of integrating it into your decentralized application (dapp). Check out the [customNotifications API docs for examples and code snippets](#customnotification). Transaction notifications image -To enable transaction notifications and updates simply add your Blocknative `apiKey`([sign up for free](https://explorer.blocknative.com/account)) to the web3-onboard configurations as the value to the `apiKey` prop and thats it! -Transaction notifications will be shown for all transactions occurring on supported chains for all of the users connected wallets. -When switching chains, the previous chain listeners remain active for 60 seconds to allow the capture and report of any remaining transactions that may be in flight. - Notifications are by default positioned in the same location as the Account Center (if enabled) or can be positioned separately using the `position` property. ##### **Notify Configuration** -| Property | Type | Description | -| -------------------- | --------------- | ------------------------------------------------------------- | -| `enabled` | boolean | Indicates whether transaction notifications will be displayed | -| `transactionHandler` | function | Optional callback for customizations of notifications | -| `position` | CommonPositions | Position of the notification on the screen | +| Property | Type | Description | +| ---------- | --------------- | ------------------------------------------------------------- | +| `enabled` | boolean | Indicates whether transaction notifications will be displayed | +| `position` | CommonPositions | Position of the notification on the screen | ##### **Position Options** @@ -504,10 +563,6 @@ Notifications are by default positioned in the same location as the Account Cent Both `desktop` and `mobile` configurations are of type `Notify`. -###### **Transaction Handler** - -The `transactionHandler` is a callback that receives an object of type `EthereumTransactionData`. Based on the data received, the handler can return a custom `Notification` object or a boolean value (false to disable the notification for the current event or undefined for a default notification). - ##### **Customizing Notification** | Property | Type | Description | @@ -521,25 +576,7 @@ The `transactionHandler` is a callback that receives an object of type `Ethereum ##### **Styling Notify** -Notify automatically will match the [`theme`](#theme) defined in the web3-onboard config. It can also be styled using the [exposed css variables provided below](#custom-styling). These variables allow for maximum customization with base styling variables setting the global theme (e.g., `--onboard-grey-600`) and more precise component-level styling variables available (`--notify-onboard-grey-600`). The latter takes precedence if defined. - -##### **Handling Notifications** - -If notifications are enabled, they can be fielded and handled through the onboard app state as seen in the example below - although this is not required for notifications to display: - -```javascript -const wallets = onboard.state.select('notifications') -const { unsubscribe } = wallets.subscribe((update) => - console.log('transaction notifications: ', update) -) - -// unsubscribe when updates are no longer needed -unsubscribe() -``` - -##### **Notifications as Toast Messages** - -The Notifications messages can also be used to send fully customized Dapp toast messages and updated. Check out the [customNotifications API docs for examples and code snippets](#customnotification) +Notify automatically will match the [`theme`](#theme) defined in the web3-onboard configuration. It can also be styled using the [exposed css variables provided below](#custom-styling). These variables allow for maximum customization with base styling variables setting the global theme (e.g., `--onboard-grey-600`) and more precise component-level styling variables available (`--notify-onboard-grey-600`). The latter takes precedence if defined. ```ts type NotifyOptions = { @@ -597,7 +634,7 @@ type Notification = { type NotificationType = 'pending' | 'success' | 'error' | 'hint' -export declare type Network = 'main' | 'goerli' | 'matic-main' | 'matic-mumbai' | 'local' +export declare type Network = 'main' | 'sepolia' | 'matic-main' | 'matic-mumbai' | 'local' export interface UpdateNotification { (notificationObject: CustomNotification): { @@ -620,8 +657,8 @@ import injectedModule from '@web3-onboard/injected-wallets' const injected = injectedModule() const onboard = Onboard({ + // This javascript object is unordered meaning props do not require a certain order // head to https://explorer.blocknative.com/account to sign up for free - apiKey: 'xxx387fb-bxx1-4xxc-a0x3-9d37e426xxxx' wallets: [injected], chains: [ { @@ -630,12 +667,6 @@ const onboard = Onboard({ label: 'Ethereum Mainnet', rpcUrl: `https://mainnet.infura.io/v3/${INFURA_ID}` }, - { - id: '0x5', - token: 'ETH', - label: 'Goerli', - rpcUrl: `https://goerli.infura.io/v3/${INFURA_ID}` - }, { id: 11155111, token: 'ETH', @@ -669,8 +700,26 @@ const onboard = Onboard({ { id: 10, token: 'OETH', - label: 'Optimism', + label: 'OP Mainnet', rpcUrl: 'https://mainnet.optimism.io' + }, + { + id: '0xa4ec', + token: 'ETH', + label: 'Celo', + rpcUrl: 'https://1rpc.io/celo' + }, + { + id: 666666666, + token: 'DEGEN', + label: 'Degen', + rpcUrl: 'https://rpc.degen.tips' + }, + { + id: 2192, + token: 'SNAXETH', + label: 'SNAX Chain', + rpcUrl: 'https://mainnet.snaxchain.io' } ], appMetadata: { @@ -686,12 +735,12 @@ const onboard = Onboard({ notify: { desktop: { enabled: true, - transactionHandler: transaction => { + transactionHandler: (transaction) => { console.log({ transaction }) if (transaction.eventCode === 'txPool') { return { type: 'success', - message: 'Your transaction from #1 DApp is in the mempool', + message: 'Your transaction from #1 DApp is in the mempool' } } }, @@ -699,12 +748,12 @@ const onboard = Onboard({ }, mobile: { enabled: true, - transactionHandler: transaction => { + transactionHandler: (transaction) => { console.log({ transaction }) if (transaction.eventCode === 'txPool') { return { type: 'success', - message: 'Your transaction from #1 DApp is in the mempool', + message: 'Your transaction from #1 DApp is in the mempool' } } }, @@ -736,7 +785,8 @@ const onboard = Onboard({ }, watched: { // Any words in brackets can be re-ordered or removed to fit your dapps desired verbiage - "txPool": "Your account is {verb} {formattedValue} {asset} {preposition} {counterpartyShortened}" + txPool: + 'Your account is {verb} {formattedValue} {asset} {preposition} {counterpartyShortened}' } } }, @@ -755,6 +805,10 @@ const onboard = Onboard({ To initiate a user to select and connect a wallet you can call the `connectWallet` function on an initialized Onboard instance. It will return a `Promise` that will resolve when the user either successfully connects a wallet, or when they dismiss the UI. The resolved value from the promise will be the latest state of the `wallets` array. The order of the wallets array is last to first, so the most recently selected wallet will be the first item in the array and can be thought of as the "primary wallet". If no wallet was selected, then the `wallets` array will have the same state as it had before calling `connectWallet`. +### Wallet Provider + +Wallets connected through web3-onboard are all passed to the dapp following the EIP-1193 standard. This allows for the same interaction between all wallets connected through web3-onboard and abstracts away the challenges of working with different wallet providers. + ### Example ```javascript @@ -766,10 +820,14 @@ async function connectWallet() { connectWallet() ``` +### Interacting with the providers - Transfer, Send, Sign using ethers.js + +For examples of interacting with the wallet providers please see our demo project [here](https://github.com/blocknative/web3-onboard/blob/9b871a1b3117e92a7c87285677fa5b35c544a8e0/packages/demo/src/App.svelte#L447) + ### Auto Selecting a Wallet A common UX pattern is to remember the last wallet that a user has previously connected by storing it in localStorage and then automatically selecting them for the user next time they visit your app. -You can enable this in your app by using the `autoConnectLastWallet` parameter when initializing and Onboard will take care of it: +You can enable this in your app by using the `autoConnectLastWallet` parameter when initializing and Web3 Onboard will take care of it: ```javascript const onboard = Onboard({ @@ -782,7 +840,7 @@ const onboard = Onboard({ ## Disconnecting a Wallet -A wallet can be disconnected, which will cleanup any background operations the wallet may be doing and will also remove it from the Onboard `wallets` array: +A wallet can be disconnected, which will cleanup any background operations the wallet may be doing and will also remove it from the Web3 Onboard `wallets` array: ```javascript copy // disconnect the first wallet in the wallets array @@ -794,10 +852,10 @@ The `disconnectWallet` method takes the `wallet.label` value and returns a `Prom ## State -Onboard currently keeps track of the following state: +Web3 Onboard currently keeps track of the following states: -- `wallets`: The wallets connected to Onboard -- `chains`: The chains that Onboard has been initialized with +- `wallets`: The wallets connected to Web3 Onboard +- `chains`: The chains that Web3 Onboard has been initialized with - `accountCenter`: The current state of the account center UI - `walletModules`: The wallet modules that are currently set and will be rendered in the wallet selection modal @@ -829,6 +887,13 @@ type WalletState = { accounts: Account[] chains: ConnectedChain[] instance?: unknown + /** + * WAGMI Connector object + * Can be used to leverage all WAGMI functions from + * the @web3-onboard/wagmi module + * See https://www.npmjs.com/package/@web3-onboard/wagmi for more details + */ + wagmiConnector?: Connector } type Account = { @@ -872,7 +937,7 @@ type WalletModule { ### Get Current State -The current state of Onboard can be accessed at any time using the `state.get()` method: +The current state of Web3 Onboard can be accessed at any time using the `state.get()` method: ```javascript copy const currentState = onboard.state.get() @@ -904,13 +969,13 @@ unsubscribe() ### Actions to Modify State -A limited subset of internal actions are exposed to update the Onboard state. +A limited subset of internal actions are exposed to update the Web3 Onboard state. --- #### **setWalletModules** -For updating the wallets that are displayed in the wallet selection modal. This can be used if the wallets you want to support is conditional on another user action within your app. The `setWalletModules` action is called with an updated array of wallets (the same wallets that are passed in on initialization) +For updating the wallets that are displayed in the wallet selection modal. This can be used if the wallets you want to support are conditional on another user action within your app. The `setWalletModules` action is called with an updated array of wallets (the same wallets that are passed in on initialization) ```typescript import Onboard from '@web3-onboard/core' @@ -949,7 +1014,7 @@ onboard.state.actions.setWalletModules([ledger, trezor]) #### **updateTheme** -An exposed method for updating the [theme](#theme) of web3-onboard. The function accepts `Theme` types (see below) +An exposed method for updating the [theme](#theme) of Web3 Onboard. The function accepts `Theme` types (see below) The function also accepts a custom built `ThemingMap` object that contains all or some of the theming variables @@ -1003,7 +1068,7 @@ onboard.state.actions.updateBalances(['0xfdadfadsadsadsadasdsa', '0xfdsafdsfdsfd #### **setLocale** -Onboard will automatically detect the browser locale at runtime, but if you would like to update it manually you can call the `setLocale` function: +Web3 Onboard will automatically detect the browser locale at runtime, but if you would like to update it manually you can call the `setLocale` function: ```javascript onboard.state.actions.setLocal('fr_FR') @@ -1052,7 +1117,7 @@ onboard.state.actions.updateNotify({ Custom notifications image -Notify can be used to deliver custom DApp notifications by passing a `CustomNotification` object to the `customNotification` action. This will return an `UpdateNotification` type. +Notify can be used to deliver custom dapp notifications by passing a `CustomNotification` object to the `customNotification` action. This will return an `UpdateNotification` type. This `UpdateNotification` will return an `update` function that can be passed a new `CustomNotification` to update the existing notification. The `customNotification` method also returns a `dismiss` method that is called without any parameters to dismiss the notification. @@ -1125,74 +1190,6 @@ The `customNotification` method also returns a `dismiss` method that is called w --- -#### **preflightNotifications** - -Notify can be used to deliver standard notifications along with preflight updates by passing a `PreflightNotificationsOptions` object to the `preflightNotifications` API action. - -Preflight notifications image - -Preflight event types include: - -- `txRequest` : Alert user there is a transaction request awaiting confirmation by their wallet -- `txAwaitingApproval` : A previous transaction is awaiting confirmation -- `txConfirmReminder` : Reminder to confirm a transaction to continue - configurable with the `txApproveReminderTimeout` property; defaults to 15 seconds -- `nsfFail` : The user has insufficient funds for transaction (requires `gasPrice`, `estimateGas`, `balance`, `txDetails.value`) -- `txError` : General transaction error (requires `sendTransaction`) -- `txSendFail` : The user rejected the transaction (requires `sendTransaction`) -- `txUnderpriced` : The gas price for the transaction is too low (requires `sendTransaction`) - -This API call will return a promise that resolves to the transaction hash (if `sendTransaction` resolves the transaction hash and is successful), the internal notification id (if no `sendTransaction` function is provided) or return nothing if an error occurs or `sendTransaction` is not provided or doesn't resolve to a string. - -Example: - -```typescript copy -const balanceValue = Object.values(balance)[0] -// if using ethers v6 this is: -// ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any') -const ethersProvider = new ethers.providers.Web3Provider(provider, 'any') - -const signer = ethersProvider.getSigner() -const txDetails = { - to: toAddress, - value: 100000000000000 -} - -const sendTransaction = () => { - return signer.sendTransaction(txDetails).then((tx) => tx.hash) -} - -const gasPrice = () => ethersProvider.getGasPrice().then((res) => res.toString()) - -const estimateGas = () => { - return ethersProvider.estimateGas(txDetails).then((res) => res.toString()) -} -const transactionHash = await onboard.state.actions.preflightNotifications({ - sendTransaction, - gasPrice, - estimateGas, - balance: balanceValue, - txDetails: txDetails -}) -console.log(transactionHash) -``` - -```typescript -interface PreflightNotificationsOptions { - sendTransaction?: () => Promise - estimateGas?: () => Promise - gasPrice?: () => Promise - balance?: string | number - txDetails?: { - value: string | number - to?: string - from?: string - } - txApproveReminderTimeout?: number // defaults to 15 seconds if not specified -} -``` - ---- - #### **updateAccountCenter** If you need to update your Account Center configuration after initialization, you can call the `updateAccountCenter` function with the new configuration @@ -1222,7 +1219,7 @@ onboard.state.actions.setPrimaryWallet(wallets[1], wallets[1].accounts[2].addres ## Setting the User's Chain/Network -When initializing Onboard you define a list of chains/networks that your app supports. If you would like to prompt the user to switch to one of those chains, you can use the `setChain` method on an initialized instance of Onboard: +When initializing Web3 Onboard, you define a list of chains/networks that your dapp supports. If you would like to prompt the user to switch to one of those chains, you can use the `setChain` method on an initialized instance of Web3 Onboard: ```typescript copy type SetChain = (options: SetChainOptions) => Promise @@ -1238,11 +1235,11 @@ type SetChainOptions = { const success = await onboard.setChain({ chainId: '0x89' }) ``` -The `setChain` methods takes an options object with a `chainId` property hex encoded string for the chain id to switch to. The chain id must be one of the chains that Onboard was initialized with. If the wallet supports programatically adding and switching the chain, then the user will be prompted to do so, if not, then a modal will be displayed indicating to the user that they need to switch chains to continue. The `setChain` method returns a promise that resolves when either the user has confirmed the chain switch, or has dismissed the modal and resolves with a boolean indicating if the switch network was successful or not. The `setChain` method will by default switch the first wallet (the most recently connected) in the `wallets` array. A specific wallet can be targeted by passing in the `wallet.label` in the options object as the `wallet` parameter. If a chain was instantiated without an rpcUrl, token, or label, add these options for wallets that require this information for adding a new chain. +The `setChain` methods takes an options object with a `chainId` property hex encoded string for the chain id to switch to. The chain id must be one of the chains that Web3 Onboard was initialized with. If the wallet supports programatically adding and switching the chain, then the user will be prompted to do so, if not, then a modal will be displayed indicating to the user that they need to switch chains to continue. The `setChain` method returns a promise that resolves when either the user has confirmed the chain switch, or has dismissed the modal and resolves with a boolean indicating if the switch network was successful or not. The `setChain` method will by default switch the first wallet (the most recently connected) in the `wallets` array. A specific wallet can be targeted by passing in the `wallet.label` in the options object as the `wallet` parameter. If a chain was instantiated without an rpcUrl, token, or label, add these options for wallets that require this information for adding a new chain. ## Custom Styling -The Onboard styles can be customized via [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). The following properties and their default properties can be customized by adding these variables to the `:root` in your CSS file: +The Web3 Onboard styles can be customized via [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). The following properties and their default properties can be customized by adding these variables to the `:root` in your CSS file: ```css :root { @@ -1531,7 +1528,7 @@ module.exports = { The above webpack 5 example can be used in the `craco.config.js` file at the root level in this case. -[React App Rewired](https://www.npmjs.com/package/react-app-rewired) is another option for working with Create React App DApps +[React App Rewired](https://www.npmjs.com/package/react-app-rewired) is another option for working with Create React App dapps Add the following dev dependencies: `npm i --save-dev rollup-plugin-polyfill-node webpack-bundle-analyzer assert buffer crypto-browserify stream-http https-browserify os-browserify process stream-browserify util path-browserify browserify-zlib` @@ -1764,14 +1761,14 @@ Add this to your `app.html` ##### Buffer polyfill -It seems some component or dependency requires Node's Buffer. To polyfill this, the simplest way I could find was to install the buffer package and include the following in web3-onboard.ts: +It seems some component or dependency requires Node's Buffer. To polyfill this, the simplest way is to install the buffer package and include the following in web3-onboard.ts: ```javascript import { Buffer } from 'buffer' globalThis.Buffer = Buffer ``` -See [this github issue](https://github.com/blocknative/web3-onboard/issues/1568#issuecomment-1463963462) for further troubleshooting +See [this github issue](https://github.com/blocknative/web3-onboard/issues/1568#issuecomment-1463963462) for further troubleshooting. ### Vite @@ -1824,7 +1821,9 @@ export default { '@web3-onboard/gas', '@web3-onboard/sequence', 'js-sha3', - '@ethersproject/bignumber' + '@ethersproject/bignumber', + '@safe-global/safe-apps-sdk', + '@safe-global/safe-apps-provider' ], esbuildOptions: { // Node.js global to browser globalThis @@ -1857,7 +1856,7 @@ Checkout a boilerplate example for NextJS [here](https://github.com/blocknative/ :::admonition type=note -If you are seeing an error during builds when dynamically importing Web3Onboard in a NextJS v13 project, try upgrading to to the Canary beta release of NextJS where this issue is fixed. +If you are seeing an error during builds when dynamically importing Web3 Onboard in a NextJS v13 project, try upgrading to the Canary beta release of NextJS where this issue is fixed. ::: @@ -1865,9 +1864,9 @@ If you are seeing an error during builds when dynamically importing Web3Onboard ### npm and yarn -Web3-Onboard will work out of the box with `npm` and `yarn` support. +Web3 Onboard will work out of the box with `npm` and `yarn` support. ### pnpm -We have had issues reported when using `pnpm` as the package manager when working with web3-onboard. +We have had issues reported when using `pnpm` as the package manager when working with Web3 Onboard. As we work to understand this new manager more and the issues around it we recommend using `npm` or `yarn` for now. diff --git a/docs/src/routes/docs/[...3]modules/[...2]gas/+page.md b/docs/src/routes/docs/[...3]modules/[...2]gas/+page.md index bdd6edd32..245c40dd3 100644 --- a/docs/src/routes/docs/[...3]modules/[...2]gas/+page.md +++ b/docs/src/routes/docs/[...3]modules/[...2]gas/+page.md @@ -10,7 +10,7 @@ title: Gas A module for requesting streams or single requests of gas price estimates from the [Blocknative Gas Platform API](https://docs.blocknative.com/gas-platform). -Supports both Eth Mainnet and Polygon gas pricing. +Supports both Ethereum Mainnet and Polygon Mainnet gas pricing. @@ -39,10 +39,8 @@ npm install @web3-onboard/gas import gas from '@web3-onboard/gas' // subscribe to a single chain for estimates using the default poll rate of 5 secs -// API key is optional and if provided allows for faster poll rates const ethMainnetGasBlockPrices = gas.stream({ chains: ['0x1'], - apiKey: '', endpoint: 'blockPrices' }) @@ -82,7 +80,7 @@ const gasBlockPrices = await gas.get({ ## Usage with Web3-Onboard wallet Connect and Ethers.js -This example assumes you have already setup web3-onboard to connect wallets to your dapp. +This example assumes you have already setup Web3 Onboard to connect wallets to your dapp. For more information see [web3-onboard docs](/docs/modules/core#install). ```ts copy @@ -97,7 +95,6 @@ let bnGasPrices const ethMainnetGasBlockPrices = gas.stream({ chains: ['0x1'], // '0x89' can also be added/replaced here for Polygon gas data - apiKey: '', // for faster refresh rates endpoint: 'blockPrices' }) diff --git a/docs/src/routes/docs/[...3]modules/[...3]react/+page.md b/docs/src/routes/docs/[...3]modules/[...3]react/+page.md index 619a937b7..d55dc657a 100644 --- a/docs/src/routes/docs/[...3]modules/[...3]react/+page.md +++ b/docs/src/routes/docs/[...3]modules/[...3]react/+page.md @@ -4,7 +4,7 @@ title: React # {$frontmatter.title} -A collection of React hooks for implementing web3-onboard into a React project +A collection of React hooks for implementing Web3 Onboard into a React project ## Quickstart with Injected Wallets and Ethers Provider @@ -35,10 +35,6 @@ import { init, useConnectWallet } from '@web3-onboard/react' import injectedModule from '@web3-onboard/injected-wallets' import { ethers } from 'ethers' -// Sign up to get your free API key at https://explorer.blocknative.com/?signup=true -// Required for Transaction Notifications and Transaction Preview -const apiKey = '1730eff0-9d50-4382-a3fe-89f0d34a2070' - const injected = injectedModule() const infuraKey = '' @@ -46,7 +42,7 @@ const rpcUrl = `https://mainnet.infura.io/v3/${infuraKey}` // initialize Onboard init({ - apiKey, + // This javascript object is unordered meaning props do not require a certain order wallets: [injected], chains: [ { @@ -109,13 +105,13 @@ the initialized web3Onboard instance will be available in all children component import { Web3OnboardProvider, init } from '@web3-onboard/react' import injectedModule from '@web3-onboard/injected-wallets' const INFURA_KEY = '' -const ethereumRopsten = { - id: '0x3', - token: 'rETH', - label: 'Ethereum Ropsten', - rpcUrl: `https://ropsten.infura.io/v3/${INFURA_KEY}` +const ethereumSepolia = { + id: 11155111, + token: 'ETH', + label: 'Sepolia', + rpcUrl: 'https://rpc.sepolia.org/' } -const chains = [ethereumRopsten] +const chains = [ethereumSepolia] const wallets = [injectedModule()] const web3Onboard = init({ wallets, @@ -136,11 +132,11 @@ function MyApp({ Component, pageProps }) { export default MyApp ``` -## `init` +## init The `init` function must be called before any hooks can be used. The `init` function just initializes `web3-onboard` and makes it available for all hooks to use. For reference check out the [initialization docs for `@web3-onboard/core`](../../modules/core.md#initialization) -## `useConnectWallet` +## useConnectWallet This hook allows you to connect the user's wallet and track the state of the connection status and the wallet that is connected. @@ -202,7 +198,7 @@ setPrimaryWallet(wallets[1]) setPrimaryWallet(wallets[1], wallets[1].accounts[2].address) ``` -## `useSetChain` +## useSetChain This hook allows you to set the chain of a user's connected wallet, keep track of the current chain the user is connected to and the status of setting the chain. Passing in a wallet label will operate on that connected wallet, otherwise it will default to the last connected wallet. If a chain was instantiated without an rpcUrl, token, or label, add these options for wallets that require this information for adding a new chain. @@ -242,10 +238,66 @@ const [ ] = useSetChain() ``` -## `useNotifications` +## useWagmiConfig + +This hook allows you to get the WagmiConfig (Config from the Wagmi project) from @web3-onboard/core if W3O has been initialized with the [WAGMI property imported and passing into the web3-onboard/core config](../../modules/wagmi.md#usage). + +```ts +import Onboard from '@web3-onboard/core' +import injectedModule from '@web3-onboard/injected-wallets' +import wagmi from '@web3-onboard/wagmi' +import { + sendTransaction as wagmiSendTransaction, + switchChain, + disconnect, + getConnectors +} from '@web3-onboard/wagmi' +import { parseEther, isHex, fromHex } from 'viem' + +const injected = injectedModule() + +const onboard = Onboard({ + wagmi, + wallets: [injected], + chains: [ + { + id: '0x1', + token: 'ETH', + label: 'Ethereum', + rpcUrl: 'https://mainnet.infura.io/v3/17c1e1500e384acfb6a72c5d2e67742e' + } + ] + // ... other Onboard options +}) + +const sendTransaction = async () => { + // current primary wallet - as multiple wallets can connect this value is the currently active + const [activeWallet] = onboard.state.get().wallets + const { wagmiConnector } = activeWallet + const wagmiConfig = onboard.state.get().wagmiConfig + const result = await wagmiSendTransaction(wagmiConfig, { + to: toAddress, + // desired connector to send txn from + connector: wagmiConnector, + value: parseEther('0.001') + }) + console.log(result) +} + +async function signMessage(chainId) { + // current primary wallet - as multiple wallets can connect this value is the currently active + const [activeWallet] = onboard.state.get().wallets + const wagmiConfig = onboard.state.get().wagmiConfig + await wagmiSignMessage(wagmiConfig, { + message: 'This is my message to you', + connector: activeWallet.wagmiConnector + }) +} +``` + +## useNotifications -This hook allows the dev to access all notifications if enabled, send custom notifications and update notify -**note** requires an API key be added to the initialization, enabled by default if API key exists +This hook allows the dev to access all notifications if enabled, send custom notifications, and update notify For full Notification documentation please see [Notify section within the `@web3-onboard/core` docs](../../modules/core.md#initialization) ```typescript @@ -256,7 +308,6 @@ type UseNotifications = (): [ update: UpdateNotification }, (update: Partial) => void, - (options: PreflightNotificationsOptions) => Promise ] type Notification = { @@ -306,24 +357,10 @@ type Notify = { /** * Position of notifications that defaults to the same position as the * Account Center (if enabled) of the top right if AC is disabled - * and notifications are enabled (enabled by default with API key) + * and notifications are enabled */ position?: NotificationPosition } - -type PreflightNotificationsOptions = { - sendTransaction?: () => Promise - estimateGas?: () => Promise - gasPrice?: () => Promise - balance?: string | number - txDetails?: TxDetails - txApproveReminderTimeout?: number -} -type TxDetails = { - value: string | number - to?: string - from?: string -} ``` ```typescript @@ -409,9 +446,9 @@ const sendTransactionWithPreFlightNotifications = async () => { ``` -## `useWallets` +## useWallets -This hook allows you to track the state of all the currently connected wallets. +This hook allows you to track the state of all the currently connected wallets: ```typescript import { useWallets } from '@web3-onboard/react' @@ -421,9 +458,9 @@ type UseWallets = (): WalletState[] const connectedWallets = useWallets() ``` -## `useAccountCenter` +## useAccountCenter -This hook allows you to track and update the state of the AccountCenter +This hook allows you to track and update the state of the Account Center: ```typescript import { useAccountCenter } from '@web3-onboard/react' @@ -448,9 +485,9 @@ type AccountCenter = { const updateAccountCenter = useAccountCenter() ``` -## `useSetLocale` +## useSetLocale -This hook allows you to set the locale of your application to allow language updates associated with the i18n config +This hook allows you to set the locale of your application to allow language updates associated with the i18n config: ```typescript import { useSetLocale } from '@web3-onboard/react' @@ -470,7 +507,7 @@ Many of the wallet modules require dependencies that are not normally included i Node built-ins are automatically bundled in v4 so that portion is handled automatically. -**web3auth** and **torus** will require a Babel to compile from es6 if not already supported. See config for Babel and Webpack4 as follows +**web3auth** and **torus** will require a Babel to compile from es6 if not already supported. See config for Babel and Webpack4 as follows: `npm i --save-dev @babel/cli @babel/core @babel/node @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining @babel/plugin-syntax-bigint @babel/register` **AND** @@ -602,7 +639,7 @@ Be sure to update the scripts in package.json: } ``` -[React App Rewired](https://www.npmjs.com/package/react-app-rewired) is another option for working with Create React App DApps +[React App Rewired](https://www.npmjs.com/package/react-app-rewired) is another option for working with Create React App dapps Add React App Rewired: diff --git a/docs/src/routes/docs/[...3]modules/[...5]transaction-preview/+page.md b/docs/src/routes/docs/[...3]modules/[...5]transaction-preview/+page.md index b2512f893..d1adcf5d3 100644 --- a/docs/src/routes/docs/[...3]modules/[...5]transaction-preview/+page.md +++ b/docs/src/routes/docs/[...3]modules/[...5]transaction-preview/+page.md @@ -1,399 +1,9 @@ --- -title: Transaction Preview +title: Transaction Preview - Deprecated --- - - # {$frontmatter.title} -A modular UI for previewing a single or set of unsigned Ethereum transactions. - -Transaction Preview Flow image - -### Try Transaction Preview - -Preview Vitalik swapping 100 UNI tokens for ETH using Transaction Preview - - -Full Simulation Platform API documentation can be found [here](https://docs.blocknative.com/transaction-preview-api) - -### Install - - - - -```sh copy -yarn add @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-preview -``` - - - - -```sh copy -npm i @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-preview -``` - - - - -### Usage with Web3-Onboard Core package - -Transaction Preview Flow gif - -To use the Transaction Preview package with web3-onboard all a developer needs to do is initialize web3-onboard with their [Blocknative API key](https://onboard.blocknative.com/docs/overview/introduction#optional-use-an-api-key-to-fetch-real-time-transaction-data-balances-gas) and pass in the module as shown below. - -```typescript copy -import Onboard from '@web3-onboard/core' -import injectedModule from '@web3-onboard/injected' -import transactionPreviewModule from '@web3-onboard/transaction-preview' - -const injected = injectedModule() -const transactionPreview = transactionPreviewModule( - // Optional initialization object - // { - // Optional: Require balance change approval prior to sending transaction to wallet - // Defaults to true - // requireTransactionApproval?: false - - // i18n?: i18nOptions - Internationalization options - // } -) - -const onboard = Onboard({ - transactionPreview, - apiKey: 'xxx387fb-bxx1-4xxc-a0x3-9d37e426xxxx' - wallets: [injected], - chains: [ - { - id: '0x1', - token: 'ETH', - label: 'Ethereum', - rpcUrl: 'https://mainnet.infura.io/v3/17c1e1500e384acfb6a72c5d2e67742e' - } - ] - // ... other Onboard options -}) - -// Transaction code here using Ether.js or Web3.js or custom -// The transaction will automatically be picked up and simulated with a UI displaying in the upper right corner -``` - -### Standalone Usage - -To use the Transaction Preview package without web3-onboard all a developer needs to do is: - -- Execute the entry function from the `@web3-onboard/transaction-preview` package and optional params -- Run the returned `init` function with their [Blocknative API key](https://onboard.blocknative.com/docs/overview/introduction#optional-use-an-api-key-to-fetch-real-time-transaction-data-balances-gas), an initialized instance of their [Blocknative SDK](https://www.npmjs.com/package/bnc-sdk) and a containerElement string with the html ID of the target element to append the visualization to -- Finally pass a transaction meant for a wallet provider (created using libraries like Ethers or Web3) - -With the above steps a UI will be rendered with the balance changes and gas used. - -```typescript copy -import transactionPreviewModule from '@web3-onboard/transaction-preview' - -const {init, previewTransaction} = transactionPreviewModule({ - // Optional: Require balance change approval prior to sending transaction to wallet - // Defaults to true - // requireTransactionApproval?: false - - // i18n?: i18nOptions - Internationalization options -}) -await init({ -/** - * Blocknative API key (https://explorer.blocknative.com/account) - */ -apiKey: string -/** - * Your Blocknative SDK instance - * */ -sdk: SDK -/** - * Optional dom query string to mount UI to - * */ -containerElement: string}) - -// Transaction code here using Ether.js or Web3.js or construct your own transactions -const simulate = async provider => { - // if using ethers v6 this is: - // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any') - const ethersProvider = new ethers.providers.Web3Provider(provider, 'any') - - const signer = ethersProvider.getSigner() - const addressFrom = '0xcxxxxxx11111999991111' - - // Uniswap V2 - const CONTRACT_ADDRESS = '0x7a250d5630b4cf539739df2c5dacb4c659f2488d' - const erc20_interface = [ - 'function approve(address _spender, uint256 _value) public returns (bool success)', - 'function transferFrom(address sender, address recipient, uint256 amount) external returns (bool)', - 'function balanceOf(address owner) view returns (uint256)' - ] - - const uniswapV2router_interface = [ - 'function swapExactTokensForETH(uint amountIn, uint amountOutMin, address[] calldata path, address to, uint deadline) external returns (uint[] memory amounts)' - ] - - const weth = '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2' - const oneInch = '0x111111111117dc0aa78b770fa6a738034120c302' - let swapTxData - let approveTxData - const swapContract = new ethers.Contract( - CONTRACT_ADDRESS, - uniswapV2router_interface - ) - const erc20_contract = new ethers.Contract(oneInch, erc20_interface) - const oneEther = ethers.BigNumber.from('9000000000000000000') - approveTxData = await erc20_contract.populateTransaction.approve( - CONTRACT_ADDRESS, - oneEther - ) - - const amountOutMin = 0 - const amountOutMinHex = ethers.BigNumber.from(amountOutMin).toHexString() - - const path = [oneInch, weth] - const deadline = Math.floor(Date.now() / 1000) + 60 * 1 // 1 minutes from the current Unix time - - const inputAmountHex = oneEther.toHexString() - - swapTxData = await swapContract.populateTransaction.swapExactTokensForETH( - inputAmountHex, - amountOutMinHex, - path, - addressFrom, - deadline - ) - const uniswapV2Router = '0x7a250d5630B4cF539739dF2C5dAcb4c659F2488D' - - const popApproveTransaction = await signer.populateTransaction(approveTxData) - const popTransaction = await signer.populateTransaction(swapTxData) - const transactions = [ - { ...popApprovedTransaction, value: 0 }, - { - ...popTransaction, - from: addressFrom, - to: uniswapV2Router, - value: 0 - } - ] - await previewTransaction(transactions) -} - - return await previewTransaction(transactions) -} - -const simData = simulate(ethereumProvider) -console.log(simData) -``` - -### Options & Types - -```typescript -export type TransactionPreviewModule = (options: TransactionPreviewOptions) => TransactionPreviewAPI - -export type FullPreviewOptions = TransactionPreviewOptions & TransactionPreviewInitOptions - -export type TransactionPreviewAPI = { - /** - * This Method accepts a standard EIP1193 provider - * (such as an injected wallet from window.ethereum) - * and it will be patched to allow for transaction previewing - */ - patchProvider: (provider: PatchedEIP1193Provider) => PatchedEIP1193Provider - - /** - * This Method accepts: - * apiKey: string - Blocknative API key (https://explorer.blocknative.com/) - * sdk: instance of an initialized bnc-sdk (www.npmjs.com/package/bnc-sdk) - * containerElement: string of an html id selector (e.g. "#my-html-el") - */ - init: (initializationOptions: TransactionPreviewInitOptions) => void - - /** - * This method accepts a transaction meant for a wallet provider - * (created using libraries like Ethers or Web3), - * simulates the transaction and generates a corresponding UI and - * return a response from the Blocknative Transaction Preview API. - * Note: the package will need to initialized with the `init` - * function prior to usage - */ - previewTransaction: (transaction: TransactionForSim[]) => Promise -} - -export type PatchedEIP1193Provider = EIP1193Provider & { simPatched: boolean } - -export interface ProviderReq { - method: string - params?: Array -} - -export type RequestOptions = Pick - -export type TransactionPreviewInitOptions = { - /** - * Blocknative API key (https://explorer.blocknative.com/account) - */ - apiKey: string - /** - * Your Blocknative SDK instance (https://www.npmjs.com/package/bnc-sdk) - * */ - sdk: SDK - /** - * Optional dom query string to mount UI to - * */ - containerElement: string -} - -export type TransactionPreviewOptions = { - /** - * Optional requirement for user to accept transaction balance changes - * prior to sending the transaction to the wallet - * Defaults to true - * */ - requireTransactionApproval?: boolean - /** - * An optional internationalization object that defines the display - * text for different locales. Can also be used to override the default text. - * To override the default text, pass in a object for the en locale - */ - i18n?: i18nOptions -} - -export type Locale = string -export type i18nOptions = Record -export type i18n = typeof en - -export type DeviceNotBrowser = { - type: null - os: null - browser: null -} - -export type TransactionForSim = SimulationTransaction & { - data?: string -} - -export interface SimulationTransaction { - from: string - to: string - value: number - gas: number - input: string - // Either Type 1 Gas (gasPrice) or Type 2 Gas (maxPriorityFeePerGas & maxFeePerGas) - // must be included in the payload - gasPrice?: number - maxPriorityFeePerGas?: number - maxFeePerGas?: number -} - -export type MultiSimOutput = { - id?: string - contractCall: ContractCall[] - error?: any - gasUsed: number[] - internalTransactions: InternalTransaction[][] - netBalanceChanges: NetBalanceChange[][] - network: Network - simDetails: SimDetails - serverVersion: string - system: System - status: Status - simulatedBlockNumber: number - transactions: InternalTransaction[] -} - -export interface ContractCall { - contractType?: string - contractAddress?: string - contractAlias?: string - methodName: string - params: Record - contractName?: string - contractDecimals?: number - decimalValue?: string -} - -export interface InternalTransaction { - type: string - from: string - to: string - input: string - gas: number - gasUsed: number - value: string - contractCall: ContractCall - error?: string - errorReason?: string -} - -export interface NetBalanceChange { - address: string - balanceChanges: BalanceChange[] -} - -export interface BalanceChange { - delta: string - asset: Asset - breakdown: BreakDown[] -} - -export interface Asset { - type: string - symbol: string - contractAddress: string -} - -export interface BreakDown { - counterparty: string - amount: string -} - -export interface InternalTransaction { - type: string - from: string - to: string - input: string - gas: number - gasUsed: number - value: string - contractCall: ContractCall -} - -export type System = 'bitcoin' | 'ethereum' -export type Network = - | 'main' - | 'testnet' - | 'ropsten' - | 'rinkeby' - | 'goerli' - | 'kovan' - | 'xdai' - | 'bsc-main' - | 'matic-main' - | 'fantom-main' - | 'matic-mumbai' - | 'local' - -export type Status = - | 'pending' - | 'confirmed' - | 'speedup' - | 'cancel' - | 'failed' - | 'dropped' - | 'simulated' - -export interface SimDetails { - blockNumber: number - e2eMs: number - performanceProfile: any -} -``` - -## Build Environments - -For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments) +:::admonition type=warning +_Transaction Preview support has ended and is not longer supported within Web3-Onboard. Please remove Transaction Preview to avoid console errors and unexpected behavior._ +::: diff --git a/docs/src/routes/docs/[...3]modules/[...6]unstoppable-resolution/+page.md b/docs/src/routes/docs/[...3]modules/[...6]unstoppable-resolution/+page.md index 17780b2f3..9e74364b6 100644 --- a/docs/src/routes/docs/[...3]modules/[...6]unstoppable-resolution/+page.md +++ b/docs/src/routes/docs/[...3]modules/[...6]unstoppable-resolution/+page.md @@ -4,7 +4,7 @@ title: Unstoppable Domains Resolution # {$frontmatter.title} -A module to add Unstoppable Domain resolution to web3-onboard. +A module to add Unstoppable Domain resolution to Web3 Onboard. ### Install diff --git a/docs/src/routes/docs/[...3]modules/[...7]vue/+page.md b/docs/src/routes/docs/[...3]modules/[...7]vue/+page.md index bc02f8d86..50c9b85d8 100644 --- a/docs/src/routes/docs/[...3]modules/[...7]vue/+page.md +++ b/docs/src/routes/docs/[...3]modules/[...7]vue/+page.md @@ -4,7 +4,7 @@ title: Vue # {$frontmatter.title} -A collection of composable functions for implementing web3-onboard in to a Vue project; compatible both with Vue 2 + composition-api and Vue 3 +A collection of composable functions for implementing Web3 Onboard into a Vue project; compatible both with Vue 2 + composition-api and Vue 3 ## Install @@ -121,7 +121,7 @@ const { wallets, connectWallet, disconnectConnectedWallet, connectedWallet } = u ### `connectWallet` -Function to open the onboard modal and connect to a wallet provider. For reference check out the [connecting a wallet for `@web3-onboard/core`](../../modules/core.md#connecting-a-wallet) +Function to open the Web3 Onboard modal and connect to a wallet provider. For reference check out the [connecting a wallet for `@web3-onboard/core`](../../modules/core.md#connecting-a-wallet) ### Example usage @@ -300,7 +300,7 @@ Function to set the chain of a wallet ### `settingChain` -Readonly boolean ref that tracks the status of setting the chain +Read-only boolean ref that tracks the status of setting the chain ### Example usage @@ -322,7 +322,7 @@ Readonly boolean ref that tracks the status of setting the chain ### `wallets` -Readonly ref that contains every wallet that has been connected +Read-only ref that contains every wallet that has been connected ### Example usage @@ -339,7 +339,7 @@ export default { ### `alreadyConnectedWallets` -Readonly ref that contains every wallet that user connected to in the past; useful to reconnect wallets automatically after a reload +Read-only ref that contains every wallet that user connected to in the past; useful to reconnect wallets automatically after a reload ### Example usage @@ -363,7 +363,7 @@ Readonly ref that contains every wallet that user connected to in the past; usef ### `lastConnectedTimestamp` -Readonly ref that contains the last time that the user connected a wallet in milliseconds +Read-only ref that contains the last time that the user connected a wallet in milliseconds ### Example usage @@ -391,7 +391,7 @@ Many of the wallet modules require dependencies that are not normally included i Node built-ins are automatically bundled in v4 so that portion is handled automatically. -**web3auth** and **torus** will require a Babel to compile from es6 if not already supported. See config for Babel and Webpack4 as follows +**web3auth** and **torus** will require a Babel to compile from es6 if not already supported. See config for Babel and Webpack4 as follows: `npm i --save-dev @babel/cli @babel/core @babel/node @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining @babel/plugin-syntax-bigint @babel/register` **AND** @@ -503,6 +503,9 @@ export default { commonjsOptions: { transformMixedEsModules: true } + }, + optimizeDeps: { + include: ['@safe-global/safe-apps-sdk', '@safe-global/safe-apps-provider'] } } ``` diff --git a/docs/src/routes/docs/[...3]modules/[...8]wagmi/+page.md b/docs/src/routes/docs/[...3]modules/[...8]wagmi/+page.md new file mode 100644 index 000000000..edb008758 --- /dev/null +++ b/docs/src/routes/docs/[...3]modules/[...8]wagmi/+page.md @@ -0,0 +1,125 @@ +--- +title: WAGMI +--- + +# {$frontmatter.title} + +A module for connecting wallets using WAGMI which returns a WAGMI config object to be used with [@wagmi/core](https://wagmi.sh/core/getting-started) functions. + +### Install + + + + +```sh copy +yarn add @web3-onboard/wagmi +``` + + + + +```sh copy +npm install @web3-onboard/wagmi +``` + + + + +## WAGMI Usage + +To add [WAGMI API](https://wagmi.sh/core/getting-started) support to your project you can simply install `web3-onboard/wagmi` import and pass in the WAGMI package default export directly into your onboard configuration. After doing so you can use all of the native WAGMI API functions directly from `@web3-onboard/wagmi`. This will give access to all WAGMI function available on or before `@wagmi/core` version `2.10.4`. + +Full documentation for `wagmi/core` API functions can be found [here](https://wagmi.sh/core/getting-started). + +### wagmiConfig + +After initialization an up-to-date WAGMI config will will be available from the onboard state object `onboard.state.get().wagmiConfig` which will need to be passed as the first prop of most [@wagmi/core](https://wagmi.sh/core/getting-started) methods. + +### wagmiConnector and Connectors +Wallets will also have a `wagmiConnector` prop within the onboard state object which will allow you to target specific wallets for interactions. This can also be bi-passed if the primary or most recently connected wallet is the wallet meant for the transactions. +The config and connectors can be used with the WAGMI API returned from this module or an external WAGMI instance. + +## WAGMI Example + +This example assumes you have already setup web3-onboard to connect wallets to your dapp. +For more information see [web3-onboard docs](https://web3onboard.thirdweb.com/docs/modules/core#install). + +```ts +import Onboard from '@web3-onboard/core' +import injectedModule from '@web3-onboard/injected-wallets' +import wagmi from '@web3-onboard/wagmi' +import { + sendTransaction as wagmiSendTransaction, + switchChain, + disconnect, + getConnectors +} from '@web3-onboard/wagmi' +import { parseEther, isHex, fromHex } from 'viem' + +const injected = injectedModule() + +const onboard = Onboard({ + // This javascript object is unordered meaning props do not require a certain order + wagmi, + wallets: [injected], + chains: [ + { + id: '0x1', + token: 'ETH', + label: 'Ethereum', + rpcUrl: 'https://mainnet.infura.io/v3/17c1e1500e384acfb6a72c5d2e67742e' + } + ] + // ... other Onboard options +}) + +const sendTransaction = async () => { + // current primary wallet - as multiple wallets can connect this value is the currently active + const [activeWallet] = onboard.state.get().wallets + const { wagmiConnector } = activeWallet + const wagmiConfig = onboard.state.get().wagmiConfig + const result = await wagmiSendTransaction(wagmiConfig, { + to: toAddress, + // desired connector to send txn from + connector: wagmiConnector, + value: parseEther('0.001') + }) + console.log(result) +} + +async function signMessage(chainId) { + // current primary wallet - as multiple wallets can connect this value is the currently active + const [activeWallet] = onboard.state.get().wallets + const wagmiConfig = onboard.state.get().wagmiConfig + await wagmiSignMessage(wagmiConfig, { + message: 'This is my message to you', + connector: activeWallet.wagmiConnector + }) +} + +async function switchWagmiChain(chainId) { + // current primary wallet - as multiple wallets can connect this value is the currently active + const [activeWallet] = onboard.state.get().wallets + const { wagmiConnector } = activeWallet + let chainAsNumber + if (isHex(chainId)) { + chainAsNumber = fromHex(chainId, 'number') + } else if (!isHex(chainId) && typeof chainId === 'number') { + chainAsNumber = chainId + } else { + throw new Error('Invalid chainId') + } + const wagmiConfig = onboard.state.get().wagmiConfig + await switchChain(wagmiConfig, { + chainId: chainAsNumber, + connector: wagmiConnector + }) +} + +async function disconnectWallet() { + const wagmiConfig = onboard.state.get().wagmiConfig + const [activeWallet] = onboard.state.get().wallets + const { wagmiConnector } = activeWallet + disconnect(wagmiConfig, { connector: wagmiConnector }) +} +``` diff --git a/docs/src/routes/docs/[...4]wallets/[...9]frame/+page.md b/docs/src/routes/docs/[...4]wallets/[...10]frame/+page.md similarity index 100% rename from docs/src/routes/docs/[...4]wallets/[...9]frame/+page.md rename to docs/src/routes/docs/[...4]wallets/[...10]frame/+page.md diff --git a/docs/src/routes/docs/[...4]wallets/[...10]frontier/+page.md b/docs/src/routes/docs/[...4]wallets/[...11]frontier/+page.md similarity index 100% rename from docs/src/routes/docs/[...4]wallets/[...10]frontier/+page.md rename to docs/src/routes/docs/[...4]wallets/[...11]frontier/+page.md diff --git a/docs/src/routes/docs/[...4]wallets/[...11]gnosis/+page.md b/docs/src/routes/docs/[...4]wallets/[...12]gnosis/+page.md similarity index 70% rename from docs/src/routes/docs/[...4]wallets/[...11]gnosis/+page.md rename to docs/src/routes/docs/[...4]wallets/[...12]gnosis/+page.md index c6a1cd5ee..e4612b4d8 100644 --- a/docs/src/routes/docs/[...4]wallets/[...11]gnosis/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...12]gnosis/+page.md @@ -4,7 +4,7 @@ title: Safe # {$frontmatter.title} -Wallet module for connecting Safe to web3-onboard +Wallet module for connecting Safe to Web3 Onboard ## Install @@ -79,4 +79,27 @@ Note: With the `safeTxGas` you will see additional value on the `gasLimit` displ ## Build Environments -For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments) +For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments). + + +## Local testing within the Safe app + +Ensure the application is building and working properly within the browser and then add or enable your cors blocker extension or script of choice. An example is the `Allow CORS` browser extension. + +## Vue Build Configuration + +If using Vue be sure to include the necessary peerDeps in the `vite.config.ts` specifically within the `optimizeDeps.include` list and install the necessary peer deps `npm i @safe-global/safe-apps-provider @safe-global/safe-apps-sdk`. + +```typescript +export default defineConfig({ + plugins: [vue(), vueJsx(), VueDevTools()], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + }, + optimizeDeps: { + include: ['@safe-global/safe-apps-sdk', '@safe-global/safe-apps-provider'] + } +}) +``` \ No newline at end of file diff --git a/docs/src/routes/docs/[...4]wallets/[...12]infinitywallet/+page.md b/docs/src/routes/docs/[...4]wallets/[...13]infinitywallet/+page.md similarity index 90% rename from docs/src/routes/docs/[...4]wallets/[...12]infinitywallet/+page.md rename to docs/src/routes/docs/[...4]wallets/[...13]infinitywallet/+page.md index 5498566c7..38981c4eb 100644 --- a/docs/src/routes/docs/[...4]wallets/[...12]infinitywallet/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...13]infinitywallet/+page.md @@ -6,7 +6,7 @@ title: Infinity Wallet ## Wallet module for connecting Infinity Wallet through web3-onboard -Infinity Wallet SDK wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications. +Infinity Wallet SDK wallet module for connecting to Web3 Onboard. Web3 Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications. Checkout the official [Infinity Wallet page](https://infinitywallet.io/) for details. diff --git a/docs/src/routes/docs/[...4]wallets/[...13]injected/+page.md b/docs/src/routes/docs/[...4]wallets/[...14]injected/+page.md similarity index 77% rename from docs/src/routes/docs/[...4]wallets/[...13]injected/+page.md rename to docs/src/routes/docs/[...4]wallets/[...14]injected/+page.md index 78f965d37..26a71605b 100644 --- a/docs/src/routes/docs/[...4]wallets/[...13]injected/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...14]injected/+page.md @@ -4,9 +4,21 @@ title: Injected Wallets # {$frontmatter.title} -This module lets web3-onboard automatically detect Browser Injected Wallets such as Metamask or Coinbase Wallet. We recommend you install this module to get the most out of your w3o implementation. This module supports [EIP-1193](https://eips.ethereum.org/EIPS/eip-1193) and [recognizes many injected wallets natively](#injected-wallets-supported-natively). +This module lets Web3 Onboard automatically detect Browser Injected Wallets such as Metamask or Coinbase Wallet. We recommend you install this module to get the most out of your Web3 Onboard implementation. This module supports [EIP-1193](https://eips.ethereum.org/EIPS/eip-1193), [recognizes many injected wallets natively](#injected-wallets-supported-natively), and supports all [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963) compatible wallets. -Note: Make sure to install the core module before installing other modules to w3o. +Note: Make sure to install the core module before installing other modules to Web3 Onboard. + +### Support all EIP-6963 Wallets out of the box + +Web3 Onboard supports all [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963) compatible wallets out of the box and will automatically recognizes any wallet which has integrated 6963 support. + +### Support all EIP-6963 Wallets out of the box + +Web3-Onboard supports all [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963) compatible wallets out of the box and will automatically recognizes any wallet which has integrated 6963 support. + +### Support all EIP-6963 Wallets out of the box + +Web3-Onboard supports all [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963) compatible wallets out of the box and will automatically recognizes any wallet which has integrated 6963 support. ## Install @@ -147,7 +159,7 @@ type Platform = ## Adding Custom Injected Wallets -If there is an injected wallet that you would like to support in your app, but is not yet included in this repo, you can add a custom wallet module in the `custom` field: +If there is an injected wallet that you would like to support in your dapp, but is not yet included in this repo, you can add a custom wallet module in the `custom` field: ```typescript const equal = { @@ -189,6 +201,19 @@ const onboard = Onboard({ }) ``` +### This module supports any injected wallet that has implemented support for [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963) + +This can be disabled by passing in `disable6963Support` as true within the injected module init object. + +```ts +const injected = injectedModule({ disable6963Support: true }) + +const onboard = Onboard({ + wallets: [injected], + ... +}) +``` + ## Display Unavailable Wallets You may want to display injected wallets that are not currently available to the user and you can use the `displayUnavailable` option to do that: @@ -203,8 +228,8 @@ const injected = injectedModule({ }) ``` -This can be set to an array top specify which unavailable injected wallets to show or set to true to display all unavailable injected wallets regardless of whether it has been detected in the window, happy days. -Then the issue of the order of wallets displayed becomes apparent when you have 21 injected wallets at the top of the wallets list. To solve this, all injected wallets are sorted **alphabetically** by default and there is an additional `sort` parameter which receives the final list of wallets and then returns the list to be rendered. This allows for example setting MetaMask and Coinbase first and then just the rest alphabetically: +This can be set to an array to specify which unavailable injected wallets to show, or set to true to display all unavailable injected wallets regardless of whether it has been detected in the window. +Then the issue of the order of wallets displayed becomes apparent when you have 21 injected wallets at the top of the wallets list. To solve this, all injected wallets are sorted **alphabetically** by default and there is an additional `sort` parameter which receives the final list of wallets and then returns the list to be rendered. This allows, for example, setting MetaMask and Coinbase first and then the rest are sorted alphabetically: ```javascript const injected = injectedModule({ @@ -231,7 +256,7 @@ const injected = injectedModule({ }) ``` -You may want to display all unavailable injected wallets, but filter out specific wallets based on their availability. For example I may want to display all unavailable wallets except when Binance and Bitski wallet is unavailable, then don't show them, but if they are available, then do show them. To do this, the filters value has been extended to have a new value: `'unavailable'`, as in; remove this wallet if it is unavailable, even though `displayUnavailable` wallets is set: +You may want to display all unavailable injected wallets, but filter out specific wallets based on their availability. For example, I may want to display all unavailable wallets except when Binance and Bitski wallet is unavailable, then don't show them, but if they are available, then do show them. To do this, the filters value has been extended to have a new value: `'unavailable'`, as in; remove this wallet if it is unavailable, even though `displayUnavailable` wallets is set: ```javascript const injected = injectedModule({ @@ -263,7 +288,7 @@ const injected = injectedModule({ }) ``` -If a wallet is selected, but is not available the default error message is: `Oops ${wallet.label} is unavailable! Please install` if a download link is available for that wallet. If there isn't a download link for that wallet the default is: `Please install or enable ${walletName} to continue`. You may want to customize that message, so there is the `walletUnavailableMessage` parameter which is a function that takes the wallet object that is unavailable and returns a string which is the message to display: +If a wallet is selected, but is not available, the default error message is: `Oops ${wallet.label} is unavailable! Please install` if a download link is available for that wallet. If there isn't a download link for that wallet the default is: `Please install or enable ${walletName} to continue`. You may want to customize that message, so there is the `walletUnavailableMessage` parameter which is a function that takes the wallet object that is unavailable and returns a string which is the message to display: ```javascript const injected = injectedModule({ @@ -334,10 +359,8 @@ const injected = injectedModule({ - TP - _Mobile_ - 1inch - _Mobile_ - Tokenary - _Mobile_ -- GameStop - _Desktop_ -- Rabby - _Desktop_ +- Rabby - _Desktop & Mobile_ - MathWallet - _Desktop & Mobile_ -- Gamestop - _Desktop_ - Bitkeep - _Desktop & Mobile_ - BitGet Wallet - _Desktop & Mobile_ - Sequence - _Desktop & Mobile_ @@ -359,6 +382,9 @@ const injected = injectedModule({ - Coin98 Wallet - _Desktop & Mobile_ - SubWallet - _Desktop & Mobile_ - Kayros - _Desktop_ +- Lif3Wallet - _Mobile_ +- StableWallet - _Mobile_ +- Echooo - _Desktop & Mobile_ ## Build Environments diff --git a/docs/src/routes/docs/[...4]wallets/[...14]keepkey/+page.md b/docs/src/routes/docs/[...4]wallets/[...15]keepkey/+page.md similarity index 94% rename from docs/src/routes/docs/[...4]wallets/[...14]keepkey/+page.md rename to docs/src/routes/docs/[...4]wallets/[...15]keepkey/+page.md index 68dafb1af..0b24f6309 100644 --- a/docs/src/routes/docs/[...4]wallets/[...14]keepkey/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...15]keepkey/+page.md @@ -4,7 +4,7 @@ title: Keepkey # {$frontmatter.title} -Wallet module for connecting KeepKey hardware wallets to web3-onboard +Wallet module for connecting KeepKey hardware wallets to Web3 Onboard. ## Install diff --git a/docs/src/routes/docs/[...4]wallets/[...15]keystone/+page.md b/docs/src/routes/docs/[...4]wallets/[...16]keystone/+page.md similarity index 95% rename from docs/src/routes/docs/[...4]wallets/[...15]keystone/+page.md rename to docs/src/routes/docs/[...4]wallets/[...16]keystone/+page.md index 9ae0348ae..97be3032b 100644 --- a/docs/src/routes/docs/[...4]wallets/[...15]keystone/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...16]keystone/+page.md @@ -4,7 +4,7 @@ title: Keystone # {$frontmatter.title} -Wallet module for connecting Keystone hardware wallets to web3-onboard +Wallet module for connecting Keystone hardware wallets to Web3 Onboard. ## Install diff --git a/docs/src/routes/docs/[...4]wallets/[...16]ledger/+page.md b/docs/src/routes/docs/[...4]wallets/[...17]ledger/+page.md similarity index 97% rename from docs/src/routes/docs/[...4]wallets/[...16]ledger/+page.md rename to docs/src/routes/docs/[...4]wallets/[...17]ledger/+page.md index 41de7ec78..d1b77249a 100644 --- a/docs/src/routes/docs/[...4]wallets/[...16]ledger/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...17]ledger/+page.md @@ -4,7 +4,7 @@ title: Ledger # {$frontmatter.title} -Wallet module for connecting Ledger hardware wallets to web3-onboard +Wallet module for connecting Ledger hardware wallets to Web3 Onboard. ## Install diff --git a/docs/src/routes/docs/[...4]wallets/[...17]magic/+page.md b/docs/src/routes/docs/[...4]wallets/[...18]magic/+page.md similarity index 93% rename from docs/src/routes/docs/[...4]wallets/[...17]magic/+page.md rename to docs/src/routes/docs/[...4]wallets/[...18]magic/+page.md index e3e4a9b75..8dd28e593 100644 --- a/docs/src/routes/docs/[...4]wallets/[...17]magic/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...18]magic/+page.md @@ -4,12 +4,12 @@ title: Magic # {$frontmatter.title} -Wallet module for connecting Magic wallets to Onboard V2 +Wallet module for connecting Magic wallets to Web3 Onboard. ### Login options - **Email** - The Magic module comes with a built in email login modal that is customizable - in the same fashion that all other web3-onboard UI components are + in the same fashion that all other Web3 Onboard UI components are. :::admonition type=note @@ -72,7 +72,7 @@ console.log(connectedWallets) When a Magic wallet is connected the Magic instance is exposed. This can be used to get information such as user MetaData, update a user's email address or handle the user's token. -The user's email can be set in local storage and passed through the `MagicInitOptions` to avoid a user having to login again if they are returning to the DApp within the set user session time. +The user's email can be set in local storage and passed through the `MagicInitOptions` to avoid a user having to login again if they are returning to the dapp within the set user session time. Magic has a default time of 7 days and this can be configured through your Magic API Key settings. ```typescript @@ -91,7 +91,7 @@ For full documentation and examples please visit [Magic's official docs](https:/ ## Custom Styling -The Magic Wallet Login styles can customized via [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). The following properties and their default properties can be customized by adding these variables to the `:root` in your CSS file. If they are not specified they will fall back on the style variables prefixed with `--onboard` and beyond that to the styles developed by Blocknative: +The Magic Wallet Login styles can customized via [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). The following properties and their default properties can be customized by adding these variables to the `:root` in your CSS file. If they are not specified they will fall back on the style variables prefixed with `--onboard` and beyond that to the styles developed by Web3 Onboard: ```css :root { diff --git a/docs/src/routes/docs/[...4]wallets/[...18]metamask/+page.md b/docs/src/routes/docs/[...4]wallets/[...19]metamask/+page.md similarity index 96% rename from docs/src/routes/docs/[...4]wallets/[...18]metamask/+page.md rename to docs/src/routes/docs/[...4]wallets/[...19]metamask/+page.md index 7a265b754..9af480d98 100644 --- a/docs/src/routes/docs/[...4]wallets/[...18]metamask/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...19]metamask/+page.md @@ -11,7 +11,7 @@ title: MetaMask ## Wallet module for connecting MetaMask Wallet SDK to web3-onboard The MetaMask Web3-Onboard module provides a reliable, secure, and seamless connection from your dapp to the MetaMask browser extension and MetaMask Mobile. -See [MetaMask SDK Developer Docs](https://github.com/MetaMask/metamask-sdk) +See [MetaMask SDK Developer Docs](https://docs.metamask.io/wallet/how-to/use-sdk/) MetaMask SDK connect flow gif diff --git a/docs/src/routes/docs/[...4]wallets/[...1]arcana/+page.md b/docs/src/routes/docs/[...4]wallets/[...1]arcana/+page.md index d516948c3..4755710c1 100644 --- a/docs/src/routes/docs/[...4]wallets/[...1]arcana/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...1]arcana/+page.md @@ -14,7 +14,7 @@ To enable the Arcana wallet in Web3 apps, developers must register and configure For details, see [Quick Start Guide](https://docs.arcana.network/auth-quick-start.html). ::: -[Web3-Onboard](https://onboard.blocknative.com/) is an open-source, framework-agnostic JavaScript library to onboard users to web3 apps. This package can be used to integrate [Arcana Wallet](https://docs.arcana.network/concepts/anwallet/index.html) support into Web3-Onboard's "Connect Wallet" modal. With this module, the Arcana wallet option will be shown for any app that integrates with the Arcana Auth SDK and uses it to onboard users. There is no need to download any browser extension. For more information on how to use the Arcana Wallet, please refer to the [Arcana Wallet User Guide](https://docs.arcana.network/user-guides/wallet-ui/index.html). +[Web3-Onboard](https://web3onboard.thirdweb.com/) is an open-source, framework-agnostic JavaScript library to onboard users to web3 apps. This package can be used to integrate [Arcana Wallet](https://docs.arcana.network/concepts/anwallet/index.html) support into Web3 Onboard's "Connect Wallet" modal. With this module, the Arcana wallet option will be shown for any app that integrates with the Arcana Auth SDK and uses it to onboard users. There is no need to download any browser extension. For more information on how to use the Arcana Wallet, please refer to the [Arcana Wallet User Guide](https://docs.arcana.network/user-guides/wallet-ui/index.html). ### Install diff --git a/docs/src/routes/docs/[...4]wallets/[...19]mew/+page.md b/docs/src/routes/docs/[...4]wallets/[...20]mew/+page.md similarity index 86% rename from docs/src/routes/docs/[...4]wallets/[...19]mew/+page.md rename to docs/src/routes/docs/[...4]wallets/[...20]mew/+page.md index e147d5156..e0706a648 100644 --- a/docs/src/routes/docs/[...4]wallets/[...19]mew/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...20]mew/+page.md @@ -5,10 +5,10 @@ title: Mew # {$frontmatter.title} :::admonition type=warning -_Wallet module for connecting Mew to web3-onboard is now deprecated. Please use [@web3-onboard/mew-wallet](../../wallets/mewwallet.md)_ +_Wallet module for connecting Mew to Web3 Onboard is now deprecated. Please use [@web3-onboard/mew-wallet](../../wallets/mewwallet.md)_ ::: -Wallet module for connecting Mew wallet to web3-onboard +Wallet module for connecting Mew wallet to Web3 Onboard ## Install diff --git a/docs/src/routes/docs/[...4]wallets/[...20]mewwallet/+page.md b/docs/src/routes/docs/[...4]wallets/[...21]mewwallet/+page.md similarity index 92% rename from docs/src/routes/docs/[...4]wallets/[...20]mewwallet/+page.md rename to docs/src/routes/docs/[...4]wallets/[...21]mewwallet/+page.md index 544e6b6e8..73eb8c325 100644 --- a/docs/src/routes/docs/[...4]wallets/[...20]mewwallet/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...21]mewwallet/+page.md @@ -4,7 +4,7 @@ title: Mew Wallet # {$frontmatter.title} -Wallet module for connecting Mew wallet through web3-onboard +Wallet module for connecting Mew wallet through Web3 Onboard ### Install diff --git a/docs/src/routes/docs/[...4]wallets/[...22]particlenetwork/+page.md b/docs/src/routes/docs/[...4]wallets/[...22]particlenetwork/+page.md new file mode 100644 index 000000000..b54aadca8 --- /dev/null +++ b/docs/src/routes/docs/[...4]wallets/[...22]particlenetwork/+page.md @@ -0,0 +1,94 @@ +--- +title: Particle Network +--- + +# {$frontmatter.title} + +Wallet module for connecting Particle Network to web3-onboard + +## Install + + + + +```sh copy +yarn add @web3-onboard/particle-network +``` + + + + +```sh copy +npm install @web3-onboard/particle-network +``` + + + + +## Options + +See the [Particle Network Docs](https://docs.particle.network/developers/auth-service/sdks/web) for the extensive list of options. + +## Usage + +```typescript +import Onboard from '@web3-onboard/core' +import particleModule from '@web3-onboard/particle-network' + +const particle = particleModule({ + projectId: 'YOUR PROJECT ID', + clientKey: 'YOUR CLIENT KEY', + appId: 'YOUR APP ID' + // Can also add wallet object + preferredAuthType for further customization +}) + +const onboard = Onboard({ + // ... other Onboard options + wallets: [ + particle + //... other wallets + ] +}) + +const connectedWallets = await onboard.connectWallet() +console.log(connectedWallets) +``` + +## Types + +```typescript +/** + * Enumerates the supported authentication types. + */ +type AuthTypes = 'email' | 'phone' | 'google' | 'apple' | 'twitter' | 'facebook' | 'microsoft' | 'linkedin' | 'github' | 'twitch' | 'discord'; + +/** + * Interface that describes the preferred authentication type. + * @property {AuthTypes} type - The preferred type of authentication. + * @property {boolean} setAsDisplay - Indicates whether the type should be displayed within the UI. + */ +interface PreferredAuthType { + type: AuthTypes; + setAsDisplay: boolean; +} + +/** + * Options for initializing the Particle Auth module. + * @property {string} projectId - Particle Network project ID. + * @property {string} clientKey - Particle Network client key. + * @property {string} appId - Particle Network application ID. + * @property {string} [chainName] - (Optional) Specifies the name of the blockchain. Handled automatically if left blank. + * @property {number} [chainId] - (Optional) Specifies the blockchain's numeric ID. Handled automatically if left blank. + * @property {object} [wallet] - (Optional) Configuration for the wallet. + * @property {AuthTypes | PreferredAuthType} [preferredAuthType] - (Optional) Specifies the preferred type of authentication. + */ +interface ParticleAuthModuleOptions { + projectId: string; + clientKey: string; + appId: string; + chainName?: string; + chainId?: number; + wallet?: object; + preferredAuthType?: AuthTypes | PreferredAuthType; +} +``` diff --git a/docs/src/routes/docs/[...4]wallets/[...21]phantom/+page.md b/docs/src/routes/docs/[...4]wallets/[...23]phantom/+page.md similarity index 52% rename from docs/src/routes/docs/[...4]wallets/[...21]phantom/+page.md rename to docs/src/routes/docs/[...4]wallets/[...23]phantom/+page.md index fd71019fc..8ae19d8d0 100644 --- a/docs/src/routes/docs/[...4]wallets/[...21]phantom/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...23]phantom/+page.md @@ -5,10 +5,10 @@ title: Phantom # {$frontmatter.title} :::admonition type=warning -The module for connecting Phantom to web3-onboard is still in alpha testing and Phantom Eth mainnet coverage is not fully public yet but will be soon. Please visit the [Official Phantom Site](https://phantom.app/) for more details. +The module for connecting Phantom to Web3 Onboard is still in alpha testing and Phantom Eth mainnet coverage is not fully public yet but will be soon. Please visit the [Official Phantom Site](https://phantom.app/) for more details. ::: -[Web3-Onboard](https://onboard.blocknative.com/) is an open-source, framework-agnostic JavaScript library to onboard users to web3 apps. This package can be used to integrate [Phantom Wallet](https://phantom.app/) support into Web3-Onboard's "Connect Wallet" modal. With this module the Phantom option will be shown even if the extension is not installed on the users browser or used within the Phantom app. If selected the user will be taken to a download screen and prompted to create a Phantom wallet. For more information on Phantom, please refer to the [Phantom developer docs](https://docs.phantom.app/). +[Web3-Onboard](https://web3onboard.thirdweb.com/) is an open-source, framework-agnostic JavaScript library to onboard users to web3 apps. This package can be used to integrate [Phantom Wallet](https://phantom.app/) support into Web3 Onboard's "Connect Wallet" modal. With this module the Phantom option will be shown even if the extension is not installed on the users browser or used within the Phantom app. If selected the user will be taken to a download screen and prompted to create a Phantom wallet. For more information on Phantom, please refer to the [Phantom developer docs](https://docs.phantom.app/). ### Install @@ -49,3 +49,7 @@ const onboard = Onboard({ const connectedWallets = await onboard.connectWallet() console.log(connectedWallets) ``` + +## Build Environments + +For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments) \ No newline at end of file diff --git a/docs/src/routes/docs/[...4]wallets/[...22]portis/+page.md b/docs/src/routes/docs/[...4]wallets/[...24]portis/+page.md similarity index 100% rename from docs/src/routes/docs/[...4]wallets/[...22]portis/+page.md rename to docs/src/routes/docs/[...4]wallets/[...24]portis/+page.md diff --git a/docs/src/routes/docs/[...4]wallets/[...23]taho/+page.md b/docs/src/routes/docs/[...4]wallets/[...25]taho/+page.md similarity index 76% rename from docs/src/routes/docs/[...4]wallets/[...23]taho/+page.md rename to docs/src/routes/docs/[...4]wallets/[...25]taho/+page.md index 731d959bd..7632e5a68 100644 --- a/docs/src/routes/docs/[...4]wallets/[...23]taho/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...25]taho/+page.md @@ -4,7 +4,7 @@ title: Taho (previously Tally Ho) # {$frontmatter.title} -## Wallet module for connecting Taho (wallet previously named Tally Ho) +Wallet module for connecting Taho (wallet previously named Tally Ho) to Web3 Onboard. See [Taho Developer Docs](https://docs.tally.cash/tally/developers/integrating-dapps) @@ -44,3 +44,7 @@ const onboard = Onboard({ const connectedWallets = await onboard.connectWallet() console.log(connectedWallets) ``` + +## Build Environments + +For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments) \ No newline at end of file diff --git a/docs/src/routes/docs/[...4]wallets/[...24]tallyho/+page.md b/docs/src/routes/docs/[...4]wallets/[...26]tallyho/+page.md similarity index 80% rename from docs/src/routes/docs/[...4]wallets/[...24]tallyho/+page.md rename to docs/src/routes/docs/[...4]wallets/[...26]tallyho/+page.md index 3bc1b0cde..4ceead32d 100644 --- a/docs/src/routes/docs/[...4]wallets/[...24]tallyho/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...26]tallyho/+page.md @@ -5,7 +5,7 @@ title: Tally Ho # {$frontmatter.title} :::admonition type=warning -_Wallet module for connecting TallyHo to web3-onboard is now deprecated. Please use [@web3-onboard/taho](../../wallets/taho.md)_ +_Wallet module for connecting TallyHo to Web3 Onboard is now deprecated. Please use [@web3-onboard/taho](../../wallets/taho.md)_ ::: ## Wallet module for connecting TallyHo @@ -48,3 +48,7 @@ const onboard = Onboard({ const connectedWallets = await onboard.connectWallet() console.log(connectedWallets) ``` + +## Build Environments + +For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments) \ No newline at end of file diff --git a/docs/src/routes/docs/[...4]wallets/[...25]torus/+page.md b/docs/src/routes/docs/[...4]wallets/[...27]torus/+page.md similarity index 90% rename from docs/src/routes/docs/[...4]wallets/[...25]torus/+page.md rename to docs/src/routes/docs/[...4]wallets/[...27]torus/+page.md index 97d361881..c197cdfea 100644 --- a/docs/src/routes/docs/[...4]wallets/[...25]torus/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...27]torus/+page.md @@ -4,7 +4,7 @@ title: Torus # {$frontmatter.title} -## Wallet module for connecting Torus wallet to web3-onboard +Wallet module for connecting Torus wallet to Web3 Onboard ### Install @@ -89,3 +89,7 @@ config.module.rules = [ } ] ``` + +## Build Environments + +For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments) \ No newline at end of file diff --git a/docs/src/routes/docs/[...4]wallets/[...26]trezor/+page.md b/docs/src/routes/docs/[...4]wallets/[...28]trezor/+page.md similarity index 95% rename from docs/src/routes/docs/[...4]wallets/[...26]trezor/+page.md rename to docs/src/routes/docs/[...4]wallets/[...28]trezor/+page.md index 8b1e42176..ec8bafe11 100644 --- a/docs/src/routes/docs/[...4]wallets/[...26]trezor/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...28]trezor/+page.md @@ -4,7 +4,7 @@ title: Trezor # {$frontmatter.title} -Wallet module for connecting Trezor hardware wallets to web3-onboard +Wallet module for connecting Trezor hardware wallets to Web3 Onboard. ### Install diff --git a/docs/src/routes/docs/[...4]wallets/[...27]uauth/+page.md b/docs/src/routes/docs/[...4]wallets/[...29]uauth/+page.md similarity index 98% rename from docs/src/routes/docs/[...4]wallets/[...27]uauth/+page.md rename to docs/src/routes/docs/[...4]wallets/[...29]uauth/+page.md index 36639a6c8..dea3c5f3d 100644 --- a/docs/src/routes/docs/[...4]wallets/[...27]uauth/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...29]uauth/+page.md @@ -4,7 +4,7 @@ title: UAuth # {$frontmatter.title} -Wallet module for connecting Unstoppable Domains to web3-onboard +Wallet module for connecting Unstoppable Domains to Web3 Onboard. ### Install diff --git a/docs/src/routes/docs/[...4]wallets/[...28]venly/+page.md b/docs/src/routes/docs/[...4]wallets/[...30]venly/+page.md similarity index 95% rename from docs/src/routes/docs/[...4]wallets/[...28]venly/+page.md rename to docs/src/routes/docs/[...4]wallets/[...30]venly/+page.md index 934553122..ef9ef544a 100644 --- a/docs/src/routes/docs/[...4]wallets/[...28]venly/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...30]venly/+page.md @@ -1,6 +1,6 @@ # Venly -Wallet module for connecting Venly Wallet SDK to web3-onboard. Check out the [Venly Docs](https://docs.venly.io/) for more information. +Wallet module for connecting Venly Wallet SDK to Web3 Onboard. Check out the [Venly Docs](https://docs.venly.io/) for more information. ## Install diff --git a/docs/src/routes/docs/[...4]wallets/[...29]walletconnect/+page.md b/docs/src/routes/docs/[...4]wallets/[...31]walletconnect/+page.md similarity index 100% rename from docs/src/routes/docs/[...4]wallets/[...29]walletconnect/+page.md rename to docs/src/routes/docs/[...4]wallets/[...31]walletconnect/+page.md diff --git a/docs/src/routes/docs/[...4]wallets/[...30]walletlink/+page.md b/docs/src/routes/docs/[...4]wallets/[...32]walletlink/+page.md similarity index 93% rename from docs/src/routes/docs/[...4]wallets/[...30]walletlink/+page.md rename to docs/src/routes/docs/[...4]wallets/[...32]walletlink/+page.md index 009dffd73..6db33659c 100644 --- a/docs/src/routes/docs/[...4]wallets/[...30]walletlink/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...32]walletlink/+page.md @@ -5,7 +5,7 @@ title: Walletlink # {$frontmatter.title} :::admonition type=warning -_Wallet module for connecting WalletLink to web3-onboard is now deprecated. Please use [@web3-onboard/coinbase](../../wallets/coinbase.md)_ +_Wallet module for connecting WalletLink to Web3 Onboard is now deprecated. Please use [@web3-onboard/coinbase](../../wallets/coinbase.md)_ ::: ### Install diff --git a/docs/src/routes/docs/[...4]wallets/[...31]web3auth/+page.md b/docs/src/routes/docs/[...4]wallets/[...33]web3auth/+page.md similarity index 80% rename from docs/src/routes/docs/[...4]wallets/[...31]web3auth/+page.md rename to docs/src/routes/docs/[...4]wallets/[...33]web3auth/+page.md index 2373d94b6..5fae5fc46 100644 --- a/docs/src/routes/docs/[...4]wallets/[...31]web3auth/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...33]web3auth/+page.md @@ -4,7 +4,7 @@ title: Web3auth # {$frontmatter.title} -Wallet module for connecting Web3auth to web3-onboard +Wallet module for connecting Web3auth to Web3 Onboard. ## Install @@ -35,10 +35,30 @@ For troubleshooting web3Auth errors, framework, polyfill, etc please see the [of ```typescript import Onboard from '@web3-onboard/core' import web3authModule from '@web3-onboard/web3auth' +import { EthereumPrivateKeyProvider } from '@web3auth/ethereum-provider' +import { CHAIN_NAMESPACES } from '@web3auth/base' + +const privateKeyProvider = new EthereumPrivateKeyProvider({ + config: { + chainConfig: { + chainId: `0xAA36A7`, + rpcTarget: `https://rpc.sepolia.org/`, + chainNamespace: CHAIN_NAMESPACES.EIP155, + displayName: 'Sepolia', + blockExplorerUrl: 'https://sepolia.etherscan.io', + ticker: 'ETH', + tickerName: 'Ether', + logo: 'https://images.toruswallet.io/ethereum.svg' + } + } +}) +// must access via http://localhost:8080 to be whitelisted const web3auth = web3authModule({ clientId: - 'DJuUOKvmNnlzy6ruVgeWYWIMKLRyYtjYa9Y10VCeJzWZcygDlrYLyXsBQjpJ2hxlBO9dnl8t9GmAC2qOP5vnIGo' + 'BErDmyuxFPtpvM_Isiy8RHNWOWYvkAUehrgmO0rDoe5yr33ixt5s98eT_qePTyRsgpN7SVQwrEUMx7gON0jBDQI', + privateKeyProvider: privateKeyProvider, + web3AuthNetwork: 'sapphire_devnet' }) const onboard = Onboard({ @@ -56,11 +76,15 @@ console.log(connectedWallets) ## Types ```typescript +import type { Web3AuthOptions, ModalConfig } from '@web3auth/modal' +import type { CustomChainConfig, OPENLOGIN_NETWORK_TYPE } from '@web3auth/base' type Web3AuthModuleOptions = Omit & { chainConfig?: Partial & Pick - modalConfig?: Record | undefined - + /** + * Web3Auth Network to use for the session & the issued idToken + */ + web3AuthNetwork: OPENLOGIN_NETWORK_TYPE /** * @deprecated use web3Auth native Z-Index config through * uiConfig.modalZIndex diff --git a/docs/src/routes/docs/[...4]wallets/[...32]xdefi/+page.md b/docs/src/routes/docs/[...4]wallets/[...34]xdefi/+page.md similarity index 80% rename from docs/src/routes/docs/[...4]wallets/[...32]xdefi/+page.md rename to docs/src/routes/docs/[...4]wallets/[...34]xdefi/+page.md index d462c6616..cd8993ace 100644 --- a/docs/src/routes/docs/[...4]wallets/[...32]xdefi/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...34]xdefi/+page.md @@ -4,7 +4,7 @@ title: XDEFI # {$frontmatter.title} -## Wallet module for connecting XDEFI to web3-onboard +Wallet module for connecting XDEFI to Web3 Onboard. See [XDEFI Wallet Developer Docs](https://sdk.xdefi.io/) @@ -47,3 +47,7 @@ const onboard = Onboard({ const connectedWallets = await onboard.connectWallet() console.log(connectedWallets) ``` + +## Build Environments + +For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments) \ No newline at end of file diff --git a/docs/src/routes/docs/[...4]wallets/[...33]zeal/+page.md b/docs/src/routes/docs/[...4]wallets/[...35]zeal/+page.md similarity index 76% rename from docs/src/routes/docs/[...4]wallets/[...33]zeal/+page.md rename to docs/src/routes/docs/[...4]wallets/[...35]zeal/+page.md index d8cb7433b..2f4a1c1c7 100644 --- a/docs/src/routes/docs/[...4]wallets/[...33]zeal/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...35]zeal/+page.md @@ -4,11 +4,11 @@ title: Zeal # {$frontmatter.title} -## Wallet module for connecting Zeal to web3-onboard +Wallet module for connecting Zeal to Web3 Onboard. See [Zeal](https://www.zeal.app/) for details. -For any questions or issues related to integration with Zeal wallet do not hesitate to contact our builders via [hi@zeal.app](mailto:hi@zeal.app) OR ping us on twitter [@withzeal](https://twitter.com/withzeal) +For any questions or issues related to integration with Zeal wallet do not hesitate to contact our builders via [hi@zeal.app](mailto:hi@zeal.app) OR ping us on X [@withzeal](https://twitter.com/withzeal) ## Install @@ -49,3 +49,7 @@ const onboard = Onboard({ const connectedWallets = await onboard.connectWallet() console.log(connectedWallets) ``` + +## Build Environments + +For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments) \ No newline at end of file diff --git a/docs/src/routes/docs/[...4]wallets/[...36]finoaconnect/+page.md b/docs/src/routes/docs/[...4]wallets/[...36]finoaconnect/+page.md new file mode 100644 index 000000000..555dca1cf --- /dev/null +++ b/docs/src/routes/docs/[...4]wallets/[...36]finoaconnect/+page.md @@ -0,0 +1,57 @@ +--- +title: FinoaConnect +--- + +## Wallet module for connecting FinoaConnect SDK to web3-onboard + +## Install + + + + +```sh copy +yarn add @web3-onboard/core @web3-onboard/finoaconnect +``` + + + + +```sh copy +npm install @web3-onboard/core @web3-onboard/finoaconnect +``` + + + + +## Usage + +Optional initialization object +```typescript +/** Optional object provided to the initiation of the wallet connector. + * When not included, the wallet connector service connects to FinoaConnect production systems. + * @field {url} URL of the FinoaConnect backend systems to be used + * @field {labelSuffix} arbitrary string label to denote the context of the URL field */ +export interface FinoaWalletOption { + url?: string + labelSuffix?: string +} +``` + +```typescript +import Onboard from '@web3-onboard/core' +import finoaConnectModule from '@web3-onboard/finoaconnect' + +// initialize the module with options +const finoaConnect = finoaConnectModule() + +const onboard = Onboard({ + // ... other Onboard options + wallets: [ + finoaConnect + //... other wallets + ] +}) + +const connectedWallets = await onboard.connectWallet() +console.log(connectedWallets) +``` diff --git a/docs/src/routes/docs/[...4]wallets/[...36]passport/+page.md b/docs/src/routes/docs/[...4]wallets/[...36]passport/+page.md new file mode 100644 index 000000000..f22fa9f29 --- /dev/null +++ b/docs/src/routes/docs/[...4]wallets/[...36]passport/+page.md @@ -0,0 +1,69 @@ +--- +title: Passport Protocol +--- + +# {$frontmatter.title} + +Wallet module for connecting Passport Protocol to Web3 Onboard. + +See [Passport Protocol Docs](https://docs.0xpass.io/) for details. + +## Install + + + + +```sh copy +yarn add @web3-onboard/core @web3-onboard/passport @0xpass/webauthn-signer +``` + + + + +```sh copy +npm install @web3-onboard/core @web3-onboard/passport @0xpass/webauthn-signer +``` + + + + +## Usage + +```typescript +import Onboard from '@web3-onboard/core' +import passportModule, { Network } from '@web3-onboard/passport' +import { WebauthnSigner } from '@0xpass/webauthn-signer' + +// Firstly you set up your passkey / webauthn signer +// The rpId and rpName are the same as the ones you set up in your passport application scope. They follow the webauthn standard, of the following values +// rpId: the domain of where the passkey is generated +// rpName: human readable name for the domain +// You can read more on this here https://docs.0xpass.io/authentication/configuring-your-scope#scope-configuration +const webauthnSigner = new WebauthnSigner({ + rpId: 'localhost', + rpName: '0xPass' +}) + +const passport = passportModule({ + network: Network.TESTNET, + scopeId: 'd8ae4424-c1f6-42b0-ab5e-2688bdaa0ff2', // replace this with your scope id + signer: webauthnSigner, + fallbackProvider: 'https://eth-mainnet.g.alchemy.com/v2/xxx' // insert your alchemy / infura url here + // encryptionSecret: '' // encryption secret is optional, but advised to securely store values in browser storage +}) + +const onboard = Onboard({ + // ... other Onboard options + wallets: [ + passport + //... other wallets + ] +}) + +const connectedWallets = await onboard.connectWallet() +console.log(connectedWallets) +``` + +## Build Environments + +For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments) diff --git a/docs/src/routes/docs/[...4]wallets/[...37]bloom/+page.md b/docs/src/routes/docs/[...4]wallets/[...37]bloom/+page.md new file mode 100644 index 000000000..e66946d83 --- /dev/null +++ b/docs/src/routes/docs/[...4]wallets/[...37]bloom/+page.md @@ -0,0 +1,116 @@ +--- +title: Bloom +--- + +# {$frontmatter.title} + +Wallet module for connecting Bloom to web3-onboard. + +## Install + + + + +```sh copy +yarn add @web3-onboard/bloom +``` + + + + +```sh copy +npm install @web3-onboard/bloom +``` + + + + + +```typescript +type WalletConnectOptions = { + /** + * Project ID associated with [WalletConnect account](https://cloud.walletconnect.com) + */ + projectId: string + /** + * Defaults to `appMetadata.explore` that is supplied to the web3-onboard init + * Strongly recommended to provide atleast one URL as it is required by some wallets (i.e. MetaMask) + * To connect with walletconnect + */ + dappUrl?: string + /** + * List of Required Chain(s) ID for wallets to support in number format (integer or hex) + * Defaults to [1] - Ethereum + */ + requiredChains?: number[] | undefined + /** + * List of Optional Chain(s) ID for wallets to support in number format (integer or hex) + * Defaults to the chains provided within the web3-onboard init chain property + */ + optionalChains?: number[] | undefined + /** + * Additional required methods to be added to the default list of ['eth_sendTransaction', 'personal_sign'] + * Passed methods to be included along with the defaults methods - see https://docs.walletconnect.com/2.0/advanced/providers/ethereum#required-and-optional-methods + */ + additionalRequiredMethods?: string[] | undefined + /** + * Additional methods to be added to the default list of ['eth_sendTransaction', 'eth_signTransaction', 'personal_sign', 'eth_sign', 'eth_signTypedData', 'eth_signTypedData_v4'] + * Passed methods to be included along with the defaults methods - see https://docs.walletconnect.com/2.0/web/walletConnectModal/options + */ + additionalOptionalMethods?: string[] | undefined +) +``` + +## Usage + +```typescript +import Onboard from '@web3-onboard/core' +import bloomModule from '@web3-onboard/bloom' + +const wcInitOptions = { + /** + * Project ID associated with [WalletConnect account](https://cloud.walletconnect.com) + */ + projectId: 'abc123...', + /** + * Chains required to be supported by all wallets connecting to your DApp + */ + requiredChains: [1], + /** + * Chains required to be supported by all wallets connecting to your DApp + */ + optionalChains: [42161, 8453, 10, 137, 56], + /** + * Defaults to `appMetadata.explore` that is supplied to the web3-onboard init + * Strongly recommended to provide atleast one URL as it is required by some wallets (i.e. MetaMask) + * To connect with WalletConnect + */ + dappUrl: 'http://YourAwesomeDapp.com' +} + +// initialize the module with options +const bloom = bloomModule(wcInitOptions) + +// can also initialize with no options... + +const onboard = Onboard({ + // ... other Onboard options + wallets: [ + bloom + //... other wallets + ] +}) + +const connectedWallets = await onboard.connectWallet() + +// Assuming only wallet connect is connected, index 0 +// `instance` will give insight into the WalletConnect info +// such as namespaces, methods, chains, etc per wallet connected +const { instance } = connectedWallets[0] + +console.log(connectedWallets) +``` + +## Build Environments + +For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments) diff --git a/docs/src/routes/docs/[...4]wallets/[...37]okx/+page.md b/docs/src/routes/docs/[...4]wallets/[...37]okx/+page.md new file mode 100644 index 000000000..cdb9377a4 --- /dev/null +++ b/docs/src/routes/docs/[...4]wallets/[...37]okx/+page.md @@ -0,0 +1,50 @@ +--- +title: OKX Wallet +--- + +# {$frontmatter.title} + +Wallet module for connecting OKX wallet through Web3 Onboard + +### Install + + + + +```sh copy +yarn add @web3-onboard/okx +``` + + + + +```sh copy +npm install @web3-onboard/okx +``` + + + + +## Usage + +```typescript +import Onboard from '@web3-onboard/core' +import okxWallet from '@web3-onboard/okx' + +const okx = okxWallet() + +const onboard = Onboard({ + // ... other Onboard options + wallets: [ + okx + //... other wallets + ] +}) + +const connectedWallets = await onboard.connectWallet() +console.log(connectedWallets) +``` + +## Build Environments + +For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments) diff --git a/docs/src/routes/docs/[...4]wallets/[...38]keplr/+page.md b/docs/src/routes/docs/[...4]wallets/[...38]keplr/+page.md new file mode 100644 index 000000000..65817538a --- /dev/null +++ b/docs/src/routes/docs/[...4]wallets/[...38]keplr/+page.md @@ -0,0 +1,50 @@ +--- +title: Keplr Wallet +--- + +# {$frontmatter.title} + +## Wallet module for connecting Keplr Wallet through Web3 Onboard + +### Install + + + + +```sh copy +yarn add @web3-onboard/keplr +``` + + + + +```sh copy +npm install @web3-onboard/keplr +``` + + + + +## Usage + +```typescript +import Onboard from '@web3-onboard/core' +import KeplrWallet from '@web3-onboard/keplr' + +const keplr = KeplrWallet() + +const onboard = Onboard({ + // ... other Onboard options + wallets: [ + keplr + //... other wallets + ] +}) + +const connectedWallets = await onboard.connectWallet() +console.log(connectedWallets) +``` + +## Build Environments + +For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments) diff --git a/docs/src/routes/docs/[...4]wallets/[...4]blocto/+page.md b/docs/src/routes/docs/[...4]wallets/[...4]blocto/+page.md index bb598a2c1..f47413650 100644 --- a/docs/src/routes/docs/[...4]wallets/[...4]blocto/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...4]blocto/+page.md @@ -4,7 +4,7 @@ title: Blocto # {$frontmatter.title} -Wallet module for connecting Blocto SDK to web3-onboard. Check out the [Blocto Developer Docs](https://docs.blocto.app/blocto-sdk/javascript-sdk/evm-sdk) for more information. +Wallet module for connecting Blocto SDK to Web3 Onboard. Check out the [Blocto Developer Docs](https://docs.blocto.app/blocto-sdk/javascript-sdk/evm-sdk) for more information. ## Install @@ -54,7 +54,7 @@ For build env configurations and setups please see the Build Env section [here]( Node built-ins are automatically bundled in v4 so that portion is handled automatically. -**Blocto** support will require a Babel to compile from es6 if not already supported. See config for Babel and Webpack4 as follows +**Blocto** support will require a Babel to compile from es6 if not already supported. See config for Babel and Webpack4 as follows: `npm i --save-dev @babel/cli @babel/core @babel/node @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining @babel/plugin-syntax-bigint @babel/register` **AND** diff --git a/docs/src/routes/docs/[...4]wallets/[...5]capsule/+page.md b/docs/src/routes/docs/[...4]wallets/[...5]capsule/+page.md new file mode 100644 index 000000000..f165d7fe2 --- /dev/null +++ b/docs/src/routes/docs/[...4]wallets/[...5]capsule/+page.md @@ -0,0 +1,85 @@ +# Para + +## Wallet module for connecting Para Embedded Wallets to web3-onboard + +[Para](https://getpara.com/) is a signing solution that you can use to create secure embedded MPC wallets to onboard your users with just an email or social login. Para wallets are recoverable, portable, and permissioned across different crypto applications, so your users don't need to create different signers or contract accounts for every app they use + +If you'd like to use Para's full functionality within the web3onboard package without any extra integration steps, you can also [request a Para API Key](https://getpara.com/api) and use it with this package. + +To learn more, check out the [Para Developer Docs](https://docs.getpara.com/) + +### Install + + + + +```sh copy +yarn add @web3-onboard/para +``` + + + + +```sh copy +npm install @web3-onboard/para +``` + + + + +```sh copy +pnpm install @web3-onboard/para +``` + + + + +## Options + +For configuration options, check out the [Integration Guide Docs](https://docs.getpara.com/integration-guide) + +```typescript +type ParaInitOptions = { + environment: string + apiKey: string + /** @optional para object opts */ + constructorOpts?: Partial + appName: string + /** @optional para modal props */ + modalProps?: Partial +} +``` + +## Usage + +```typescript +import Onboard from '@web3-onboard/core' +import Para, { Environment } from '@getpara/react-sdk'; +import paraModule from '@web3-onboard/para' + +// initialize para +const para = new Para( + Environment.BETA, // for production, use ENVIRONMENT.PROD + "YOUR_API_KEY" + { opts } // find these at docs.getpara.com +); + +const connectedWallets = await onboard.connectWallet() +console.log(connectedWallets) +``` + +## Build env settings (webpack config) + +You may need to add the following rule to your webpack config module +in order to handle certain styling files (See the config for the +Blocknative demo app): + +```typescript +{ + test: /\.(woff(2)?|eot|ttf|otf|svg)$/, + type: 'asset/resource', + generator: { + filename: 'fonts/[name][ext][query]' + } +} +``` diff --git a/docs/src/routes/docs/[...4]wallets/[...5]coinbase/+page.md b/docs/src/routes/docs/[...4]wallets/[...5]coinbase/+page.md deleted file mode 100644 index dca3a30c1..000000000 --- a/docs/src/routes/docs/[...4]wallets/[...5]coinbase/+page.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Coinbase ---- - -# {$frontmatter.title} - -Wallet module for connecting Coinbase Wallet SDK to web3-onboard. Check out the [Coinbase Wallet Developer Docs](https://docs.cloud.coinbase.com/wallet-sdk/docs) for more information. - -## Install - - - - -```sh copy -yarn add @web3-onboard/coinbase -``` - - - - -```sh copy -npm install @web3-onboard/coinbase -``` - - - - -## Options - -```typescript -type CoinbaseWalletOptions = { - darkMode: boolean // default = false -} -``` - -## Usage - -```typescript -import Onboard from '@web3-onboard/core' -import coinbaseWalletModule from '@web3-onboard/coinbase' - -// initialize the module with options -const coinbaseWalletSdk = coinbaseWalletModule({ darkMode: true }) - -// can also initialize with no options... -// const coinbaseWalletSdk = coinbaseWalletSdk() - -const onboard = Onboard({ - // ... other Onboard options - wallets: [ - coinbaseWalletSdk - //... other wallets - ] -}) - -const connectedWallets = await onboard.connectWallet() -console.log(connectedWallets) -``` - -## Build Environments - -For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments) diff --git a/docs/src/routes/docs/[...4]wallets/[...6]coinbase/+page.md b/docs/src/routes/docs/[...4]wallets/[...6]coinbase/+page.md new file mode 100644 index 000000000..5b19de51b --- /dev/null +++ b/docs/src/routes/docs/[...4]wallets/[...6]coinbase/+page.md @@ -0,0 +1,73 @@ +--- +title: Coinbase +--- + +# {$frontmatter.title} + +Wallet module for connecting Coinbase Wallet SDK to Web3 Onboard. Check out the [Coinbase Wallet Developer Docs](https://www.smartwallet.dev/why) for more information. + +## Install + + + + +```sh copy +yarn add @web3-onboard/coinbase +``` + + + + +```sh copy +npm install @web3-onboard/coinbase +``` + + + + +## Options + +```typescript +type CoinbaseWalletOptions = { + /** @deprecated Deprecated after version 2.2.7 of @web3-onboard/coinbase Use dark theme */ + darkMode?: boolean + /** @deprecated Deprecated after version 2.2.7 of @web3-onboard/coinbase whether to connect mobile web app via WalletLink, defaults to false */ + enableMobileWalletLink?: boolean + /** @deprecated Deprecated after version 2.2.7 of @web3-onboard/coinbase whether or not to reload dapp automatically after disconnect, defaults to true */ + reloadOnDisconnect?: boolean + /** Type of Coinbase wallets to support - options : 'all' | 'smartWalletOnly' | 'eoaOnly' - Default to `all` */ + supportedWalletType?: 'all' | 'smartWalletOnly' | 'eoaOnly' +} +``` + +## Smart Wallet + +Starting at `@web3-onboard/coinbase` version 2.3.0 smart wallet support has been added. A smart wallet lives in your browser, no extensions or app installs needed. Use passkeys for signing, with enterprise-grade security without complex seed phrases. One wallet, one address, works universally across major L2s and onchain apps. [More info on Coinbase smart wallets](https://www.smartwallet.dev/why). + +## Usage + +```typescript +import Onboard from '@web3-onboard/core' +import coinbaseWalletModule from '@web3-onboard/coinbase' + +// initialize the module with options +const coinbaseWalletSdk = coinbaseWalletModule() + +// can also initialize with no options... +// const coinbaseWalletSdk = coinbaseWalletSdk() + +const onboard = Onboard({ + // ... other Onboard options + wallets: [ + coinbaseWalletSdk + //... other wallets + ] +}) + +const connectedWallets = await onboard.connectWallet() +console.log(connectedWallets) +``` + +## Build Environments + +For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments) diff --git a/docs/src/routes/docs/[...4]wallets/[...6]dcent/+page.md b/docs/src/routes/docs/[...4]wallets/[...7]dcent/+page.md similarity index 91% rename from docs/src/routes/docs/[...4]wallets/[...6]dcent/+page.md rename to docs/src/routes/docs/[...4]wallets/[...7]dcent/+page.md index 402f6db37..5221b4aef 100644 --- a/docs/src/routes/docs/[...4]wallets/[...6]dcent/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...7]dcent/+page.md @@ -4,7 +4,7 @@ title: Dcent # {$frontmatter.title} -## Wallet module for connecting D'CENT hardware wallets to web3-onboard +Wallet module for connecting D'CENT hardware wallets to Web3 Onboard. ### Install diff --git a/docs/src/routes/docs/[...4]wallets/[...7]enkrypt/+page.md b/docs/src/routes/docs/[...4]wallets/[...8]enkrypt/+page.md similarity index 92% rename from docs/src/routes/docs/[...4]wallets/[...7]enkrypt/+page.md rename to docs/src/routes/docs/[...4]wallets/[...8]enkrypt/+page.md index e53e0e57c..0f3f9428b 100644 --- a/docs/src/routes/docs/[...4]wallets/[...7]enkrypt/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...8]enkrypt/+page.md @@ -4,7 +4,7 @@ title: Enkrypt # {$frontmatter.title} -Wallet module for connecting Enkrypt wallet through web3-onboard +Wallet module for connecting Enkrypt wallet through Web3 Onboard. ### Install diff --git a/docs/src/routes/docs/[...4]wallets/[...8]fortmatic/+page.md b/docs/src/routes/docs/[...4]wallets/[...9]fortmatic/+page.md similarity index 93% rename from docs/src/routes/docs/[...4]wallets/[...8]fortmatic/+page.md rename to docs/src/routes/docs/[...4]wallets/[...9]fortmatic/+page.md index 6e951585e..f5b0a31be 100644 --- a/docs/src/routes/docs/[...4]wallets/[...8]fortmatic/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...9]fortmatic/+page.md @@ -4,7 +4,7 @@ title: Fortmatic # {$frontmatter.title} -Wallet module for connecting Fortmatic wallets to web3-onboard +Wallet module for connecting Fortmatic wallets to Web3 Onboard. ### Install diff --git a/docs/src/routes/docs/[...5]other/[...1]cede-store/+page.md b/docs/src/routes/docs/[...5]other/[...1]cede-store/+page.md index 8bfd6da81..7ed41fc57 100644 --- a/docs/src/routes/docs/[...5]other/[...1]cede-store/+page.md +++ b/docs/src/routes/docs/[...5]other/[...1]cede-store/+page.md @@ -4,7 +4,7 @@ title: cede.store # {$frontmatter.title} -CEX Wallet module for connecting cede.store through web3-onboard. Check out the [cede.store Wallet Developer Docs](https://docs.cede.store) for more information. +CEX Wallet module for connecting cede.store through Web3 Onboard. Check out the [cede.store Wallet Developer Docs](https://docs.cede.store) for more information. :::admonition type=warning Cede.store is not a traditional 1193 wallet, behavior is different in that there is no on-chain user address to interact with and there isn't a specific chain associated. @@ -94,3 +94,7 @@ await provider.request({ } }) ``` + +## Build Environments + +For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments) \ No newline at end of file diff --git a/docs/src/routes/docs/[...6]resources/[...1]resources/+page.md b/docs/src/routes/docs/[...6]resources/[...1]resources/+page.md index f138c0a28..f46be6c09 100644 --- a/docs/src/routes/docs/[...6]resources/[...1]resources/+page.md +++ b/docs/src/routes/docs/[...6]resources/[...1]resources/+page.md @@ -4,7 +4,7 @@ title: Resources # {$frontmatter.title} -Useful Videos, Blog Posts & Links for Web3-Onboard +Useful Videos, Blog Posts & Links for Web3 Onboard. ### Videos @@ -28,10 +28,6 @@ Useful Videos, Blog Posts & Links for Web3-Onboard [Curve](https://www.curve.fi) -[Mintgate](https://app.mintgate.io/login) - -[Spritz Finance](https://www.spritz.finance) - [Beefy Finance](https://app.beefy.com) [Alienworlds](https://alienworlds.io/) @@ -44,6 +40,8 @@ Useful Videos, Blog Posts & Links for Web3-Onboard [Merlin](https://merlin.valktech.io/) +[Mintgate](https://app.mintgate.io/login) + ### Other links more coming soon! diff --git a/docs/src/routes/docs/[...6]resources/[...2]troubleshooting/+page.md b/docs/src/routes/docs/[...6]resources/[...2]troubleshooting/+page.md index 5481bfe15..b25d0db56 100644 --- a/docs/src/routes/docs/[...6]resources/[...2]troubleshooting/+page.md +++ b/docs/src/routes/docs/[...6]resources/[...2]troubleshooting/+page.md @@ -6,7 +6,7 @@ title: Troubleshooting ## Where's My Wallet? (Injected/Browser Extension) -This is a common problem and as the web3 space grows as do the pains of decentralized teams trying to find solutions that there are not standards for… yet. +This is a common problem: as the web3 space grows so do the pains of decentralized teams trying to find solutions that there are not standards for… yet. ### 1. Disabled Browser Extension @@ -44,7 +44,7 @@ Disable that wallet, refresh the page and run the steps above again. ### 3. Brave browser default Web3 Wallet -Brave is a great browser and some of the best privacy, paid to view ads and even comes with a web3 wallet right off the bat! While this is all great it does come along with some challenges around web3 wallets. In the same vein as the issue noted above with conflicting wallets the built- in browser must be switched from the default wallet if you are wanting to use other browser based extension wallets such as MetaMask. +Brave is a great browser with some of the best privacy, paid to view ads, and even comes with a web3 wallet right off the bat! While this is great it does come with some challenges regarding web3 wallets. In the same vein as the issue noted above with conflicting wallets, the built-in browser must be switched from the default wallet if you are wanting to use other browser based extension wallets such as MetaMask. This can be done by: @@ -57,4 +57,4 @@ This can be done by: A desktop computer user may not see their browser-injected Ethereum-based web3 wallets if they are using an outdated browser or extension. MetaMask and other wallets may update their software frequently to address security concerns or to improve functionality. If a user is running an outdated version of their wallet extension or their browser, they may experience issues accessing their wallet. To address this issue, users should ensure that they are running the latest version of their browser and MetaMask extension. Users can check for updates by navigating to their browser's extension settings(on Chrome browser navigate to _chrome://extensions/_) and selecting “Update” at the top of the extensions window, through the extension store or updating through the wallet’s website. -If you are still having issues feel free to visit the [Blocknative web3-onboard discord channel](https://discord.gg/4qZUshUY) or tag us on twitter for further support. We are always happy to assist and love working in the wallet space! +If you are still having issues feel free to visit the [Blocknative Web3 Onboard discord channel](https://discord.gg/4qZUshUY) or tag us on twitter for further support. We are always happy to assist and love working with the wallet space! diff --git a/docs/src/routes/examples/[...1]connect-wallet/+page.md b/docs/src/routes/examples/[...1]connect-wallet/+page.md index 4185ad0b8..4d5ec47e4 100644 --- a/docs/src/routes/examples/[...1]connect-wallet/+page.md +++ b/docs/src/routes/examples/[...1]connect-wallet/+page.md @@ -1,6 +1,6 @@ --- title: Connect Wallet Example -description: Learn how to connect a wallet to your dapp with Web3-Onboard. For this example, we are going to use the injected wallets module. +description: Learn how to connect a wallet to your dapp with Web3 Onboard. For this example, we are going to use the injected wallets module. --- + + + + + + +` \ No newline at end of file diff --git a/packages/core/src/icons/index.ts b/packages/core/src/icons/index.ts index 4007e0866..e610a0498 100644 --- a/packages/core/src/icons/index.ts +++ b/packages/core/src/icons/index.ts @@ -1,11 +1,7 @@ -// bn branding -export { default as defaultSwIcon } from './subwallet-icon.js' -export { default as poweredBySubwallet } from './poweredBySubwallet' +// tw branding +export { default as defaultBnIcon } from './thirdweb-icon.js' +export { default as poweredByThirdweb } from './poweredByThirdweb.js' // chain icons - -// eslint-disable-next-line @typescript-eslint/ban-ts-comment - - export { default as ethereumIcon } from './ethereum.js' export { default as polygonIcon } from './polygon.js' export { default as binanceIcon } from './binance.js' @@ -17,19 +13,6 @@ export { default as gnosisIcon } from './gnosis.js' export { default as harmonyOneIcon } from './harmony-one.js' export { default as arbitrumIcon } from './arbitrum.js' export { default as baseIcon } from './base.js' -export { default as acalaIcon } from './acala.js' -export { default as crutsIcon } from './crust.js' -export { default as astarNetworkIcon } from './astar-network.js' -export { default as hydraxIcon } from './hydradx.js' -export { default as kusamaIcon } from './kusama.js' -export { default as phalaNetworkIcon } from './phala-network.js' -export { default as polkadotIcon } from './polkadot.js' -export { default as statemintIcon } from './statemint.js' -export { default as turingNetworkIcon } from './turing-network.js' -export { default as westendIcon } from './westend.js' -export { default as rococoIcon } from './rococo.js' -export { default as statemineIcon } from './statemine.js' - // other export { default as hourglass } from './hourglass.js' export { default as questionIcon } from './question.js' @@ -40,10 +23,5 @@ export { default as caretIcon } from './caret.js' export { default as warningIcon } from './warning.js' export { default as successIcon } from './success.js' export { default as pendingIcon } from './pending.js' -export { default as downloadIcon } from './download' -export { default as qrCodeIcon } from './qrCode' -export { default as vectorIcon } from './vector' - -// subIcon -export { default as ethereumSubIcon } from './eth.js' -export { default as dotSubIcon } from './dot.js' +export { default as degenIcon } from './degen.js' +export { default as snaxIcon } from './snax.js' diff --git a/packages/core/src/icons/poweredByThirdweb.ts b/packages/core/src/icons/poweredByThirdweb.ts new file mode 100644 index 000000000..40bf93651 --- /dev/null +++ b/packages/core/src/icons/poweredByThirdweb.ts @@ -0,0 +1,28 @@ +export default ` + + + + + + + + + + + + + + + + + + + + + + + + + + +` diff --git a/packages/core/src/icons/snax.ts b/packages/core/src/icons/snax.ts new file mode 100644 index 000000000..f00d7c947 --- /dev/null +++ b/packages/core/src/icons/snax.ts @@ -0,0 +1,6 @@ +export default ` + + + + +` diff --git a/packages/core/src/icons/thirdweb-icon.ts b/packages/core/src/icons/thirdweb-icon.ts new file mode 100644 index 000000000..078eda040 --- /dev/null +++ b/packages/core/src/icons/thirdweb-icon.ts @@ -0,0 +1,33 @@ +export default ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +` diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 4b776a694..e318163e1 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -2,7 +2,7 @@ import connectWallet from './connect.js' import disconnectWallet from './disconnect.js' import setChain from './chain.js' import { state } from './store/index.js' -import { qrModalConnect$, reset$, wallets$ } from './streams.js' +import { reset$ } from './streams.js' import initI18N from './i18n/index.js' import App from './views/Index.svelte' import type { @@ -15,12 +15,11 @@ import { APP_INITIAL_STATE, STORAGE_KEYS } from './constants.js' import { configuration, updateConfiguration } from './configuration.js' import updateBalances from './update-balances.js' import { chainIdToHex, getLocalStore, setLocalStore } from './utils.js' -import { preflightNotifications } from './preflight-notifications.js' -import type { WalletState } from './types.js'; import { + validateInitOptions, validateNotify, - // validateNotifyOptions + validateNotifyOptions } from './validation.js' import { @@ -33,13 +32,11 @@ import { setWalletModules, updateConnectModal, updateTheme, - updateAppMetadata + updateAppMetadata, + updateChain } from './store/actions.js' -import type { PatchedEIP1193Provider } from '@subwallet-connect/transaction-preview' -import { getBlocknativeSdk } from './services.js' -import { WalletConnectModal } from '@walletconnect/modal'; - - +import type { WagmiModuleAPI } from '@web3-onboard/wagmi' +import { wagmiProviderMethods } from './provider' const API = { connectWallet, @@ -53,7 +50,6 @@ const API = { setLocale, updateNotify, customNotification, - preflightNotifications, updateBalances, updateAccountCenter, setPrimaryWallet, @@ -61,8 +57,7 @@ const API = { updateAppMetadata } } -}; - +} export type OnboardAPI = typeof API @@ -78,21 +73,22 @@ export type { Notification, Notify, UpdateNotification, - PreflightNotificationsOptions, - Theme + Theme, + WagmiConfig } from './types.js' -export type { EIP1193Provider } from '@subwallet-connect/common' +export type { EIP1193Provider } from '@web3-onboard/common' function init(options: InitOptions): OnboardAPI { if (typeof window === 'undefined') return API - // if (options) { - // const error = validateInitOptions(options) - // - // if (error) { - // throw error - // } - // } + + if (options) { + const error = validateInitOptions(options) + + if (error) { + throw error + } + } const { wallets, @@ -100,17 +96,15 @@ function init(options: InitOptions): OnboardAPI { appMetadata, i18n, accountCenter, - apiKey, notify, gas, connect, containerElements, transactionPreview, - theme = 'default', + theme, disableFontDownload, unstoppableResolution, - chainsPolkadot, - wcConfigOption + wagmi } = options if (containerElements) updateConfiguration({ containerElements }) @@ -124,28 +118,18 @@ function init(options: InitOptions): OnboardAPI { } initI18N(i18n) - addChains(chainIdToHex(chains).concat(chainsPolkadot)) - - if(wcConfigOption?.projectId){ - const modalWC = new WalletConnectModal( - {...wcConfigOption}); - - qrModalConnect$.next({ - isOpen: false, - modal: modalWC - }) - } - - + addChains(chainIdToHex(chains)) if (typeof connect !== 'undefined') { - updateConnectModal(connect) + updateConnectModal( + connect as ConnectModalOptions | Partial + ) } // update accountCenter if (typeof accountCenter !== 'undefined') { let accountCenterUpdate const { hideTransactionProtectionBtn, transactionProtectionInfoLink } = - accountCenter + accountCenter if (device.type === 'mobile') { accountCenterUpdate = { @@ -162,37 +146,55 @@ function init(options: InitOptions): OnboardAPI { ...accountCenter.desktop } } - updateAccountCenter(accountCenterUpdate) + if (typeof accountCenterUpdate !== 'undefined') { + updateAccountCenter(accountCenterUpdate) + } + } + + let wagmiApi: WagmiModuleAPI | undefined + if (typeof wagmi !== 'undefined') { + wagmiApi = wagmi({ + disconnect: disconnectWallet, + updateChain, + ...wagmiProviderMethods() + }) } // update notify if (typeof notify !== 'undefined') { + console.warn( + `Support for notifications on transaction state changes have been deprecated. Custom notifications can still be sent ot the user.` + ) if ('desktop' in notify || 'mobile' in notify) { - // const error = validateNotifyOptions(notify) - // - // if (error) { - // throw error - // } + const error = validateNotifyOptions(notify) + + if (error) { + throw error + } if ( - (!notify.desktop || (notify.desktop && !notify.desktop.position)) && - accountCenter && - accountCenter.desktop && - accountCenter.desktop.position + notify && + notify.desktop && + notify.desktop.position && + accountCenter && + accountCenter.desktop && + accountCenter.desktop.position ) { notify.desktop.position = accountCenter.desktop.position } if ( - (!notify.mobile || (notify.mobile && !notify.mobile.position)) && - accountCenter && - accountCenter.mobile && - accountCenter.mobile.position + notify && + notify.mobile && + notify.mobile.position && + accountCenter && + accountCenter.mobile && + accountCenter.mobile.position ) { notify.mobile.position = accountCenter.mobile.position } - let notifyUpdate: Partial + let notifyUpdate: Partial = {} if (device.type === 'mobile' && notify.mobile) { notifyUpdate = { @@ -227,67 +229,60 @@ function init(options: InitOptions): OnboardAPI { updateNotify(notifyUpdate) } - const app = svelteInstance || mountApp(theme, disableFontDownload) + const app = + svelteInstance || mountApp(theme || {}, disableFontDownload || false) updateConfiguration({ svelteInstance: app, - apiKey, initialWalletInit: wallets, gas, - transactionPreview, - unstoppableResolution + unstoppableResolution, + wagmi: wagmiApi }) - appMetadata && updateAppMetadata(appMetadata) - - - if (apiKey && transactionPreview) { - const getBnSDK = async () => { - transactionPreview.init({ - containerElement: '#w3o-transaction-preview-container', - sdk: await getBlocknativeSdk(), - apiKey - }) - wallets$.subscribe(wallets => { - wallets.forEach(({ provider }) => { - transactionPreview.patchProvider(provider as PatchedEIP1193Provider) - }) - }) - } - getBnSDK() + if (transactionPreview) { + console.error( + 'Transaction Preview support has been removed and is no longer supported within Web3-Onboard' + ) } theme && updateTheme(theme) // handle auto connection of last wallet if ( - connect && - (connect.autoConnectLastWallet || connect.autoConnectAllPreviousWallet) + connect && + (connect.autoConnectLastWallet || connect.autoConnectAllPreviousWallet) ) { const lastConnectedWallets = getLocalStore( - STORAGE_KEYS.LAST_CONNECTED_WALLET + STORAGE_KEYS.LAST_CONNECTED_WALLET ) - const lastConnectedWalletsParsed = JSON.parse(lastConnectedWallets) - try { + const lastConnectedWalletsParsed = JSON.parse( + lastConnectedWallets as string + ) if ( - lastConnectedWalletsParsed && - Array.isArray(lastConnectedWalletsParsed) && - lastConnectedWalletsParsed.length + lastConnectedWalletsParsed && + Array.isArray(lastConnectedWalletsParsed) && + lastConnectedWalletsParsed.length ) { connectAllPreviousWallets(lastConnectedWalletsParsed, connect) } + if ( + lastConnectedWalletsParsed && + typeof lastConnectedWalletsParsed === 'string' + ) { + connectAllPreviousWallets([lastConnectedWalletsParsed], connect) + } } catch (err) { // Handle for legacy single wallet approach // Above try will throw syntax error is local storage is not json if (err instanceof SyntaxError && lastConnectedWallets) { API.connectWallet({ autoSelect: { - label: lastConnectedWalletsParsed.label, - disableModals: true, - type: lastConnectedWalletsParsed.type + label: lastConnectedWallets, + disableModals: true } }) } @@ -298,16 +293,16 @@ function init(options: InitOptions): OnboardAPI { } const fontFamilyExternallyDefined = ( - theme: Theme, - disableFontDownload: boolean + theme: Theme, + disableFontDownload: boolean ): boolean => { if (disableFontDownload) return true if ( - document.body && - (getComputedStyle(document.body).getPropertyValue( - '--onboard-font-family-normal' - ) || - getComputedStyle(document.body).getPropertyValue('--w3o-font-family')) + document.body && + (getComputedStyle(document.body).getPropertyValue( + '--onboard-font-family-normal' + ) || + getComputedStyle(document.body).getPropertyValue('--w3o-font-family')) ) return true if (!theme) return false @@ -316,7 +311,7 @@ const fontFamilyExternallyDefined = ( } const importInterFont = async (): Promise => { - const { InterVar } = await import('@subwallet-connect/common') + const { InterVar } = await import('@web3-onboard/common') // Add Fonts to main page const styleEl = document.createElement('style') @@ -328,46 +323,35 @@ const importInterFont = async (): Promise => { } const connectAllPreviousWallets = async ( - lastConnectedWallets: Array>, - connect: ConnectModalOptions + lastConnectedWallets: Array, + connect: ConnectModalOptions ): Promise => { - const activeWalletsList: Pick[] = [] + const activeWalletsList = [] const parsedWalletList = lastConnectedWallets + if (!connect.autoConnectAllPreviousWallet) { API.connectWallet({ - autoSelect: { - label: parsedWalletList[0].label, - type: parsedWalletList[0].type, - disableModals: true - } + autoSelect: { label: parsedWalletList[0], disableModals: true } }) activeWalletsList.push(parsedWalletList[0]) } else { // Loop in reverse to maintain wallet order - await Promise.all(parsedWalletList.map(async (wallet) => { - for (let i = parsedWalletList.length; i--; ) { - const walletConnectionPromise = await API.connectWallet({ - autoSelect: { - label: parsedWalletList[i].label, - type: parsedWalletList[i].type, - disableModals: true - } - }) - // Update localStorage list for available wallets - if (walletConnectionPromise.some(r => - r.label === parsedWalletList[i].label - && r.type === parsedWalletList[i].type) - ) { - activeWalletsList.unshift(parsedWalletList[i]) - } + for (let i = parsedWalletList.length; i--; ) { + const walletConnectionPromise = await API.connectWallet({ + autoSelect: { label: parsedWalletList[i], disableModals: true } + }) + // Update localStorage list for available wallets + if (walletConnectionPromise.some(r => r.label === parsedWalletList[i])) { + activeWalletsList.unshift(parsedWalletList[i]) } - })) + } + } setLocalStore( - STORAGE_KEYS.LAST_CONNECTED_WALLET, - JSON.stringify(activeWalletsList) + STORAGE_KEYS.LAST_CONNECTED_WALLET, + JSON.stringify(activeWalletsList) ) -}} +} function mountApp(theme: Theme, disableFontDownload: boolean) { class Onboard extends HTMLElement { @@ -398,36 +382,33 @@ function mountApp(theme: Theme, disableFontDownload: boolean) { --white: white; --black: black; --primary-1: #2F80ED; - --primary-2: #004BFF; - --primary-3: #2565e6; - --primary-100: #a0c7fa; - --primary-200: #76aaf7; - --primary-300: #4e8af2; - --primary-400: #2565e6; - --primary-500: #004BFF; - --primary-600: #0031a6; - --primary-700: #00174d; + --primary-100: #eff1fc; + --primary-200: #d0d4f7; + --primary-300: #b1b8f2; + --primary-400: #929bed; + --primary-500: #6370e5; + --primary-600: #454ea0; + --primary-700: #323873; --gray-100: #ebebed; --gray-200: #c2c4c9; --gray-300: #999ca5; - --gray-400: #797979; - --gray-500: #363636; + --gray-400: #707481; + --gray-500: #33394b; --gray-600: #242835; --gray-700: #1a1d26; - --gray-800: #1A1A1A; --success-100: #d1fae3; --success-200: #baf7d5; --success-300: #a4f4c6; --success-400: #8df2b8; - --success-500: #4CEAAC; + --success-500: #5aec99; --success-600: #18ce66; --success-700: #129b4d; --danger-100: #ffe5e6; --danger-200: #ffcccc; - --danger-400: #ff8080; --danger-300: #ffb3b3; - --danger-500: #d5413b; - --danger-600: #BF1616; + --danger-400: #ff8080; + --danger-500: #ff4f4f; + --danger-600: #cc0000; --danger-700: #660000; --warning-100: #ffefcc; --warning-200: #ffe7b3; @@ -436,10 +417,10 @@ function mountApp(theme: Theme, disableFontDownload: boolean) { --warning-500: #ffaf00; --warning-600: #cc8c00; --warning-700: #664600; - --warning-800: #D9C500; /* FONTS */ - --font-family-normal: var(--w3o-font-family, 'Plus Jakarta Sans', Inter, sans-serif); + --font-family-normal: var(--w3o-font-family, Inter, sans-serif); + --font-size-1: 3rem; --font-size-2: 2.25rem; --font-size-3: 1.5rem; @@ -488,24 +469,33 @@ function mountApp(theme: Theme, disableFontDownload: boolean) { } ` - const connectModalContEl = configuration.containerElements.connectModal + let connectModalContEl + if ( + configuration && + configuration.containerElements && + configuration.containerElements.connectModal + ) { + connectModalContEl = configuration.containerElements.connectModal + } const containerElementQuery = - connectModalContEl || state.get().accountCenter.containerElement || 'body' + connectModalContEl || state.get().accountCenter.containerElement || 'body' const containerElement = document.querySelector(containerElementQuery) if (!containerElement) { throw new Error( - `Element with query ${containerElementQuery} does not exist.` + `Element with query ${containerElementQuery} does not exist.` ) } containerElement.appendChild(onboard) - return new App({ + const app = new App({ target }) + + return app } export default init diff --git a/packages/core/src/notify.ts b/packages/core/src/notify.ts index 3fee14217..cc37f684a 100644 --- a/packages/core/src/notify.ts +++ b/packages/core/src/notify.ts @@ -1,163 +1,3 @@ -import BigNumber from 'bignumber.js' -import { get } from 'svelte/store' -import { _ } from 'svelte-i18n' -import defaultCopy from './i18n/en.json' -import type { EthereumTransactionData } from 'bnc-sdk' - -import type { - CustomNotification, - Notification, - NotificationType -} from './types.js' - -import { validateTransactionHandlerReturn } from './validation.js' -import { state } from './store/index.js' -import { addNotification } from './store/actions.js' -import updateBalances from './update-balances.js' -import { updateTransaction } from './streams.js' - -export function handleTransactionUpdates( - transaction: EthereumTransactionData -): void { - const customized = state.get().notify.transactionHandler(transaction) - const invalid = validateTransactionHandlerReturn(customized) - - if (invalid) { - throw invalid - } - - if (transaction.eventCode === 'txConfirmed') { - updateBalances([transaction.watchedAddress, transaction.counterparty]) - } - - const notification = transactionEventToNotification(transaction, customized) - - addNotification(notification) - updateTransaction(transaction) -} - -export function transactionEventToNotification( - transaction: EthereumTransactionData, - customization: CustomNotification | boolean | void -): Notification { - const { - id, - hash, - startTime, - eventCode, - direction, - counterparty, - value, - asset, - network - } = transaction - - const type: NotificationType = eventToType(eventCode) - - const key = `${id || hash}-${ - (typeof customization === 'object' && customization.eventCode) || eventCode - }` - - const counterpartyShortened: string | undefined = - counterparty && - counterparty.substring(0, 4) + - '...' + - counterparty.substring(counterparty.length - 4) - - const formattedValue = new BigNumber(value || 0) - .div(new BigNumber('1000000000000000000')) - .toString(10) - - const formatterOptions = - counterparty && value - ? { - messageId: `notify.watched['${eventCode}']`, - values: { - verb: - eventCode === 'txConfirmed' - ? direction === 'incoming' - ? 'received' - : 'sent' - : direction === 'incoming' - ? 'receiving' - : 'sending', - formattedValue, - preposition: direction === 'incoming' ? 'from' : 'to', - counterpartyShortened, - asset - } - } - : { - messageId: `notify.transaction['${eventCode}']`, - values: { formattedValue, asset } - } - - const formatter = get(_) - - const notificationDefaultMessages = defaultCopy.notify - - const typeKey: keyof typeof notificationDefaultMessages = counterparty - ? 'watched' - : 'transaction' - - const notificationMessageType = notificationDefaultMessages[typeKey] - - const defaultMessage = - notificationMessageType[eventCode as keyof typeof notificationMessageType] - - const message = formatter(formatterOptions.messageId, { - values: formatterOptions.values, - default: defaultMessage - }) - - let notification = { - id: id || hash, - type, - key, - network, - startTime: startTime || Date.now(), - eventCode, - message, - autoDismiss: typeToDismissTimeout( - (typeof customization === 'object' && customization.type) || type - ) - } - - if (typeof customization === 'object') { - notification = { ...notification, ...customization } - } - - return notification -} - -export function eventToType(eventCode: string | undefined): NotificationType { - switch (eventCode) { - case 'txSent': - case 'txPool': - return 'pending' - case 'txSpeedUp': - case 'txCancel': - case 'txRequest': - case 'txRepeat': - case 'txAwaitingApproval': - case 'txConfirmReminder': - case 'txStuck': - return 'hint' - case 'txError': - case 'txSendFail': - case 'txFailed': - case 'txDropped': - case 'nsfFail': - case 'txUnderpriced': - case 'txErrorTransaction': - return 'error' - case 'txConfirmed': - return 'success' - default: - return 'hint' - } -} - export function typeToDismissTimeout(type: string): number { switch (type) { case 'success': diff --git a/packages/core/src/preflight-notifications.ts b/packages/core/src/preflight-notifications.ts deleted file mode 100644 index b2f9eb712..000000000 --- a/packages/core/src/preflight-notifications.ts +++ /dev/null @@ -1,258 +0,0 @@ -import BigNumber from 'bignumber.js' -import { nanoid } from 'nanoid' -import defaultCopy from './i18n/en.json' -import type { Network } from 'bnc-sdk' - -import type { Notification, PreflightNotificationsOptions } from './types.js' -import { addNotification, removeNotification } from './store/actions.js' -import { state } from './store/index.js' -import { eventToType } from './notify.js' -import { networkToChainId } from './utils.js' -import { validatePreflightNotifications } from './validation.js' - -let notificationsArr: Notification[] -state.select('notifications').subscribe(notifications => { - notificationsArr = notifications -}) - -export async function preflightNotifications( - options: PreflightNotificationsOptions -): Promise { - const invalid = validatePreflightNotifications(options) - - if (invalid) { - throw invalid - } - - const { - sendTransaction, - estimateGas, - gasPrice, - balance, - txDetails, - txApproveReminderTimeout - } = options - - // Check for reminder timeout and confirm its greater than 3 seconds - const reminderTimeout: number = - txApproveReminderTimeout && txApproveReminderTimeout > 3000 - ? txApproveReminderTimeout - : 15000 - - // if `balance` or `estimateGas` or `gasPrice` is not provided, - // then sufficient funds check is disabled - // if `txDetails` is not provided, - // then duplicate transaction check is disabled - // if dev doesn't want notify to initiate the transaction - // and `sendTransaction` is not provided, then transaction - // rejected notification is disabled - // to disable hints for `txAwaitingApproval`, `txConfirmReminder` - // or any other notification, then return false from listener functions - - const [gas, price] = await gasEstimates(estimateGas, gasPrice) - const id = createId(nanoid()) - const value = new BigNumber((txDetails && txDetails.value) || 0) - - // check sufficient balance if required parameters are available - if (balance && gas && price) { - const transactionCost = gas.times(price).plus(value) - console.log(gas, price, balance); - - // if transaction cost is greater than the current balance - if (transactionCost.gt(new BigNumber(balance))) { - const eventCode = 'nsfFail' - - addNotification(buildNotification(eventCode, id, '')) - } - } - - // check previous transactions awaiting approval - const txRequested = notificationsArr.find(tx => tx.eventCode === 'txRequest') - - if (txRequested) { - const eventCode = 'txAwaitingApproval' - - const newNotification = buildNotification(eventCode, txRequested.id, '') - addNotification(newNotification) - } - - // confirm reminder timeout defaults to 20 seconds - setTimeout(() => { - const awaitingApproval = notificationsArr.find( - tx => tx.id === id && tx.eventCode === 'txRequest' - ) - - if (awaitingApproval) { - const eventCode = 'txConfirmReminder' - - const newNotification = buildNotification(eventCode, awaitingApproval.id, '') - addNotification(newNotification) - } - }, reminderTimeout) - - - const eventCode = 'txRequest' - addNotification(buildNotification(eventCode, id, '')) - const resultFn = (hash_: string) => { - if (hash_) { - hash = hash_; - console.log(hash_); - addNotification(buildNotification('txConfirmed', id, '')); - setTimeout(()=>{ - removeNotification(id) - }, 1500) - return hash; - } - } - - // if not provided with sendTransaction function, - // resolve with transaction hash(or void) so dev can initiate transaction - if (!sendTransaction) { - return id - } - // get result and handle errors - let hash - try { - await sendTransaction(resultFn); - } catch (error) { - type CatchError = { - message: string - stack: string - } - const { eventCode, errorMsg } = extractMessageFromError(error as CatchError) - - addNotification(buildNotification(eventCode, id, errorMsg)) - - console.log(errorMsg) - - setTimeout(()=>{ - removeNotification(id) - }, 1500) - - return - } - - // Remove preflight notification if a resolves to hash - // and let the SDK take over - - - return hash; -} - -const buildNotification = ( - eventCode: string, - id: string, - errorMessage: string -): Notification => { - return { - eventCode, - type: eventToType(eventCode), - id, - key: createKey(id, eventCode), - message: createMessageText(eventCode) || errorMessage, - startTime: Date.now(), - network: Object.keys(networkToChainId).find( - key => networkToChainId[key] === state.get().wallets[0].chains[0].id - ) as Network, - autoDismiss: 0 - } -} - -const createKey = (id: string, eventCode: string): string => { - return `${id}-${eventCode}` -} - -const createId = (id: string): string => { - return `${id}-preflight` -} - -const createMessageText = (eventCode: string): string => { - const notificationDefaultMessages = defaultCopy.notify - - const notificationMessageType = notificationDefaultMessages.transaction - - return notificationDefaultMessages.transaction[ - eventCode as keyof typeof notificationMessageType - ] -} - -export function extractMessageFromError(error: { - message: string - stack: string -}): { eventCode: string; errorMsg: string } { - - - if (!error.stack || !error.message) { - return { - eventCode: 'txError', - errorMsg: 'An unknown error occured' - } - } - - const message = error.stack || error.message - - if (message.includes('User denied transaction signature')) { - return { - eventCode: 'txSendFail', - errorMsg: 'User denied transaction signature' - } - } - - if(message.includes('Rejected by user')){ - return { - eventCode: 'txSendFail', - errorMsg: 'Rejected by user' - } - } - - if (message.includes('transaction underpriced')) { - return { - eventCode: 'txUnderpriced', - errorMsg: 'Transaction is under priced' - } - } - - return { - eventCode: 'txErrorTransaction', - errorMsg: message - } -} - -const gasEstimates = async ( - gasFunc: () => Promise, - gasPriceFunc: () => Promise -) => { - if (!gasFunc || !gasPriceFunc) { - return Promise.resolve([]) - } - - const gasProm = gasFunc() - if (!gasProm.then) { - throw new Error('The `estimateGas` function must return a Promise') - } - - const gasPriceProm = gasPriceFunc() - if (!gasPriceProm.then) { - throw new Error('The `gasPrice` function must return a Promise') - } - - return Promise.all([gasProm, gasPriceProm]) - .then(([gasResult, gasPriceResult]) => { - if (typeof gasResult !== 'string') { - throw new Error( - `The Promise returned from calling 'estimateGas' must resolve with a value of type 'string'. Received a value of: ${gasResult} with a type: ${typeof gasResult}` - ) - } - - if (typeof gasPriceResult !== 'string') { - throw new Error( - `The Promise returned from calling 'gasPrice' must resolve with a value of type 'string'. Received a value of: ${gasPriceResult} with a type: ${typeof gasPriceResult}` - ) - } - - return [new BigNumber(gasResult), new BigNumber(gasPriceResult)] - }) - .catch(error => { - throw new Error(`There was an error getting gas estimates: ${error}`) - }) -} diff --git a/packages/core/src/provider.ts b/packages/core/src/provider.ts index 64e5f48d2..6ee34f2b1 100644 --- a/packages/core/src/provider.ts +++ b/packages/core/src/provider.ts @@ -1,27 +1,24 @@ -import { BehaviorSubject, fromEventPattern, Observable } from 'rxjs' +import { fromEventPattern, type Observable } from 'rxjs' import { filter, takeUntil, take, share, switchMap } from 'rxjs/operators' import partition from 'lodash.partition' -import { providers, utils } from 'ethers' -import type { - EthSignMessageRequest, - PersonalSignMessageRequest, - EIP712Request_v4, - EIP712Request, - SubstrateProvider -} from '@subwallet-connect/common' -import { weiToEth } from '@subwallet-connect/common' -import { disconnectWallet$, qrModalConnect$, uriConnect$ } from './streams.js' +import { isAddress, weiHexToEth } from '@web3-onboard/common' +import { disconnectWallet$ } from './streams.js' import { updateAccount, updateWallet } from './store/actions.js' -import { validEnsChain } from './utils.js'; -import disconnect from './disconnect.js'; -import { state } from './store/index.js'; -import { getBNMulitChainSdk } from './services.js' +import { chainIdToViemENSImport, validEnsChain } from './utils.js' +import disconnect from './disconnect.js' +import { state } from './store/index.js' import { configuration } from './configuration.js' -import { getBalanceSubstrate } from './utils.js'; -import BN from 'bn.js'; - +import { updateSecondaryTokens } from './update-balances' +import type { Uns } from '@web3-onboard/unstoppable-resolution' +import { + type PublicClient, + type GetEnsTextReturnType, + isHex, + toHex +} from 'viem' import type { + Address, ChainId, EIP1102Request, EIP1193Provider, @@ -30,49 +27,47 @@ import type { AccountsListener, ChainListener, SelectAccountsRequest -} from '@subwallet-connect/common' +} from '@web3-onboard/common' import type { Account, - Address, Balances, - Ens, ModalQrConnect, WalletConnectState, + Ens, WalletPermission, WalletState } from './types.js' -import type { Uns } from '@subwallet-connect/unstoppable-resolution' -import { updateSecondaryTokens } from './update-balances' - - -export const ethersProviders: { - [key: string]: providers.StaticJsonRpcProvider +export const viemProviders: { + [key: string]: PublicClient } = {} -export function getProvider(chain: Chain): providers.StaticJsonRpcProvider { +async function getProvider(chain: Chain): Promise { if (!chain) return null - if (!ethersProviders[chain.rpcUrl]) { - ethersProviders[chain.rpcUrl] = new providers.StaticJsonRpcProvider( - chain.providerConnectionInfo && chain.providerConnectionInfo.url - ? chain.providerConnectionInfo - : chain.rpcUrl - ) + if (!viemProviders[chain.rpcUrl as string]) { + const viemChain = await chainIdToViemENSImport(chain.id) + if (!viemChain) return null + + const { createPublicClient, http } = await import('viem') + const publicProvider = createPublicClient({ + chain: viemChain, + transport: http() + }) + viemProviders[chain.rpcUrl as string] = publicProvider as PublicClient } - return ethersProviders[chain.rpcUrl] + return viemProviders[chain.rpcUrl as string] } -export async function requestAccounts( - provider: EIP1193Provider -): Promise { +export function requestAccounts( + provider: EIP1193Provider +): Promise { const args = { method: 'eth_requestAccounts' } as EIP1102Request - const address = await provider.request(args) - return ({ address }) + return provider.request(args) } export function selectAccounts( - provider: EIP1193Provider + provider: EIP1193Provider ): Promise { const args = { method: 'eth_selectAccounts' } as SelectAccountsRequest return provider.request(args) @@ -82,15 +77,11 @@ export function getChainId(provider: EIP1193Provider): Promise { return provider.request({ method: 'eth_chainId' }) as Promise } - - - export function listenAccountsChanged(args: { - provider: EIP1193Provider | SubstrateProvider - disconnected$: Observable>, - type : 'evm'|'substrate' + provider: EIP1193Provider + disconnected$: Observable }): Observable { - const { provider, disconnected$, type } = args + const { provider, disconnected$ } = args const addHandler = (handler: AccountsListener) => { provider.on('accountsChanged', handler) @@ -101,318 +92,171 @@ export function listenAccountsChanged(args: { } return fromEventPattern(addHandler, removeHandler).pipe( - takeUntil(disconnected$) + takeUntil(disconnected$) ) } export function listenChainChanged(args: { - provider: EIP1193Provider | SubstrateProvider - disconnected$: Observable> - type : 'evm' | 'substrate' + provider: EIP1193Provider + disconnected$: Observable }): Observable { - const { provider, disconnected$, type } = args + const { provider, disconnected$ } = args const addHandler = (handler: ChainListener) => { provider.on('chainChanged', handler) } + const removeHandler = (handler: ChainListener) => { provider.removeListener('chainChanged', handler) } return fromEventPattern(addHandler, removeHandler).pipe( - takeUntil(disconnected$) + takeUntil(disconnected$) ) } -export function listenUriChange(args: { - provider: EIP1193Provider | SubstrateProvider - uriConnect$: BehaviorSubject -}): () => void { - const { provider, uriConnect$ } = args - - const handler = (uri : string) => { - uriConnect$.next(uri) - } - - provider.on('uriChanged', handler); - - - const removeHandler = () => { - provider.removeListener('uriChanged', handler) - } - - return removeHandler - -} - -export function listenStateModal(args: { - provider: EIP1193Provider | SubstrateProvider - qrModalConnect$: BehaviorSubject -}) : () => void { - const { provider, qrModalConnect$ } = args; - - const handler = (state : boolean)=>{ - qrModalConnect$.next({ ...qrModalConnect$.value, isOpen : state }) - }; - - - provider.on('qrModalState', handler) - - const removeHandler = () => { - provider.removeListener('qrModalState', handler) - } - - return removeHandler -} - - export function trackWallet( - provider: EIP1193Provider | SubstrateProvider, - label: WalletState['label'], - type : 'evm' | 'substrate' + provider: EIP1193Provider, + label: WalletState['label'] ): void { - const disconnected$ = disconnectWallet$.pipe( - filter(wallet => wallet.label === label && wallet.type === type), - take(1) + filter(wallet => wallet === label), + take(1) ) const accountsChanged$ = listenAccountsChanged({ - type, provider, disconnected$ }).pipe(share()) // when account changed, set it to first account and subscribe to events - accountsChanged$.subscribe(async (addressList_) => { - - if (!addressList_ && addressList_.length <= 0) { - disconnect({ label, type }) - return - } + accountsChanged$.subscribe(async ([address]) => { // sync accounts with internal state - // in the case of an account has been manually disconnected; - const addressList = addressList_ .filter((a) => { - return type === 'evm' ? a.toLowerCase().startsWith('0x') : !a.toLowerCase().startsWith('0x') - }) + // in the case of an account has been manually disconnected try { - await syncWalletConnectedAccounts(label, type) + await syncWalletConnectedAccounts(label) } catch (error) { console.warn( - 'Web3Onboard: Error whilst trying to sync connected accounts:', - error + 'Web3Onboard: Error whilst trying to sync connected accounts:', + error ) } // no address, then no account connected, so disconnect wallet // this could happen if user locks wallet, // or if disconnects app from wallet - if (!addressList && addressList.length <= 0) { - await disconnect({ label, type }) - return; + if (!address) { + disconnect({ label }) + return } const { wallets } = state.get() - const walletFinded = wallets - .find(wallet => wallet.label === label && wallet.type === type) - - if(!walletFinded) { - await disconnect({ label, type }); - return; - } - const { accounts } = walletFinded; + const wallet = wallets.find(wallet => wallet.label === label) + const accounts = wallet ? wallet.accounts : [] - const [existingAccounts] = partition( - accounts, - account => addressList.find( - ( address ) => address.includes(account.address) - ) + const [[existingAccount], restAccounts] = partition( + accounts, + account => account.address === address ) - const newAccounts = addressList.filter( - (address) => - !existingAccounts.find((account) => address.includes(account.address) - )) - // update accounts without ens/uns and balance first - updateWallet(label, type, { - accounts: existingAccounts.concat(newAccounts.map((address) => { - let uns : Uns | null = null; - let address_ = null; - const inf = address.split('_'); - (inf.length === 2) && ( uns = { name: inf[1] }); - address_ = inf[0]; - - return ({ address : address_, ens: null, uns, balance: null }) - })) + updateWallet(label, { + accounts: [ + existingAccount || { + address: address as Address, + ens: null, + uns: null, + balance: null + }, + ...restAccounts + ] }) - - // if not existing account and notifications, - // then subscribe to transaction events - if (state.get().notify.enabled - && !( existingAccounts && existingAccounts.length > 0 )) { - const sdk = await getBNMulitChainSdk() - - if (sdk) { - const wallet = state - .get() - .wallets.find(wallet => - wallet.label === label && wallet.type === type) - try { - addressList.forEach((address) => { - sdk.subscribe({ - id: address, - chainId: wallet.chains[0].id, - type: 'account' - }) - }) - - } catch (error) { - // unsupported network for transaction events - } - } - } }) // also when accounts change, update Balance and ENS/UNS accountsChanged$ - .pipe( - switchMap(async (addressList_) => { - - if (!addressList_ && addressList_.length <= 0) { - return - } - + .pipe( + switchMap(async ([address]) => { + if (!address) return - const addressList = addressList_ .filter((a) => { - return type === 'evm' ? a.toLowerCase().startsWith('0x') : !a.toLowerCase().startsWith('0x') - }) + const { wallets, chains } = state.get() - if (!addressList && addressList.length <= 0) { - return - } + const primaryWallet = wallets.find(wallet => wallet.label === label) + if (!primaryWallet) return // Add null check for primaryWallet - const { wallets, chains } = state.get() + const { chains: walletChains, accounts } = primaryWallet - const primaryWallet = wallets.find( - wallet => wallet.label === label && wallet.type === type) - const { chains: walletChains, accounts } = primaryWallet + const [connectedWalletChain] = walletChains - const [connectedWalletChain] = walletChains - - const chain = chains.find( - ({ namespace, id }) => - namespace === 'evm' && id === connectedWalletChain.id - ) + const chain = chains.find( + ({ namespace, id }) => + namespace === 'evm' && id === connectedWalletChain.id + ) + if (!chain) return - return await Promise.all(addressList.map((address) => { - const balanceProm = getBalance( - address, chain, primaryWallet.type - ) - const secondaryTokenBal = updateSecondaryTokens( - primaryWallet, - address, - chain - ) - const account = - accounts.find(account => account.address === address) - - const ensChain = chains.find( - ({ id }) => id === validEnsChain(connectedWalletChain.id) - ) - - const ensProm = - account && account.ens - ? Promise.resolve(account.ens) - : ensChain - ? getEns(address, ensChain) - : Promise.resolve(null) - - const unsProm = - account && account.uns - ? Promise.resolve(account.uns) - : getUns(address, chain) - - return Promise.all([ - Promise.resolve(address), - balanceProm, - ensProm, - unsProm, - secondaryTokenBal - ]) - })) + const balanceProm = getBalance(address, chain) + const secondaryTokenBal = updateSecondaryTokens(address, chain) + const account = accounts.find(account => account.address === address) - }) - ) - .subscribe( responds => { - if (!responds) return; - - responds.forEach((res) => { - const [address, balance, ens, uns, secondaryTokens] = res - updateAccount(label, address, { balance, ens, uns, secondaryTokens }) - }) + const ensChain = chains.find( + ({ id }) => id === validEnsChain(connectedWalletChain.id) + ) + const ensProm = + account && account.ens + ? Promise.resolve(account.ens) + : ensChain + ? getEns(address, ensChain) + : Promise.resolve(null) + + const unsProm = + account && account.uns + ? Promise.resolve(account.uns) + : ensChain + ? getUns(address, ensChain) + : Promise.resolve(null) + + return Promise.all([ + Promise.resolve(address), + balanceProm, + ensProm, + unsProm, + secondaryTokenBal + ]) }) + ) + .subscribe(res => { + if (!res) return + const [address, balance, ens, uns, secondaryTokens] = res + updateAccount(label, address, { balance, ens, uns, secondaryTokens }) + }) - - const chainChanged$ = listenChainChanged( - { provider, disconnected$, type }).pipe( - share() + const chainChanged$ = listenChainChanged({ provider, disconnected$ }).pipe( + share() ) // Update chain on wallet when chainId changed chainChanged$.subscribe(async chainId => { const { wallets } = state.get() - const { chains, accounts } = wallets.find(wallet => - wallet.label === label && wallet.type === type) + const wallet = wallets.find(wallet => wallet.label === label) + if (!wallet) return // Add null check for wallet + const { chains, accounts } = wallet const [connectedWalletChain] = chains - - if (chainId === connectedWalletChain.id) return - - if (state.get().notify.enabled) { - const sdk = await getBNMulitChainSdk() - - if (sdk) { - const wallet = state - .get() - .wallets.find(wallet => - wallet.label === label && wallet.type === type) - - // Unsubscribe with timeout of 60 seconds - // to allow for any currently inflight transactions - wallet.accounts.forEach(({ address }) => { - sdk.unsubscribe({ - id: address, - chainId: wallet.chains[0].id, - timeout: 60000 - }) - }) - - // resubscribe for new chainId - wallet.accounts.forEach(({ address }) => { - try { - sdk.subscribe({ - id: address, - chainId: chainId, - type: 'account' - }) - } catch (error) { - // unsupported network for transaction events - } - }) - } + if (!isHex(chainId)) { + chainId = toHex(chainId) } + if (chainId === connectedWalletChain.id) return const resetAccounts = accounts.map( - ({ address }) => - ({ - address, - ens: null, - uns: null, - balance: null - } as Account) + ({ address }) => + ({ + address, + ens: null, + uns: null, + balance: null + } as Account) ) - updateWallet(label, type, { + updateWallet(label, { chains: [{ namespace: 'evm', id: chainId }], accounts: resetAccounts }) @@ -420,103 +264,103 @@ export function trackWallet( // when chain changes get ens/uns and balance for each account for wallet chainChanged$ - .pipe( - switchMap(async chainId => { - const { wallets, chains } = state.get() - const primaryWallet = wallets.find(wallet => - wallet.label === label && wallet.type === type) - const { accounts } = primaryWallet - - const chain = chains.find( - ({ namespace, id }) => namespace === 'evm' && id === chainId - ) + .pipe( + switchMap(async chainId => { + const { wallets, chains } = state.get() + const primaryWallet = wallets.find(wallet => wallet.label === label) + const accounts = primaryWallet?.accounts || [] + if (!isHex(chainId)) { + chainId = toHex(chainId) + } + const chain = chains.find( + ({ namespace, id }) => namespace === 'evm' && id === chainId + ) + if (!chain) return Promise.resolve(null) + + return Promise.all( + accounts.map(async ({ address }) => { + const balanceProm = getBalance(address, chain) - return Promise.all( - accounts.map(async ({ address }, index) => { - const balanceProm - = getBalance(address, chain, primaryWallet.type) - - const secondaryTokenBal = updateSecondaryTokens( - primaryWallet, - address, - chain - ) - const ensChain = chains.find( - ({ id }) => id === validEnsChain(chainId) - ) - - const ensProm = ensChain - ? getEns(address, ensChain) - : Promise.resolve(null) - - const unsProm = validEnsChain(chainId) - ? getUns(address, ensChain) - : Promise.resolve(null) - - const [ ens, uns, secondaryTokens] - = await Promise.all([ - ensProm, - unsProm, - secondaryTokenBal - ]) - const balance = index === 0 ? - await balanceProm : { [chain.token] : null } - - return { - address, - balance, - ens, - uns, - secondaryTokens - } - }) + const secondaryTokenBal = updateSecondaryTokens(address, chain) + const ensChain = chains.find( + ({ id }) => id === validEnsChain(chainId) ) + + const ensProm = ensChain + ? getEns(address, ensChain) + : Promise.resolve(null) + + const unsProm = ensChain + ? getUns(address, ensChain) + : Promise.resolve(null) + + const [balance, ens, uns, secondaryTokens] = await Promise.all([ + balanceProm, + ensProm, + unsProm, + secondaryTokenBal + ]) + + return { + address, + balance, + ens, + uns, + secondaryTokens + } }) - ) - .subscribe(updatedAccounts => { - updatedAccounts && - updateWallet(label, type, { accounts: updatedAccounts }) + ) }) + ) + .subscribe(updatedAccounts => { + updatedAccounts && updateWallet(label, { accounts: updatedAccounts }) + }) - disconnected$.subscribe(async () => { - if( type === 'substrate') { await (provider as SubstrateProvider).disconnect() - } else { - (provider as EIP1193Provider).disconnect - && (provider as EIP1193Provider).disconnect() - } + disconnected$.subscribe(() => { + provider.disconnect && provider.disconnect() }) } export async function getEns( - address: Address, - chain: Chain + address: Address, + chain: Chain ): Promise { // chain we don't recognize and don't have a rpcUrl for requests if (!chain) return null - const provider = getProvider(chain) + const provider = await getProvider(chain) + if (!provider) return null try { - const name = await provider.lookupAddress(address) + const name = await provider.getEnsName({ + address + }) let ens = null if (name) { - const resolver = await provider.getResolver(name) - - if (resolver) { - const [contentHash, avatar] = await Promise.all([ - resolver.getContentHash(), - resolver.getAvatar() - ]) + const { labelhash, normalize } = await import('viem/ens') + const normalizedName = normalize(name) - const getText = resolver.getText.bind(resolver) - - ens = { + const ensResolver = await provider.getEnsResolver({ + name: normalizedName + }) + const avatar = await provider.getEnsAvatar({ + name: normalizedName + }) + const contentHash = labelhash(normalizedName) + const getText = async (key: string): Promise => { + return await provider.getEnsText({ name, - avatar, - contentHash, - getText - } + key + }) + } + + ens = { + name, + avatar, + contentHash, + ensResolver, + getText } } @@ -528,14 +372,14 @@ export async function getEns( } export async function getUns( - address: Address, - chain: Chain + address: Address, + chain: Chain ): Promise { const { unstoppableResolution } = configuration // check if address is valid ETH address before attempting to resolve // chain we don't recognize and don't have a rpcUrl for requests - if (!unstoppableResolution || !utils.isAddress(address) || !chain) return null + if (!unstoppableResolution || !isAddress(address) || !chain) return null try { return await unstoppableResolution(address) @@ -546,9 +390,8 @@ export async function getUns( } export async function getBalance( - address: string, - chain: Chain, - type : 'evm' | 'substrate' + address: Address, + chain: Chain ): Promise { // chain we don't recognize and don't have a rpcUrl for requests if (!chain) return null @@ -556,35 +399,16 @@ export async function getBalance( const { wallets } = state.get() try { - const wallet = wallets.find(wallet => !!wallet.provider); + const wallet = wallets.find(wallet => !!wallet.provider) + if (!wallet) return null const provider = wallet.provider - if( type === 'evm'){ - const balanceHex = await ( provider as EIP1193Provider) .request({ - method: 'eth_getBalance', - params: [address, 'latest'] - }) - return balanceHex ? { [ chain.token || 'ETH']: weiToEth(balanceHex) } : null - }else if( type === 'substrate'){ - try{ - - const balancedData = await getBalanceSubstrate( - { url : chain.blockExplorerUrl, data : { address : address } - } - ) - - return { - [chain.token] : parseFloat(new BN(balancedData).div( - new BN(10 ** chain.decimal)).toString()).toString(10) - } - - }catch(e){ - console.log(( e as Error).message) - return { - [chain.token] : '0' - } - } - } - + const balanceHex = (await provider.request({ + method: 'eth_getBalance', + params: [address, 'latest'] + })) as `0x${string}` + return balanceHex + ? { [chain.token || 'eth']: weiHexToEth(balanceHex) } + : null } catch (error) { console.error(error) return null @@ -592,10 +416,9 @@ export async function getBalance( } export function switchChain( - provider: EIP1193Provider , - chainId: ChainId + provider: EIP1193Provider, + chainId: ChainId ): Promise { - return provider.request({ method: 'wallet_switchEthereumChain', params: [{ chainId }] @@ -603,8 +426,8 @@ export function switchChain( } export function addNewChain( - provider: EIP1193Provider, - chain: Chain + provider: EIP1193Provider, + chain: Chain ): Promise { return provider.request({ method: 'wallet_addEthereumChain', @@ -619,17 +442,17 @@ export function addNewChain( }, rpcUrls: [chain.publicRpcUrl || chain.rpcUrl], blockExplorerUrls: chain.blockExplorerUrl - ? [chain.blockExplorerUrl] - : undefined + ? [chain.blockExplorerUrl] + : null } ] }) } export function updateChainRPC( - provider: EIP1193Provider, - chain: Chain, - rpcUrl: string + provider: EIP1193Provider, + chain: Chain, + rpcUrl: string ): Promise { return provider.request({ method: 'wallet_addEthereumChain', @@ -644,18 +467,17 @@ export function updateChainRPC( }, rpcUrls: [rpcUrl], blockExplorerUrls: chain.blockExplorerUrl - ? [chain.blockExplorerUrl] - : undefined + ? [chain.blockExplorerUrl] + : undefined } ] }) } export async function getPermissions( - provider: EIP1193Provider + provider: EIP1193Provider ): Promise { try { - const permissions = (await provider.request({ method: 'wallet_getPermissions' })) as WalletPermission[] @@ -666,184 +488,56 @@ export async function getPermissions( } } -export async function signPersonalSignMessageRequest( - provider : EIP1193Provider -) : Promise { - const { wallets } = state.get(); - return provider.request({ - method: 'personal_sign', - params: ['hello, Im from subwallet connect', wallets[0].accounts[0].address] - } as PersonalSignMessageRequest) -} - -export async function signEthSignMessageRequest( - provider : EIP1193Provider -) : Promise { - const { wallets } = state.get(); - - return provider.request({ - method: 'eth_sign', - params: [wallets[0].accounts[0].address, 'hello'] - } as EthSignMessageRequest) -} - - -export async function signTypedDataMessageRequest( - provider : EIP1193Provider -) : Promise{ - const { wallets, chains } = state.get(); - return provider.request({ - method: 'eth_signTypedData', - params: [wallets[0].accounts[0].address, { - types: { - EIP712Domain: [ - { name: 'name', type: 'string' }, - { name: 'version', type: 'string' }, - { name: 'chainId', type: 'uint256' }, - { name: 'verifyingContract', type: 'address' } - ], - Person: [ - { name: 'name', type: 'string' }, - { name: 'wallet', type: 'address' } - ], - Mail: [ - { name: 'from', type: 'Person' }, - { name: 'to', type: 'Person' }, - { name: 'contents', type: 'string' } - ] - }, - primaryType: 'Mail', - domain: { - name: 'Ether Mail', - version: '1', - chainId : parseInt(chains[0].id, 16), - verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC' - }, - message: { - from: { - name: 'John Doe', - wallet: wallets[0].accounts[0].address - }, - to: { - name: 'Alice', - wallet: '0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB' - }, - contents: 'Hello' - } - }] - } as EIP712Request) -} - - -export async function signTypedData_v4MessageRequest( - provider : EIP1193Provider -) : Promise{ - const { wallets } = state.get(); - return provider.request({ - method: 'eth_signTypedData_v4', - params: [wallets[0].accounts[0].address, { - domain: { - chainId : 1, - name: 'Ether Mail', - verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC', - version: '1' - }, - message: { - contents: 'Hello', - from: { - name: 'Cow', - wallets: [ - wallets[0].accounts[0].address, - '0xDeaDbeefdEAdbeefdEadbEEFdeadbeEFdEaDbeeF' - ] - }, - to: [ - { - name: 'Alice', - wallets: [ - '0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB', - '0xB0BdaBea57B0BDABeA57b0bdABEA57b0BDabEa57', - '0xB0B0b0b0b0b0B000000000000000000000000000' - ] - } - ] - }, - primaryType: 'Mail', - types: { - EIP712Domain: [ - { name: 'name', type: 'string' }, - { name: 'version', type: 'string' }, - { name: 'chainId', type: 'uint256' }, - { name: 'verifyingContract', type: 'address' } - ], - Group: [ - { name: 'name', type: 'string' }, - { name: 'members', type: 'Person[]' } - ], - Mail: [ - { name: 'from', type: 'Person' }, - { name: 'to', type: 'Person[]' }, - { name: 'contents', type: 'string' } - ], - Person: [ - { name: 'name', type: 'string' }, - { name: 'wallets', type: 'address[]' } - ] - } - }] - } as EIP712Request_v4) -} - - export async function syncWalletConnectedAccounts( - label: WalletState['label'], - type: WalletState['type'] + label: WalletState['label'] ): Promise { - const wallet = state.get().wallets.find( - wallet => wallet.label === label && wallet.type === type) - const permissions = wallet.type === 'evm' ? await getPermissions((wallet.provider) as EIP1193Provider) : [] + const wallet = state.get().wallets.find(wallet => wallet.label === label) + if (!wallet) return + const permissions = await getPermissions(wallet.provider) const accountsPermissions = permissions.find( - ({ parentCapability }) => parentCapability === 'eth_accounts' + ({ parentCapability }) => parentCapability === 'eth_accounts' ) if (accountsPermissions) { const { value: connectedAccounts } = accountsPermissions.caveats.find( - ({ type }) => type === 'restrictReturnedAccounts' + ({ type }) => type === 'restrictReturnedAccounts' ) || { value: null } if (connectedAccounts) { const syncedAccounts = wallet.accounts.filter(({ address }) => - connectedAccounts.includes(address) + connectedAccounts.includes(address) ) - updateWallet( - wallet.label, - wallet.type, - { ...wallet, accounts: syncedAccounts } - ) + updateWallet(wallet.label, { ...wallet, accounts: syncedAccounts }) } } } -export const enable = async ( - provider : SubstrateProvider -) - : Promise => { - - const accounts = await provider.enable(); - - return accounts; -} - -export const signDummy = async (wallet : WalletState) => { - const signer = wallet?.signer; - if (signer && signer.signRaw) { - return await (wallet.provider as SubstrateProvider).signDummy(wallet.accounts[0].address, 'Hello Im from subWallet', signer); - }else{ - return await (wallet.provider as SubstrateProvider).signDummy(wallet.accounts[0].address, 'Hello Im from subWallet', undefined); +export const addOrSwitchChain = async ( + provider: EIP1193Provider, + chain: Chain +): Promise => { + try { + const { id } = chain + await addNewChain(provider, chain) + await switchChain(provider, id) + return id + } catch (error) { + return undefined } } - - - +export const wagmiProviderMethods = (): { + addOrSwitchChain: ( + provider: EIP1193Provider, + chain: Chain + ) => Promise + getChainId: (provider: EIP1193Provider) => Promise + requestAccounts: (provider: EIP1193Provider) => Promise + switchChain: (provider: EIP1193Provider, chainId: ChainId) => Promise +} => ({ + addOrSwitchChain, + getChainId, + requestAccounts, + switchChain +}) diff --git a/packages/core/src/replacement.ts b/packages/core/src/replacement.ts index 20906457b..3b6a5de37 100644 --- a/packages/core/src/replacement.ts +++ b/packages/core/src/replacement.ts @@ -1,10 +1,10 @@ import type { EthereumTransactionData, Network } from 'bnc-sdk' -import { BigNumber } from 'ethers' +import { bigIntToHex } from '@web3-onboard/common' import { configuration } from './configuration.js' import { state } from './store/index.js' import type { WalletState } from './types.js' import { gweiToWeiHex, networkToChainId, toHexString } from './utils.js' -import type { EIP1193Provider } from '@subwallet-connect/common'; +import type { GasPrice } from '@web3-onboard/gas' const ACTIONABLE_EVENT_CODES: string[] = ['txPool'] const VALID_GAS_NETWORKS: Network[] = ['main', 'matic-main'] @@ -39,32 +39,38 @@ export async function replaceTransaction({ const chainId = networkToChainId[network] - const { gasPriceProbability } = state.get().notify.replacement - const { gas, apiKey } = configuration + const { gasPriceProbability } = state.get().notify.replacement as { + gasPriceProbability?: + | { speedup?: number | undefined; cancel?: number | undefined } + | undefined + } + const { gas } = configuration + if (!gas) return // get gas price const [gasResult] = await gas.get({ chains: [networkToChainId[network]], - endpoint: 'blockPrices', - apiKey + endpoint: 'blockPrices' }) const { maxFeePerGas, maxPriorityFeePerGas } = - gasResult.blockPrices[0].estimatedPrices.find( + (gasResult.blockPrices[0].estimatedPrices.find( ({ confidence }) => confidence === (type === 'speedup' - ? gasPriceProbability.speedup - : gasPriceProbability.cancel) - ) + ? gasPriceProbability?.speedup + : gasPriceProbability?.cancel) + ) as GasPrice) || {} + + if (!maxFeePerGas || !maxPriorityFeePerGas) return const maxFeePerGasWeiHex = gweiToWeiHex(maxFeePerGas) const maxPriorityFeePerGasWeiHex = gweiToWeiHex(maxPriorityFeePerGas) // Some wallets do not like empty '0x' val const dataObj = input === '0x' ? {} : { data: input } - if( wallet.type !== 'evm') return; - return (wallet.provider as EIP1193Provider).request({ + + return wallet.provider.request({ method: 'eth_sendTransaction', params: [ { @@ -72,7 +78,7 @@ export async function replaceTransaction({ from, to: type === 'cancel' ? from : to, chainId: parseInt(chainId), - value: `${BigNumber.from(value).toHexString()}`, + value: bigIntToHex(BigInt(value)), nonce: toHexString(nonce), gasLimit: toHexString(gasLimit), maxFeePerGas: maxFeePerGasWeiHex, diff --git a/packages/core/src/services.ts b/packages/core/src/services.ts deleted file mode 100644 index ffc8a19e8..000000000 --- a/packages/core/src/services.ts +++ /dev/null @@ -1,50 +0,0 @@ -import type { MultiChain } from 'bnc-sdk' -import type SDK from 'bnc-sdk' -import { configuration } from './configuration.js' -import { handleTransactionUpdates } from './notify.js' - -let blocknativeMultiChainSdk: MultiChain -let blocknativeSdk: SDK - -/** - * - * @returns MultiChain SDK if apiKey - */ - -export async function getBNMulitChainSdk(): Promise { - const { apiKey } = configuration - - if (!apiKey) return null - - if (!blocknativeMultiChainSdk) { - const { default: Blocknative } = await import('bnc-sdk') - blocknativeMultiChainSdk = Blocknative.multichain({ - apiKey: configuration.apiKey - }) - - blocknativeMultiChainSdk.transactions$.subscribe(handleTransactionUpdates) - } - - return blocknativeMultiChainSdk -} - -/** - * - * @returns SDK if apiKey - */ -export async function getBlocknativeSdk(): Promise { - const { apiKey } = configuration - - if (!apiKey) return null - - if (!blocknativeSdk) { - const { default: Blocknative } = await import('bnc-sdk') - blocknativeSdk = new Blocknative({ - dappId: configuration.apiKey, - networkId: 1 - }) - return blocknativeSdk - } - - return blocknativeSdk -} diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts index e0594c883..a2cf322e0 100644 --- a/packages/core/src/store/actions.ts +++ b/packages/core/src/store/actions.ts @@ -1,9 +1,15 @@ -import type { AppMetadata, Chain, WalletInit, WalletModule } from '@subwallet-connect/common' +import type { + AppMetadata, + Chain, + WalletHelpers, + WalletInit, + WalletModule +} from '@web3-onboard/common' import { nanoid } from 'nanoid' import { dispatch } from './index.js' import { configuration } from '../configuration.js' import { handleThemeChange, returnTheme } from '../themes.js' - +import { state } from '../store/index.js' import type { Account, @@ -32,7 +38,7 @@ import type { Theme, UpdateChainsAction, UpdateAppMetadataAction, - SendSignMessage + UpdateWagmiConfigAction } from '../types.js' import { @@ -42,9 +48,11 @@ import { validateCustomNotification, validateCustomNotificationUpdate, validateString, + validateWallet, validateWalletInit, validateUpdateBalances, validateNotify, + validateConnectModalUpdate, validateUpdateTheme, validateSetChainOptions, validateAppMetadataUpdate @@ -66,11 +74,11 @@ import { UPDATE_ALL_WALLETS, UPDATE_CONNECT_MODAL, UPDATE_CHAINS, - UPDATE_APP_METADATA, SEND_SIGN_MESSAGE + UPDATE_APP_METADATA, + UPDATE_WAGMI_CONFIG } from './constants.js' -import { getBalance } from '../provider.js'; - - +import type { Address } from 'bnc-sdk' +import type { Config } from '@web3-onboard/wagmi' export function addChains(chains: Chain[]): void { // chains are validated on init @@ -95,14 +103,17 @@ export function updateChain(updatedChain: Chain): void { id: chainId, namespace: chainNamespace } = updatedChain - const error = validateSetChainOptions( - { label, token, rpcUrl, chainId, chainNamespace } - ) + const error = validateSetChainOptions({ + label, + token, + rpcUrl, + chainId, + chainNamespace + }) if (error) { throw error } - const action = { type: UPDATE_CHAINS, payload: updatedChain @@ -111,12 +122,12 @@ export function updateChain(updatedChain: Chain): void { } export function addWallet(wallet: WalletState): void { - // const error = validateWallet(wallet) - // - // if (error) { - // console.error(error) - // throw error - // } + const error = validateWallet(wallet) + + if (error) { + console.error(error) + throw error + } const action = { type: ADD_WALLET, @@ -126,19 +137,18 @@ export function addWallet(wallet: WalletState): void { dispatch(action as AddWalletAction) } -export function updateWallet(id: string, type : WalletState['type'], update: Partial): void { - // const error = validateWallet(update) - // - // if (error) { - // console.error(error) - // throw error - // } +export function updateWallet(id: string, update: Partial): void { + const error = validateWallet(update) + + if (error) { + console.error(error) + throw error + } const action = { type: UPDATE_WALLET, payload: { id, - type, ...update } } @@ -146,7 +156,7 @@ export function updateWallet(id: string, type : WalletState['type'], update: Par dispatch(action as UpdateWalletAction) } -export function removeWallet(id: string, type : 'evm' | 'substrate'): void { +export function removeWallet(id: string): void { const error = validateString(id, 'wallet id') if (error) { @@ -156,57 +166,43 @@ export function removeWallet(id: string, type : 'evm' | 'substrate'): void { const action = { type: REMOVE_WALLET, payload: { - id, - type: type + id } } - dispatch(action as RemoveWalletAction) } -export async function setPrimaryWallet( - wallet: WalletState, - chains : Chain[], - address?: string): Promise { - // const error = - // validateWallet(wallet) || (address && validateString(address, 'address')) - // - // if (error) { - // throw error - // } +export function setPrimaryWallet(wallet: WalletState, address?: string): void { + const error = + validateWallet(wallet) || (address && validateString(address, 'address')) + + if (error) { + throw error + } // if also setting the primary account if (address) { const account = wallet.accounts.find(ac => ac.address === address) - const chain = chains.find( chain => chain.id === wallet.chains[0].id) - if(!account.balance){ - account.balance = await getBalance(address,chain, wallet.type) - } if (account) { wallet.accounts = [ - account, - ...wallet.accounts - .map((acc) => ({ ...acc, balance : null })) - .filter(acc => { - return acc.address !== address - } - ) + account, + ...wallet.accounts.filter(({ address }) => address !== account.address) ] - } } + // Update wagmi config if wagmi is being used + handleWagmiConnectorUpdate(wallet) - updateWallet(wallet.label, wallet.type, { accounts : wallet.accounts }) // add wallet will set it to first wallet since it already exists addWallet(wallet) } export function updateAccount( id: string, - address: string, + address: Address, update: Partial ): void { const action = { @@ -241,11 +237,11 @@ export function updateAccountCenter( export function updateConnectModal( update: ConnectModalOptions | Partial ): void { - // const error = validateConnectModalUpdate(update) - // - // if (error) { - // throw error - // } + const error = validateConnectModalUpdate(update) + + if (error) { + throw error + } const action = { type: UPDATE_CONNECT_MODAL, @@ -321,7 +317,11 @@ export function customNotification(updatedNotification: CustomNotification): { } addCustomNotification(notification) - const dismiss = () => removeNotification(notification.id) + const dismiss = () => { + if (notification.id) { + removeNotification(notification.id) + } + } const update = ( notificationUpdate: CustomNotification @@ -361,6 +361,7 @@ export function removeNotification(id: Notification['id']): void { if (typeof id !== 'string') { throw new Error('Notification id must be of type string') } + const action = { type: REMOVE_NOTIFICATION, payload: id @@ -427,7 +428,8 @@ export function updateAllWallets(wallets: WalletState[]): void { // ==== HELPERS ==== // export function initializeWalletModules(modules: WalletInit[]): WalletModule[] { - const { device } = configuration + const { device }: WalletHelpers = configuration + if (!device) return [] return modules.reduce((acc, walletInit) => { const initialized = walletInit({ device }) @@ -448,9 +450,7 @@ export function uniqueWalletsByLabel( wallet && walletModuleList.findIndex( (innerWallet: WalletModule) => - innerWallet - && innerWallet.label === wallet.label - && innerWallet.type === wallet.type + innerWallet && innerWallet.label === wallet.label ) === i ) } @@ -466,7 +466,7 @@ export function updateTheme(theme: Theme): void { } export function updateAppMetadata( - update: AppMetadata| Partial + update: AppMetadata | Partial ): void { const error = validateAppMetadataUpdate(update) @@ -482,13 +482,30 @@ export function updateAppMetadata( dispatch(action as UpdateAppMetadataAction) } -export function sendSignMessage(message : string): void { - - if(!message || message.length === 0) return ; +export function updateWagmiConfig(update: Config): void { const action = { - type: SEND_SIGN_MESSAGE , - payload: message + type: UPDATE_WAGMI_CONFIG, + payload: update } - dispatch(action as SendSignMessage) + dispatch(action as UpdateWagmiConfigAction) +} + +function handleWagmiConnectorUpdate(wallet: WalletState) { + const { wagmi } = configuration + if (!wagmi) return + + try { + const { label } = wallet + const { wagmiConnect, getWagmiConnector } = wagmi + const wagmiConfig = state.get().wagmiConfig + const wagmiConnector = getWagmiConnector(label) + wagmiConnect(wagmiConfig, { connector: wagmiConnector }).then(() => { + updateWallet(label, { wagmiConnector }) + }) + } catch (e) { + console.error( + `Error updating Wagmi connector on primary wallet switch ${e}` + ) + } } diff --git a/packages/core/src/store/constants.ts b/packages/core/src/store/constants.ts index 843a64b53..af0608d1d 100644 --- a/packages/core/src/store/constants.ts +++ b/packages/core/src/store/constants.ts @@ -14,4 +14,4 @@ export const ADD_NOTIFICATION = 'add_notification' export const REMOVE_NOTIFICATION = 'remove_notification' export const UPDATE_ALL_WALLETS = 'update_balance' export const UPDATE_APP_METADATA = 'update_app_metadata' -export const SEND_SIGN_MESSAGE = 'send_sign_message' \ No newline at end of file +export const UPDATE_WAGMI_CONFIG = 'update_wagmi_config' diff --git a/packages/core/src/store/index.ts b/packages/core/src/store/index.ts index aef194024..7a97032cf 100644 --- a/packages/core/src/store/index.ts +++ b/packages/core/src/store/index.ts @@ -3,7 +3,7 @@ import { distinctUntilKeyChanged, pluck, filter } from 'rxjs/operators' import { locale } from 'svelte-i18n' import { APP_INITIAL_STATE } from '../constants.js' import { notNullish } from '../utils.js' -import type { Chain, WalletModule } from '@subwallet-connect/common' +import type { Chain, WalletModule } from '@web3-onboard/common' import type { AppState, @@ -20,7 +20,8 @@ import type { UpdateAllWalletsAction, UpdateConnectModalAction, UpdateChainsAction, - UpdateAppMetadataAction + UpdateAppMetadataAction, + UpdateWagmiConfigAction } from '../types.js' import { @@ -39,10 +40,10 @@ import { REMOVE_NOTIFICATION, UPDATE_ALL_WALLETS, UPDATE_CHAINS, - UPDATE_APP_METADATA, SEND_SIGN_MESSAGE + UPDATE_APP_METADATA, + UPDATE_WAGMI_CONFIG } from './constants.js' - function reducer(state: AppState, action: Action): AppState { const { type, payload } = action @@ -52,7 +53,7 @@ function reducer(state: AppState, action: Action): AppState { ...state, chains: [...state.chains, ...(payload as Chain[])] } - + case UPDATE_CHAINS: { const updatedChain = payload as UpdateChainsAction['payload'] const chains = state.chains @@ -67,7 +68,7 @@ function reducer(state: AppState, action: Action): AppState { case ADD_WALLET: { const wallet = payload as AddWalletAction['payload'] const existingWallet = state.wallets.find( - ({ label, type }) => label === wallet.label && type === wallet.type + ({ label }) => label === wallet.label ) return { @@ -76,19 +77,17 @@ function reducer(state: AppState, action: Action): AppState { // add to front of wallets as it is now the primary wallet existingWallet || (payload as WalletState), // filter out wallet if it already existed - ...state.wallets.filter(({ label, type }) => - !( label === wallet.label && type === wallet.type)) + ...state.wallets.filter(({ label }) => label !== wallet.label) ] } } case UPDATE_WALLET: { const update = payload as UpdateWalletAction['payload'] - const { id, type, ...walletUpdate } = update + const { id, ...walletUpdate } = update const updatedWallets = state.wallets.map(wallet => - wallet.label === id && wallet.type === type ? - { ...wallet, ...walletUpdate } : wallet + wallet.label === id ? { ...wallet, ...walletUpdate } : wallet ) return { @@ -98,25 +97,25 @@ function reducer(state: AppState, action: Action): AppState { } case REMOVE_WALLET: { - const update = payload as { id: string, type : WalletState['type'] } + const update = payload as { id: string } return { ...state, - wallets: state.wallets.filter(({ label, type }) => - label !== update.id && type === update.type) + wallets: state.wallets.filter(({ label }) => label !== update.id) } } case UPDATE_ACCOUNT: { const update = payload as UpdateAccountAction['payload'] - const { id, walletType, address, ...accountUpdate } = update + const { id, address, ...accountUpdate } = update const updatedWallets = state.wallets.map(wallet => { - if (wallet.label === id && wallet.type === walletType) { + if (wallet.label === id) { wallet.accounts = wallet.accounts.map(account => { - if (account && account.address === address) { + if (account.address === address) { return { ...account, ...accountUpdate } } + return account }) } @@ -230,21 +229,24 @@ function reducer(state: AppState, action: Action): AppState { ...state, appMetadata: { ...state.appMetadata, - ...update + ...update, + name: update.name || '' } } } - case RESET_STORE: - return APP_INITIAL_STATE + case UPDATE_WAGMI_CONFIG: { + const update = payload as UpdateWagmiConfigAction['payload'] - case SEND_SIGN_MESSAGE : { - state.wallets[0].accounts[0].message = payload as string; return { - ...state + ...state, + wagmiConfig: update } } + case RESET_STORE: + return APP_INITIAL_STATE + default: throw new Error(`Unknown type: ${type} in appStore reducer`) } diff --git a/packages/core/src/themes.ts b/packages/core/src/themes.ts index 803e0175f..eb5846321 100644 --- a/packages/core/src/themes.ts +++ b/packages/core/src/themes.ts @@ -55,7 +55,7 @@ export const handleThemeChange = (update: ThemingMap): void => { Object.keys(update).forEach(targetStyle => { document.documentElement.style.setProperty( targetStyle, - update[targetStyle as keyof ThemingMap] + update[targetStyle as keyof ThemingMap] || null ) }) } diff --git a/packages/core/src/views/connect/WalletButton.svelte b/packages/core/src/views/connect/WalletButton.svelte index fe9229ff0..24f0a5562 100644 --- a/packages/core/src/views/connect/WalletButton.svelte +++ b/packages/core/src/views/connect/WalletButton.svelte @@ -146,7 +146,7 @@ } .name { - font-size: 1rem; + font-size: var(--onboard-font-size-5, var(--font-size-5)); line-height: 1.25rem; text-align: initial; max-width: inherit; diff --git a/packages/core/src/views/notify/Notification.svelte b/packages/core/src/views/notify/Notification.svelte index fc697efa4..c09dc00b6 100644 --- a/packages/core/src/views/notify/Notification.svelte +++ b/packages/core/src/views/notify/Notification.svelte @@ -53,6 +53,12 @@ }, notification.autoDismiss) } + function handleClick(e: MouseEvent) { + if (notification?.onClick) { + notification.onClick(e); + } + } + onDestroy(() => { clearTimeout(timeoutId) }) @@ -162,7 +168,7 @@ on:mouseenter={() => (hovered = true)} on:mouseleave={() => (hovered = false)} class:bn-notify-clickable={notification.onClick} - on:click={e => notification.onClick && notification.onClick(e)} + on:click={handleClick} class="bn-notify-notification bn-notify-notification-{notification.type}}" style={`${ `border: 2px solid ${ defaultNotifyEventStyles[notification.type]['borderColor'] diff --git a/packages/core/src/views/shared/Modal.svelte b/packages/core/src/views/shared/Modal.svelte index 61b9d17a3..0b8faa793 100644 --- a/packages/core/src/views/shared/Modal.svelte +++ b/packages/core/src/views/shared/Modal.svelte @@ -58,6 +58,7 @@ .full-screen-background { width: 100vw; height: 100vh; + height: 100dvh; } .max-height { diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json index 7a995f424..5e76cf767 100644 --- a/packages/core/tsconfig.json +++ b/packages/core/tsconfig.json @@ -1,17 +1,18 @@ { "extends": "@tsconfig/svelte/tsconfig.json", - "include": ["src/**/*"], "exclude": ["node_modules/*", "dist"], "compilerOptions": { "strict": true, "declaration": true, "declarationDir": "dist", - "target": "esnext", - "module": "esnext", "resolveJsonModule": true, + "allowSyntheticDefaultImports": true, + "lib": ["es2020", "dom"], + "types": ["svelte"], + "ignoreDeprecations": "5.0", + "moduleResolution": "node", "strictNullChecks": false, - "allowSyntheticDefaultImports": true }, - "outDir": "dist", -} \ No newline at end of file + "outDir": "dist" +} diff --git a/packages/demo/src/components/account/AccountList.tsx b/packages/demo/src/components/account/AccountList.tsx index e90992055..962cb48ad 100644 --- a/packages/demo/src/components/account/AccountList.tsx +++ b/packages/demo/src/components/account/AccountList.tsx @@ -84,6 +84,41 @@ function Component ({className, substrateProvider, evmProvider}: Props): React.R [ evmProvider, substrateProvider] ); + const onConvertToken = useCallback( + (address: string) => { + return async () => { + if(wallet){ + const { update, dismiss } = customNotification({ + type: 'pending', + message: + 'Processing…', + autoDismiss: 0 + }); + try { + const txHash = wallet.type === 'evm' ? await evmProvider?.convertToken(address) + : Promise.reject(new Error('Not implemented')); + update({ + eventCode: 'dbUpdateSuccess', + message: `Convert token successfully with txHash: ${txHash}`, + type: 'success', + autoDismiss: 2000 + }) + }catch (e) { + update({ + eventCode: 'dbUpdateError', + message: `${(e as Error).message}`, + type: 'error', + autoDismiss: 2000 + }) + + } + + } + }; + }, + [ evmProvider, substrateProvider] + ); + const onTransactionClicked = useCallback( (address: string) => { return async () => { @@ -143,6 +178,19 @@ function Component ({className, substrateProvider, evmProvider}: Props): React.R Transaction
+ { + wallet?.type === 'evm' && ( +
+ +
+ ) + }
) diff --git a/packages/demo/src/thirdweb-icon.js b/packages/demo/src/thirdweb-icon.js new file mode 100644 index 000000000..5d521a1fe --- /dev/null +++ b/packages/demo/src/thirdweb-icon.js @@ -0,0 +1,35 @@ +export default ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +` diff --git a/packages/demo/src/thirdweb-logo.js b/packages/demo/src/thirdweb-logo.js new file mode 100644 index 000000000..5d521a1fe --- /dev/null +++ b/packages/demo/src/thirdweb-logo.js @@ -0,0 +1,35 @@ +export default ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +` diff --git a/packages/demo/src/utils/api/evmApi.ts b/packages/demo/src/utils/api/evmApi.ts index c0fa25bcf..2d4c0e1d5 100644 --- a/packages/demo/src/utils/api/evmApi.ts +++ b/packages/demo/src/utils/api/evmApi.ts @@ -108,5 +108,22 @@ export class evmApi { return await this.provider?.send(args.method, args.params as any[]); } + public async convertToken (address: string) { + const args = {} as RequestArguments; + args.method = 'wallet_eip7683'; + args.params = [{ + sourceChainId: 911867, + targetChainId: 11155111, + sourceAddress: address, + targetAddress: address, + sourceToken: '0xaE83AD7A59ee18CFE97b79a5cf5Cdf2dF18d0695', + targetToken: '0x0000000000000000000000000000000000000000', + amount: `0x${(BigInt(1000) * BigInt(10**6)).toString(16)}` + }] + const txHash = await this.provider?.send(args.method, args.params as any[]); + console.log('TxHash', txHash); + + return txHash; + } } diff --git a/packages/finoaconnect/README.md b/packages/finoaconnect/README.md new file mode 100644 index 000000000..046db71ef --- /dev/null +++ b/packages/finoaconnect/README.md @@ -0,0 +1,51 @@ +# @web3-onboard/finoaconnect + +## Wallet module for connecting FinoaConnect SDK to web3-onboard + +#### Install + +`npm i @web3-onboard/core @web3-onboard/finoaconnect` + +## Usage + +Optional initialization object +```typescript +/** Optional object provided to the initiation of the wallet connector. + * When not included, the wallet connector service connects to FinoaConnect production systems. + * @field {url} URL of the FinoaConnect backend systems to be used + * @field {labelSuffix} arbitrary string label to denote the context of the URL field */ +export interface FinoaWalletOption { + url?: string + labelSuffix?: string +} +``` + +```typescript +import Onboard from '@web3-onboard/core'; +import finoaConnectModule from '@web3-onboard/finoaconnect'; + +const onboard = Onboard({ + // ... other Onboard options + wallets: [ + finoaConnectModule() + //... other wallets + ] +}) + +// alternatively to connect to a localised development environment +const onboard = Onboard({ + // ... other Onboard options + wallets: [ + finoaConnectModule([ + { + labelSuffix: 'localhost', + url: 'http://localhost:8080', + } + ]) + //... other wallets + ] +}) + +const connectedWallets = await onboard.connectWallet() +console.log(connectedWallets) +``` diff --git a/packages/finoaconnect/package.json b/packages/finoaconnect/package.json new file mode 100644 index 000000000..4b9f7e56f --- /dev/null +++ b/packages/finoaconnect/package.json @@ -0,0 +1,66 @@ +{ + "name": "@web3-onboard/finoaconnect", + "version": "2.0.0", + "description": "FinoaConnect enables DApp users to use Finoa's Institutional Custody services.", + "keywords": [ + "Ethereum", + "Web3", + "EVM", + "dapp", + "Multichain", + "Wallet", + "Transaction", + "Provider", + "Hardware Wallet", + "Notifications", + "React", + "Svelte", + "Vue", + "Next", + "Nuxt", + "MetaMask", + "Coinbase", + "WalletConnect", + "Ledger", + "Trezor", + "Connect Wallet", + "Ethereum Hooks", + "Blocknative", + "Mempool", + "pending", + "confirmed", + "Injected Wallet", + "Crypto", + "Crypto Wallet", + "Tally Ho", + "FinoaConnect" + ], + "repository": { + "type": "git", + "url": "https://github.com/blocknative/web3-onboard.git", + "directory": "packages/finoaconnect" + }, + "homepage": "https://web3onboard.thirdweb.com", + "bugs": "https://github.com/blocknative/web3-onboard/issues", + "module": "dist/index.js", + "browser": "dist/index.js", + "main": "dist/index.js", + "type": "module", + "typings": "dist/index.d.ts", + "files": [ + "dist" + ], + "license": "MIT", + "scripts": { + "build": "tsc", + "dev": "tsc -w", + "type-check": "tsc --noEmit" + }, + "devDependencies": { + "typescript": "^5.4.5" + }, + "dependencies": { + "@finoa/finoa-connect-sdk": "^1.0.4", + "@web3-onboard/core": "^2.22.3" + } +} diff --git a/packages/finoaconnect/src/icon.ts b/packages/finoaconnect/src/icon.ts new file mode 100644 index 000000000..2282313a8 --- /dev/null +++ b/packages/finoaconnect/src/icon.ts @@ -0,0 +1,6 @@ +export default ` + + + + +` \ No newline at end of file diff --git a/packages/finoaconnect/src/index.ts b/packages/finoaconnect/src/index.ts new file mode 100644 index 000000000..f49015a3c --- /dev/null +++ b/packages/finoaconnect/src/index.ts @@ -0,0 +1,72 @@ +import { FinoaEIP1193Provider } from '@finoa/finoa-connect-sdk' +import { ProviderRpcError, ProviderRpcErrorCode, type WalletInit } from '@web3-onboard/common' + +/** Optional object provided to the initiation of the wallet connector. + * When not included, the wallet connector service connects to FinoaConnect production systems. + * @field {url} URL of the FinoaConnect backend systems to be used + * @field {labelSuffix} arbitrary string label to denote the context of the URL field */ +export interface FinoaWalletOption { + url?: string + labelSuffix?: string +} + +function finoaConnect(option?: string | FinoaWalletOption): WalletInit { + const { url, labelSuffix }: FinoaWalletOption = + typeof option === 'string' ? { url: option } : !option ? {} : option + + return () => { + return { + label: `FinoaConnect${labelSuffix == null ? '' : ' - ' + labelSuffix}`, + getIcon: async () => (await import('./icon')).default, + getInterface: async ({ chains }) => { + const { + FinoaEIP1193Provider, + FinoaBrowserClient, + UnsupportedRequestError + } = await import('@finoa/finoa-connect-sdk') + + const client = new FinoaBrowserClient({ + windowUrl: url + }) + const provider = new FinoaEIP1193Provider({ + client + }) + + const proxyProvider = new Proxy(provider, { + get(target, property: keyof FinoaEIP1193Provider) { + const source = target[property] + if (property === 'request') { + return async function ( + this: FinoaEIP1193Provider, + ...args: Parameters + ) { + + try { + return await (source as FinoaEIP1193Provider['request']).call( + this, + ...args + ) + } catch (err) { + if (err instanceof UnsupportedRequestError) { + throw new ProviderRpcError({ + code: ProviderRpcErrorCode.UNSUPPORTED_METHOD, + message: `FinoaConnect Provider does not support the requested method: ${args[0].method}` + }) + } + throw err + } + } + } + return source + } + }) + + return { + provider: proxyProvider + } + } + } + } +} + +export default finoaConnect \ No newline at end of file diff --git a/packages/finoaconnect/tsconfig.json b/packages/finoaconnect/tsconfig.json new file mode 100644 index 000000000..ec0c86c1f --- /dev/null +++ b/packages/finoaconnect/tsconfig.json @@ -0,0 +1,15 @@ +{ + "extends": "../../tsconfig.json", + "include": ["src/**/*"], + + "compilerOptions": { + "outDir": "dist", + "rootDir": "src", + "declaration": true, + "declarationDir": "dist", + "allowSyntheticDefaultImports": true, + "paths": { + "*": ["./src/*", "./node_modules/*"] + } + } + } \ No newline at end of file diff --git a/packages/gas/README.md b/packages/gas/README.md index 343da64dd..4ed7b35f2 100644 --- a/packages/gas/README.md +++ b/packages/gas/README.md @@ -1,6 +1,6 @@ # @subwallet-connect/gas -## A module for requesting streams or single requests of gas price estimates from the [Blocknative Gas Platform API](https://onboard.blocknative.com/docs/packages/gas). +## A module for requesting streams or single requests of gas price estimates from the [Blocknative Gas Platform API](https://docs.blocknative.com/gas-prediction/gas-platform). Supports both Eth Mainnet and Polygon gas pricing. @@ -21,7 +21,6 @@ import gas from '@subwallet-connect/gas' // API key is optional and if provided allows for faster poll rates const ethMainnetGasBlockPrices = gas.stream({ chains: ['0x1'], - apiKey: '', endpoint: 'blockPrices' }) @@ -35,7 +34,6 @@ setTimeout(ethGasUnsub, 10000) // OR you can subscribe to multiple chains at once: const gasBlockPrices = gas.stream({ chains: ['0x1', '0x89'], - apiKey: '', endpoint: 'blockPrices', // can override default poll rate as well poll: 1000 @@ -54,7 +52,6 @@ setTimeout(unsubscribe, 10000) // Can also just do a one time get rather than a stream const gasBlockPrices = await gas.get({ chains: ['0x1', '0x89'], - apiKey: '', endpoint: 'blockPrices' }) ``` @@ -63,7 +60,7 @@ const gasBlockPrices = await gas.get({ ## Usage with Web3-Onboard wallet Connect and Ethers.js This example assumes you have already setup web3-onboard to connect wallets to your dapp. -For more information see [web3-onboard docs](https://onboard.blocknative.com/docs/modules/core#install). +For more information see [web3-onboard docs](https://web3onboard.thirdweb.com/docs/modules/core#install). ```ts import gas from '@subwallet-connect/gas' import { ethers } from 'ethers' @@ -74,7 +71,6 @@ let bnGasPrices const ethMainnetGasBlockPrices = gas.stream({ chains: ['0x1'], // '0x89' can also be added/replaced here for Polygon gas data - apiKey: '', // for faster refresh rates endpoint: 'blockPrices' }) diff --git a/packages/gas/src/get.ts b/packages/gas/src/get.ts index ef1f743d6..64cc75d1c 100644 --- a/packages/gas/src/get.ts +++ b/packages/gas/src/get.ts @@ -1,7 +1,7 @@ import { firstValueFrom, zip } from 'rxjs' import { ajax } from 'rxjs/ajax' import { getRequestUrl } from './utils.js' -import { RequestOptions, ChainId, GasPlatformResponse } from './types.js' +import { RequestOptions, GasPlatformResponse } from './types.js' import { validateRequest } from './validation.js' function get(options: RequestOptions): Promise { @@ -11,10 +11,10 @@ function get(options: RequestOptions): Promise { throw invalid } - const { chains, endpoint, apiKey } = options + const { chains, endpoint } = options const requestUrls = chains.map(chainId => - getRequestUrl({ chainId, apiKey, endpoint }) + getRequestUrl({ chainId, endpoint }) ) return firstValueFrom( diff --git a/packages/gas/src/stream.ts b/packages/gas/src/stream.ts index 6069c1a44..41bb640ba 100644 --- a/packages/gas/src/stream.ts +++ b/packages/gas/src/stream.ts @@ -12,10 +12,10 @@ function stream(options: StreamOptions): Observable { throw invalid } - const { chains, endpoint, apiKey, poll = 5000 } = options + const { chains, endpoint, poll = 5000 } = options const requestUrls = chains.map(chainId => - getRequestUrl({ chainId, apiKey, endpoint }) + getRequestUrl({ chainId, endpoint }) ) // start polling diff --git a/packages/gas/src/types.ts b/packages/gas/src/types.ts index c12996c40..2df80e9ef 100644 --- a/packages/gas/src/types.ts +++ b/packages/gas/src/types.ts @@ -3,7 +3,6 @@ export type RequestEndpoint = 'blockPrices' export type RequestOptions = { chains: ChainId[] endpoint: RequestEndpoint - apiKey?: string } export type StreamOptions = RequestOptions & { poll?: number } diff --git a/packages/gas/src/utils.ts b/packages/gas/src/utils.ts index e28054fd4..87a2bbda3 100644 --- a/packages/gas/src/utils.ts +++ b/packages/gas/src/utils.ts @@ -2,12 +2,10 @@ import { ChainId, RequestEndpoint } from './types.js' export function getRequestUrl({ chainId, - endpoint, - apiKey + endpoint }: { chainId: ChainId endpoint: RequestEndpoint - apiKey?: string }): { url: string; headers: { authorization?: string } } { switch (endpoint) { case 'blockPrices': @@ -16,11 +14,7 @@ export function getRequestUrl({ chainId, 16 )}`, - headers: apiKey - ? { - authorization: apiKey - } - : {} + headers: {} } default: throw new Error(`Unrecognized request endpoint: ${endpoint}`) diff --git a/packages/gnosis/README.md b/packages/gnosis/README.md index 25fa7bfd3..d643b5f2e 100644 --- a/packages/gnosis/README.md +++ b/packages/gnosis/README.md @@ -57,3 +57,26 @@ let trans = await wallet.instance.txs.send({txs:[tx], params}) ``` Note: With the `safeTxGas` you will see additional value on the `gasLimit` displayed in the Safe. Check [Safe docs](https://github.com/safe-global/safe-contracts/blob/a6504a9afdeac186a8cdb29ad68b189523c80eda/docs/safe_tx_gas.md) for full details on that computation. + + +## Local testing within the Safe app + +Ensure the application is building and working properly within the browser and then add or enable your cors blocker extension or script of choice. An example is the `Allow CORS` browser extension. + +## Vue Build Configuration + +If using Vue be sure to include the necessary peerDeps in the `vite.config.ts` specifically within the `optimizeDeps.include` list and install the necessary peer deps `npm i @safe-global/safe-apps-provider @safe-global/safe-apps-sdk`. + +```typescript +export default defineConfig({ + plugins: [vue(), vueJsx(), VueDevTools()], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + }, + optimizeDeps: { + include: ['@safe-global/safe-apps-sdk', '@safe-global/safe-apps-provider'] + } +}) +``` \ No newline at end of file diff --git a/packages/gnosis/tsconfig.json b/packages/gnosis/tsconfig.json index 6be3e8152..645c81ae0 100644 --- a/packages/gnosis/tsconfig.json +++ b/packages/gnosis/tsconfig.json @@ -1,7 +1,7 @@ { "extends": "../../tsconfig.json", "include": ["src/**/*"], - + "compilerOptions": { "outDir": "dist", "rootDir": "src", @@ -10,5 +10,6 @@ "*": ["./src/*", "./node_modules/*"] }, "typeRoots": ["node_modules/@types"], + "moduleResolution": "node" } } diff --git a/packages/hw-common/tsconfig.json b/packages/hw-common/tsconfig.json index bd1cf6bcf..e1e0e0fba 100644 --- a/packages/hw-common/tsconfig.json +++ b/packages/hw-common/tsconfig.json @@ -1,15 +1,20 @@ { "extends": "@tsconfig/svelte/tsconfig.json", - "include": ["src/**/*"], "exclude": ["node_modules/*", "dist"], "compilerOptions": { "strict": true, "declaration": true, "declarationDir": "dist", - "target": "ES2018", - "module": "ES2020", - "resolveJsonModule": true + "target": "esnext", + "module": "esnext", + "resolveJsonModule": true, + "allowSyntheticDefaultImports": true, + "strictNullChecks": false, + "lib": ["es2020", "dom"], + "types": ["svelte"], + "ignoreDeprecations": "5.0", + "moduleResolution": "node", }, "outDir": "dist" } diff --git a/packages/injected/package.json b/packages/injected/package.json index d22bb1839..718e79dfd 100644 --- a/packages/injected/package.json +++ b/packages/injected/package.json @@ -72,7 +72,8 @@ "@polkadot/extension-inject": "^0.46.5", "@subwallet-connect/common": "^1.0.7", "joi": "17.9.1", - "lodash.uniqby": "^4.7.0" + "lodash.uniqby": "^4.7.0", + "cheerio": "^1.1.2" }, "author": "" } diff --git a/packages/injected/src/helpers.ts b/packages/injected/src/helpers.ts index dbcdf68d7..fe3876372 100644 --- a/packages/injected/src/helpers.ts +++ b/packages/injected/src/helpers.ts @@ -1,5 +1,6 @@ import type { Device, ProviderRpcErrorCode } from '@subwallet-connect/common' import type { InjectedProvider, InjectedWalletModule } from './types.js' +import * as cheerio from 'cheerio' export class ProviderRpcError extends Error { message: string @@ -45,3 +46,39 @@ export const isWalletAvailable = ( checkProviderIdentity({ provider, device }) ) } + +export +function containsExecutableJavaScript(svgString: string): boolean { + if (!svgString) return false + + // Use a DOM parser to detect