Skip to content

Commit

Permalink
Merge branch '06-21-joaquim_rn-connect-ui-2' into joaquim/rn-ui-connect
Browse files Browse the repository at this point in the history
  • Loading branch information
joaquim-verges committed Jul 1, 2024
2 parents ce03f72 + cd436b3 commit 3590a41
Show file tree
Hide file tree
Showing 62 changed files with 3,183 additions and 605 deletions.
6 changes: 5 additions & 1 deletion packages/react-native-adapter/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ npx expo install thirdweb @thirdweb-dev/react-native-adapter
Since react native requires installing native dependencies directly, you also have to install these required peer dependencies:

```shell
npx expo install react-native-get-random-values @react-native-community/netinfo expo-application @react-native-async-storage/async-storage expo-web-browser expo-linking react-native-aes-gcm-crypto react-native-quick-crypto@0.7.0-rc.6 amazon-cognito-identity-js @coinbase/wallet-mobile-sdk react-native-mmkv react-native-svg
npx expo install react-native-get-random-values @react-native-community/netinfo expo-application @react-native-async-storage/async-storage expo-web-browser expo-linking react-native-aes-gcm-crypto react-native-quick-crypto@0.7.0-rc.6 amazon-cognito-identity-js @coinbase/wallet-mobile-sdk react-native-mmkv react-native-svg @react-native-clipboard/clipboard
```

Here's an explanation of each peer dependency and why its needed:
Expand All @@ -34,6 +34,10 @@ expo-web-browser // for oauth flows
amazon-cognito-identity-js // for authentication
react-native-aes-gcm-crypto // for encryption
react-native-quick-crypto@0.7.0-rc.6 //for fast hashing
// needed for the prebuilt UIs
react-native-svg
@react-native-clipboard/clipboard
```

### 2. Edit your `metro.config.js`
Expand Down
1 change: 1 addition & 0 deletions packages/react-native-adapter/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
"typescript": ">=5.0.4",
"@coinbase/wallet-mobile-sdk": "^1",
"@react-native-async-storage/async-storage": "^1",
"@react-native-clipboard/clipboard": "^1",
"@react-native-community/netinfo": "^11",
"amazon-cognito-identity-js": "^6",
"expo-application": "^5",
Expand Down
71 changes: 22 additions & 49 deletions packages/thirdweb/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -117,54 +117,22 @@
},
"typesVersions": {
"*": {
"adapters/*": [
"./dist/types/exports/adapters/*.d.ts"
],
"auth": [
"./dist/types/exports/auth.d.ts"
],
"chains": [
"./dist/types/exports/chains.d.ts"
],
"contract": [
"./dist/types/exports/contract.d.ts"
],
"deploys": [
"./dist/types/exports/deploys.d.ts"
],
"event": [
"./dist/types/exports/event.d.ts"
],
"extensions/*": [
"./dist/types/exports/extensions/*.d.ts"
],
"pay": [
"./dist/types/exports/pay.d.ts"
],
"react": [
"./dist/types/exports/react.d.ts"
],
"react-native": [
"./dist/types/exports/react-native.d.ts"
],
"rpc": [
"./dist/types/exports/rpc.d.ts"
],
"storage": [
"./dist/types/exports/storage.d.ts"
],
"transaction": [
"./dist/types/exports/transaction.d.ts"
],
"utils": [
"./dist/types/exports/utils.d.ts"
],
"wallets": [
"./dist/types/exports/wallets.d.ts"
],
"wallets/*": [
"./dist/types/exports/wallets/*.d.ts"
]
"adapters/*": ["./dist/types/exports/adapters/*.d.ts"],
"auth": ["./dist/types/exports/auth.d.ts"],
"chains": ["./dist/types/exports/chains.d.ts"],
"contract": ["./dist/types/exports/contract.d.ts"],
"deploys": ["./dist/types/exports/deploys.d.ts"],
"event": ["./dist/types/exports/event.d.ts"],
"extensions/*": ["./dist/types/exports/extensions/*.d.ts"],
"pay": ["./dist/types/exports/pay.d.ts"],
"react": ["./dist/types/exports/react.d.ts"],
"react-native": ["./dist/types/exports/react-native.d.ts"],
"rpc": ["./dist/types/exports/rpc.d.ts"],
"storage": ["./dist/types/exports/storage.d.ts"],
"transaction": ["./dist/types/exports/transaction.d.ts"],
"utils": ["./dist/types/exports/utils.d.ts"],
"wallets": ["./dist/types/exports/wallets.d.ts"],
"wallets/*": ["./dist/types/exports/wallets/*.d.ts"]
}
},
"browser": {
Expand Down Expand Up @@ -212,6 +180,7 @@
"@expo/vector-icons": "^14",
"@coinbase/wallet-mobile-sdk": "^1",
"@react-native-async-storage/async-storage": "^1",
"@react-native-clipboard/clipboard": "^1",
"amazon-cognito-identity-js": "^6",
"aws-amplify": "^5",
"ethers": "^5 || ^6",
Expand Down Expand Up @@ -270,6 +239,9 @@
"@react-native-async-storage/async-storage": {
"optional": true
},
"@react-native-clipboard/clipboard": {
"optional": true
},
"@coinbase/wallet-mobile-sdk": {
"optional": true
}
Expand Down Expand Up @@ -310,6 +282,7 @@
"@expo/vector-icons": "^14.0.0",
"@coinbase/wallet-mobile-sdk": "1.0.13",
"@react-native-async-storage/async-storage": "^1.23.1",
"@react-native-clipboard/clipboard": "1.14.1",
"@testing-library/jest-dom": "^6.4.6",
"@testing-library/react": "^16.0.0",
"@testing-library/user-event": "^14.5.2",
Expand All @@ -329,4 +302,4 @@
"react-native-svg": "15.3.0",
"vitest": "1.6.0"
}
}
}
4 changes: 2 additions & 2 deletions packages/thirdweb/src/exports/react.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ export { ThirdwebProvider } from "../react/core/providers/thirdweb-provider.js";
export type {
SupportedTokens,
TokenInfo,
} from "../react/web/ui/ConnectWallet/defaultTokens.js";
export { defaultTokens } from "../react/web/ui/ConnectWallet/defaultTokens.js";
} from "../react/core/utils/defaultTokens.js";
export { defaultTokens } from "../react/core/utils/defaultTokens.js";

// Media Renderer
export { MediaRenderer } from "../react/web/ui/MediaRenderer/MediaRenderer.js";
Expand Down
2 changes: 1 addition & 1 deletion packages/thirdweb/src/exports/wallets/in-app.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,4 @@ export { type GetAuthenticatedUserParams } from "../../wallets/in-app/core/authe

export { hasStoredPasskey } from "../../wallets/in-app/web/lib/auth/passkeys.js";

export { socialIcons } from "../../react/web/wallets/in-app/socialIcons.js";
export { socialIcons } from "../../react/core/utils/socialIcons.js";
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
import type { SmartWalletOptions } from "../../../../wallets/smart/types.js";
import type { AppMetadata } from "../../../../wallets/types.js";
import type { NetworkSelectorProps } from "../../../web/ui/ConnectWallet/NetworkSelector.js";
import type { SupportedTokens } from "../../../web/ui/ConnectWallet/defaultTokens.js";
import type { WelcomeScreen } from "../../../web/ui/ConnectWallet/screens/types.js";
import type { LocaleId } from "../../../web/ui/types.js";
import type { Theme } from "../../design-system/index.js";
import type { SupportedTokens } from "../../utils/defaultTokens.js";
import type { SiweAuthOptions } from "../auth/useSiweAuth.js";

export type PayUIOptions = {
Expand Down Expand Up @@ -699,10 +699,7 @@ export type ConnectButtonProps = {
* />
* ```
*/
onDisconnect?: (info: {
wallet: Wallet;
account: Account;
}) => void;
onDisconnect?: (info: { wallet: Wallet; account: Account }) => void;

