Skip to content

Commit

Permalink
docs(examples): improve sandbox
Browse files Browse the repository at this point in the history
  • Loading branch information
@extg3
extg3 committed Jul 3, 2024
1 parent f3ff65a commit 15ed251
Show file tree
Hide file tree
Showing 4 changed files with 85 additions and 66 deletions.
107 changes: 55 additions & 52 deletions examples/sandbox/src/app/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@ const nativeSymbols = {
[Chain.Arbitrum]: 'ETH',
};
const exploerUrls = {
[Chain.Polygon]: 'https://polygonscan.com/tx/',
[Chain.Arbitrum]: 'https://arbiscan.io/tx/',
[Chain.Polygon]: 'https://polygonscan.com',
[Chain.Arbitrum]: 'https://arbiscan.io',
};

function parseInput(inputStrings: string[]): [Address, string][] {
Expand Down Expand Up @@ -85,11 +85,11 @@ const ConnectWalletButton = () => {
<div className="relative">
{connected ? (
<Button variant="outline" onClick={disconnect}>
Disconnect
Disconnect Wallet
</Button>
) : (
<Button disabled={connecting} onClick={connect}>
Connect
Connect Wallet
</Button>
)}
</div>
Expand Down Expand Up @@ -141,7 +141,6 @@ export function App() {
const [nextSwAddress, setNextSWAddress] = React.useState<Address | null>(null);
const [lastTxHash, setLastTxHash] = React.useState<string>('');
const [nextVaultId, setNextVaultId] = useLocalStorage<number>('nextVaultId', 1);
const [balance, setBalance] = React.useState<string | null>(null);
const [isDeployed, setIsDeployed] = React.useState<boolean>(false);
const [isNextDeployed, setIsNextDeployed] = React.useState<boolean>(false);
const [usdtBalance, setUsdtBalance] = React.useState<string | null>(null);
Expand Down Expand Up @@ -220,15 +219,15 @@ export function App() {
// Fetch balance
if (account) fetchBalances(account, ethersProvider, signer);

const [isDeployed, nextVaultId, vaultAddress] = chainId
const [isDeployed, lastVaultId] = chainId
? await Promise.all([
swFactory.isVaultWithIdExists(1, +chainId),
swFactory.getNextVaultId(+chainId),
swFactory.getVaultAddress(+chainId),
swFactory.getLastVaultId(+chainId),
])
: [false, 1, '', ''];
: [false, 1, ''];
const vaultAddress = chainId ? await swFactory.getVaultAddress(+chainId, 1) : '';
const nextVaultAddress = chainId
? await swFactory.getVaultAddress(+chainId, nextVaultId)
? await swFactory.getVaultAddress(+chainId, lastVaultId + 1)
: '';

setIsDeployed(isDeployed);
Expand Down Expand Up @@ -322,74 +321,79 @@ export function App() {
setRecepients(value);
};

const swAddressLink = `${exploerUrls[chainId as Chain]}/address/${swAddress}`;

return (
<div className="w-full h-screen max-w-screen-xl mx-auto">
<div className="flex flex-col py-4 px-10 h-screen max-w-[800px] mx-auto">
<h1 className="flex items-center gap-4 text-4xl font-bold">
<img className="icon" src="/logo.svg" alt="Ditto Logo" />
Getting started with Ditto Network
Getting started with Ditto SDK
</h1>

{/* Step 1: Connect Wallet */}
<div className="flex flex-col gap-4 mt-6">
<div className="flex flex-col gap-2">
<h2 className="text-2xl font-bold">Step 1: Connect Wallet</h2>
<p className="text-gray-600">To get the signer</p>
<h2 className="text-2xl font-bold">Step 1: Connect Wallet & Initialize SDK</h2>
<p className="text-gray-600">
<ol className="list-disc list-inside">
{/* <li>Connect your wallet — To get the signer</li> */}
</ol>
</p>
<div className="flex flex-col gap-2">
<ConnectWalletButton />
<div className="flex gap-2">
<ConnectWalletButton />
<Button variant="outline" className="w-min" onClick={initProvider}>
Init provider
</Button>
<Button variant="outline" className="w-min" onClick={authenticate}>
Auth API
</Button>
</div>
<p className="text-gray-600">
Wallet: {account ? '✅ ' + account : '❌ Not initialized'}
<br />
Network:{' '}
{chainId
? networkNames[Number(chainId) as Chain] || Number(chainId)
: '❌ Not initialized'}{' '}
<br />
Wallet: {account ? '✅' : '❌'}{' '}
<a
className="link"
href={`${exploerUrls[chainId as Chain]}/address/${account}`}
target="_blank"
rel="noreferrer"
>
{account}
</a>
<br />
Balance: {ethBalance} {nativeSymbols[chainId as Chain]}, {usdtBalance} USDT <br />
</p>
</div>
</div>
</div>

{/* Step 2: Initialize Provider */}
<div className="flex flex-col gap-4 mt-6">
<div className="flex flex-col gap-2">
<h2 className="text-2xl font-bold">Step 2: Initialize Provider</h2>
<p className="text-gray-600">Initialize the provider to start using the SDK</p>
<div className="flex flex-col gap-2">
<Button variant="outline" className="w-min" onClick={initProvider}>
Init provider
</Button>
<p className="text-gray-600">
Provider: {provider ? '✅ Initialized' : '❌ Not initialized'}
Provider:{' '}
{provider
? '✅ Initialized'
: '❌ Initialize the provider to start using the SDK'}{' '}
<br />
Login status:{' '}
{isAuthenticated
? '✅ API Authentication (for history)'
: '❌ API Authentication (for history) - sign a message'}
</p>
</div>
</div>
</div>

{/* Step 3: Authenticate */}
<div className="flex flex-col gap-4 mt-6">
<div className="flex flex-col gap-2">
<h2 className="text-2xl font-bold">Step 3: Authenticate</h2>
<p className="text-gray-600">API Authentication (for history) - sign a message</p>
<div className="flex flex-col gap-2">
<Button variant="outline" className="w-min" onClick={authenticate}>
Sign message
</Button>
<p className="text-gray-600">
Login status: {isAuthenticated ? '✅ Logged in' : '❌ Not logged in'}
</p>
</div>
</div>

<div className="flex flex-col gap-2 mt-6">
<h2 className="text-2xl font-bold">Step 4: Get Smart Wallet Address and Deploy</h2>
<h2 className="text-2xl font-bold">Step 3: Get Smart Wallet Address and Deploy</h2>
<p className="text-gray-600">
By default, the first smart wallet will be deployed with id=1. Address of Smart Wallet
predicted based on the account address and id.
</p>
<p className="text-gray-600">
Smart Wallet Address: {isDeployed ? '✅' : '❌'} {swAddress}{' '}
Smart Wallet Address: {isDeployed ? '✅' : '❌'}{' '}
<a className="link" href={swAddressLink} target="_blank" rel="noreferrer">
{swAddress}
</a>{' '}
{isDeployed ? '(deployed)' : '(not deployed)'}
<br />
Balance: {swEthBalance} {nativeSymbols[chainId as Chain]}, {swUsdtBalance} USDT <br />
Expand All @@ -406,7 +410,7 @@ export function App() {

<details className="mt-6">
<summary className="text-2xl -ml-[20px] font-bold cursor-pointer">
Step 4.1: Predict Address of Next Smart Wallet
Step 4: Predict Address of Next Smart Wallet
</summary>
<div className="flex flex-col gap-2">
<p className="text-gray-600">
Expand Down Expand Up @@ -456,15 +460,14 @@ export function App() {
<p className="text-gray-600">
{lastTxHash ? (
<a
className="underline"
href={`${exploerUrls[chainId as Chain]}${lastTxHash}`}
className="link"
href={`${exploerUrls[chainId as Chain]}/tx/${lastTxHash}`}
target="_blank"
rel="noreferrer"
>
View on explorer {shortenAddress(lastTxHash)}
</a>
) : null}
{!isDeployed ? (
) : !isDeployed ? (
<p className="text-gray-600">❗️ You need to deploy the smart wallet first.</p>
) : (
<p className="text-gray-600">
Expand Down
18 changes: 18 additions & 0 deletions examples/sandbox/src/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,3 +87,21 @@
Bitstream Vera Sans Mono, Courier New, monospace;
}
}

@layer components {
.link {
text-decoration: none;
color: inherit;
}

.link:hover {
text-decoration: underline;
}

.link::after {
content: '🔗';
display: inline-block;
margin-left: 0.2rem;
transform: scale(0.8);
}
}
22 changes: 10 additions & 12 deletions packages/core/src/lib/config/config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,27 @@
// we use this file for environment related configurations
// all production related things are in config.prod.ts

import { Chain } from '../blockchain/chains/types';
import { DittoConfig } from './types';
import { Chain } from '../ditto-sdk';

export const config: DittoConfig = {
apiBaseUrl: 'https://authentication-backend.dev.dittonetwork.io',
apiBaseUrl: 'https://backend.dittonetwork.io',

vaultFactoryAddresses: {
[Chain.Polygon]: '0xF03C8CaB74b5721eB81210592C9B06f662e9951E',
[Chain.Arbitrum]: '0xF03C8CaB74b5721eB81210592C9B06f662e9951E',
[Chain.Polygon]: '0xaB5F025297E40bd5ECf340d1709008eFF230C6cA',
[Chain.Arbitrum]: '0xaB5F025297E40bd5ECf340d1709008eFF230C6cA',
},

vaultImplementations: {
[Chain.Polygon]: [
'0x0209A93968BFB0f3c3BbeaE72afAdfFAD0885c98',
'0x56d3d560Dd74f2150e213875D590648c534a3352',
'0xE587A6f96fb57b52EF90E638ca16430fC9D8db76',
'0xA587d512C12558AE377628d87b60106707D68c8e',
'0xa4918Eb4ce5Cb72dde220963AB643c02c09374cf',
'0xD85Cab06561E2252Eb81dcA86a31a1d3aeb73543',
'0x6f53Cb6eCfB6d53AE2827DA81cfac9B26C725462',
],
[Chain.Arbitrum]: [
'0x77c2c3eA05BA3D1C049CE95b42BD9ddeC31494f0',
'0x31dBC473343073F9a3cC2998dC1EcA22ce60B3A6',
'0x3B631ba46C7E0D058F5f34699c8912Cb01b87d2e',
'0x36D736D294F36380cF92EB9A1F476f94200ca43E',
'0x0ebd83871160FeBc3736d4Ecfa50ee474DBF2d76',
'0x9B5056cB0378b461924DF358746BB0F7A57c0524',
'0x6c07D39042b2480a512675fdcc10A20756ba2d7B',
],
},
};
4 changes: 2 additions & 2 deletions packages/core/src/lib/vaults/smart-wallet-factory.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,7 @@ export class SmartWalletFactory implements Factory {

// TODO: Get the next available vault ID for the account from the contract
// when supported by the contract
public async getNextVaultId(chainId: Chain): Promise<number> {
public async getLastVaultId(chainId: Chain): Promise<number> {
const accountAddress = await this.provider.getSigner().getAddress();

const events = await this.getContract(chainId).getPastEvents('VaultCreated', {
Expand All @@ -193,6 +193,6 @@ export class SmartWalletFactory implements Factory {
}
});

return highestVaultId + 1;
return highestVaultId;
}
}

0 comments on commit 15ed251

Please sign in to comment.