> ## Documentation Index
> Fetch the complete documentation index at: https://docs.anchorage.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Web dashboard

> Manage vaults, wallets, trusted destinations, and account settings.

export const ImageCarousel = ({images, perView = 3, children}) => {
  const [page, setPage] = useState(0);
  const [imgH, setImgH] = useState(0);
  const stripRef = useRef(null);
  const THUMB_MAX_WIDTH = 220;
  const PEEK_WIDTH = 34;
  useEffect(() => {
    const strip = stripRef.current;
    if (!strip) return;
    const measure = () => {
      const box = strip.querySelector("[data-carousel-imgbox]");
      if (box && box.clientHeight) setImgH(box.clientHeight);
    };
    measure();
    const ro = new ResizeObserver(measure);
    ro.observe(strip);
    return () => ro.disconnect();
  }, []);
  const fromChildren = React.Children.toArray(children).map(c => c && c.props && c.props.src ? {
    src: c.props.src,
    alt: c.props.alt
  } : null).filter(Boolean);
  const items = fromChildren.length ? fromChildren : images || [];
  if (!items.length) return null;
  const count = items.length;
  const columns = Math.min(perView, count);
  const totalPages = Math.ceil(count / columns);
  const showControls = totalPages > 1;
  const goTo = p => setPage((p % totalPages + totalPages) % totalPages);
  const prev = () => goTo(page - 1);
  const next = () => goTo(page + 1);
  const start = page * columns;
  const visible = items.slice(start, start + columns);
  const prevPeek = start > 0 ? items[start - 1] : null;
  const nextPeek = start + columns < count ? items[start + columns] : null;
  const renderPeek = (img, side) => {
    if (!img) return null;
    const isLeft = side === "left";
    return <button type="button" onClick={isLeft ? prev : next} aria-hidden="true" tabIndex={-1} style={{
      flex: `0 0 ${PEEK_WIDTH}px`,
      width: PEEK_WIDTH + "px",
      alignSelf: imgH ? "flex-start" : "stretch",
      height: imgH ? imgH + "px" : undefined,
      border: 0,
      padding: 0,
      cursor: "pointer",
      opacity: 0.5,
      borderRadius: isLeft ? "10px 0 0 10px" : "0 10px 10px 0",
      backgroundImage: `url("${img.src}")`,
      backgroundRepeat: "no-repeat",
      backgroundSize: "auto 100%",
      backgroundPosition: isLeft ? "right center" : "left center",
      WebkitMaskImage: `linear-gradient(to ${isLeft ? "left" : "right"}, #000 15%, transparent 100%)`,
      maskImage: `linear-gradient(to ${isLeft ? "left" : "right"}, #000 15%, transparent 100%)`
    }} />;
  };
  const arrowStyle = {
    flex: "0 0 auto",
    width: "30px",
    height: "30px",
    borderRadius: "50%",
    border: "1px solid var(--ad-border, #e4e5e7)",
    background: "var(--background, #fff)",
    fontSize: "16px",
    lineHeight: "28px",
    textAlign: "center",
    cursor: "pointer",
    padding: 0
  };
  return <div style={{
    outline: "none",
    margin: "1.5rem 0"
  }} role={showControls ? "group" : undefined} aria-label={showControls ? "Screenshot carousel" : undefined} aria-roledescription={showControls ? "carousel" : undefined}>
      <div style={{
    display: "flex",
    alignItems: "center",
    gap: "10px"
  }}>
        {showControls && <button type="button" onClick={prev} aria-label="Previous screenshots" style={arrowStyle}>
            ‹
          </button>}

        <div ref={stripRef} style={{
    display: "flex",
    flexWrap: "nowrap",
    alignItems: "flex-start",
    gap: "14px",
    justifyContent: "center",
    flex: 1
  }}>
          {renderPeek(prevPeek, "left")}
          {}
          {Array.from({
    length: columns
  }).map((_, i) => {
    const img = visible[i];
    const slotStyle = {
      margin: 0,
      flex: "1 1 0",
      maxWidth: THUMB_MAX_WIDTH + "px",
      minWidth: 0
    };
    if (!img) {
      return <div key={start + i} aria-hidden="true" style={{
        ...slotStyle,
        visibility: "hidden"
      }} />;
    }
    return <div key={start + i} style={slotStyle}>
                <span data-carousel-imgbox style={{
      display: "block"
    }}>
                  <img src={img.src} alt={img.alt ?? ""} style={{
      display: "block",
      width: "100%",
      height: "auto",
      margin: 0,
      borderRadius: "10px",
      border: "1px solid var(--ad-border, #e4e5e7)"
    }} />
                </span>
                {img.alt && <div style={{
      marginTop: "6px",
      fontSize: "12px",
      lineHeight: 1.4,
      color: "var(--ad-muted, #6b7280)",
      textAlign: "center"
    }}>
                    {img.alt}
                  </div>}
              </div>;
  })}
          {renderPeek(nextPeek, "right")}
        </div>

        {showControls && <button type="button" onClick={next} aria-label="Next screenshots" style={arrowStyle}>
            ›
          </button>}
      </div>

      {showControls && <div style={{
    textAlign: "center",
    marginTop: "8px",
    fontSize: "12px",
    color: "var(--ad-muted, #6b7280)"
  }}>
          {start + 1}
          {visible.length > 1 ? "–" + (start + visible.length) : ""} of {count}
        </div>}
    </div>;
};