/**
* Configure options for WalletConnect
Expand Down
2 changes: 1 addition & 1 deletion packages/thirdweb/src/react/core/hooks/connection/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export type AutoConnectProps = {
* }
* ```
*/
wallets: Wallet[];
wallets?: Wallet[];

/**
* A client is the entry point to the thirdweb SDK.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@ import {
type GetWalletBalanceResult,
getWalletBalance,
} from "../../../../wallets/utils/getWalletBalance.js";
import type { SupportedTokens } from "../../../web/ui/ConnectWallet/defaultTokens.js";
import { fetchBuySupportedDestinations } from "../../../web/ui/ConnectWallet/screens/Buy/swap/useSwapSupportedChains.js";
import type { LocaleId } from "../../../web/ui/types.js";
import type { Theme } from "../../design-system/index.js";
import type { SupportedTokens } from "../../utils/defaultTokens.js";

/**
* Configuration for the "Pay Modal" that opens when the user doesn't have enough funds to send a transaction.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { useSetActiveWalletConnectionStatusCore } from "./useSetActiveWalletConn
export function useAutoConnectCore(
manager: ConnectionManager,
storage: AsyncStorage,
props: AutoConnectProps,
props: AutoConnectProps & { wallets: Wallet[] },
getInstalledWallets?: () => Wallet[],
) {
const setConnectionStatus = useSetActiveWalletConnectionStatusCore(manager);
Expand Down
94 changes: 94 additions & 0 deletions packages/thirdweb/src/react/core/hooks/wallets/useSendToken.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import { useMutation } from "@tanstack/react-query";
import type { ThirdwebClient } from "../../../../client/client.js";
import { getContract } from "../../../../contract/contract.js";
import { resolveAddress } from "../../../../extensions/ens/resolve-address.js";
import { transfer } from "../../../../extensions/erc20/write/transfer.js";
import { sendTransaction } from "../../../../transaction/actions/send-transaction.js";
import { prepareTransaction } from "../../../../transaction/prepare-transaction.js";
import { isAddress } from "../../../../utils/address.js";
import { toWei } from "../../../../utils/units.js";
import type { Wallet } from "../../../../wallets/interfaces/wallet.js";

/**
* Send Native or ERC20 tokens from active wallet to given address.
* @internal
*/
export function useSendTokenCore(client: ThirdwebClient, wallet?: Wallet) {
return useMutation({
async mutationFn(option: {
tokenAddress?: string;
receiverAddress: string;
amount: string;
}) {
const { tokenAddress, receiverAddress, amount } = option;
const activeChain = wallet?.getChain();
const account = wallet?.getAccount();

// state validation
if (!activeChain) {
throw new Error("No active chain");
}
if (!account) {
throw new Error("No active account");
}

// input validation
if (
!receiverAddress ||
(!receiverAddress.endsWith(".eth") && !isAddress(receiverAddress))
) {
throw new Error("Invalid address");
}

if (!amount || Number.isNaN(Number(amount)) || Number(amount) < 0) {
throw new Error("Invalid amount");
}

let to = receiverAddress;
// resolve ENS if needed
try {
to = await resolveAddress({
client,
name: receiverAddress,
});
} catch (e) {
throw new Error("Failed to resolve address");
}

// native token transfer
if (!tokenAddress) {
const sendNativeTokenTx = prepareTransaction({
chain: activeChain,
client,
to,
value: toWei(amount),
});

await sendTransaction({
transaction: sendNativeTokenTx,
account,
});
}

// erc20 token transfer
else {
const contract = getContract({
address: tokenAddress,
client,
chain: activeChain,
});

const tx = transfer({
amount,
contract,
to,
});

await sendTransaction({
transaction: tx,
account,
});
}
},
});
}
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export type TokenInfo = {
icon?: string;
};

