Brian doyle/fix remix connection (#799)

* update wallet-connectors

* Purge 'we' from Building an Onchain App

* Stash partial

* Stash partial

* Update instructions for Remix deploying with injected provider

apps/base-docs/base-learn/docs/deployment-to-testnet/contract-verification-sbs.md

@@ -12,15 +12,15 @@ Once your contract is deployed, you can verify it using a number of popular serv
 
 By the end of this lesson you should be able to:
 
-- Verify a contract on the Base Sepolia testnet and interact with it in Etherscan
+- Verify a contract on the Base Sepolia testnet and interact with it in [BaseScan]
 
 ---
 
 ### Verify the Contract
 
 Make sure you still have the address of the contract you deployed in the last article copied to the clipboard.
 
-You can interact with your deployed contract using Remix, the same as before, but it's also possible to interact with it through Etherscan. Paste your address in the search field to find it.
+You can interact with your deployed contract using Remix, the same as before, but it's also possible to interact with it through BaseScan. Paste your address in the search field to find it.
 
 On this page, you can review the balance, information about, and all the transactions that have ever occurred with your contract.
 
@@ -52,7 +52,7 @@ If you have imports, you'll need to right click on the name of the file and choo
 
 ### Interact with the Contract
 
-You can now interact with your contract using Etherscan. Click the _Read Contract_ button. Both of your functions will be listed here and can be tested using the web interface.
+You can now interact with your contract using BaseScan. Click the _Read Contract_ button. Both of your functions will be listed here and can be tested using the web interface.
 
 You won't have anything under _Write Contract_ because this contract doesn't have any functions that save data to state.
 
@@ -71,5 +71,5 @@ With your contracts verified, you can interact with them using online tools and
 [faucet]: https://docs.base.org/tools/network-faucets
 [set up]: https://www.youtube.com/watch?v=CZDgLG6jpgw
 [coinbase settings]: https://docs.cloud.coinbase.com/wallet-sdk/docs/developer-settings
-[etherscan]: https://etherscan.io/
+[BaseScan]: https://sepolia.basescan.org/
 [faucets on the web]: https://coinbase.com/faucets

apps/base-docs/base-learn/docs/deployment-to-testnet/deployment-to-base-sepolia-sbs.md

@@ -12,7 +12,7 @@ Remix contains a simulation of a blockchain that you can use to rapidly deploy a
 
 By the end of this lesson you should be able to:
 
-- Deploy a contract to the Base Sepolia testnet and interact with it in Etherscan
+- Deploy a contract to the Base Sepolia testnet and interact with it in [BaseScan]
 
 ---
 
@@ -64,6 +64,10 @@ Open the _Deploy & Run Transactions_ tab. Under _Environment_, select _Injected
 
 ![Environment](../../assets/images/deployment-to-testnet/select-provider.png)
 
+If that option is not available, you can add it by choosing `Customize this list...`
+
+![Add Injected Wallet](../../assets/images/deployment-to-testnet/add-injected-provider.png)
+
 The first time you do this, your wallet will ask you to confirm that you want to connect this app (Remix) to your wallet.
 
 Once you are connected, you'll see the name of the network below the _Environment_ dropdown.
@@ -101,5 +105,5 @@ You now have the power to put smart contracts on the blockchain! You've only dep
 [set up]: https://www.youtube.com/watch?v=CZDgLG6jpgw
 [coinbase settings]: https://docs.cloud.coinbase.com/wallet-sdk/docs/developer-settings
 [Metamask Settings]: https://support.metamask.io/hc/en-us/articles/13946422437147-How-to-view-testnets-in-MetaMask
-[etherscan]: https://etherscan.io/
+[BaseScan]: https://sepolia.basescan.org/
 [faucets on the web]: https://coinbase.com/faucets

apps/base-docs/base-learn/docs/frontend-setup/building-an-onchain-app.md

@@ -6,7 +6,7 @@ hide_table_of_contents: false
 
 While it's convenient and fast to start from a template, the template may not fit your needs. Whether you prefer a different stack, or have already started building the traditional web components of your app, it's common to need to manually add onchain libraries to get your app working.
 
-In this guide, we'll build the beginnings of an app similar to the one created by the [RainbowKit] quick start, but we'll do it piece by piece. You can follow along, and swap out any of our library choices with the ones you prefer.
+In this guide, you'll build the beginnings of an app similar to the one created by the [RainbowKit] quick start, but you'll do it piece by piece. You can follow along, and swap out any of our library choices with the ones you prefer.
 
 ---
 
@@ -47,7 +47,7 @@ Run your app with `yarn dev` to make sure it generated correctly.
 
 ### Manually Installing RainbowKit, Wagmi, and Viem
 
-The [quick start] guide for RainbowKit also contains step-by-step instructions for manual install. We'll be following an adjusted version here. Most of the setup is actually for configuring [wagmi], which sits on top of [viem] and makes it much easier to write React that interacts with the blockchain.
+The [quick start] guide for RainbowKit also contains step-by-step instructions for manual install. You'll be following an adjusted version here. Most of the setup is actually for configuring [wagmi], which sits on top of [viem] and makes it much easier to write React that interacts with the blockchain.
 
 Start by installing the dependencies:
 
@@ -63,7 +63,7 @@ Onchain libraries and packages tend to require very current versions of Node. If
 
 ## Adding Imports, Connectors, Config
 
-In Next.js 14 with the app router, the root of your app is found in `app/layout.tsx`, if you followed the recommended setup options. As we want the blockchain provider context to be available for the entire app, we'll add it here.
+In Next.js 14 with the app router, the root of your app is found in `app/layout.tsx`, if you followed the recommended setup options. As you want the blockchain provider context to be available for the entire app, you'll add it here.
 
 You'll need to set up your providers in a second file, so that you can add `"use client":` to the top. Doing so forces this code to be run client side, which is necessary since your server won't have access to your users' wallet information.
 
@@ -98,7 +98,7 @@ If you're adapting this guide to a different set of libraries or platforms, you
 
 ### Config
 
-Now, we'll configure the chains, wallet connectors, and providers for your app. We'll use `getDefaultConfig` for now, to get started. See our guide on [Connecting to the Blockchain] for more information on blockchain providers.
+Now, you need to configure the chains, wallet connectors, and providers for your app. You'll use `getDefaultConfig` for now, to get started. See our guide on [Connecting to the Blockchain] for more information on blockchain providers.
 
 You'll need a `projectId` from [Wallet Connect Cloud], which you can get for free on their site. Make sure to insert it in the appropriate place.
 
@@ -153,7 +153,7 @@ return (
 
 ## Adding the Connect Button
 
-You're now ready to add your connect button. You can do this anywhere in your app, thanks to the `RainbowKitProvider`. Common practice would be to place the button in your app's header. Since the Next.js template doesn't have one, we'll just add it to the top of the automatically generated page, rather than spending time implementing React components.
+You're now ready to add your connect button. You can do this anywhere in your app, thanks to the `RainbowKitProvider`. Common practice would be to place the button in your app's header. Since the Next.js template doesn't have one, you can just add it to the top of the automatically generated page, rather than spending time implementing React components.
 
 Open up `page.tsx`, and import the `ConnectButton`:
 

apps/base-docs/base-learn/docs/frontend-setup/wallet-connectors.md

@@ -4,7 +4,11 @@ description: Learn about how wallet connector libraries aggregate wallets and ma
 hide_table_of_contents: false
 ---
 
-One of the most intimidating tasks when building an onchain app is making that initial connection between your users' wallets, and your app. Initial research often surfaces a bewildering number of wallets, each with their own SDKs, and own methods to manage the connection. Luckily, you don't actually need to manage all of this on your own. There are a number of libraries specialized in creating a smooth and beautiful user experience to facilitate this connection.
+One of the most intimidating tasks when building an onchain app is making that initial connection between your users' wallets, and your app. Initial research often surfaces a bewildering number of wallets, each with their own SDKs, and own methods to manage the connection. Luckily, you don't actually need to manage all of this on your own. There are a number of wallet connector libraries specialized in creating a smooth and beautiful user experience to facilitate this connection.
+
+To further add to the confusion and difficulty, [Smart wallets] are growing in popularity. These advanced wallets allow users to create and manage wallets with [passkeys], and support, or will soon support, a growing array of features including session keys, account recovery, and more!
+
+[RainbowKit], the aggregator you'll use for this lesson, works with the Coinbase Smart Wallet out of the box, but you'll need to do a little bit of extra configuration to support users of both traditional wallets and smart wallets.
 
 ---
 
@@ -15,6 +19,7 @@ By the end of this guide you should be able to:
 - Identify the role of a wallet aggregator in an onchain app
 - Debate the pros and cons of using a template
 - Scaffold a new onchain app with RainbowKit
+- Support users of EOAs and the Coinbase Smart Wallet with the same app
 
 ---
 
@@ -46,16 +51,26 @@ Once it's done, simply run the app with:
 yarn run dev
 ```
 
-Using the script is fast, but it does mean less choice. In this case, it builds the app on top of [Next.js], which is great if you want to use it, but not helpful if you prefer to work from a different framework, such as [Create React App], or [Remix]. The script also doesn't help you if you want to add an onchain integration to an existing site.
+Using the script is fast, but it does mean less choice. In this case, it builds the app on top of [Next.js], which is great if you want to use it, but not helpful if you prefer to work from a different framework, such as [Create React App], or [Remix] (the React framework, not the Solidity IDE). The script also doesn't help you if you want to add an onchain integration to an existing site.
 
 :::info
 
 The Rainbowkit template has been updated to wagmi 2.X, but it does **not** use the Next.js app router. You'll need to install it manually if you wish to use the latest patterns.
 
-The next tutorial will show you how to do this!
+The [Building an Onchain App] tutorial will show you how to do this!
 
 :::
 
+### Coinbase Smart Wallet
+
+If you have the Coinbase Wallet extension, you might be wondering were the smart wallet can be found. By default, the smart wallet will only be invoked if you click the `Coinbase Wallet` button to log in **and** you **don't** have the browser extension. To test, open a private window with extensions disabled and try to log in.
+
+Selecting `Rainbow`, `MetaMask`, or `WalletConnect` will display a QR code so that the user can log in with their phone. Picking `Coinbase Wallet` will instead invoke the smart wallet login.
+
+This flow can be improved upon, as new crypto users won't know that digging for the smart wallet is the best path forward, and existing users who are trying to migrate to the smart wallet don't have that option.
+
+See our tutorials on [Managing Wallets] for more details!
+
 ---
 
 ## Conclusion
@@ -73,3 +88,8 @@ In this article, you've learned how libraries such as [Rainbowkit], [ConnectKit]
 [Next.js]: https://nextjs.org/
 [Create React App]: https://create-react-app.dev/
 [Remix]: https://remix.run/
+[Building an Onchain App]: /building-an-onchain-app
+[Smart wallets]: https://www.coinbase.com/wallet/smart-wallet
+[passkeys]: https://safety.google/authentication/passkey/
+
+[Managing Wallets]:

apps/base-docs/src/components/Hero/HeroButton/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 
 import logEvent from 'base-ui/utils/logEvent';
 

apps/base-docs/tutorials/docs/0_deploy-with-remix.md

@@ -32,7 +32,7 @@ By the end of this tutorial, you should be able to:
 
 - List the features, pros, and cons of using Remix as an IDE
 - Deploy and test the Storage.sol demo contract in Remix
-- Use Remix to deploy a contract to the Base @ Sepolia testnet and interact with it in Etherscan
+- Use Remix to deploy a contract to the Base Sepolia testnet and interact with it in [BaseScan]
 
 ---
 
@@ -116,6 +116,8 @@ Once you've completed wallet setup, enable developer settings and turn on testne
 
 ### Add the Base Sepolia Network to your Wallet
 
+Most wallets will already have the Base Sepolia network as one of the testnet networks. You may need to turn on developer mode to see them.
+
 For this tutorial, you will be deploying a contract to the Base Sepolia test network. You can fund your wallet with Base Sepolia ETH using one of the faucets listed on the Base [Network Faucets](https://docs.base.org/tools/network-faucets) page.
 
 ### Get Testnet Ether
@@ -142,6 +144,10 @@ Open the _Deploy & Run Transactions_ tab. Under _Environment_, select _Injected
 
 ![Environment](../../assets/images/deployment-with-remix/select-provider.png)
 
+If that option is not available, you can add it by choosing `Customize this list...`
+
+![Add injected provider](../../base-learn/assets/images/deployment-to-testnet/add-injected-provider.png)
+
 The first time you do this, your wallet will ask you to confirm that you want to connect this app (Remix) to your wallet.
 
 Once you are connected, you'll see the name of the network below the _Environment_ dropdown.
@@ -174,7 +180,7 @@ You don't need to verify the contract if you've deployed one identical to a cont
 
 :::
 
-You can interact with your deployed contract using Remix, the same as before, but it's also possible to interact with it through Etherscan. Paste your address in the search field to find it.
+You can interact with your deployed contract using Remix, the same as before, but it's also possible to interact with it through [BaseScan]. Paste your address in the search field to find it.
 
 On this page, you can review the balance, information about, and all the transactions that have ever occurred with your contract.
 
@@ -200,7 +206,7 @@ Click the linked address to your contract to return to the contract page. You'll
 
 ### Interact with the Contract
 
-You can now interact with your contract using Etherscan. Click the _Read Contract_ button. Both of your functions will be listed here and can be tested using the web interface.
+You can now interact with your contract using [BaseScan]. Click the _Read Contract_ button. Both of your functions will be listed here and can be tested using the web interface.
 
 You won't have anything under _Write Contract_ because this contract doesn't have any functions that save data to state.
 
@@ -220,7 +226,7 @@ You now have the power to put smart contracts on the blockchain! You've only dep
 [MetaMask]: https://metamask.io/
 [set up]: https://www.youtube.com/watch?v=CZDgLG6jpgw
 [coinbase settings]: https://docs.cloud.coinbase.com/wallet-sdk/docs/developer-settings
-[etherscan]: https://etherscan.io/
+[BaseScan]: https://sepolia.basescan.org/
 [faucets on the web]: https://coinbase.com/faucets
 [here]: #prepare-for-deployment
 [remix]: https://remix.ethereum.org

apps/base-docs/tutorials/docs/4_intro-to-providers.md

@@ -39,7 +39,7 @@ keywords:
     public provider,
     smart contract development,
   ]
-tags: ['nodes']
+tags: ['nodes', 'frontend']
 difficulty: beginner
 hide_table_of_contents: false
 displayed_sidebar: null