## Log in

Visit [https://www.porto.xyz](https://www.porto.xyz) and select **Login** at the top right, or go directly to the login page.

<Steps>
  <Step title="Visit the Porto login page">
    Go to [https://www.porto.xyz](https://www.porto.xyz) and select **Login**.
  </Step>

  <Step title="Open the iOS app">
    Open the Porto iOS app and navigate to **Settings**.
  </Step>

  <Step title="Scan the QR code">
    Tap **Web dashboard login**, then scan the QR code displayed on the website.
  </Step>

  <Step title="Allow access">
    Review the location of the device trying to log in and allow access to complete login.
  </Step>
</Steps>

<Frame caption="Web dashboard login portal">
  <img src="https://mintcdn.com/deployment-4/lSVGGJ7Z6F9zIy7U/knowledge-base/images/screenshots/porto-web-dashboard-login.png?fit=max&auto=format&n=lSVGGJ7Z6F9zIy7U&q=85&s=af8bd0c3dd87e17ade54d8d45a89d977" alt="Web dashboard login screen with QR code" style={{ maxWidth: "280px", height: "auto" }} width="1854" height="1160" data-path="knowledge-base/images/screenshots/porto-web-dashboard-login.png" />
</Frame>

## Homepage

Once logged in, the homepage provides a master view of your account. Click **Portfolio** to view the breakdown of holdings by asset.

## Vaults, wallets & addresses

### Vaults

Click **Vaults** to get an overview of all vaults in your account. From the vault page, you can view the vault's portfolio and details, including wallets and addresses.

<Frame caption="Vault overview showing balances and wallets">
  <img src="https://mintcdn.com/deployment-4/lSVGGJ7Z6F9zIy7U/knowledge-base/images/screenshots/porto-web-vaults-overview.png?fit=max&auto=format&n=lSVGGJ7Z6F9zIy7U&q=85&s=8acbd0222acbafddd374038ed3072bbc" alt="Vault details page displaying asset balances and wallet information" style={{ maxWidth: "100%", height: "auto" }} width="2056" height="1286" data-path="knowledge-base/images/screenshots/porto-web-vaults-overview.png" />
</Frame>

### Create a deposit address

<Steps>
  <Step title="Click Deposit">
    On the vault page, click **Deposit** to create a new deposit address.
  </Step>

  <Step title="Select the asset">
    Search from the list of assets you would like to deposit and select the asset.
  </Step>

  <Step title="Download the encrypted key">
    Before sharing the deposit address, click **Download encrypted key** and store it safely offline.
  </Step>

  <Step title="Share the address">
    Copy and share the deposit address with the counterparty.
  </Step>
</Steps>

<Frame caption="Deposit address interface">
  <img src="https://mintcdn.com/deployment-4/lSVGGJ7Z6F9zIy7U/knowledge-base/images/screenshots/porto-web-deposit-address.png?fit=max&auto=format&n=lSVGGJ7Z6F9zIy7U&q=85&s=226148c86f4e73d8fee6948576d8bb59" alt="Deposit address screen showing wallet address and copy option" style={{ maxWidth: "100%", height: "auto" }} width="2058" height="1286" data-path="knowledge-base/images/screenshots/porto-web-deposit-address.png" />
</Frame>

<Note>
  Deposit addresses can also be created in the iOS app.
</Note>

### Addresses

Under **Addresses**, all addresses associated with the vault are listed. You can search by asset, address, or wallet. Click on a wallet name to see the details of the associated wallet.

### Create a new wallet

<Steps>
  <Step title="Select Create new wallet">
    Select the button at the bottom right to create a new wallet (for example, **Create new Bitcoin wallet**).
  </Step>

  <Step title="Download the encrypted key">
    Before confirming your new wallet, click **Download encrypted key** and store it safely offline.
  </Step>

  <Step title="Confirm">
    Review the information and click **Create new wallet** to confirm. The new wallet will appear in the vault.
  </Step>
</Steps>

<ImageCarousel
  images={[
{ src: "/images/screenshots/porto-web-create-wallet-1.png", alt: "Create wallet button and wallet creation interface" },
{ src: "/images/screenshots/porto-web-create-wallet-2.png", alt: "Network selection step in wallet creation" },
{ src: "/images/screenshots/porto-web-create-wallet-3.png", alt: "Wallet naming and creation confirmation" },
{ src: "/images/screenshots/porto-web-create-wallet-4.png", alt: "New wallet created and displayed in wallet list" }
]}
/>

### Create a new address for a given wallet

Click the generate icon to create a new wallet address.

<Frame caption="Wallet details and address management">
  <img src="https://mintcdn.com/deployment-4/lSVGGJ7Z6F9zIy7U/knowledge-base/images/screenshots/porto-web-wallet-details.png?fit=max&auto=format&n=lSVGGJ7Z6F9zIy7U&q=85&s=89bf5cbad5b4a8c745aae5c1e0533cac" alt="Wallet details page showing wallet addresses and generate address option" style={{ maxWidth: "100%", height: "auto" }} width="2060" height="1290" data-path="knowledge-base/images/screenshots/porto-web-wallet-details.png" />
</Frame>

<Note>
  Additional or pooled wallet addresses are only available on UTXO-based networks. You must click **Download encrypted key** and store it safely offline for each new address created.
</Note>

### Withdraw assets

<Steps>
  <Step title="Navigate to the vault and click Withdraw">
    From the vault details page, click **Withdraw**.
  </Step>

  <Step title="Enter withdrawal details">
    Select the asset, the wallet to withdraw from, the amount, and the destination type. If you select a trusted destination, choose the appropriate address. Click **Continue**.
  </Step>

  <Step title="Preview and submit">
    Add a comment (optional) and click **Preview withdrawal**. Review the operation details and click **Preview withdrawal** to submit biometric approval.
  </Step>

  <Step title="Complete endorsement on iOS">
    Complete the endorsement process from your Porto iOS app. Once quorum is met, the withdrawal operation is complete.
  </Step>
</Steps>

<ImageCarousel
  images={[
{ src: "/images/screenshots/porto-web-withdraw-1.png", alt: "Withdrawal initiation showing vault and withdraw button" },
{ src: "/images/screenshots/porto-web-withdraw-2.png", alt: "Asset and wallet selection step in withdrawal process" },
{ src: "/images/screenshots/porto-web-withdraw-3.png", alt: "Withdrawal details including amount and destination" },
{ src: "/images/screenshots/porto-web-withdraw-4.png", alt: "Questionnaire form with address description and beneficiary" },
{ src: "/images/screenshots/porto-web-withdraw-5.png", alt: "Comment section and preview withdrawal option" },
{ src: "/images/screenshots/porto-web-withdraw-6.png", alt: "Final confirmation screen before submitting withdrawal for approval" }
]}
/>

## Key download preferences

To update your download preferences for encrypted wallet keys:

<Steps>
  <Step title="Navigate to Settings">
    In the web dashboard, navigate to **Settings** and click **Encrypted wallet keys**.
  </Step>

  <Step title="Open Download preferences">
    Click on the **Download preferences** tab.
  </Step>

  <Step title="Select your preference">
    Select your preferred method for downloading your organization's encrypted wallet keys.
  </Step>
</Steps>

## Activity

Navigate to the **Activity** tab to view, filter, and download pending and past account activity. Export transaction data for bookkeeping, performance tracking, and analysis.

## Connected apps

In the web dashboard, navigate to **Connected apps** to view or disconnect active connections to dApps.

## Adding trusted smart contracts

You can add multiple trusted smart contracts at once by uploading a file containing all required information.

### Upload trusted smart contracts via CSV

<Steps>
  <Step title="Download the template">
    Download the Excel spreadsheet template.
  </Step>

  <Step title="Fill out the template">
    Open the template in your preferred spreadsheet editor (Excel or Google Sheets) and fill it out. When finished, download or export the file as a CSV.

    If using Google Sheets, go to **File > Download > Comma Separated Values (.csv)**.
  </Step>

  <Step title="Upload to the web dashboard">
    In the web dashboard, go to **Connected apps > Trusted smart contracts**. Click **Add** and select **Upload multiple from file**, then upload your completed CSV file.
  </Step>

  <Step title="Review and submit">
    Porto will parse the file and allow you to review the submitted information. Correct any errors if prompted. Click **Submit** to begin adding the trusted smart contracts. You will be prompted to approve the addition on your iOS device—quorum approval is required.
  </Step>

  <Step title="Confirmation">
    After the operation is approved and reviewed, your new trusted smart contracts will be added to your account and you will receive a notification confirming completion.
  </Step>
</Steps>

### Trusted smart contracts template fields

| Field         | Required | Description                                                                                                                                                                                          |
| ------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `name`        | Yes      | The name of the trusted smart contract as it appears in the web dashboard or iOS app. Must be between 3 and 32 characters.                                                                           |
| `networkName` | Yes      | The blockchain network name. Currently only Ethereum is supported.                                                                                                                                   |
| `address`     | Yes      | The smart contract address (e.g., `0x...`) for the provided blockchain network.                                                                                                                      |
| `vaultID(s)`  | Yes      | The unique ID(s) of the vault(s) to associate with this smart contract. Vault IDs are found under the vault name. To add multiple vaults, separate each ID with a comma (e.g., `1234abcd,5678efgh`). |
| `description` | No       | A short description of the trusted smart contract. Maximum 200 characters.                                                                                                                           |

## Adding trusted destinations

You can add multiple trusted destinations at once by uploading a file containing all required information.

<Info>
  Contact [portohelp@anchorage.com](mailto:portohelp@anchorage.com) if you have questions about adding trusted destinations.
</Info>

### Upload trusted destinations via CSV

<Steps>
  <Step title="Download the template">
    Download the provided Excel spreadsheet template.
  </Step>

  <Step title="Fill out the template">
    Open the template in your preferred spreadsheet editor (Excel or Google Sheets) and fill it out. When finished, download or export the file as a CSV.

    If using Google Sheets, go to **File > Download > Comma Separated Values (.csv)**.
  </Step>

  <Step title="Upload to the web dashboard">
    In the web dashboard, go to **Settings > Trusted destinations**. Select **Add**, then **Upload multiple from file**, and upload your completed CSV file.
  </Step>

  <Step title="Review and submit">
    Review the list of trusted destinations, make any necessary adjustments, and submit for approval when ready.
  </Step>

  <Step title="Complete endorsement on iOS">
    Complete the endorsement process from your Porto app. Once quorum is met, the Porto team will review the operation for approval.
  </Step>
</Steps>

<ImageCarousel
  images={[
{ src: "/images/screenshots/porto-web-trusted-destinations-1.png", alt: "Trusted destinations list and bulk upload option" },
{ src: "/images/screenshots/porto-web-trusted-destinations-2.png", alt: "CSV file review and submission interface" }
]}
/>

### Trusted destinations template fields

The fields in the template correspond to the fields you complete when adding a trusted destination in the web dashboard or iOS app.

| Field  | Required | Description                                                                                                                            |
| ------ | -------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| `name` | Yes      | The name of the trusted destination as it appears in the web dashboard or iOS app when choosing destination addresses for withdrawals. |

### Remove trusted destinations

<Warning>
  Only administrators with trusted destination management permissions can remove trusted destinations. Removal requires quorum and Porto approval.
</Warning>

<Steps>
  <Step title="Navigate to Trusted destinations">
    In the web dashboard, navigate to **Settings > Trusted destinations**.
  </Step>

  <Step title="Select Remove">
    Click the three dots next to the trusted destination you want to remove, then click **Remove**.
  </Step>

  <Step title="Complete biometric approval">
    Biometric approval in the iOS app is required. Once quorum is met, the Porto team will review the operation.
  </Step>
</Steps>

<ImageCarousel
  images={[
{ src: "/images/screenshots/porto-web-remove-trusted-1.png", alt: "Trusted destinations list with remove option menu" },
{ src: "/images/screenshots/porto-web-remove-trusted-2.png", alt: "Removal confirmation dialog" }
]}
/>
