diff --git a/.circleci/config.yml b/.circleci/config.yml index 3def8f901..bb68b14a6 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -1,1023 +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: + 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/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: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: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: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: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 - 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 - + # 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: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: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: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: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 - 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-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: - 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: + 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-particle: - <<: *deploy_production_filters - - build-staging-particle: - <<: *deploy_staging_filters \ No newline at end of file + - 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/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md new file mode 100644 index 000000000..00a56278e --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -0,0 +1,38 @@ +--- +name: Bug report +about: Create a report to help us improve +title: '[BUG]: ' +labels: 'bug' +assignees: '' + +--- + +**Describe the bug** +A clear and concise description of what the bug is. + +**To Reproduce** +Steps to reproduce the behavior: +1. Go to '...' +2. Click on '....' +3. Scroll down to '....' +4. See error + +**Expected behavior** +A clear and concise description of what you expected to happen. + +**Screenshots** +If applicable, add screenshots to help explain your problem. + +**Desktop (please complete the following information):** + - OS: [e.g. Windows 10, macOS] + - Browser [e.g. stock browser, Safari] + - Version [e.g. 22] + +**Smartphone (please complete the following information):** + - Device: [e.g. iPhone6] + - OS: [e.g. iOS8.1] + - Browser [e.g. stock browser, safari] + - Version [e.g. 22] + +**Additional context** +Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/custom.md b/.github/ISSUE_TEMPLATE/custom.md new file mode 100644 index 000000000..5d515b38b --- /dev/null +++ b/.github/ISSUE_TEMPLATE/custom.md @@ -0,0 +1,12 @@ +--- +name: Other issue +about: Use this for any other issues. +title: '' +labels: '' +assignees: '' + +--- + +**Describe the issue** + +Please provide a clear and concise description of the issue. diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md new file mode 100644 index 000000000..2838fd32b --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -0,0 +1,20 @@ +--- +name: Feature request +about: Suggest an idea for this project +title: '[FEAT]: ' +labels: 'enhancement' +assignees: '' + +--- + +**Is your feature request related to a problem? Please describe.** +A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] + +**Describe the solution you'd like** +A clear and concise description of what you want to happen. + +**Describe alternatives you've considered** +A clear and concise description of any alternative solutions or features you've considered. + +**Additional context** +Add any other context or screenshots about the feature request here. 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/web-sdk.yml b/.github/workflows/web-sdk.yml new file mode 100644 index 000000000..e7253f1e3 --- /dev/null +++ b/.github/workflows/web-sdk.yml @@ -0,0 +1,137 @@ +name: Web-SDK +on: + pull_request: + branches: + - master + - main + push: + branches: + - master + - main + +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: Web-SDK + uses: actions/setup-node@v3 + with: + node-version: '18''20''22' + cache: 'yarn''npm''pnpm' + - name: Web SDK + id: Install the Web SDK dependencies + run: | + 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/.gitignore b/.gitignore index ee40aa280..ca61752dc 100644 --- a/.gitignore +++ b/.gitignore @@ -1,8 +1,9 @@ .DS_Store -node_modules +node_modules/ dist/ package-lock.json .rpt2_cache .vscode yarn-error.log .env +.idea/ diff --git a/README.md b/README.md index 8707f0b18..85ecc1e06 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,6 @@ - **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 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. @@ -89,11 +88,11 @@ if (wallets[0]) { **Onboard v1 migration guide** -If you're coming from v1, we've created a [migration guide for you](https://onboard.blocknative.com/docs/overview/onboard.js-migration-guide#background). +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://onboard.blocknative.com/docs/overview/introduction#features): +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** @@ -106,34 +105,39 @@ For full documentation, check out the README.md for each package or the [docs pa **SDK Wallets** - [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) -- [Trust](packages/trust/README.md) -- [WalletConnect](packages/walletconnect/README.md) -- [Safe](packages/gnosis/README.md) -- [Magic](packages/magic/README.md) +- [Enkrypt](packages/enkrypt/README.md) +- [FinoaConnect](packages/finoaconnect/README.md) - [Fortmatic](packages/fortmatic/README.md) -- [Portis](packages/portis/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) -- [Web3Auth](packages/web3auth/README.md) -- [Capsule](packages/capsule/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) -- [Enkrypt](packages/enkrypt/README.md) +- [Trust](packages/trust/README.md) - [Unstoppable Domains](packages/uauth/README.md) -- [Frontier](packages/frontier/README.md) +- [WalletConnect](packages/walletconnect/README.md) +- [Web3Auth](packages/web3auth/README.md) - [XDEFI](packages/xdefi/README.md) -- [Infinity Wallet](packages/infinity-wallet/README.md) -- [Frame](packages/frame/README.md) -- [Blocto](packages/blocto/README.md) -- [Particle Network](packages/particle-network/README.md) **Hardware Wallets** +- [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) -- [Keystone](packages/keystone/README.md) -- [KeepKey](packages/keepkey/README.md) -- [D'CENT](packages/dcent/README.md) **Frameworks** diff --git a/SECURITY.md b/SECURITY.md new file mode 100644 index 000000000..9cfe3a8a4 --- /dev/null +++ b/SECURITY.md @@ -0,0 +1,21 @@ +# Security Policy + +## Supported Versions + +Use this section to tell people about which versions of your project are +currently being supported with security updates. + +| Version | Supported | +| ------- | ------------------ | +| 5.1.x | :white_check_mark: | +| 5.0.x | :x: | +| 4.0.x | :white_check_mark: | +| < 4.0 | :x: | + +## Reporting a Vulnerability + +We take all security vulnerabilities seriously. If you believe you have found a security vulnerability, we encourage you to report it to us. + +Please use the [GitHub Private Vulnerability Reporting feature](https://github.com/blocknative/web3-onboard/security/advisories/new) to submit your report. + +You can expect an initial response within 48 hours. We appreciate your efforts to disclose your findings responsibly and will make every effort to acknowledge your contribution. diff --git a/config.json b/config.json new file mode 100644 index 000000000..655e88062 --- /dev/null +++ b/config.json @@ -0,0 +1,20 @@ +{ + "main": "./contracts/Contract.sol", + "framework": "hardhat", + "compilers": { + "truffle": "", + "solc": "0.8.0", + "evmVersion": "spuriousDragon" + }, + "linter": "solium", + "editor": { + "fontFamily": "Hack", + "fontSize": "13px", + "ligatures": false + }, + "formatSolidity": false, + "openzeppelin": { + "importOption": "http_url", + "version": "4.7.0" + } +} \ No newline at end of file diff --git a/docs/package.json b/docs/package.json index be734ccf9..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", @@ -36,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", @@ -44,51 +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/capsule": "^2.0.1", - "@web3-onboard/cede-store": "^2.2.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.12.alpha.2", - "@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.2", - "@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.2", - "@web3-onboard/web3auth": "^2.2.3", - "@web3-onboard/xdefi": "^2.0.4", - "@web3-onboard/zeal": "^2.0.4", - "@web3-onboard/particle-network": "^2.0.0-alpha.1", + "@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/Footer.svelte b/docs/src/lib/components/Footer.svelte index 753bc4574..dee01b617 100644 --- a/docs/src/lib/components/Footer.svelte +++ b/docs/src/lib/components/Footer.svelte @@ -55,13 +55,13 @@
Privacy Policy 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 fdbef44a4..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,22 +51,24 @@ 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: capsuleModule, Environment } = await import('@web3-onboard/capsule') + 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: { @@ -78,7 +80,7 @@ const intiOnboard = async (theme) => { const dcent = dcentModule() const walletConnect = walletConnectModule({ projectId: 'f6bd6e2911b56f5ac3bc8b2d0e2d7ad5', - dappUrl: 'https://onboard.blocknative.com/' + dappUrl: 'https://web3onboard.thirdweb.com/' }) const ledger = ledgerModule({ walletConnectVersion: 2, @@ -93,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() @@ -111,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' } @@ -131,7 +137,7 @@ const intiOnboard = async (theme) => { environment: 'staging' }) - const capsule = capsuleModule({ + const para = paraModule({ environment: Environment.DEVELOPMENT, apiKey: '992bbd9146d5de8ad0419f141d9a7ca7' }) @@ -146,19 +152,20 @@ const intiOnboard = async (theme) => { connect: { autoConnectAllPreviousWallet: true }, wallets: [ metamask, + coinbase, injected, walletConnect, - coinbase, ledger, trezor, trust, + okx, gnosis, taho, bitget, xdefi, uauth, cede, - arcanaWallet, + // arcanaWallet, torus, sequence, dcent, @@ -172,11 +179,10 @@ const intiOnboard = async (theme) => { frame, infinityWallet, blocto, - capsule, - particle - // capsule - - // venly + particle, + venly, + finoaconnect, + para ], chains: [ { @@ -194,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', @@ -245,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/[...12]gnosis/+page.md b/docs/src/routes/docs/[...4]wallets/[...12]gnosis/+page.md index c6a1cd5ee..e4612b4d8 100644 --- a/docs/src/routes/docs/[...4]wallets/[...12]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/[...13]infinitywallet/+page.md b/docs/src/routes/docs/[...4]wallets/[...13]infinitywallet/+page.md index 5498566c7..38981c4eb 100644 --- a/docs/src/routes/docs/[...4]wallets/[...13]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/[...14]injected/+page.md b/docs/src/routes/docs/[...4]wallets/[...14]injected/+page.md index 8f317b0d8..48db47d3a 100644 --- a/docs/src/routes/docs/[...4]wallets/[...14]injected/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...14]injected/+page.md @@ -4,7 +4,7 @@ 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) as well as supports [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963) and recognizes any wallet that has implemented 6963 support. +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). Note: Make sure to install the core module before installing other modules to w3o. @@ -48,18 +48,6 @@ const onboard = Onboard({ label: 'Ethereum Mainnet', rpcUrl: MAINNET_RPC_URL }, - { - id: 42161, - token: 'ARB-ETH', - label: 'Arbitrum One', - rpcUrl: 'https://rpc.ankr.com/arbitrum' - }, - { - id: '0xa4ba', - token: 'ARB', - label: 'Arbitrum Nova', - rpcUrl: 'https://nova.arbitrum.io/rpc' - }, { id: '0x2105', token: 'ETH', @@ -189,19 +177,6 @@ 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: @@ -324,7 +299,7 @@ const injected = injectedModule({ - Trust - _Desktop & Mobile_ - SafePal - _Desktop & Mobile_ - Zerion - _Desktop & Mobile_ -- OKX Wallet - _Desktop & Mobile_ +- OKX Wallet - _Desktop_ - Taho (Previously named Tally Ho wallet) - _Desktop_ - Opera - _Desktop & Mobile_ - Status - _Mobile_ @@ -347,10 +322,11 @@ const injected = injectedModule({ - TP - _Mobile_ - 1inch - _Mobile_ - Tokenary - _Mobile_ -- Rabby - _Desktop & Mobile_ +- GameStop - _Desktop_ +- Rabby - _Desktop_ - MathWallet - _Desktop & Mobile_ +- Gamestop - _Desktop_ - Bitkeep - _Desktop & Mobile_ -- BitGet Wallet - _Desktop & Mobile_ - Sequence - _Desktop & Mobile_ - Core - _Desktop_ - Bitski - _Desktop & Mobile_ @@ -369,8 +345,6 @@ const injected = injectedModule({ - Ronin Wallet - _Desktop & Mobile_ - Coin98 Wallet - _Desktop & Mobile_ - SubWallet - _Desktop & Mobile_ -- Kayros - _Desktop_ -- Lif3Wallet - _Mobile_ ## Build Environments diff --git a/docs/src/routes/docs/[...4]wallets/[...15]keepkey/+page.md b/docs/src/routes/docs/[...4]wallets/[...15]keepkey/+page.md index 68dafb1af..0b24f6309 100644 --- a/docs/src/routes/docs/[...4]wallets/[...15]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/[...16]keystone/+page.md b/docs/src/routes/docs/[...4]wallets/[...16]keystone/+page.md index 9ae0348ae..97be3032b 100644 --- a/docs/src/routes/docs/[...4]wallets/[...16]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/[...17]ledger/+page.md b/docs/src/routes/docs/[...4]wallets/[...17]ledger/+page.md index 41de7ec78..d1b77249a 100644 --- a/docs/src/routes/docs/[...4]wallets/[...17]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/[...18]magic/+page.md b/docs/src/routes/docs/[...4]wallets/[...18]magic/+page.md index e3e4a9b75..8dd28e593 100644 --- a/docs/src/routes/docs/[...4]wallets/[...18]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/[...19]metamask/+page.md b/docs/src/routes/docs/[...4]wallets/[...19]metamask/+page.md index b5126ed9b..9af480d98 100644 --- a/docs/src/routes/docs/[...4]wallets/[...19]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://docs.metamask.io/wallet/how-to/connect/set-up-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/[...20]mew/+page.md b/docs/src/routes/docs/[...4]wallets/[...20]mew/+page.md index e147d5156..e0706a648 100644 --- a/docs/src/routes/docs/[...4]wallets/[...20]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/[...21]mewwallet/+page.md b/docs/src/routes/docs/[...4]wallets/[...21]mewwallet/+page.md index 544e6b6e8..73eb8c325 100644 --- a/docs/src/routes/docs/[...4]wallets/[...21]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/[...23]phantom/+page.md b/docs/src/routes/docs/[...4]wallets/[...23]phantom/+page.md index fd71019fc..8ae19d8d0 100644 --- a/docs/src/routes/docs/[...4]wallets/[...23]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/[...25]taho/+page.md b/docs/src/routes/docs/[...4]wallets/[...25]taho/+page.md index 731d959bd..7632e5a68 100644 --- a/docs/src/routes/docs/[...4]wallets/[...25]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/[...26]tallyho/+page.md b/docs/src/routes/docs/[...4]wallets/[...26]tallyho/+page.md index 3bc1b0cde..4ceead32d 100644 --- a/docs/src/routes/docs/[...4]wallets/[...26]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/[...27]torus/+page.md b/docs/src/routes/docs/[...4]wallets/[...27]torus/+page.md index 97d361881..c197cdfea 100644 --- a/docs/src/routes/docs/[...4]wallets/[...27]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/[...28]trezor/+page.md b/docs/src/routes/docs/[...4]wallets/[...28]trezor/+page.md index 8b1e42176..ec8bafe11 100644 --- a/docs/src/routes/docs/[...4]wallets/[...28]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/[...29]uauth/+page.md b/docs/src/routes/docs/[...4]wallets/[...29]uauth/+page.md index 36639a6c8..dea3c5f3d 100644 --- a/docs/src/routes/docs/[...4]wallets/[...29]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/[...30]venly/+page.md b/docs/src/routes/docs/[...4]wallets/[...30]venly/+page.md index 934553122..ef9ef544a 100644 --- a/docs/src/routes/docs/[...4]wallets/[...30]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/[...32]walletlink/+page.md b/docs/src/routes/docs/[...4]wallets/[...32]walletlink/+page.md index 009dffd73..6db33659c 100644 --- a/docs/src/routes/docs/[...4]wallets/[...32]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/[...33]web3auth/+page.md b/docs/src/routes/docs/[...4]wallets/[...33]web3auth/+page.md index 2373d94b6..5fae5fc46 100644 --- a/docs/src/routes/docs/[...4]wallets/[...33]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/[...34]xdefi/+page.md b/docs/src/routes/docs/[...4]wallets/[...34]xdefi/+page.md index d462c6616..cd8993ace 100644 --- a/docs/src/routes/docs/[...4]wallets/[...34]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/[...35]zeal/+page.md b/docs/src/routes/docs/[...4]wallets/[...35]zeal/+page.md index d8cb7433b..2f4a1c1c7 100644 --- a/docs/src/routes/docs/[...4]wallets/[...35]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 index 4b18ae26c..f165d7fe2 100644 --- a/docs/src/routes/docs/[...4]wallets/[...5]capsule/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...5]capsule/+page.md @@ -1,47 +1,68 @@ -# Capsule +# Para -## Wallet module for connecting Capsule to web3-onboard +## Wallet module for connecting Para Embedded Wallets to web3-onboard -[Capsule](https://usecapsule.com/) is a signing solution that you can use to create secure embedded MPC wallets with just an email or social login that 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. +[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 -Adding the Capsule Module to web3onboard gives your users the ability to log in with Capsule wallets created elsewhere. You can also [request a Capsule API Key](https://form.typeform.com/to/hLaJeYJW) to allow users to easily create embedded wallets within web3onboard without any extra integration steps. +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 [Capsule Developer Docs](https://docs.usecapsule.com/) +To learn more, check out the [Para Developer Docs](https://docs.getpara.com/) ### Install -`yarn add @web3-onboard/capsule` + + + +```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 CapsuleInitOptions = { - environment: Environment +type ParaInitOptions = { + environment: string + apiKey: string + /** @optional para object opts */ + constructorOpts?: Partial appName: string - apiKey?: string + /** @optional para modal props */ + modalProps?: Partial } ``` -`environment` - The environment to which you want to connect, either `Environment.DEVELOPMENT` for testnets and development only or `Environment.PRODUCTION` for production use. -`appName` - Your Application's name - displayed in the modal when your users are prompted to log in. -`apiKey` - Your Capsule API Key. Required for new user creation, but not required if you are only allowing users to log in. To get an API key, fill out [this form](https://form.typeform.com/to/hLaJeYJW). - ## Usage ```typescript import Onboard from '@web3-onboard/core' -import capsuleModule from '@web3-onboard/capsule' - -// initialize the module with options -const capsule = capsuleModule() - -const onboard = Onboard({ - // ... other Onboard options - wallets: [ - capsule - //... other wallets - ] -}) +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) diff --git a/docs/src/routes/docs/[...4]wallets/[...6]coinbase/+page.md b/docs/src/routes/docs/[...4]wallets/[...6]coinbase/+page.md index dca3a30c1..5b19de51b 100644 --- a/docs/src/routes/docs/[...4]wallets/[...6]coinbase/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...6]coinbase/+page.md @@ -4,7 +4,7 @@ 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. +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 @@ -29,10 +29,21 @@ npm install @web3-onboard/coinbase ```typescript type CoinbaseWalletOptions = { - darkMode: boolean // default = false + /** @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 @@ -40,7 +51,7 @@ import Onboard from '@web3-onboard/core' import coinbaseWalletModule from '@web3-onboard/coinbase' // initialize the module with options -const coinbaseWalletSdk = coinbaseWalletModule({ darkMode: true }) +const coinbaseWalletSdk = coinbaseWalletModule() // can also initialize with no options... // const coinbaseWalletSdk = coinbaseWalletSdk() diff --git a/docs/src/routes/docs/[...4]wallets/[...7]dcent/+page.md b/docs/src/routes/docs/[...4]wallets/[...7]dcent/+page.md index 402f6db37..5221b4aef 100644 --- a/docs/src/routes/docs/[...4]wallets/[...7]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/[...8]enkrypt/+page.md b/docs/src/routes/docs/[...4]wallets/[...8]enkrypt/+page.md index e53e0e57c..0f3f9428b 100644 --- a/docs/src/routes/docs/[...4]wallets/[...8]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/[...9]fortmatic/+page.md b/docs/src/routes/docs/[...4]wallets/[...9]fortmatic/+page.md index 6e951585e..f5b0a31be 100644 --- a/docs/src/routes/docs/[...4]wallets/[...9]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/dot.ts b/packages/core/src/icons/dot.ts new file mode 100644 index 000000000..50d88cea9 --- /dev/null +++ b/packages/core/src/icons/dot.ts @@ -0,0 +1,38 @@ +export default` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +` + diff --git a/packages/core/src/icons/download.ts b/packages/core/src/icons/download.ts new file mode 100644 index 000000000..0d081575c --- /dev/null +++ b/packages/core/src/icons/download.ts @@ -0,0 +1,6 @@ +export default` + + + +` + diff --git a/packages/core/src/icons/elipsis.ts b/packages/core/src/icons/elipsis.ts index 00248fab3..c487b3981 100644 --- a/packages/core/src/icons/elipsis.ts +++ b/packages/core/src/icons/elipsis.ts @@ -1,5 +1,5 @@ export default ` - + ` diff --git a/packages/core/src/icons/error.ts b/packages/core/src/icons/error.ts index 7b6a96ad8..d5d946db8 100644 --- a/packages/core/src/icons/error.ts +++ b/packages/core/src/icons/error.ts @@ -1,4 +1,7 @@ -export default ` - +export default ` + + + + ` diff --git a/packages/core/src/icons/eth.ts b/packages/core/src/icons/eth.ts new file mode 100644 index 000000000..d6388e286 --- /dev/null +++ b/packages/core/src/icons/eth.ts @@ -0,0 +1,30 @@ +export default ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + +` diff --git a/packages/core/src/icons/ethereum.ts b/packages/core/src/icons/ethereum.ts index 96f0aaad5..ede4e7879 100644 --- a/packages/core/src/icons/ethereum.ts +++ b/packages/core/src/icons/ethereum.ts @@ -1,5 +1,5 @@ export default ` - + diff --git a/packages/core/src/icons/fantom.ts b/packages/core/src/icons/fantom.ts index 2017057cc..67ebab61f 100644 --- a/packages/core/src/icons/fantom.ts +++ b/packages/core/src/icons/fantom.ts @@ -1,5 +1,5 @@ export default ` - + ` diff --git a/packages/core/src/icons/gnosis.ts b/packages/core/src/icons/gnosis.ts index afbe6bc58..3ec2dc743 100644 --- a/packages/core/src/icons/gnosis.ts +++ b/packages/core/src/icons/gnosis.ts @@ -1,5 +1,5 @@ export default ` - + diff --git a/packages/core/src/icons/harmony-one.ts b/packages/core/src/icons/harmony-one.ts index 6460e0c94..543436511 100644 --- a/packages/core/src/icons/harmony-one.ts +++ b/packages/core/src/icons/harmony-one.ts @@ -1,5 +1,5 @@ export default ` - + diff --git a/packages/core/src/icons/hourglass.ts b/packages/core/src/icons/hourglass.ts index 3dcee91f0..76377bd58 100644 --- a/packages/core/src/icons/hourglass.ts +++ b/packages/core/src/icons/hourglass.ts @@ -1,5 +1,5 @@ export default ` - + ` diff --git a/packages/core/src/icons/hydradx.ts b/packages/core/src/icons/hydradx.ts new file mode 100644 index 000000000..28a154dbf --- /dev/null +++ b/packages/core/src/icons/hydradx.ts @@ -0,0 +1,196 @@ + +export default` + + + + + + + + + + + + + + + +` + + diff --git a/packages/core/src/icons/index.ts b/packages/core/src/icons/index.ts index 3dda66abc..e610a0498 100644 --- a/packages/core/src/icons/index.ts +++ b/packages/core/src/icons/index.ts @@ -1,6 +1,6 @@ -// bn branding -export { default as defaultBnIcon } from './blocknative-icon.js' -export { default as poweredByBlocknative } from './poweredByBlocknative.js' +// tw branding +export { default as defaultBnIcon } from './thirdweb-icon.js' +export { default as poweredByThirdweb } from './poweredByThirdweb.js' // chain icons export { default as ethereumIcon } from './ethereum.js' export { default as polygonIcon } from './polygon.js' @@ -23,3 +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 degenIcon } from './degen.js' +export { default as snaxIcon } from './snax.js' diff --git a/packages/core/src/icons/kabocha.ts b/packages/core/src/icons/kabocha.ts new file mode 100644 index 000000000..61068b09f --- /dev/null +++ b/packages/core/src/icons/kabocha.ts @@ -0,0 +1,10 @@ +export default` + + + + + +` \ No newline at end of file diff --git a/packages/core/src/icons/kusama.ts b/packages/core/src/icons/kusama.ts new file mode 100644 index 000000000..80e953e6a --- /dev/null +++ b/packages/core/src/icons/kusama.ts @@ -0,0 +1,132 @@ +export default` + + + + + + + +` + diff --git a/packages/core/src/icons/optimism.ts b/packages/core/src/icons/optimism.ts index c6a4b94d9..be1b42533 100644 --- a/packages/core/src/icons/optimism.ts +++ b/packages/core/src/icons/optimism.ts @@ -1,5 +1,5 @@ export default ` - + diff --git a/packages/core/src/icons/phala-network.ts b/packages/core/src/icons/phala-network.ts new file mode 100644 index 000000000..3e0384f66 --- /dev/null +++ b/packages/core/src/icons/phala-network.ts @@ -0,0 +1,140 @@ +export default` + + + + + + + + + + + +` + + + + diff --git a/packages/core/src/icons/polkadot.ts b/packages/core/src/icons/polkadot.ts new file mode 100644 index 000000000..1e5212cf2 --- /dev/null +++ b/packages/core/src/icons/polkadot.ts @@ -0,0 +1,108 @@ +export default` + + + + + + + + + + + + + + + + + + + + +` + + diff --git a/packages/core/src/icons/polygon.ts b/packages/core/src/icons/polygon.ts index 68fc34271..38153ebe2 100644 --- a/packages/core/src/icons/polygon.ts +++ b/packages/core/src/icons/polygon.ts @@ -1,5 +1,5 @@ export default ` - + ` diff --git a/packages/core/src/icons/poweredByBlocknative.ts b/packages/core/src/icons/poweredByBlocknative.ts deleted file mode 100644 index 41523d85e..000000000 --- a/packages/core/src/icons/poweredByBlocknative.ts +++ /dev/null @@ -1,35 +0,0 @@ -export default ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -` diff --git a/packages/core/src/icons/poweredBySubwallet.ts b/packages/core/src/icons/poweredBySubwallet.ts new file mode 100644 index 000000000..fe311c44a --- /dev/null +++ b/packages/core/src/icons/poweredBySubwallet.ts @@ -0,0 +1,23 @@ +export default ` + + + + + + + + + + + + + + + + + + + + + +` 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/qrCode.ts b/packages/core/src/icons/qrCode.ts new file mode 100644 index 000000000..673dc4d81 --- /dev/null +++ b/packages/core/src/icons/qrCode.ts @@ -0,0 +1,12 @@ +export default` + + + + + + + + + +` + diff --git a/packages/core/src/icons/rococo.ts b/packages/core/src/icons/rococo.ts new file mode 100644 index 000000000..0a4391c42 --- /dev/null +++ b/packages/core/src/icons/rococo.ts @@ -0,0 +1,11 @@ +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/statemine.ts b/packages/core/src/icons/statemine.ts new file mode 100644 index 000000000..1a32ca0aa --- /dev/null +++ b/packages/core/src/icons/statemine.ts @@ -0,0 +1,18 @@ +export default ` + + + + + + + + + + + + + + + + +` diff --git a/packages/core/src/icons/statemint.ts b/packages/core/src/icons/statemint.ts new file mode 100644 index 000000000..2d5bbc0a5 --- /dev/null +++ b/packages/core/src/icons/statemint.ts @@ -0,0 +1,18 @@ +export default ` + + + + + + + + + + + + + + + + +` diff --git a/packages/core/src/icons/subwallet-icon.ts b/packages/core/src/icons/subwallet-icon.ts new file mode 100644 index 000000000..dcdcf55f1 --- /dev/null +++ b/packages/core/src/icons/subwallet-icon.ts @@ -0,0 +1,23 @@ +export default ` + + + + + + + + + + + + + + + + + + + + + +` diff --git a/packages/core/src/icons/success.ts b/packages/core/src/icons/success.ts index 5fb3707f2..33bb9edaa 100644 --- a/packages/core/src/icons/success.ts +++ b/packages/core/src/icons/success.ts @@ -1,5 +1,7 @@ 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/icons/turing-network.ts b/packages/core/src/icons/turing-network.ts new file mode 100644 index 000000000..df73663af --- /dev/null +++ b/packages/core/src/icons/turing-network.ts @@ -0,0 +1,529 @@ +export default ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ` + diff --git a/packages/core/src/icons/vector.ts b/packages/core/src/icons/vector.ts new file mode 100644 index 000000000..444d3b8f7 --- /dev/null +++ b/packages/core/src/icons/vector.ts @@ -0,0 +1,8 @@ +export default` + + + + + +` + diff --git a/packages/core/src/icons/westend.ts b/packages/core/src/icons/westend.ts new file mode 100644 index 000000000..e02f30c14 --- /dev/null +++ b/packages/core/src/icons/westend.ts @@ -0,0 +1,1279 @@ +export default` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +` + diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index f125cd856..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 { 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,7 +15,6 @@ 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 { validateInitOptions, @@ -33,10 +32,11 @@ import { setWalletModules, updateConnectModal, updateTheme, - updateAppMetadata + updateAppMetadata, + updateChain } from './store/actions.js' -import type { PatchedEIP1193Provider } from '@web3-onboard/transaction-preview' -import { getBlocknativeSdk } from './services.js' +import type { WagmiModuleAPI } from '@web3-onboard/wagmi' +import { wagmiProviderMethods } from './provider' const API = { connectWallet, @@ -50,7 +50,6 @@ const API = { setLocale, updateNotify, customNotification, - preflightNotifications, updateBalances, updateAccountCenter, setPrimaryWallet, @@ -74,8 +73,8 @@ export type { Notification, Notify, UpdateNotification, - PreflightNotificationsOptions, - Theme + Theme, + WagmiConfig } from './types.js' export type { EIP1193Provider } from '@web3-onboard/common' @@ -97,7 +96,6 @@ function init(options: InitOptions): OnboardAPI { appMetadata, i18n, accountCenter, - apiKey, notify, gas, connect, @@ -105,7 +103,8 @@ function init(options: InitOptions): OnboardAPI { transactionPreview, theme, disableFontDownload, - unstoppableResolution + unstoppableResolution, + wagmi } = options if (containerElements) updateConfiguration({ containerElements }) @@ -121,8 +120,10 @@ function init(options: InitOptions): OnboardAPI { initI18N(i18n) addChains(chainIdToHex(chains)) - if (typeof connect !== undefined) { - updateConnectModal(connect) + if (typeof connect !== 'undefined') { + updateConnectModal( + connect as ConnectModalOptions | Partial + ) } // update accountCenter if (typeof accountCenter !== 'undefined') { @@ -145,11 +146,25 @@ 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) @@ -158,7 +173,9 @@ function init(options: InitOptions): OnboardAPI { } if ( - (!notify.desktop || (notify.desktop && !notify.desktop.position)) && + notify && + notify.desktop && + notify.desktop.position && accountCenter && accountCenter.desktop && accountCenter.desktop.position @@ -167,7 +184,9 @@ function init(options: InitOptions): OnboardAPI { } if ( - (!notify.mobile || (notify.mobile && !notify.mobile.position)) && + notify && + notify.mobile && + notify.mobile.position && accountCenter && accountCenter.mobile && accountCenter.mobile.position @@ -175,7 +194,7 @@ function init(options: InitOptions): OnboardAPI { notify.mobile.position = accountCenter.mobile.position } - let notifyUpdate: Partial + let notifyUpdate: Partial = {} if (device.type === 'mobile' && notify.mobile) { notifyUpdate = { @@ -210,33 +229,23 @@ 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) @@ -250,7 +259,9 @@ function init(options: InitOptions): OnboardAPI { STORAGE_KEYS.LAST_CONNECTED_WALLET ) try { - const lastConnectedWalletsParsed = JSON.parse(lastConnectedWallets) + const lastConnectedWalletsParsed = JSON.parse( + lastConnectedWallets as string + ) if ( lastConnectedWalletsParsed && Array.isArray(lastConnectedWalletsParsed) && @@ -258,6 +269,12 @@ function init(options: InitOptions): OnboardAPI { ) { 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 @@ -329,6 +346,7 @@ const connectAllPreviousWallets = async ( } } } + setLocalStore( STORAGE_KEYS.LAST_CONNECTED_WALLET, JSON.stringify(activeWalletsList) @@ -451,7 +469,14 @@ 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' diff --git a/packages/core/src/notify.ts b/packages/core/src/notify.ts index 46401494d..cc37f684a 100644 --- a/packages/core/src/notify.ts +++ b/packages/core/src/notify.ts @@ -1,162 +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': - 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 3b418d58d..000000000 --- a/packages/core/src/preflight-notifications.ts +++ /dev/null @@ -1,228 +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) - - // 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)) - - // 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 { - hash = await sendTransaction() - } catch (error) { - type CatchError = { - message: string - stack: string - } - const { eventCode, errorMsg } = extractMessageFromError(error as CatchError) - - addNotification(buildNotification(eventCode, id)) - console.error(errorMsg) - return - } - - // Remove preflight notification if a resolves to hash - // and let the SDK take over - removeNotification(id) - if (hash) { - return hash - } - return -} - -const buildNotification = (eventCode: string, id: string): Notification => { - return { - eventCode, - type: eventToType(eventCode), - id, - key: createKey(id, eventCode), - message: createMessageText(eventCode), - startTime: Date.now(), - network: Object.keys(networkToChainId).find( - key => networkToChainId[key] === state.get().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('transaction underpriced')) { - return { - eventCode: 'txUnderpriced', - errorMsg: 'Transaction is under priced' - } - } - - return { - eventCode: 'txError', - 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 3d45f9985..6ee34f2b1 100644 --- a/packages/core/src/provider.ts +++ b/packages/core/src/provider.ts @@ -1,17 +1,24 @@ -import { 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 { weiToEth } from '@web3-onboard/common' +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 { chainIdToViemENSImport, validEnsChain } from './utils.js' import disconnect from './disconnect.js' import { state } from './store/index.js' -import { getBNMulitChainSdk } from './services.js' import { configuration } from './configuration.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, @@ -24,32 +31,32 @@ import type { import type { Account, - Address, Balances, Ens, WalletPermission, WalletState } from './types.js' -import type { Uns } from '@web3-onboard/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 function requestAccounts( @@ -143,7 +150,8 @@ export function trackWallet( } const { wallets } = state.get() - const { accounts } = wallets.find(wallet => wallet.label === label) + const wallet = wallets.find(wallet => wallet.label === label) + const accounts = wallet ? wallet.accounts : [] const [[existingAccount], restAccounts] = partition( accounts, @@ -154,7 +162,7 @@ export function trackWallet( updateWallet(label, { accounts: [ existingAccount || { - address: address, + address: address as Address, ens: null, uns: null, balance: null @@ -162,27 +170,6 @@ export function trackWallet( ...restAccounts ] }) - - // if not existing account and notifications, - // then subscribe to transaction events - if (state.get().notify.enabled && !existingAccount) { - const sdk = await getBNMulitChainSdk() - - if (sdk) { - const wallet = state - .get() - .wallets.find(wallet => wallet.label === label) - try { - 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 @@ -194,6 +181,8 @@ export function trackWallet( const { wallets, chains } = state.get() const primaryWallet = wallets.find(wallet => wallet.label === label) + if (!primaryWallet) return // Add null check for primaryWallet + const { chains: walletChains, accounts } = primaryWallet const [connectedWalletChain] = walletChains @@ -202,13 +191,10 @@ export function trackWallet( ({ namespace, id }) => namespace === 'evm' && id === connectedWalletChain.id ) + if (!chain) return const balanceProm = getBalance(address, chain) - const secondaryTokenBal = updateSecondaryTokens( - primaryWallet, - address, - chain - ) + const secondaryTokenBal = updateSecondaryTokens(address, chain) const account = accounts.find(account => account.address === address) const ensChain = chains.find( @@ -225,7 +211,9 @@ export function trackWallet( const unsProm = account && account.uns ? Promise.resolve(account.uns) - : getUns(address, chain) + : ensChain + ? getUns(address, ensChain) + : Promise.resolve(null) return Promise.all([ Promise.resolve(address), @@ -249,43 +237,14 @@ export function trackWallet( // Update chain on wallet when chainId changed chainChanged$.subscribe(async chainId => { const { wallets } = state.get() - const { chains, accounts } = wallets.find(wallet => wallet.label === label) + 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) - - // 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 }) => @@ -309,21 +268,20 @@ export function trackWallet( switchMap(async chainId => { const { wallets, chains } = state.get() const primaryWallet = wallets.find(wallet => wallet.label === label) - const { accounts } = primaryWallet - + 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) - const secondaryTokenBal = updateSecondaryTokens( - primaryWallet, - address, - chain - ) + const secondaryTokenBal = updateSecondaryTokens(address, chain) const ensChain = chains.find( ({ id }) => id === validEnsChain(chainId) ) @@ -332,7 +290,7 @@ export function trackWallet( ? getEns(address, ensChain) : Promise.resolve(null) - const unsProm = validEnsChain(chainId) + const unsProm = ensChain ? getUns(address, ensChain) : Promise.resolve(null) @@ -370,29 +328,39 @@ export async function getEns( // 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) + const { labelhash, normalize } = await import('viem/ens') + const normalizedName = normalize(name) - if (resolver) { - const [contentHash, avatar] = await Promise.all([ - resolver.getContentHash(), - resolver.getAvatar() - ]) - - 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 } } @@ -411,7 +379,7 @@ export async function getUns( // 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) @@ -422,7 +390,7 @@ export async function getUns( } export async function getBalance( - address: string, + address: Address, chain: Chain ): Promise { // chain we don't recognize and don't have a rpcUrl for requests @@ -432,12 +400,15 @@ export async function getBalance( try { const wallet = wallets.find(wallet => !!wallet.provider) + if (!wallet) return null const provider = wallet.provider - const balanceHex = await provider.request({ + const balanceHex = (await provider.request({ method: 'eth_getBalance', params: [address, 'latest'] - }) - return balanceHex ? { [chain.token || 'eth']: weiToEth(balanceHex) } : null + })) as `0x${string}` + return balanceHex + ? { [chain.token || 'eth']: weiHexToEth(balanceHex) } + : null } catch (error) { console.error(error) return null @@ -472,7 +443,7 @@ export function addNewChain( rpcUrls: [chain.publicRpcUrl || chain.rpcUrl], blockExplorerUrls: chain.blockExplorerUrl ? [chain.blockExplorerUrl] - : undefined + : null } ] }) @@ -521,6 +492,7 @@ export async function syncWalletConnectedAccounts( label: WalletState['label'] ): Promise { 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' @@ -540,3 +512,32 @@ export async function syncWalletConnectedAccounts( } } } + +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 378e452f5..3b6a5de37 100644 --- a/packages/core/src/replacement.ts +++ b/packages/core/src/replacement.ts @@ -1,9 +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 { GasPrice } from '@web3-onboard/gas' const ACTIONABLE_EVENT_CODES: string[] = ['txPool'] const VALID_GAS_NETWORKS: Network[] = ['main', 'matic-main'] @@ -38,24 +39,30 @@ 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) @@ -71,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/signMessage.ts b/packages/core/src/signMessage.ts new file mode 100644 index 000000000..762bd5941 --- /dev/null +++ b/packages/core/src/signMessage.ts @@ -0,0 +1,65 @@ +import type { WalletState } from './types'; +import { + signDummy, + signEthSignMessageRequest, + signPersonalSignMessageRequest, + signTypedData_v4MessageRequest, + signTypedDataMessageRequest +} from './provider'; +import { customNotification, sendSignMessage } from './store/actions'; +import type { EIP1193Provider } from '@subwallet-connect/common'; + + +async function signMessageAllTypeWallet ( + wallet : WalletState, + signMethodType : string, +) { + let message : string; + const { update, dismiss } = customNotification({ + type: 'pending', + message: + 'This is a custom DApp pending notification to use however you want', + autoDismiss: 0 + }) + try { + if (wallet.type === 'evm') { + if (signMethodType === 'ETH Sign') { + message = await signEthSignMessageRequest( + wallet.provider as EIP1193Provider + ); + } else if (signMethodType === 'Personal Sign') { + message = await signPersonalSignMessageRequest( + wallet.provider as EIP1193Provider + ); + } else if (signMethodType === 'Sign Typed Data') { + message = await signTypedDataMessageRequest( + wallet.provider as EIP1193Provider + ); + } else if (signMethodType === 'Sign Typed Data v4') { + message = await signTypedData_v4MessageRequest( + wallet.provider as EIP1193Provider + ) + } + }else if( wallet.type === 'substrate' && signMethodType === 'signMessageForSubstrateWallet') { + message = await signDummy( wallet ); + } + sendSignMessage(message) + update({ + eventCode: 'dbUpdateSuccess', + message: `success message is success`, + type: 'success', + autoDismiss: 0 + }) + setTimeout(()=> dismiss(), 3000) + } catch (e) { + update({ + eventCode: 'dbUpdateError', + message: `Failed, error ${(e as Error).message}`, + type: 'error', + autoDismiss: 0 + }) + dismiss() + } +} + +export default signMessageAllTypeWallet diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts index b813ec2e0..a2cf322e0 100644 --- a/packages/core/src/store/actions.ts +++ b/packages/core/src/store/actions.ts @@ -1,8 +1,15 @@ -import type { AppMetadata, Chain, WalletInit, WalletModule } from '@web3-onboard/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, @@ -30,7 +37,8 @@ import type { UpdateConnectModalAction, Theme, UpdateChainsAction, - UpdateAppMetadataAction + UpdateAppMetadataAction, + UpdateWagmiConfigAction } from '../types.js' import { @@ -66,8 +74,11 @@ import { UPDATE_ALL_WALLETS, UPDATE_CONNECT_MODAL, UPDATE_CHAINS, - UPDATE_APP_METADATA + UPDATE_APP_METADATA, + UPDATE_WAGMI_CONFIG } from './constants.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 @@ -86,15 +97,19 @@ export function addChains(chains: Chain[]): void { export function updateChain(updatedChain: Chain): void { const { - label, - token, - rpcUrl, - id: chainId, + label, + token, + rpcUrl, + 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 @@ -178,13 +193,16 @@ export function setPrimaryWallet(wallet: WalletState, address?: string): void { } } + // Update wagmi config if wagmi is being used + handleWagmiConnectorUpdate(wallet) + // 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 = { @@ -299,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 @@ -406,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 }) @@ -443,7 +466,7 @@ export function updateTheme(theme: Theme): void { } export function updateAppMetadata( - update: AppMetadata| Partial + update: AppMetadata | Partial ): void { const error = validateAppMetadataUpdate(update) @@ -458,3 +481,31 @@ export function updateAppMetadata( dispatch(action as UpdateAppMetadataAction) } + +export function updateWagmiConfig(update: Config): void { + const action = { + type: UPDATE_WAGMI_CONFIG, + payload: update + } + + 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 16ac82d9f..af0608d1d 100644 --- a/packages/core/src/store/constants.ts +++ b/packages/core/src/store/constants.ts @@ -14,3 +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 UPDATE_WAGMI_CONFIG = 'update_wagmi_config' diff --git a/packages/core/src/store/index.ts b/packages/core/src/store/index.ts index 1d39323d6..7a97032cf 100644 --- a/packages/core/src/store/index.ts +++ b/packages/core/src/store/index.ts @@ -20,7 +20,8 @@ import type { UpdateAllWalletsAction, UpdateConnectModalAction, UpdateChainsAction, - UpdateAppMetadataAction + UpdateAppMetadataAction, + UpdateWagmiConfigAction } from '../types.js' import { @@ -39,7 +40,8 @@ import { REMOVE_NOTIFICATION, UPDATE_ALL_WALLETS, UPDATE_CHAINS, - UPDATE_APP_METADATA + UPDATE_APP_METADATA, + UPDATE_WAGMI_CONFIG } from './constants.js' function reducer(state: AppState, action: Action): AppState { @@ -227,11 +229,21 @@ function reducer(state: AppState, action: Action): AppState { ...state, appMetadata: { ...state.appMetadata, - ...update + ...update, + name: update.name || '' } } } + case UPDATE_WAGMI_CONFIG: { + const update = payload as UpdateWagmiConfigAction['payload'] + + return { + ...state, + wagmiConfig: update + } + } + case RESET_STORE: return APP_INITIAL_STATE diff --git a/packages/core/src/streams.ts b/packages/core/src/streams.ts index 7fc43acc1..a14321607 100644 --- a/packages/core/src/streams.ts +++ b/packages/core/src/streams.ts @@ -1,4 +1,4 @@ -import type { Chain } from '@web3-onboard/common' +import type { Chain } from '@subwallet-connect/common' import { onDestroy, onMount, beforeUpdate, afterUpdate } from 'svelte' import { Observable, Subject, defer, BehaviorSubject } from 'rxjs' import { @@ -9,14 +9,22 @@ import { shareReplay } from 'rxjs/operators' + import { resetStore } from './store/actions.js' import { state } from './store/index.js' -import type { WalletState, ConnectOptions } from './types.js' +import type { WalletState, ConnectOptions, ModalQrConnect } from './types.js' import type { EthereumTransactionData } from 'bnc-sdk' + export const reset$ = new Subject() -export const disconnectWallet$ = new Subject() +export const disconnectWallet$ = new Subject>() + +export const qrModalConnect$ = new BehaviorSubject({ + isOpen: false +}); + +export const uriConnect$ = new BehaviorSubject('') export const connectWallet$ = new BehaviorSubject<{ autoSelect?: ConnectOptions['autoSelect'] @@ -29,14 +37,14 @@ export const switchChainModal$ = new BehaviorSubject(null) export const wallets$ = ( - state.select('wallets') as Observable + state.select('wallets') as Observable ).pipe(shareReplay(1)) // reset logic reset$.pipe(withLatestFrom(wallets$), pluck('1')).subscribe(wallets => { // disconnect all wallets - wallets.forEach(({ label }) => { - disconnectWallet$.next(label) + wallets.forEach(({ label, type }) => { + disconnectWallet$.next({ label, type }) }) resetStore() @@ -52,7 +60,7 @@ export function updateTransaction(tx: EthereumTransactionData): void { if (txIndex !== -1) { const updatedTransactions = currentTransactions.map((val, i) => - i === txIndex ? tx : val + i === txIndex ? tx : val ) transactions$.next(updatedTransactions) diff --git a/packages/core/src/themes.ts b/packages/core/src/themes.ts index 6922d7700..eb5846321 100644 --- a/packages/core/src/themes.ts +++ b/packages/core/src/themes.ts @@ -4,13 +4,14 @@ import type { BuiltInThemes, Theme, ThemingMap } from './types' export const themes = { default: { - '--w3o-background-color': 'unset', - '--w3o-foreground-color': 'unset', - '--w3o-text-color': 'unset', - '--w3o-border-color': 'unset', - '--w3o-action-color': 'unset', - '--w3o-border-radius': 'unset', - '--w3o-font-family': 'inherit' + '--w3o-background-color': '#0C0C0C', + '--w3o-foreground-color': '#0C0C0C', + '--w3o-text-color': 'rgba(255, 255, 255, 0.8)', + '--w3o-border-color': '#212121', + '--w3o-action-color': '#252525', + '--w3o-border-radius': '16px', + '--w3o-font-family': 'inherit', + '--w3o-background-color-item': '#1A1A1A' }, light: { '--w3o-background-color': '#ffffff', @@ -19,16 +20,18 @@ export const themes = { '--w3o-border-color': '#d0d4f7', '--w3o-action-color': '#6370E5', '--w3o-border-radius': '16px', - '--w3o-font-family': 'inherit' + '--w3o-font-family': 'inherit', + '--w3o-background-color-item': 'inherit' }, dark: { - '--w3o-background-color': '#1A1D26', - '--w3o-foreground-color': '#242835', - '--w3o-text-color': '#EFF1FC', - '--w3o-border-color': '#33394B', - '--w3o-action-color': '#929bed', + '--w3o-background-color': '#0C0C0C', + '--w3o-foreground-color': '#0C0C0C', + '--w3o-text-color': 'rgba(255, 255, 255, 0.8)', + '--w3o-border-color': '#212121', + '--w3o-action-color': '#252525', '--w3o-border-radius': '16px', - '--w3o-font-family': 'inherit' + '--w3o-font-family': 'inherit', + '--w3o-background-color-item': '#1A1A1A' } } @@ -52,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/types.ts b/packages/core/src/types.ts index bdeb047ae..86980bdd2 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -1,5 +1,5 @@ import type { SvelteComponent } from 'svelte' - +import type { InjectedMetadata } from '@polkadot/extension-inject/types'; import type { AppMetadata, Device, @@ -8,15 +8,17 @@ import type { WalletModule, Chain, TokenSymbol, - ChainWithDecimalId -} from '@web3-onboard/common' - -import type gas from '@web3-onboard/gas' -import type unstoppableResolution from '@web3-onboard/unstoppable-resolution' -import type { TransactionPreviewAPI } from '@web3-onboard/transaction-preview' + ChainWithDecimalId, AccountAddress, SubstrateProvider +} from '@subwallet-connect/common' +import type { WalletConnectModal } from '@walletconnect/modal'; +import type gas from '@subwallet-connect/gas' +import type unstoppableResolution from '@subwallet-connect/unstoppable-resolution' +import type { TransactionPreviewAPI } from '@subwallet-connect/transaction-preview' import type en from './i18n/en.json' import type { EthereumTransactionData, Network } from 'bnc-sdk' +import type { Signer } from '@polkadot/types/types'; +import type { WalletConnectModalConfig } from '@walletconnect/modal/dist/_types/src/client'; export interface InitOptions { /** @@ -84,7 +86,12 @@ export interface InitOptions { * address resolution similar to that of ens (Ethereum Name Service) * ENS resolution will take president if available */ - unstoppableResolution?: typeof unstoppableResolution + unstoppableResolution?: typeof unstoppableResolution, + + wcConfigOption ?: WalletConnectModalConfig + + chainsPolkadot: Chain[] + } export type Theme = ThemingMap | BuiltInThemes | 'system' @@ -98,10 +105,11 @@ export type ThemingMap = { '--w3o-text-color'?: string '--w3o-border-color'?: string '--w3o-action-color'?: string - '--w3o-border-radius'?: string + '--w3o-border-radius'?: string, + '--w3o-background-color-item'?: string, } export interface ConnectOptions { - autoSelect?: { label: string; disableModals: boolean } + autoSelect?: { label: string; disableModals: boolean, type : WalletState['type'] } } export interface ConnectOptionsString { @@ -109,7 +117,8 @@ export interface ConnectOptionsString { } export interface DisconnectOptions { - label: string // wallet name to disconnect + label: string, + type: 'substrate' | 'evm'// wallet name to disconnect } export interface WalletWithLoadedIcon extends Omit { @@ -117,7 +126,7 @@ export interface WalletWithLoadedIcon extends Omit { } export interface WalletWithLoadingIcon - extends Omit { + extends Omit { icon: Promise } @@ -129,12 +138,15 @@ export type ConnectedChain = { export interface WalletState { label: string // wallet name icon: string // wallet icon svg string - provider: EIP1193Provider + provider: EIP1193Provider | SubstrateProvider accounts: Account[] // in future it will be possible that a wallet // is connected to multiple chains at once chains: ConnectedChain[] - instance?: unknown + instance?: unknown, + signer ?: Signer | undefined, + metadata ?: InjectedMetadata, + type : 'evm' | 'substrate' } export type Account = { @@ -143,8 +155,10 @@ export type Account = { uns: Uns | null balance: Balances | null secondaryTokens?: SecondaryTokenBalances[] | null + message ?: string } + export type Balances = Record | null export interface SecondaryTokenBalances { @@ -254,19 +268,20 @@ export type ConnectModalOptions = { */ removeIDontHaveAWalletInfoLink?: boolean /** - * @deprecated Has no effect unless `@web3-onboard/unstoppable-resolution` + * @deprecated Has no effect unless `@subwallet-connect/unstoppable-resolution` * package has been added and passed into the web3-onboard initialization - * In this case remove the `@web3-onboard/unstoppable-resolution` package + * In this case remove the `@subwallet-connect/unstoppable-resolution` package * to remove unstoppableDomain resolution support */ disableUDResolution?: boolean } export type CommonPositions = - | 'topRight' - | 'bottomRight' - | 'bottomLeft' - | 'topLeft' + | 'topRight' + | 'bottomRight' + | 'bottomLeft' + | 'topLeft' + | 'topCenter' export type AccountCenterPosition = CommonPositions @@ -282,13 +297,13 @@ export type AccountCenter = { */ hideTransactionProtectionBtn?: boolean /** - * Controls the visibility of the 'Enable Transaction Protection' button + * Controls the visibility of the 'Enable Transaction Protection' button * within the expanded Account Center. * - When set to false (default), the button is visible. * - When set to true, the button is hidden. - * This setting can be configured globally for the Account Center, or + * This setting can be configured globally for the Account Center, or * separately for different interfaces like desktop/mobile. - * defaults to + * defaults to * `docs.blocknative.com/blocknative-mev-protection/transaction-boost-alpha` * Use this property to override the default link to give users * more information about transaction protection and the RPC be set @@ -308,13 +323,13 @@ export type AccountCenterOptions = { desktop: Omit mobile: Omit /** - * Controls the visibility of the 'Enable Transaction Protection' button + * Controls the visibility of the 'Enable Transaction Protection' button * within the expanded Account Center. * - When set to false (default), the button is visible. * - When set to true, the button is hidden. - * This setting can be configured globally for the Account Center, or + * This setting can be configured globally for the Account Center, or * separately for different interfaces like desktop/mobile. - * defaults to + * defaults to * `docs.blocknative.com/blocknative-mev-protection/transaction-boost-alpha` * Use this property to override the default link to give users * more information about transaction protection and the RPC be set @@ -358,7 +373,7 @@ export type Notify = { * Or return undefined for a default notification */ transactionHandler: ( - event: EthereumTransactionData + event: EthereumTransactionData ) => TransactionHandlerReturn /** * Position of notifications that defaults to the same position as the @@ -382,7 +397,7 @@ export type NotifyOptions = { export type Notification = { id: string key: string - network: Network + network: Network | string startTime?: number /** * to completely customize the message shown @@ -418,11 +433,11 @@ export type Notification = { export type TransactionHandlerReturn = CustomNotification | boolean | void export type CustomNotification = Partial< - Omit + Omit > export type CustomNotificationUpdate = Partial< - Omit + Omit > export type NotificationType = 'pending' | 'success' | 'error' | 'hint' @@ -435,7 +450,7 @@ export interface UpdateNotification { } export interface PreflightNotificationsOptions { - sendTransaction?: () => Promise + sendTransaction?: (fn: (hash: string) => void) => Promise estimateGas?: () => Promise gasPrice?: () => Promise balance?: string | number @@ -451,22 +466,23 @@ export interface TxDetails { // ==== ACTIONS ==== // export type Action = - | AddChainsAction - | UpdateChainsAction - | AddWalletAction - | UpdateWalletAction - | RemoveWalletAction - | ResetStoreAction - | UpdateAccountAction - | UpdateAccountCenterAction - | SetWalletModulesAction - | SetLocaleAction - | UpdateNotifyAction - | AddNotificationAction - | RemoveNotificationAction - | UpdateAllWalletsAction - | UpdateConnectModalAction - | UpdateAppMetadataAction + | AddChainsAction + | UpdateChainsAction + | AddWalletAction + | UpdateWalletAction + | RemoveWalletAction + | ResetStoreAction + | UpdateAccountAction + | UpdateAccountCenterAction + | SetWalletModulesAction + | SetLocaleAction + | UpdateNotifyAction + | AddNotificationAction + | RemoveNotificationAction + | UpdateAllWalletsAction + | UpdateConnectModalAction + | UpdateAppMetadataAction + | SendSignMessage export type AddChainsAction = { type: 'add_chains'; payload: Chain[] } export type UpdateChainsAction = { type: 'update_chains'; payload: Chain } @@ -474,12 +490,12 @@ export type AddWalletAction = { type: 'add_wallet'; payload: WalletState } export type UpdateWalletAction = { type: 'update_wallet' - payload: { id: string } & Partial + payload: { id: string, type : WalletState['type'] } & Partial } export type RemoveWalletAction = { type: 'remove_wallet' - payload: { id: string } + payload: { id: string, type : WalletState['type'] } } export type ResetStoreAction = { @@ -489,7 +505,7 @@ export type ResetStoreAction = { export type UpdateAccountAction = { type: 'update_account' - payload: { id: string; address: string } & Partial + payload: { id: string; address: string; walletType: WalletState['type'] } & Partial } export type UpdateAccountCenterAction = { @@ -537,6 +553,11 @@ export type UpdateAppMetadataAction = { payload: AppMetadata | Partial } +export type SendSignMessage = { + type : 'send_sign_message', + payload : string +} + // ==== MISC ==== // export type ChainStyle = { icon: string @@ -567,3 +588,25 @@ export type WalletPermission = { date: number } + +export type WalletConnectState = { + signer ?: Signer, + metadata ?: InjectedMetadata + address : AccountAddress[] +} + +export type ModalQrConnect = { + isOpen : boolean, + modal ?: WalletConnectModal +} + +export type PlatformType = 'Extension' | 'WebApp' | 'Cold Wallet' | 'QRcode' | 'Dapp' | 'Mobile'; + +export interface WalletStateDeviceInterface { + platform : PlatformType[], + namespace?: string +} + +export interface CustomWindow extends Window { + ethereum: EIP1193Provider & Record +} diff --git a/packages/core/src/update-balances.ts b/packages/core/src/update-balances.ts index 0766829da..e8e356219 100644 --- a/packages/core/src/update-balances.ts +++ b/packages/core/src/update-balances.ts @@ -2,99 +2,105 @@ import { state } from './store/index.js' import { getBalance } from './provider.js' import { updateAllWallets } from './store/actions.js' import { ethers } from 'ethers' -import { AccountAddress, Chain, weiToEth } from '@web3-onboard/common' +import type { AccountAddress, Chain, EIP1193Provider } from '@subwallet-connect/common' +import { weiToEth } from '@subwallet-connect/common'; import type { SecondaryTokenBalances, WalletState } from './types' async function updateBalances(addresses?: string[]): Promise { - const { wallets, chains } = state.get() - const updatedWallets = await Promise.all( - wallets.map(async wallet => { - const chain = chains.find(({ id }) => id === wallet.chains[0].id) + const { wallets, chains } = state.get() + const updatedWallets = await Promise.all( + wallets.map(async wallet => { + const chain = chains.find(({ id }) => id === wallet.chains[0].id) - const updatedAccounts = await Promise.all( - wallet.accounts.map(async account => { - const secondaryTokens = await updateSecondaryTokens( - wallet, - account.address, - chain - ) - // if no provided addresses, we want to update all balances - // otherwise check if address is in addresses array - if ( - !addresses || - addresses.some( - address => address.toLowerCase() === account.address.toLowerCase() + const updatedAccounts = await Promise.all( + wallet.accounts.map(async account => { + const secondaryTokens = await updateSecondaryTokens( + wallet, + account.address, + chain + ) + // if no provided addresses, we want to update all balances + // otherwise check if address is in addresses array + if ( + !addresses || + addresses.some( + address => + address.toLowerCase() + === account.address.toLowerCase() + ) + ) { + const updatedBalance = await + getBalance(account.address, chain, wallet.type) + // eslint-disable-next-line max-len + return { ...account, balance: updatedBalance, secondaryTokens } + } + return { ...account, secondaryTokens } + }) ) - ) { - const updatedBalance = await getBalance(account.address, chain) - return { ...account, balance: updatedBalance, secondaryTokens } - } - return { ...account, secondaryTokens } + return { ...wallet, accounts: updatedAccounts } }) - ) - return { ...wallet, accounts: updatedAccounts } - }) - ) - updateAllWallets(updatedWallets) + ) + updateAllWallets(updatedWallets) } export const updateSecondaryTokens = async ( - wallet: WalletState, - account: AccountAddress, - chain: Chain + wallet: WalletState, + account: AccountAddress, + chain: Chain ): Promise => { - if (!chain) return - const chainRPC = chain.rpcUrl - if (!chain.secondaryTokens || !chain.secondaryTokens.length || !chainRPC) - return + if (!chain) return + if( wallet.type !== 'evm') return ; + const chainRPC = chain.rpcUrl + if (!chain.secondaryTokens || !chain.secondaryTokens.length || !chainRPC) + return - const ethersProvider = new ethers.providers.Web3Provider( - wallet.provider, - 'any' - ) - const signer = ethersProvider.getSigner() + const ethersProvider = new ethers.providers.Web3Provider( + ( wallet.provider as EIP1193Provider), + 'any' + ) + const signer = ethersProvider.getSigner() - const erc20ABISubset = [ - { - inputs: [{ name: 'owner', type: 'address' }], - name: 'balanceOf', - outputs: [{ name: '', type: 'uint256' }], - stateMutability: 'view', - type: 'function' - }, - { - inputs: [], - name: 'symbol', - outputs: [{ name: '', type: 'string' }], - stateMutability: 'view', - type: 'function' - } - ] - - const tokenBalances = await Promise.all( - chain.secondaryTokens.map(async token => { - try { - const swapContract = new ethers.Contract( - token.address, - erc20ABISubset, - signer - ) - const bigNumBalance = await swapContract.balanceOf(account) - const tokenName = await swapContract.symbol() - return { - name: tokenName, - balance: weiToEth(bigNumBalance.toHexString()), - icon: token.icon + const erc20ABISubset = [ + { + inputs: [{ name: 'owner', type: 'address' }], + name: 'balanceOf', + outputs: [{ name: '', type: 'uint256' }], + stateMutability: 'view', + type: 'function' + }, + { + inputs: [], + name: 'symbol', + outputs: [{ name: '', type: 'string' }], + stateMutability: 'view', + type: 'function' } - } catch (error) { - console.error( - `There was an error fetching balance and/or symbol + ] + + const tokenBalances = await Promise.all( + chain.secondaryTokens.map(async token => { + try { + const swapContract = new ethers.Contract( + token.address, + erc20ABISubset, + signer + ) + const bigNumBalance = await swapContract.balanceOf(account) + const tokenName = await swapContract.symbol() + return { + name: tokenName, + balance: weiToEth(bigNumBalance.toHexString()), + icon: token.icon + } + } catch (error) { + console.error( + `There was an error fetching balance and/or symbol for token contract: ${token.address} - ${error}` - ) - } - }) - ) - return tokenBalances + ) + } + }) + ) + return tokenBalances } export default updateBalances diff --git a/packages/core/src/utils.ts b/packages/core/src/utils.ts index ea7a4d2cf..3f77620d4 100644 --- a/packages/core/src/utils.ts +++ b/packages/core/src/utils.ts @@ -1,5 +1,5 @@ import bowser from 'bowser' - +import axios from 'axios'; import type { Device, DeviceBrowser, @@ -10,12 +10,12 @@ import type { WalletInit, WalletModule, ChainWithDecimalId -} from '@web3-onboard/common' +} from '@subwallet-connect/common' import { hourglass, gnosisIcon, - checkmark, + successIcon, errorIcon, infoIcon, ethereumIcon, @@ -28,15 +28,27 @@ import { avalancheIcon, harmonyOneIcon, arbitrumIcon, - baseIcon + baseIcon, + polkadotIcon, + crutsIcon, + acalaIcon, + astarNetworkIcon, + hydraxIcon, + kusamaIcon, + phalaNetworkIcon, + statemintIcon, + turingNetworkIcon, + westendIcon, statemineIcon, rococoIcon } from './icons/index.js' import type { ChainStyle, ConnectedChain, DeviceNotBrowser, - NotifyEventStyles + NotifyEventStyles, PlatformType, WalletStateDeviceInterface } from './types.js' +import type { WalletState } from './types.js'; + export function getDevice(): Device | DeviceNotBrowser { if (typeof window !== 'undefined') { @@ -118,6 +130,20 @@ export function gweiToWeiHex(gwei: number): string { return `0x${(gwei * 1e9).toString(16)}` } +export enum ChainIdByGenesisHash { + POLKADOT_ID = '0x91b171bb158e2d3848fa23a9f1c25182fb8e20313b2c1eb49219da7a70ce90c3', + KUSAMA_ID = '0xb0a8d493285c2df73290dfb7e61f870f17b41801197a149ca93654499ea3dafe', + WESTEND_ID = '0xe143f23803ac50e8f6f8e62695d1ce9e4e1d68aa36c1cd2cfd15340213f3423e', + ROCOCO_ID = '0x6408de7737c59c238890533af25896a2c20608d8b380bb01029acb392781063e', + ASTAR_NETWORK_ID = '0x9eb76c5184c4ab8679d2d5d819fdf90b9c001403e9e17da2e14b6d8aec4029c6', + CRUST_MAINET_ID = '0x8b404e7ed8789d813982b9cb4c8b664c05b3fbf433309f603af014ec9ce56a8c', + HYDRADX_ID = '0xafdc188f45c71dacbaa0b62e16a91f726c7b8699a9748cdf715459de6b7f366d', + PHALA_ID = '0x1bb969d85965e4bb5a651abbedf21a54b6b31a21f66b5401cc3f1e286268d736', + STATEMINT_ID = '0x68d56f15f85d3136970ec16946040bc1752654e906147f7e43e9d539d7c3de2f', + STAEMINE_ID = '0x48239ef607d7928874027a43a67689209727dfb3d3dc5e5b03a39bdc2eda771a', + TURING_ID = '0xd54f0988402deb4548538626ce37e4a318441ea0529ca369400ebec4e04dfe4b' +} + export const chainIdToLabel: Record = { '0x1': 'Ethereum', '0x3': 'Ropsten', @@ -137,7 +163,24 @@ export const chainIdToLabel: Record = { '0x64': 'Gnosis', '0x63564C40': 'Harmony One', '0xa4b1': 'Arbitrum One', - '0xa4ba': 'Arbitrum Nova' + '0xa4ba': 'Arbitrum Nova', + 'acala' : 'Acala', + '0x507': 'Moonbase Alpha', + '0x504': 'Moonbeam', + '0x505': 'Moonriver', + '0x250': 'Astar', + '0x150': 'Shiden', + [ChainIdByGenesisHash.POLKADOT_ID] : 'Polkadot', + [ChainIdByGenesisHash.ASTAR_NETWORK_ID] : 'Astar Network', + [ChainIdByGenesisHash.CRUST_MAINET_ID] : 'Crust', + [ChainIdByGenesisHash.HYDRADX_ID] : 'Hydradx', + [ChainIdByGenesisHash.KUSAMA_ID] : 'Kusama', + [ChainIdByGenesisHash.PHALA_ID] : 'Phala Network', + [ChainIdByGenesisHash.STATEMINT_ID] : 'Statemint', + [ChainIdByGenesisHash.TURING_ID] : 'Turing Network', + [ChainIdByGenesisHash.WESTEND_ID] : 'Westend', + [ChainIdByGenesisHash.ROCOCO_ID]: 'Rococo', + [ChainIdByGenesisHash.STAEMINE_ID]: 'Statemine' } export const networkToChainId: Record = { @@ -150,7 +193,35 @@ export const networkToChainId: Record = { 'bsc-main': '0x38', 'matic-main': '0x89', 'fantom-main': '0xfa', - 'matic-mumbai': '0x80001' + 'matic-mumbai': '0x80001', + 'sepolia': '0xaa36a7', + 'Fantom': '0xfa', + 'optimism': '0xa', + 'optimism kovan': '0x45', + 'avalanche': '0xa86a', + 'celo': '0xa4ec', + 'base': '0x2105', + 'base goerli': '0x14a33', + 'harmony one': '0x63564C40', + 'arbitrum one': '0xa4b1', + 'arbitrum nova': '0xa4ba', + 'acala' : 'Acala', + 'moonbase-alpha': '0x507', + 'moonbeam': '0x504', + 'moonriver': '0x505', + 'astar-network': '0x250', + 'shiden': '0x150', + 'polkadot': ChainIdByGenesisHash.POLKADOT_ID, + 'kusama': ChainIdByGenesisHash.KUSAMA_ID, + 'astar': ChainIdByGenesisHash.ASTAR_NETWORK_ID, + 'crust': ChainIdByGenesisHash.CRUST_MAINET_ID, + 'hydradx': ChainIdByGenesisHash.HYDRADX_ID, + 'phala': ChainIdByGenesisHash.PHALA_ID, + 'stateminte': ChainIdByGenesisHash.STATEMINT_ID, + 'turing' : ChainIdByGenesisHash.TURING_ID, + 'westend': ChainIdByGenesisHash.WESTEND_ID, + 'rococo': ChainIdByGenesisHash.ROCOCO_ID, + 'statemine': ChainIdByGenesisHash.STAEMINE_ID } export const chainStyles: Record = { @@ -233,7 +304,58 @@ export const chainStyles: Record = { '0x80001': { icon: polygonIcon, color: '#8247E5' + }, + [ChainIdByGenesisHash.POLKADOT_ID] : { + icon : polkadotIcon, + color : '#ffffff' + }, + 'acala' : { + icon : acalaIcon, + color : '#ffffff' + }, + [ChainIdByGenesisHash.ASTAR_NETWORK_ID] : { + icon : astarNetworkIcon, + color : '#ffffff' + }, + [ChainIdByGenesisHash.CRUST_MAINET_ID] : { + icon: crutsIcon, + color: '#000000' + }, + [ChainIdByGenesisHash.HYDRADX_ID] : { + icon : hydraxIcon, + color : '#f453a1' + }, + [ChainIdByGenesisHash.KUSAMA_ID] : { + icon : kusamaIcon, + color: '#000000' + }, + [ChainIdByGenesisHash.PHALA_ID]: { + icon : phalaNetworkIcon, + color: '#000000' + }, + [ChainIdByGenesisHash.STATEMINT_ID] : { + icon : statemintIcon, + color : '#E6007A' + }, + [ChainIdByGenesisHash.TURING_ID] : { + icon : turingNetworkIcon, + color: '#ffffff' + }, + [ChainIdByGenesisHash.WESTEND_ID] : { + icon : westendIcon, + color: '#ffffff' + }, + [ChainIdByGenesisHash.STATEMINT_ID] : { + icon: statemineIcon, + color: '#000000' + }, + [ChainIdByGenesisHash.ROCOCO_ID]: { + icon: rococoIcon, + color: '#ffffff' } + + + } export const unrecognizedChainStyle = { icon: questionIcon, color: '#33394B' } @@ -271,22 +393,22 @@ export function initializeWalletModules( export const defaultNotifyEventStyles: Record = { pending: { - backgroundColor: 'var(--onboard-primary-700, var(--primary-700))', - borderColor: '#6370E5', + backgroundColor: '#FDB1B11A', + borderColor: 'var(--warning-800)', eventIcon: hourglass }, success: { - backgroundColor: '#052E17', - borderColor: 'var(--onboard-success-300, var(--success-300))', - eventIcon: checkmark + backgroundColor: '#FDB1B11A', + borderColor: 'var(--onboard-success-500, var(--success-500))', + eventIcon: successIcon }, error: { backgroundColor: '#FDB1B11A', - borderColor: 'var(--onboard-danger-300, var(--danger-300))', + borderColor: 'var(--onboard-danger-600, var(--danger-600))', eventIcon: errorIcon }, hint: { - backgroundColor: 'var(--onboard-gray-500, var(--gray-500))', + backgroundColor: '#FDB1B11A', borderColor: 'var(--onboard-gray-500, var(--gray-500))', iconColor: 'var(--onboard-gray-100, var(--gray-100))', eventIcon: infoIcon @@ -320,3 +442,180 @@ export function delLocalStore(key: string): void { return } } + +export const baseURL = 'https://*/api/scan/account/tokens'; + +export type dataTypeFetch = { + address : string +} +export interface clientAxiosProps { + url : string, + data: dataTypeFetch +}; + + +export async function getBalanceSubstrate({ url, data } : clientAxiosProps){ + if(url === '') return + const urlResult = baseURL.replace(/\*/g, url); + return await axios.post(urlResult, data) + .then( data_ => { + return data_.data.data ? data_.data.data.native[0].balance : '0'; + }) + +} + + + const TypeWalletEvmPlatformByLabel : Record = { + 'SubWallet': { + platform: ['Extension'], + namespace: 'SubWallet' + }, + 'Arcana Auth' : { + platform: ['Extension', 'WebApp'] + }, + 'Bitget Wallet': { + platform: ['Extension'] + }, + 'BitKeep': { + platform: ['Extension'], + namespace: 'isBitKeep' + }, + 'Blockto': { + platform: ['WebApp', 'Mobile'] + }, + 'Capsule': { + platform: ['Extension'] + }, + 'cede.store': { + platform: ['Extension'], + namespace: 'cede' + }, + 'Coinbase Wallet': { + platform: ['Extension', 'WebApp'], + namespace: 'coinbaseWalletExtension' + }, + 'D\'CENT': { + platform: ['Cold Wallet'], + namespace: 'ethereum' + }, + 'Enkrypt': { + platform: ['Extension'], + namespace: 'enkrypt' + }, + 'Fortmatic': { + platform: ['WebApp'] + }, + 'Frame': { + platform: ['Extension'], + namespace: 'isFrame' + }, + 'Frontier': { + platform: ['Extension'], + namespace: 'frontier' + }, + 'Safe': { + platform: ['WebApp'] + }, + 'Infinity Wallet': { + platform: ['Extension'], + namespace: 'infinityWallet' + }, + 'KeepKey': { + platform: ['Cold Wallet'] + }, + 'Keystone': { + platform: ['Cold Wallet'] + }, + 'Ledger': { + platform: ['QRcode'] + }, + 'MetaMask': { + platform: ['QRcode','Extension'] + }, + 'MEW Wallet': { + platform: ['Extension'], + namespace: 'isMEWwallet' + }, + 'Phantom': { + platform: ['Extension'], + namespace: 'phantom' + }, + 'Portis': { + platform: ['WebApp'] + }, + 'Sequence': { + platform: ['Extension'], + namespace: 'isSequence' + }, + 'Taho': { + platform: ['Extension'], + namespace: 'tally' + }, + 'Coinbase': { + platform: ['QRcode'] + }, + 'Torus': { + platform: ['WebApp'] + }, + 'Trezor': { + platform: ['Cold Wallet'] + }, + 'Trust Wallet': { + platform: ['Extension'], + namespace: 'trustwallet' + }, + 'Unstoppable': { + platform: ['Mobile'] + }, + 'Venly': { + platform: ['Extension'] + }, + 'WalletConnect': { + platform: ['QRcode', 'Extension'] + }, + 'Web3Auth': { + platform: ['WebApp'] + }, + 'XDEFI Wallet': { + platform: ['Extension'], + namespace: 'xfi' + }, + 'Zeal': { + platform: ['Extension'], + namespace: 'zeal' + }, + 'OpenBit': { + platform: ['Extension'], + namespace: 'OpenBit' + } +} + +const TypeWalletSubstratePlatformByLabel : Record = { + 'WalletConnect': { + platform: ['QRcode', 'Extension'] + }, + 'Ledger': { + platform: ['Cold Wallet'] + }, + 'SubWallet': { + platform: ['Extension'], + namespace: 'subwallet-js' + }, + 'Polkadot{.js}': { + platform: ['Extension'], + namespace: 'polkadot-js' + }, + 'Talisman': { + platform: ['Extension'], + namespace: 'talisman' + }, + 'Polkadot Vault': { + platform: ['QRcode'] + } +} + + +export const WalletPlatformByLabel : Record> = { + 'evm' : TypeWalletEvmPlatformByLabel, + 'substrate' : TypeWalletSubstratePlatformByLabel +} diff --git a/packages/core/src/validation.ts b/packages/core/src/validation.ts index d1b39cd2c..ac8560ec1 100644 --- a/packages/core/src/validation.ts +++ b/packages/core/src/validation.ts @@ -10,8 +10,8 @@ import { chainIdValidation, chainValidation, validate, - AppMetadata -} from '@web3-onboard/common' + type AppMetadata +} from '@subwallet-connect/common' import type { InitOptions, @@ -156,7 +156,8 @@ const commonPositions = Joi.string().valid( 'topRight', 'bottomRight', 'bottomLeft', - 'topLeft' + 'topLeft', + 'topCenter' ) const gasPriceProbabilities = [70, 80, 90, 95, 99] @@ -221,7 +222,8 @@ const themeMap = Joi.object({ '--w3o-text-color': Joi.string(), '--w3o-border-color': Joi.string(), '--w3o-action-color': Joi.string(), - '--w3o-border-radius': Joi.string() + '--w3o-border-radius': Joi.string(), + '--w3o-background-color-item': Joi.string() }) const presetTheme = Joi.string().valid('default', 'dark', 'light', 'system') @@ -268,7 +270,8 @@ const connectOptions = Joi.object({ }) const disconnectOptions = Joi.object({ - label: Joi.string().required() + label: Joi.string().required(), + type: Joi.string().required() }).required() const secondaryTokenValidation = Joi.object({ diff --git a/packages/core/src/views/Index.svelte b/packages/core/src/views/Index.svelte index 2cbe05448..ad66d8def 100644 --- a/packages/core/src/views/Index.svelte +++ b/packages/core/src/views/Index.svelte @@ -1,3 +1,4 @@ +
+
{/if}
{#await accountCenterComponent then AccountCenter} @@ -450,7 +510,7 @@ {/await}
{#if $accountCenter$.position.includes('top')} -
+
{/if} {#if $notify$.position.includes('top') && $accountCenter$.position.includes('top') && samePositionOrMobile} {#await notifyComponent then Notify} @@ -478,7 +538,7 @@ : ''} " > {#if $accountCenter$.position.includes('bottom')} -
+
{/if}
{#if $accountCenter$.enabled && $wallets$.length} @@ -490,13 +550,13 @@ {/if}
{#if $accountCenter$.position.includes('top')} -
+
{/if}
{/if} {#if displayNotifySeparate}
{#if $notify$.position.includes('top')} -
+
{/if} {#await notifyComponent then Notify} {#if Notify} @@ -519,7 +579,7 @@ {/if} {/await} {#if $notify$.position.includes('bottom')} -
+
{/if}
{/if} diff --git a/packages/core/src/views/account-center/AccountCenterPanel.svelte b/packages/core/src/views/account-center/AccountCenterPanel.svelte index 1342cb45d..6e396075c 100644 --- a/packages/core/src/views/account-center/AccountCenterPanel.svelte +++ b/packages/core/src/views/account-center/AccountCenterPanel.svelte @@ -8,6 +8,7 @@ import en from '../../i18n/en.json' import WalletRow from './WalletRow.svelte' import plusCircleIcon from '../../icons/plus-circle.js' + import checkmark from '../../icons/checkmark.js'; import arrowForwardIcon from '../../icons/arrow-forward.js' import connect from '../../connect.js' import disconnect from '../../disconnect.js' @@ -22,13 +23,16 @@ import warningIcon from '../../icons/warning.js' import questionIcon from '../../icons/question.js' import shieldIcon from '../../icons/shield-icon.js' - import { poweredByBlocknative } from '../../icons/index.js' + import { poweredBySubwallet } from '../../icons/index.js' import DisconnectAllConfirm from './DisconnectAllConfirm.svelte' import EnableTransactionProtectionModal from './EnableTransactionProtectionModal.svelte' + import SignMessage from './SignMessage.svelte' import { configuration } from '../../configuration.js' import SecondaryTokenTable from './SecondaryTokenTable.svelte' import { updateChainRPC } from '../../provider.js' import { BN_BOOST_RPC_URL, BN_BOOST_INFO_URL } from '../../constants.js' + import signMessageAllTypeWallet from '../../signMessage.js'; + import type { EIP1193Provider } from '@subwallet-connect/common'; export let expanded: boolean @@ -37,13 +41,14 @@ .pipe(startWith(state.get().accountCenter), shareReplay(1)) function disconnectAllWallets() { - $wallets$.forEach(({ label }) => disconnect({ label })) + $wallets$.forEach(({ label, type }) => disconnect({ label, type })) } const { chains: appChains } = state.get() let disconnectConfirmModal = false let hideWalletRowMenu: () => void let enableTransactionProtection = false + let signMessage = false $: [primaryWallet] = $wallets$ $: [connectedChain] = primaryWallet ? primaryWallet.chains : [] @@ -64,6 +69,7 @@ $: primaryWalletOnMainnet = connectedChain && connectedChain.id === '0x1' + const appMetadata$ = state .select('appMetadata') .pipe(startWith(state.get().appMetadata), shareReplay(1)) @@ -73,8 +79,9 @@ const enableProtectionRPC = async () => { try { + if( primaryWallet.type !== 'evm') return; await updateChainRPC( - primaryWallet.provider, + (primaryWallet.provider as EIP1193Provider), validAppChain, validAppChain?.protectedRpcUrl || BN_BOOST_RPC_URL ) @@ -84,6 +91,7 @@ console.log(error, code) } } + @@ -328,6 +352,12 @@ onConfirm={disconnectAllWallets} /> {/if} +{#if signMessage} + (signMessage = false)} + onConfirm={(typeMethodSign) => { signMessageAllTypeWallet( $wallets$[0] , typeMethodSign) } } + /> +{/if} {#if enableTransactionProtection} (enableTransactionProtection = false)} @@ -353,7 +383,7 @@
- {#each $wallets$ as wallet, i (wallet.label)} + {#each $wallets$ as wallet, i (`${wallet.label}-${wallet.type}`)}
+ +
(signMessage = true)} + class="action-container flex items-center mt pointer" + > +
+ {@html checkmark} +
+ Sign Message +
- + {#if $wallets$[0]}
- {#if !$accountCenter$.hideTransactionProtectionBtn && (primaryWalletOnMainnet || validAppChain?.protectedRpcUrl)} + {#if + !$accountCenter$.hideTransactionProtectionBtn + && (primaryWalletOnMainnet || validAppChain?.protectedRpcUrl)}
(enableTransactionProtection = true)} class="protect action-container flex items-center pointer" @@ -477,7 +521,7 @@
{/if}
- + {/if} diff --git a/packages/core/src/views/account-center/AcctCenterTriggerLarge.svelte b/packages/core/src/views/account-center/AcctCenterTriggerLarge.svelte index 037cb9041..6d725762c 100644 --- a/packages/core/src/views/account-center/AcctCenterTriggerLarge.svelte +++ b/packages/core/src/views/account-center/AcctCenterTriggerLarge.svelte @@ -168,16 +168,12 @@
- -
- -
diff --git a/packages/core/src/views/account-center/AcctCenterTriggerSmall.svelte b/packages/core/src/views/account-center/AcctCenterTriggerSmall.svelte index 2d57fa663..5b9e46dec 100644 --- a/packages/core/src/views/account-center/AcctCenterTriggerSmall.svelte +++ b/packages/core/src/views/account-center/AcctCenterTriggerSmall.svelte @@ -66,7 +66,8 @@ display: flex; flex-flow: row nowrap; width: 80px; - padding: 0.75rem; + align-items: center; + padding: 0.75rem 0.75rem 0.75rem 0.9rem; } .drop-shadow { filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.2)); @@ -84,7 +85,7 @@
-
- -
+ + +
diff --git a/packages/core/src/views/account-center/DisconnectAllConfirm.svelte b/packages/core/src/views/account-center/DisconnectAllConfirm.svelte index b40e3decd..1b43b565c 100644 --- a/packages/core/src/views/account-center/DisconnectAllConfirm.svelte +++ b/packages/core/src/views/account-center/DisconnectAllConfirm.svelte @@ -10,71 +10,84 @@ - -
-
- {@html warningIcon} -
+ .width-100 { + width: 100%; + } + -

- {$_('modals.confirmDisconnectAll.heading', { - default: en.modals.confirmDisconnectAll.heading + + + {$_('modals.confirmDisconnectAll.heading', { + default: en.modals.confirmDisconnectAll.heading + })} + +
+ + {$_('modals.confirmDisconnectAll.subHeading', { + default: en.modals.confirmDisconnectAll.subHeading })} -

- -

- {$_('modals.confirmDisconnectAll.description')} -

+ + + {$_('modals.confirmDisconnectAll.description', { + default: en.modals.confirmDisconnectAll.description + })} + +
-
- - -
+
+ +
diff --git a/packages/core/src/views/account-center/EnableTransactionProtectionModal.svelte b/packages/core/src/views/account-center/EnableTransactionProtectionModal.svelte index d87116749..2a12042bc 100644 --- a/packages/core/src/views/account-center/EnableTransactionProtectionModal.svelte +++ b/packages/core/src/views/account-center/EnableTransactionProtectionModal.svelte @@ -11,79 +11,83 @@ - -
-
- {@html shieldIcon} -
- -
-
- {$_('modals.confirmTransactionProtection.heading', { - default: en.modals.confirmTransactionProtection.heading - })} -
+ +
+ {$_('modals.confirmTransactionProtection.heading', { + default: en.modals.confirmTransactionProtection.heading + })} +
+
+ + {$_('modals.confirmTransactionProtection.subHeading', { + default: en.modals.confirmTransactionProtection.subHeading + })} + +
{$_('modals.confirmTransactionProtection.description')}
@@ -97,18 +101,22 @@ })}
+
-
- - -
+
+ + +
diff --git a/packages/core/src/views/account-center/Index.svelte b/packages/core/src/views/account-center/Index.svelte index 64c37cce3..fc96af658 100644 --- a/packages/core/src/views/account-center/Index.svelte +++ b/packages/core/src/views/account-center/Index.svelte @@ -7,7 +7,7 @@ import TriggerLarge from './AcctCenterTriggerLarge.svelte' import TriggerSmall from './AcctCenterTriggerSmall.svelte' - let expanded = false + let expanded = false; const accountCenter$ = state .select('accountCenter') diff --git a/packages/core/src/views/account-center/SecondaryTokenTable.svelte b/packages/core/src/views/account-center/SecondaryTokenTable.svelte index e954fd3fa..e899ae66c 100644 --- a/packages/core/src/views/account-center/SecondaryTokenTable.svelte +++ b/packages/core/src/views/account-center/SecondaryTokenTable.svelte @@ -1,5 +1,5 @@ + + + + + + {$_('modals.confirmSignMessage.heading', { + default: en.modals.confirmSignMessage.heading + })} + +
+ + {$_('modals.confirmSignMessage.subHeading', { + default: en.modals.confirmSignMessage.subHeading + })} + +
+ {#if wallets[0].type === 'evm' } + + {$_('modals.confirmSignMessage.evmWallet.content', { + default: en.modals.confirmSignMessage.evmWallet.content + })} + + + {:else if wallets[0].type === 'substrate' && wallets[0].signer} + + {$_('modals.confirmSignMessage.substrateWallet.content', { + default: + en.modals.confirmSignMessage.substrateWallet.content + })} + + {/if} +
+
+
+ + +
+
diff --git a/packages/core/src/views/account-center/WalletRow.svelte b/packages/core/src/views/account-center/WalletRow.svelte index 734b6b58f..1246c66f0 100644 --- a/packages/core/src/views/account-center/WalletRow.svelte +++ b/packages/core/src/views/account-center/WalletRow.svelte @@ -1,7 +1,7 @@ + + + + {}} maskClose={true}> + + {$_('modals.confirmConnectHDWallet.heading', { + default: en.modals.confirmConnectHDWallet.heading, + values: { wallet } + })} + +
+ + {$_('modals.confirmConnectHDWallet.subHeading', { + default: en.modals.confirmConnectHDWallet.subHeading + })} + + + {$_('modals.confirmConnectHDWallet.description', { + default: en.modals.confirmConnectHDWallet.description + })} + +
+ +
+ +
+
diff --git a/packages/core/src/views/connect/ConnectedWallet.svelte b/packages/core/src/views/connect/ConnectedWallet.svelte index 24e21bd0b..c8659f8ba 100644 --- a/packages/core/src/views/connect/ConnectedWallet.svelte +++ b/packages/core/src/views/connect/ConnectedWallet.svelte @@ -1,79 +1,127 @@ + .text { + line-height: 24px; + font-weight: 600; + } + .subtext { + font-size: var(--onboard-font-size-7, var(--font-size-7)); + color: var(--gray-400); + line-height: 20px; + font-weight: 600; + } + + .items-center{ + gap: var(--spacing-5); + } + + + + @media all and (max-width: 520px) { + .connecting-container { + border-radius: var(--onboard-border-radius-4, var(--border-radius-4)); + } + + .container { + padding-bottom: 0; + } + } + +{#if notifyAboutConnectHDWallet} + showNotifyConnectHDWalletModal()} + /> +{/if}
- - -
- -
- -
+
-
- {$_('connect.connectedWallet.mainText', { - default: en.connect.connectedWallet.mainText, - values: { wallet: selectedWallet.label } - })} -
+
+
+ {selectedWallet.label} +
+ +
+ {$_('connect.connectedWallet.mainText', { + default: en.connect.connectedWallet.mainText, + values: { wallet: selectedWallet.label } + })} +
+
diff --git a/packages/core/src/views/connect/ConnectingWallet.svelte b/packages/core/src/views/connect/ConnectingWallet.svelte index f642853ab..8cf933007 100644 --- a/packages/core/src/views/connect/ConnectingWallet.svelte +++ b/packages/core/src/views/connect/ConnectingWallet.svelte @@ -3,10 +3,12 @@ import type { WalletState, i18n } from '../../types.js' import WalletAppBadge from '../shared/WalletAppBadge.svelte' - import questionIcon from '../../icons/question.js' import en from '../../i18n/en.json' import { state } from '../../store/index.js' - import { shareReplay, startWith } from 'rxjs' + import { shareReplay, startWith, withLatestFrom } from 'rxjs' + import { errorIcon } from '../../icons'; + import { qrModalConnect$, uriConnect$ } from '../../streams.js'; + import { MOBILE_WINDOW_WIDTH } from '../../constants.js'; export let connectWallet: () => Promise export let selectedWallet: WalletState @@ -15,6 +17,25 @@ export let connectionRejected: boolean export let previousConnectionRequest: boolean + let windowWidth: number + + + + qrModalConnect$ + .pipe(withLatestFrom(uriConnect$)) + .subscribe(async ([{ isOpen, modal }, uri])=>{ + if(isOpen && modal && uri !== ''){ + try{ + await modal.openModal({ uri }); + } catch (e) { + console.log(e) + } + } else { + modal?.closeModal(); + } + }) + + const appMetadata$ = state .select('appMetadata') .pipe(startWith(state.get().appMetadata), shareReplay(1)) @@ -22,43 +43,44 @@ -
+ + +
- - -
+
-
- {$_( - `connect.connectingWallet.${ - connectionRejected ? 'rejectedText' : 'mainText' - }`, - { - default: connectionRejected - ? en.connect.connectingWallet.rejectedText - : en.connect.connectingWallet.mainText, - values: { wallet: selectedWallet.label } - } - )} +
+ {selectedWallet.label}
{#if connectionRejected}
@@ -147,7 +164,7 @@
{$_( `connect.connectingWallet.${ - previousConnectionRequest ? 'previousConnection' : 'paragraph' + previousConnectionRequest ? 'previousConnection' : 'mainText' }`, { default: en.connect.connectingWallet.paragraph, @@ -158,16 +175,20 @@ {/if}
+ {#if connectionRejected} +
+ {@html errorIcon} +
+ {/if}
- - + class="onboard-button-primary absolute" + >{$_('connect.connectingWallet.primaryButton', { + default: en.connect.connectingWallet.primaryButton + })}
diff --git a/packages/core/src/views/connect/Index.svelte b/packages/core/src/views/connect/Index.svelte index 553c0cc38..999b50326 100644 --- a/packages/core/src/views/connect/Index.svelte +++ b/packages/core/src/views/connect/Index.svelte @@ -1,32 +1,38 @@ {#if !autoSelect.disableModals} -
+
{#if connect.showSidebar} {/if} @@ -567,7 +710,7 @@ logo {/if} {:else} - {@html defaultBnIcon} + {@html defaultSwIcon} {/if}
@@ -624,12 +767,13 @@
{:else} - + {/if} {/if} @@ -647,6 +791,7 @@ {#if $modalStep$ === 'connectedWallet' && selectedWallet && windowWidth >= MOBILE_WINDOW_WIDTH} {/if} +
diff --git a/packages/core/src/views/connect/InstallWallet.svelte b/packages/core/src/views/connect/InstallWalletNotifi.svelte similarity index 100% rename from packages/core/src/views/connect/InstallWallet.svelte rename to packages/core/src/views/connect/InstallWalletNotifi.svelte diff --git a/packages/core/src/views/connect/QrCode.svelte b/packages/core/src/views/connect/QrCode.svelte new file mode 100644 index 000000000..e5808ccdb --- /dev/null +++ b/packages/core/src/views/connect/QrCode.svelte @@ -0,0 +1,83 @@ + + + + {#if (uri !== '')} +
+ +
+ {/if} diff --git a/packages/core/src/views/connect/SelectingWallet.svelte b/packages/core/src/views/connect/SelectingWallet.svelte index f0cacd639..3fc759f5c 100644 --- a/packages/core/src/views/connect/SelectingWallet.svelte +++ b/packages/core/src/views/connect/SelectingWallet.svelte @@ -10,29 +10,31 @@ export let wallets: WalletWithLoadingIcon[] export let selectWallet: (wallet: WalletWithLoadingIcon) => Promise export let connectingWalletLabel: string + + export let connectingWalletType: string export let connectingErrorMessage: string let windowWidth: number const { connect } = state.get() - function checkConnected(label: string) { + function checkConnected(label: string, typeWallet : 'substrate' | 'evm') { const { wallets } = state.get() - return !!wallets.find(wallet => wallet.label === label) + return !!wallets.find( + wallet => wallet.label === label && wallet.type === typeWallet) } const wheresMyWalletDefault = - 'https://www.blocknative.com/blog/metamask-wont-connect-web3-wallet-troubleshooting' + 'https://www.subwallet.app/download.html?lang=1' @@ -183,7 +204,7 @@ logo {/if} {:else} - {@html defaultBnIcon} + {@html defaultSwIcon} {/if}
{#if $_(`connect.${step}.sidebar.header`, { default: '' })} @@ -208,48 +229,50 @@ })}
{#if !connect.removeIDontHaveAWalletInfoLink} + {/if} {#if windowWidth < MOBILE_WINDOW_WIDTH}
{/if} @@ -258,32 +281,32 @@
{/if} -
- {@html poweredByBlocknative} +
+ Polkadot version by {@html poweredBySubwallet}
diff --git a/packages/core/src/views/connect/WalletButton.svelte b/packages/core/src/views/connect/WalletButton.svelte index 703dd3ee4..24f0a5562 100644 --- a/packages/core/src/views/connect/WalletButton.svelte +++ b/packages/core/src/views/connect/WalletButton.svelte @@ -2,7 +2,13 @@ import { fade } from 'svelte/transition' import { MOBILE_WINDOW_WIDTH } from '../../constants.js' - import { WalletAppBadge, SuccessStatusIcon } from '../shared/index.js' + import { WalletAppBadge } from '../shared/index.js' + import { successIcon, downloadIcon, vectorIcon, qrCodeIcon } from '../../icons/index.js'; + import { WalletPlatformByLabel } from '../../utils.js'; + import type { CustomWindow, PlatformType } from '../../types.js'; + import { onMount } from 'svelte'; + import type { WalletState } from '../../types.js'; + export let icon: Promise export let label: string @@ -11,7 +17,63 @@ export let connecting: boolean export let disabled: boolean + let statusIcon: any = undefined + export let typeWallet: string + let windowWidth: number + + let platformList : PlatformType[] + + onMount(()=>{ + const platformContainer = WalletPlatformByLabel[typeWallet][label as WalletState['label']]; + if(!platformContainer) return; + + const { platform, namespace } = WalletPlatformByLabel[typeWallet][label as WalletState['label']] + if(namespace && window !== undefined) { + if(typeWallet === 'evm'){ + if('ethereum' in window){ + if(!(window.ethereum[namespace as keyof typeof window.ethereum] + || window[namespace as keyof typeof window])){ + statusIcon = downloadIcon; + } + }else{ + statusIcon = downloadIcon; + } + }else { + if ('injectedWeb3' in window) { + if (!(window.injectedWeb3[namespace as keyof typeof window.injectedWeb3] + || window[namespace as keyof typeof window])) { + statusIcon = downloadIcon; + } + }else{ + statusIcon = downloadIcon; + } + } + } + if(statusIcon === undefined){ + if (platform.length === 0) return; + platformList = platform + switch (platformList[0]){ + case 'Cold Wallet': { + statusIcon = vectorIcon; + break; + } + case 'WebApp': + case 'Extension': + case 'Mobile': + case 'Dapp': { + statusIcon = undefined; + break; + } + case 'QRcode': { + statusIcon = qrCodeIcon; + break; + } + } + } + }); + + @@ -114,18 +200,22 @@ >
= MOBILE_WINDOW_WIDTH ? 48 : 56} + size={windowWidth >= MOBILE_WINDOW_WIDTH ? 40 : 56} + typeWallet={typeWallet} {icon} loading={connecting} border={connected ? 'green' : 'custom'} background="transparent" /> -
{label}
- {#if connected} +
{label}
- + {#if connected} + {@html successIcon} + {:else if (statusIcon !== undefined && windowWidth > MOBILE_WINDOW_WIDTH) } + {@html statusIcon} + {/if}
- {/if} +
diff --git a/packages/core/src/views/global.d.ts b/packages/core/src/views/global.d.ts new file mode 100644 index 000000000..7e41bfa3b --- /dev/null +++ b/packages/core/src/views/global.d.ts @@ -0,0 +1 @@ +declare module 'svelte-qrcode' diff --git a/packages/core/src/views/notify/Index.svelte b/packages/core/src/views/notify/Index.svelte index ef0cf25e9..9c6f8acd6 100644 --- a/packages/core/src/views/notify/Index.svelte +++ b/packages/core/src/views/notify/Index.svelte @@ -1,5 +1,4 @@ + + +
diff --git a/packages/core/src/views/shared/NetworkSelector.svelte b/packages/core/src/views/shared/NetworkSelector.svelte index bb0a4e9b9..afa4fd6eb 100644 --- a/packages/core/src/views/shared/NetworkSelector.svelte +++ b/packages/core/src/views/shared/NetworkSelector.svelte @@ -1,6 +1,6 @@ {#if wallet} @@ -120,13 +126,12 @@ class={`flex justify-center items-center pointer ${parentCSSId}`} bind:this={selectElement} value={wallet.chains[0].id} + disabled={ wallet.label === 'Ledger' && wallet.type === 'substrate' } on:change={handleSelect} style={` color: var(${colorVar}, var(--account-center-network-selector-color, var(--gray-500))); - background-image: url('data:image/svg+xml;utf8,${selectIcon}'); ${ - bold ? 'font-weight: 600;' : '' - }`} + background-image: url('data:image/svg+xml;utf8,${selectIcon}'); `} > {#if !connectedToValidAppChain(wallet.chains[0], chains)} + {/if} {/each} {/if} diff --git a/packages/core/src/views/shared/SuccessStatusIcon.svelte b/packages/core/src/views/shared/SuccessStatusIcon.svelte index b932fdc64..a9b136032 100644 --- a/packages/core/src/views/shared/SuccessStatusIcon.svelte +++ b/packages/core/src/views/shared/SuccessStatusIcon.svelte @@ -9,22 +9,14 @@ .icon { color: var(--onboard-white, var(--white)); border-radius: 50px; - } - - .green { - background: var(--onboard-success-600, var(--success-600)); - } - - .blue { - background: var(--onboard-primary-1, var(--primary-1)); + width: fit-content; + height: fit-content; }
{@html successIcon}
diff --git a/packages/core/src/views/shared/WalletAppBadge.svelte b/packages/core/src/views/shared/WalletAppBadge.svelte index 4597847ed..5ae83d354 100644 --- a/packages/core/src/views/shared/WalletAppBadge.svelte +++ b/packages/core/src/views/shared/WalletAppBadge.svelte @@ -5,12 +5,16 @@ import Spinner from './Spinner.svelte' import { PendingStatusIcon } from '../shared/index.js' import { MOBILE_WINDOW_WIDTH } from '../../constants.js' + import { ethereumSubIcon, dotSubIcon } from '../../icons'; export let size: number // px export let icon: Promise | string // svg string or url string export let loading = false export let padding = size / 6 export let color = 'black' + export let typeWallet : string | undefined = undefined + + const subIcon = typeWallet === 'substrate' ? dotSubIcon : ethereumSubIcon export let border: | 'custom' @@ -44,6 +48,26 @@ height: 100%; } + .sub-icon{ + z-index: 1; + left: 45%; + top: 50%; + } + + .border-radius-icon{ + border-radius: 10px; + } + + .logo{ + display: flex; + height: 100%; + width: 100%; + & svg { + max-width: 40px; + max-height: 40px; + } + } + .border-custom { border: 1px solid var(--border-color); } @@ -149,7 +173,7 @@ } .spinner-container { - color: var(--onboard-primary-300, var(--primary-300)); + color: var(--onboard-gray-100, var(--gray-100)); } img { @@ -168,6 +192,9 @@ bottom: -0.25rem; position: absolute; } + + + @@ -182,18 +209,17 @@ class:border-dark-blue={border === 'darkBlue'} class:border-transparent={border === 'transparent'} class:border-black={border === 'black'} + class:border-radius-icon={!typeWallet} class:background-gray={background === 'gray'} class:background-light-gray={background === 'lightGray'} class:background-light-blue={background === 'lightBlue'} class:background-green={background === 'green'} class:background-white={background === 'white'} class:background-transparent={background === 'transparent'} - class="relative" + class={'relative'} style={`${ background === 'custom' ? `background-color: ${customBackgroundColor}` : '' - }; padding: ${ - padding - 1 - }px; width: ${size}px; height: ${size}px; border-radius: ${radius}px; color: ${color};`} + }; width: ${size}px; height: ${size}px; color: ${color}; border-color: transparent`} > {#if loading && windowWidth >= MOBILE_WINDOW_WIDTH}
@@ -204,14 +230,22 @@
{:then iconLoaded}
- {#if isSVG(iconLoaded)} - - {@html iconLoaded} - {:else} - - logo + + {#if (typeWallet)} +
+ {@html subIcon} +
{/if}
+ {#if loading && windowWidth <= MOBILE_WINDOW_WIDTH}
diff --git a/packages/core/src/views/shared/Warning.svelte b/packages/core/src/views/shared/Warning.svelte index b095d4ab6..5672ac2db 100644 --- a/packages/core/src/views/shared/Warning.svelte +++ b/packages/core/src/views/shared/Warning.svelte @@ -7,22 +7,23 @@ .container { gap: 1rem; padding: 0.75rem; - color: var(--onboard-warning-700, var(--warning-700)); + color: var(--white); font-size: var(--onboard-font-size-7, var(--font-size-7)); line-height: 16px; - border: 1px solid var(--onboard-warning-400, var(--warning-400)); - background: var(--onboard-warning-100, var(--warning-100)); + background: var(--gray-800); border-radius: 12px; + display: flex; + align-items: center; } .icon { - color: var(--onboard-warning-700, var(--warning-700)); + color: var(--onboard-warning-700, var(--warning-800)); width: 1rem; height: 1rem; flex: 0 0 auto; } - - + +
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/dcent/README.md b/packages/dcent/README.md index 51a84d900..ff15ab56e 100644 --- a/packages/dcent/README.md +++ b/packages/dcent/README.md @@ -1,16 +1,16 @@ -# @web3-onboard/dcent +# @subwallet-connect/dcent ## Wallet module for connecting D'CENT hardware wallets to web3-onboard ### Install -`npm i @web3-onboard/dcent` +`npm i @subwallet-connect/dcent` ### Usage ```typescript -import Onboard from '@web3-onboard/core' -import dcentModule from '@web3-onboard/dcent' +import Onboard from '@subwallet-connect/core' +import dcentModule from '@subwallet-connect/dcent' const dcent = dcentModule() @@ -31,8 +31,8 @@ console.log(connectedWallets) You may decide that on certain platforms you do not want to display this wallet as a selectable option. To do that you can use the `filter` init option which is an array of platforms that you would like this wallet to **not** be displayed to the end user: ```typescript -import Onboard from '@web3-onboard/core' -import dcentModule from '@web3-onboard/dcent' +import Onboard from '@subwallet-connect/core' +import dcentModule from '@subwallet-connect/dcent' const dcent = dcentModule({ filter: ['Safari'] }) diff --git a/packages/dcent/package.json b/packages/dcent/package.json index cdf1f6437..158a0d278 100644 --- a/packages/dcent/package.json +++ b/packages/dcent/package.json @@ -1,6 +1,6 @@ { - "name": "@web3-onboard/dcent", - "version": "2.2.7", + "name": "@subwallet-connect/dcent", + "version": "1.0.7", "description": "D'CENT wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised 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.", "keywords": [ "Ethereum", @@ -35,11 +35,13 @@ ], "repository": { "type": "git", - "url": "https://github.com/blocknative/web3-onboard.git", + "url": "git+https://github.com/blocknative/web3-onboard.git", "directory": "packages/dcent" }, - "homepage": "https://onboard.blocknative.com", - "bugs": "https://github.com/blocknative/web3-onboard/issues", + "homepage": "https://subwallet.app", + "bugs": { + "url": "https://github.com/blocknative/web3-onboard/issues" + }, "module": "dist/index.js", "typings": "dist/index.d.ts", "files": [ @@ -56,10 +58,12 @@ "typescript": "^4.5.5" }, "dependencies": { - "@web3-onboard/common": "^2.3.3", - "@web3-onboard/hw-common": "^2.3.0", + "@subwallet-connect/common": "^1.0.7", + "@subwallet-connect/hw-common": "^1.0.7", "@ethereumjs/tx": "^3.4.0", "@ethersproject/providers": "^5.5.0", "eth-dcent-keyring": "^0.2.2" - } + }, + "main": "index.js", + "author": "" } diff --git a/packages/dcent/src/index.ts b/packages/dcent/src/index.ts index e72120370..f3491a4cd 100644 --- a/packages/dcent/src/index.ts +++ b/packages/dcent/src/index.ts @@ -3,13 +3,13 @@ import type { WalletInit, EIP1193Provider, Platform -} from '@web3-onboard/common' +} from '@subwallet-connect/common' import type { CustomNetwork, Account, ScanAccountsOptions -} from '@web3-onboard/hw-common' +} from '@subwallet-connect/hw-common' import { StaticJsonRpcProvider } from '@ethersproject/providers' interface CustomWindow extends Window { @@ -56,10 +56,10 @@ const generateAccounts = async ( } function dcent({ - customNetwork, - filter, - containerElement -}: { + customNetwork, + filter, + containerElement + }: { customNetwork?: CustomNetwork filter?: Platform[] containerElement?: string @@ -78,6 +78,7 @@ function dcent({ return { label: "D'CENT", + type : 'evm', getIcon, getInterface: async ({ EventEmitter, chains }) => { const eventEmitter = new EventEmitter() @@ -87,7 +88,7 @@ function dcent({ if (isMobile && !provider) { location.replace( 'https://link.dcentwallet.com/DAppBrowser/?url=' + - document.location + document.location ) } provider.on = eventEmitter.on.bind(eventEmitter) @@ -98,29 +99,29 @@ function dcent({ const { StaticJsonRpcProvider } = await import( '@ethersproject/providers' - ) + ) const { default: EthDcentKeyring } = await import('eth-dcent-keyring') const dcentKeyring = new EthDcentKeyring({}) const { TransactionFactory: Transaction } = await import( '@ethereumjs/tx' - ) + ) const { getCommon, accountSelect } = await import( - '@web3-onboard/hw-common' - ) + '@subwallet-connect/hw-common' + ) const { createEIP1193Provider, ProviderRpcErrorCode, ProviderRpcError - } = await import('@web3-onboard/common') + } = await import('@subwallet-connect/common') let currentChain: Chain = chains[0] const scanAccounts = async ({ - chainId - }: ScanAccountsOptions): Promise => { + chainId + }: ScanAccountsOptions): Promise => { currentChain = chains.find(({ id }: Chain) => id === chainId) || currentChain @@ -146,9 +147,9 @@ function dcent({ } const request = async ({ - method, - params - }: { + method, + params + }: { method: string params: any }) => { diff --git a/packages/demo/.gitignore b/packages/demo/.gitignore index 49d6a0eea..c87c9b392 100644 --- a/packages/demo/.gitignore +++ b/packages/demo/.gitignore @@ -1,3 +1,36 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc .DS_Store -node_modules -public/build/ +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/packages/demo/.skip-build b/packages/demo/.skip-build new file mode 100644 index 000000000..e69de29bb diff --git a/packages/demo/.skip-npm b/packages/demo/.skip-npm new file mode 100644 index 000000000..e69de29bb diff --git a/packages/demo/LICENSE b/packages/demo/LICENSE new file mode 100644 index 000000000..0d381b2e9 --- /dev/null +++ b/packages/demo/LICENSE @@ -0,0 +1,201 @@ + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + +TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + +1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + +2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + +3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + +4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + +5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + +6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + +7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + +8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + +9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + +END OF TERMS AND CONDITIONS + +APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + +Copyright [yyyy] [name of copyright owner] + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. diff --git a/packages/demo/README.md b/packages/demo/README.md deleted file mode 100644 index 9bc872f6b..000000000 --- a/packages/demo/README.md +++ /dev/null @@ -1,5 +0,0 @@ -# Onboard Demo using Svelte - -This is a quick demo for testing and development of Onboard V2. - -From the root of the project run `yarn && yarn dev` then navigate to `http://localhost:8080/` diff --git a/packages/demo/assets/dot.ts b/packages/demo/assets/dot.ts new file mode 100644 index 000000000..50d88cea9 --- /dev/null +++ b/packages/demo/assets/dot.ts @@ -0,0 +1,38 @@ +export default` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +` + diff --git a/packages/demo/assets/eth.ts b/packages/demo/assets/eth.ts new file mode 100644 index 000000000..d6388e286 --- /dev/null +++ b/packages/demo/assets/eth.ts @@ -0,0 +1,30 @@ +export default ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + +` diff --git a/packages/demo/assets/index.ts b/packages/demo/assets/index.ts new file mode 100644 index 000000000..c2e1189d2 --- /dev/null +++ b/packages/demo/assets/index.ts @@ -0,0 +1,8 @@ +export { default as LogoHeader } from './logoHeader' +export { default as SubWallet } from './subwallet' +export { default as Web3Onboard } from './web3Onboard' +export { default as LogoSubWallet } from './logoSubWallet' + +// subIcon +export { default as ethSubIcon } from './eth' +export { default as dotSubIcon } from './dot' diff --git a/packages/demo/assets/logoHeader.ts b/packages/demo/assets/logoHeader.ts new file mode 100644 index 000000000..b3298900a --- /dev/null +++ b/packages/demo/assets/logoHeader.ts @@ -0,0 +1,5 @@ +export default ` + + + +` diff --git a/packages/demo/assets/logoSubWallet.ts b/packages/demo/assets/logoSubWallet.ts new file mode 100644 index 000000000..ee11983c0 --- /dev/null +++ b/packages/demo/assets/logoSubWallet.ts @@ -0,0 +1,26 @@ +export default ` + + + + + + + + + + + + + + + + + + + + + + + + +` diff --git a/packages/demo/assets/subwallet.ts b/packages/demo/assets/subwallet.ts new file mode 100644 index 000000000..5cc2468bf --- /dev/null +++ b/packages/demo/assets/subwallet.ts @@ -0,0 +1,18 @@ +export default ` + + + + + + + + + + + + + + + + +` diff --git a/packages/demo/assets/web3Onboard.ts b/packages/demo/assets/web3Onboard.ts new file mode 100644 index 000000000..2e6b99129 --- /dev/null +++ b/packages/demo/assets/web3Onboard.ts @@ -0,0 +1,14 @@ +export default ` + + + + + + + + + + + + +` diff --git a/packages/demo/package.json b/packages/demo/package.json index 8f0cd2a34..db0674288 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -1,6 +1,6 @@ { "name": "demo", - "version": "2.0.10", + "version": "2.0.9", "devDependencies": { "assert": "^2.0.0", "browserify-zlib": "^0.2.0", @@ -24,46 +24,40 @@ "webpack-dev-server": "4.7.4" }, "dependencies": { - "@blocto/dappauth": "^2.1.0", - "@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.1", - "@web3-onboard/blocto": "^2.0.1-alpha.1", - "@web3-onboard/capsule": "2.0.1", - "@web3-onboard/cede-store": "^2.2.0", - "@web3-onboard/coinbase": "^2.2.6", - "@web3-onboard/core": "^2.21.3-alpha.2", + "@web3-onboard/cede-store": "^2.1.0", + "@web3-onboard/blocto": "2.0.0", + "@web3-onboard/coinbase": "^2.2.5", + "@web3-onboard/core": "^2.21.0-alpha.1", "@web3-onboard/dcent": "^2.2.7", "@web3-onboard/enkrypt": "^2.0.3", "@web3-onboard/fortmatic": "^2.0.18", "@web3-onboard/frame": "^2.0.2", "@web3-onboard/frontier": "^2.0.3", "@web3-onboard/gas": "^2.1.7", - "@web3-onboard/gnosis": "^2.2.1", + "@web3-onboard/gnosis": "^2.1.9", "@web3-onboard/infinity-wallet": "^2.0.3", - "@web3-onboard/injected-wallets": "^2.10.12-alpha.3", + "@web3-onboard/injected-wallets": "^2.10.5-alpha.2", "@web3-onboard/keepkey": "^2.3.7", "@web3-onboard/keystone": "^2.3.7", - "@web3-onboard/ledger": "^2.6.0-alpha.1", + "@web3-onboard/ledger": "^2.5.2", "@web3-onboard/magic": "^2.1.6", - "@web3-onboard/metamask": "^2.0.2", "@web3-onboard/mew-wallet": "^2.0.3", "@web3-onboard/phantom": "^2.0.3", "@web3-onboard/portis": "^2.1.6", "@web3-onboard/sequence": "^2.0.7", "@web3-onboard/taho": "^2.0.5", - "@web3-onboard/torus": "^2.2.6", + "@web3-onboard/torus": "^2.2.4", "@web3-onboard/transaction-preview": "^2.0.7", - "@web3-onboard/trezor": "^2.4.3", + "@web3-onboard/trezor": "^2.4.2", "@web3-onboard/trust": "^2.0.3", "@web3-onboard/uauth": "^2.1.2", "@web3-onboard/venly": "^2.0.0", - "@web3-onboard/walletconnect": "^2.5.3", + "@web3-onboard/walletconnect": "^2.4.5-alpha.1", "@web3-onboard/web3auth": "^2.2.2", - "@web3-onboard/xdefi": "^2.0.5", + "@web3-onboard/xdefi": "^2.0.3", "@web3-onboard/zeal": "^2.0.3", - "@web3-onboard/particle-network": "^2.0.0-alpha.1", + "@blocto/dappauth": "^2.1.0", "vconsole": "^3.15.1" }, "license": "MIT", diff --git a/packages/demo/public/KoniverseLogo.svg b/packages/demo/public/KoniverseLogo.svg new file mode 100644 index 000000000..6a4076b31 --- /dev/null +++ b/packages/demo/public/KoniverseLogo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/demo/public/SubConnect.png b/packages/demo/public/SubConnect.png new file mode 100644 index 000000000..eef9a6454 Binary files /dev/null and b/packages/demo/public/SubConnect.png differ diff --git a/packages/demo/public/android-chrome-192x192.png b/packages/demo/public/android-chrome-192x192.png new file mode 100644 index 000000000..8288941ba Binary files /dev/null and b/packages/demo/public/android-chrome-192x192.png differ diff --git a/packages/demo/public/android-chrome-512x512.png b/packages/demo/public/android-chrome-512x512.png new file mode 100644 index 000000000..a6b9ffd7c Binary files /dev/null and b/packages/demo/public/android-chrome-512x512.png differ diff --git a/packages/demo/public/apple-touch-icon.png b/packages/demo/public/apple-touch-icon.png new file mode 100644 index 000000000..664532cc1 Binary files /dev/null and b/packages/demo/public/apple-touch-icon.png differ diff --git a/packages/demo/public/browserconfig.xml b/packages/demo/public/browserconfig.xml new file mode 100644 index 000000000..b3930d0f0 --- /dev/null +++ b/packages/demo/public/browserconfig.xml @@ -0,0 +1,9 @@ + + + + + + #da532c + + + diff --git a/packages/demo/public/favicon-16x16.png b/packages/demo/public/favicon-16x16.png new file mode 100644 index 000000000..fa29dc645 Binary files /dev/null and b/packages/demo/public/favicon-16x16.png differ diff --git a/packages/demo/public/favicon-32x32.png b/packages/demo/public/favicon-32x32.png new file mode 100644 index 000000000..212bef779 Binary files /dev/null and b/packages/demo/public/favicon-32x32.png differ diff --git a/packages/demo/public/favicon.ico b/packages/demo/public/favicon.ico new file mode 100644 index 000000000..059196b2c Binary files /dev/null and b/packages/demo/public/favicon.ico differ diff --git a/packages/demo/public/favicon.png b/packages/demo/public/favicon.png deleted file mode 100644 index 7e6f5eb5a..000000000 Binary files a/packages/demo/public/favicon.png and /dev/null differ diff --git a/packages/demo/public/fonts/PlusJakartaSans-Bold.ttf b/packages/demo/public/fonts/PlusJakartaSans-Bold.ttf new file mode 100644 index 000000000..a05c5dd4c Binary files /dev/null and b/packages/demo/public/fonts/PlusJakartaSans-Bold.ttf differ diff --git a/packages/demo/public/fonts/PlusJakartaSans-BoldItalic.ttf b/packages/demo/public/fonts/PlusJakartaSans-BoldItalic.ttf new file mode 100644 index 000000000..4b8535cd2 Binary files /dev/null and b/packages/demo/public/fonts/PlusJakartaSans-BoldItalic.ttf differ diff --git a/packages/demo/public/fonts/PlusJakartaSans-ExtraBold.ttf b/packages/demo/public/fonts/PlusJakartaSans-ExtraBold.ttf new file mode 100644 index 000000000..4c7693fa1 Binary files /dev/null and b/packages/demo/public/fonts/PlusJakartaSans-ExtraBold.ttf differ diff --git a/packages/demo/public/fonts/PlusJakartaSans-ExtraBoldItalic.ttf b/packages/demo/public/fonts/PlusJakartaSans-ExtraBoldItalic.ttf new file mode 100644 index 000000000..b0d6fd38a Binary files /dev/null and b/packages/demo/public/fonts/PlusJakartaSans-ExtraBoldItalic.ttf differ diff --git a/packages/demo/public/fonts/PlusJakartaSans-ExtraLight.ttf b/packages/demo/public/fonts/PlusJakartaSans-ExtraLight.ttf new file mode 100644 index 000000000..b8211303a Binary files /dev/null and b/packages/demo/public/fonts/PlusJakartaSans-ExtraLight.ttf differ diff --git a/packages/demo/public/fonts/PlusJakartaSans-ExtraLightItalic.ttf b/packages/demo/public/fonts/PlusJakartaSans-ExtraLightItalic.ttf new file mode 100644 index 000000000..a8ee8f619 Binary files /dev/null and b/packages/demo/public/fonts/PlusJakartaSans-ExtraLightItalic.ttf differ diff --git a/packages/demo/public/fonts/PlusJakartaSans-Italic.ttf b/packages/demo/public/fonts/PlusJakartaSans-Italic.ttf new file mode 100644 index 000000000..1ff33f683 Binary files /dev/null and b/packages/demo/public/fonts/PlusJakartaSans-Italic.ttf differ diff --git a/packages/demo/public/fonts/PlusJakartaSans-Light.ttf b/packages/demo/public/fonts/PlusJakartaSans-Light.ttf new file mode 100644 index 000000000..00f6b3bbc Binary files /dev/null and b/packages/demo/public/fonts/PlusJakartaSans-Light.ttf differ diff --git a/packages/demo/public/fonts/PlusJakartaSans-LightItalic.ttf b/packages/demo/public/fonts/PlusJakartaSans-LightItalic.ttf new file mode 100644 index 000000000..ce78c6c4a Binary files /dev/null and b/packages/demo/public/fonts/PlusJakartaSans-LightItalic.ttf differ diff --git a/packages/demo/public/fonts/PlusJakartaSans-Medium.ttf b/packages/demo/public/fonts/PlusJakartaSans-Medium.ttf new file mode 100644 index 000000000..87bdb6fa8 Binary files /dev/null and b/packages/demo/public/fonts/PlusJakartaSans-Medium.ttf differ diff --git a/packages/demo/public/fonts/PlusJakartaSans-MediumItalic.ttf b/packages/demo/public/fonts/PlusJakartaSans-MediumItalic.ttf new file mode 100644 index 000000000..b38934596 Binary files /dev/null and b/packages/demo/public/fonts/PlusJakartaSans-MediumItalic.ttf differ diff --git a/packages/demo/public/fonts/PlusJakartaSans-Regular.ttf b/packages/demo/public/fonts/PlusJakartaSans-Regular.ttf new file mode 100644 index 000000000..e4a674ca5 Binary files /dev/null and b/packages/demo/public/fonts/PlusJakartaSans-Regular.ttf differ diff --git a/packages/demo/public/fonts/PlusJakartaSans-SemiBold.ttf b/packages/demo/public/fonts/PlusJakartaSans-SemiBold.ttf new file mode 100644 index 000000000..08140df17 Binary files /dev/null and b/packages/demo/public/fonts/PlusJakartaSans-SemiBold.ttf differ diff --git a/packages/demo/public/fonts/PlusJakartaSans-SemiBoldItalic.ttf b/packages/demo/public/fonts/PlusJakartaSans-SemiBoldItalic.ttf new file mode 100644 index 000000000..3606ed13a Binary files /dev/null and b/packages/demo/public/fonts/PlusJakartaSans-SemiBoldItalic.ttf differ diff --git a/packages/demo/public/fonts/index.css b/packages/demo/public/fonts/index.css new file mode 100644 index 000000000..33d6649bb --- /dev/null +++ b/packages/demo/public/fonts/index.css @@ -0,0 +1,55 @@ +@font-face { + font-family: 'Plus Jakarta Sans'; + font-style: normal; + font-weight: 400; + src: url('./PlusJakartaSans-Regular.ttf') format('truetype'); +} + +@font-face { + font-family: 'Plus Jakarta Sans'; + font-style: italic; + font-weight: 400; + src: url('./PlusJakartaSans-Italic.ttf') format('truetype'); +} + +@font-face { + font-family: 'Plus Jakarta Sans'; + font-style: normal; + font-weight: 500; + src: url('./PlusJakartaSans-Medium.ttf') format('truetype'); +} + +@font-face { + font-family: 'Plus Jakarta Sans'; + font-style: italic; + font-weight: 500; + src: url('./PlusJakartaSans-MediumItalic.ttf') format('truetype'); +} + +@font-face { + font-family: 'Plus Jakarta Sans'; + font-style: normal; + font-weight: 600; + src: url('./PlusJakartaSans-SemiBold.ttf') format('truetype'); +} + +@font-face { + font-family: 'Plus Jakarta Sans'; + font-style: italic; + font-weight: 600; + src: url('./PlusJakartaSans-SemiBoldItalic.ttf') format('truetype'); +} + +@font-face { + font-family: 'Plus Jakarta Sans'; + font-style: normal; + font-weight: 700; + src: url('./PlusJakartaSans-Bold.ttf') format('truetype'); +} + +@font-face { + font-family: 'Plus Jakarta Sans'; + font-style: italic; + font-weight: 700; + src: url('./PlusJakartaSans-BoldItalic.ttf') format('truetype'); +} diff --git a/packages/demo/public/global.css b/packages/demo/public/global.css deleted file mode 100644 index e55096698..000000000 --- a/packages/demo/public/global.css +++ /dev/null @@ -1,73 +0,0 @@ -html, -body { - position: relative; - width: 100%; - height: 100%; -} - -body { - color: #333; - margin: 0; - padding: 8px; - box-sizing: border-box; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; -} - -a { - color: rgb(0, 100, 200); - text-decoration: none; -} - -a:hover { - text-decoration: underline; -} - -a:visited { - color: rgb(0, 80, 160); -} - -label { - display: block; -} - -input, -button, -select, -textarea { - font-family: inherit; - font-size: inherit; - -webkit-padding: 0.4em 0; - padding: 0.4em; - margin: 0 0 0.5em 0; - box-sizing: border-box; - border: 1px solid #ccc; - border-radius: 2px; -} - -input:disabled { - color: #ccc; -} - -button { - color: #333; - background-color: #f4f4f4; - outline: none; -} - -button:disabled { - color: #999; -} - -button:not(:disabled):active { - background-color: #ddd; -} - -button:focus { - border-color: #666; -} - -aside { - height: 0; - color: pink; -} diff --git a/packages/demo/public/index.html b/packages/demo/public/index.html index e6abc77ca..4af9a5b4d 100644 --- a/packages/demo/public/index.html +++ b/packages/demo/public/index.html @@ -1,20 +1,35 @@ - - - - Svelte app - - - - - + + + + + + + + + + SubWallet Connect - -
-
- + +
+ diff --git a/packages/demo/public/manifest.json b/packages/demo/public/manifest.json new file mode 100644 index 000000000..8005615c3 --- /dev/null +++ b/packages/demo/public/manifest.json @@ -0,0 +1,30 @@ +{ + "short_name": "SubWallet Connect", + "name": "SubWallet Connect Examples", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "icon-32.png", + "type": "image/png", + "sizes": "32x32" + }, + { + "src": "icon-64.png", + "type": "image/png", + "sizes": "64x64" + }, + { + "src": "icon-128.png", + "type": "image/png", + "sizes": "128x128" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/packages/demo/public/mstile-150x150.png b/packages/demo/public/mstile-150x150.png new file mode 100644 index 000000000..2ac0ced5b Binary files /dev/null and b/packages/demo/public/mstile-150x150.png differ diff --git a/packages/demo/public/robots.txt b/packages/demo/public/robots.txt new file mode 100644 index 000000000..e9e57dc4d --- /dev/null +++ b/packages/demo/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/packages/demo/public/safari-pinned-tab.svg b/packages/demo/public/safari-pinned-tab.svg new file mode 100644 index 000000000..80ad1c348 --- /dev/null +++ b/packages/demo/public/safari-pinned-tab.svg @@ -0,0 +1,25 @@ + + + + +Created by potrace 1.14, written by Peter Selinger 2001-2017 + + + + + diff --git a/packages/demo/public/site.webmanifest b/packages/demo/public/site.webmanifest new file mode 100644 index 000000000..b20abb7cb --- /dev/null +++ b/packages/demo/public/site.webmanifest @@ -0,0 +1,19 @@ +{ + "name": "", + "short_name": "", + "icons": [ + { + "src": "/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" +} diff --git a/packages/demo/src/App.scss b/packages/demo/src/App.scss new file mode 100644 index 000000000..51fa5443d --- /dev/null +++ b/packages/demo/src/App.scss @@ -0,0 +1,113 @@ +.App { + height: 100vh; +} + +.main-layout { + height: 100%; +} + +.main-content { + height: 100%; + position: relative; + overflow: auto; +} + +.main-content.-dark { + background-color: #020412; + color: #fff; + + .ant-input { + background-color: #262C4A; + border-color: rgba(128, 128, 128, 0.2); + color: #ddd; + } + +} + +.dark-theme { + .ant-select .ant-select-selector, .ant-select:not(.ant-select-customize-input) .ant-select-selector { + background-color: #262C4A; + border-color: rgba(128, 128, 128, 0.2)!important; + color: #ddd; + } + + .ant-select-dropdown { + background-color: #262C4A; + color: #fff; + border-color: rgba(128, 128, 128, 0.2); + + .ant-select-item { + color: #fff; + background-color: #262C4A; + + &.ant-select-item-option-selected, &:hover { + background-color: rgba(128,128,128,0.2); + } + } + } + + .ant-select-arrow { + color: #ddd; + } +} + +.main-content.-light { + background-color: #FFF; + color: #444; + + .welcome-content__text, .wallet-title, .wallet-info-page__text, .account-item__title, .metadata-item__title { + color: #020412; + } + + .account-item__content, .metadata-item__content { + color: #888; + } + + .select-wallet-modal .ant-modal-content { + background-color: #FFF; + } + + .account-item, .metadata-item, .wallet-header-wrapper { + border-color: #EEE; + } + + .sub-wallet-sign-btn { + background-color: #F0F4FF; + } + + .sub-wallet-sign-btn > span { + color: #004BFF; + } +} + +.boxed-container { + padding-left: 16px; + padding-right: 16px; + margin-left: auto; + margin-right: auto; + overflow: auto; + max-width: 618px; +} + +.select-wallet-modal.-light { + .ant-modal-content, .ant-modal-header { + background-color: #FFF; + } + + .ant-modal-header { + border-bottom-color: #EEE; + } + + .ant-modal-title, .ant-modal-close, .wallet-title { + color: #020412; + } + + .wallet-item { + border-color: #EEE; + } + + .wallet-item:hover { + background-color: #EEE; + } + +} \ No newline at end of file diff --git a/packages/demo/src/App.svelte b/packages/demo/src/App.svelte deleted file mode 100644 index 280399a2e..000000000 --- a/packages/demo/src/App.svelte +++ /dev/null @@ -1,938 +0,0 @@ - - - - -
-
- - - {#if $wallets$} - -
-
- - - - - -
-
- - - - -
-
- - - - - - - -
-
- {/if} -
- {#if $wallets$} - {#each $wallets$ as { icon, label, accounts, chains, provider, instance }} -
-
-
- {#if isSVG(icon)} - - {@html icon} - {:else} - - logo - {/if} -
- {label} -
- -
- Chains: {JSON.stringify(chains, null, 2)} -
- - {#each accounts as { address, ens, uns, balance }} - -
- - -
-
- - -
-
- - -
-
-