const wrappedEthIcon =
export const wrappedEthIcon =
"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTAwIiBoZWlnaHQ9IjI1MDAiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNiIgZmlsbD0iIzYyN0VFQSIvPjxnIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyI+PHBhdGggZmlsbC1vcGFjaXR5PSIuNjAyIiBkPSJNMTYuNDk4IDR2OC44N2w3LjQ5NyAzLjM1eiIvPjxwYXRoIGQ9Ik0xNi40OTggNEw5IDE2LjIybDcuNDk4LTMuMzV6Ii8+PHBhdGggZmlsbC1vcGFjaXR5PSIuNjAyIiBkPSJNMTYuNDk4IDIxLjk2OHY2LjAyN0wyNCAxNy42MTZ6Ii8+PHBhdGggZD0iTTE2LjQ5OCAyNy45OTV2LTYuMDI4TDkgMTcuNjE2eiIvPjxwYXRoIGZpbGwtb3BhY2l0eT0iLjIiIGQ9Ik0xNi40OTggMjAuNTczbDcuNDk3LTQuMzUzLTcuNDk3LTMuMzQ4eiIvPjxwYXRoIGZpbGwtb3BhY2l0eT0iLjYwMiIgZD0iTTkgMTYuMjJsNy40OTggNC4zNTN2LTcuNzAxeiIvPjwvZz48L2c+PC9zdmc+";

const tetherUsdIcon =
Expand Down Expand Up @@ -88,20 +88,6 @@ export const defaultTokens: SupportedTokens = {
icon: maticIcon,
},
],
"5": [
{
address: "0xb4fbf271143f4fbf7b91a5ded31805e42b2208d6",
name: "Wrapped Ether",
symbol: "WETH",
icon: wrappedEthIcon,
},
{
address: "0x07865c6E87B9F70255377e024ace6630C1Eaa37F",
name: "USD Coin",
symbol: "USDC",
icon: usdcIcon,
},
],
"10": [
{
address: "0x4200000000000000000000000000000000000006",
Expand Down Expand Up @@ -327,4 +313,13 @@ export const defaultTokens: SupportedTokens = {
icon: usdcIcon,
},
],
// Base sepolia
"84532": [
{
address: "0x036CbD53842c5426634e7929541eC2318f3dCF7e",
name: "USD Coin",
symbol: "USDC",
icon: usdcIcon,
},
],
};
Loading

0 comments on commit 3590a41

Please sign in to comment.